/* Shared layout reset + responsive grid utilities for the three mockups.
   Utility classes carry ONLY media-query overrides so they win over the
   desktop grid set via inline style at small viewports. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--esw-paper, #f4f5f6);
  color: var(--text-body, #2b333c);
  font-family: var(--font-body), system-ui, sans-serif;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; }

.esw-wrap { max-width: var(--container-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Footer */
@media (max-width: 940px) { .esw-footer-grid { grid-template-columns: 1fr 1fr !important; row-gap: 36px !important; } }
@media (max-width: 560px) { .esw-footer-grid { grid-template-columns: 1fr !important; } }

/* 4-up grids (sectors) */
@media (max-width: 1040px) { .rsp-4 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 540px)  { .rsp-4 { grid-template-columns: 1fr !important; } }

/* 3-up grids (projects, careers, news, differentiators) */
@media (max-width: 1000px) { .rsp-3 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 680px)  { .rsp-3 { grid-template-columns: 1fr !important; } }

/* 2-up */
@media (max-width: 760px) { .rsp-2 { grid-template-columns: 1fr !important; } }

/* split content bands (image + text) */
@media (max-width: 900px) { .rsp-split { grid-template-columns: 1fr !important; } }

/* stat band of 5 */
@media (max-width: 1040px) { .rsp-stats { grid-template-columns: repeat(3, 1fr) !important; row-gap: 28px !important; } }
@media (max-width: 560px)  { .rsp-stats { grid-template-columns: repeat(2, 1fr) !important; } }

/* generic: stack a flex row on mobile */
@media (max-width: 760px) { .rsp-stack { flex-direction: column !important; align-items: flex-start !important; } }
@media (max-width: 760px) { .rsp-stack-c { flex-direction: column !important; align-items: stretch !important; } }

/* hide on small */
@media (max-width: 900px) { .rsp-hide-sm { display: none !important; } }

/* reduce big section padding on mobile */
@media (max-width: 680px) {
  .rsp-pad { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* scroll-reveal — content is visible by default; the hidden pre-state only
   applies once JS is ready AND motion is allowed, so captures/print/no-JS
   always show content. A JS fallback also force-reveals everything shortly
   after load so nothing can stay stuck hidden. */
.reveal { transition: opacity .6s var(--ease-out, ease), transform .6s var(--ease-out, ease); }
@media (prefers-reduced-motion: no-preference) {
  html.has-js .reveal:not(.in) { opacity: 0; transform: translateY(22px); }
}