/* =============================================================================
   ehs-site/assets/site.css — the authored CSS lane for ehsteel.com.

   OWNERSHIP (GENERATION_BRIEF §4.1: owner-per-file on shared assets). This file
   is created by the Stage D tooling PR carrying ONE block — §RM below — because
   that block is a release blocker with no other home. Everything else (the vendor
   register countering Bricks' `html{font-size:62.5%}`, the focus ring, the scrim,
   the hero panel, the drawer, the gallery, the dialog, the reveals) is the
   composition lane's to add ABOVE §RM, one owner at a time.

   ⛔ §RM STAYS LAST IN THE FILE. It must win the cascade against every motion
   rule written above it; a composer who appends below it can silently defeat it.
   ============================================================================= */


/* =============================================================================
   LANE A — the composition layer (tools/generation/compose-*.php write the markup;
   every rule below keys an ehs-* class the composers write, never a Bricks id —
   ids repeat across the shared chrome, BRICKS_ADAPTATION §2).

   WHY AUTHORED CSS AND NOT BRICKS GLOBAL CLASSES (gen-decisions-compose-a.md): the
   composers bind `_cssClasses` (a raw class string); Bricks emits global-class CSS
   only for `_cssGlobalClasses`, so seeding bricks_global_classes would paint
   nothing. This file is a mu-plugin asset in the repo — it does not depend on the
   design-sync round trip at all (the GMG ruling, re-measured on this build).

   Regimes: ≥1025 PARITY with tokens-measured.json · ≤1024 AUTHORED (the specs +
   MF-1…MF-8) · the Projects system AUTHORED. Boundaries 767|768 and 1024|1025.
   Every px value is a token or a capture measurement at 1440 (named beside it).
   ============================================================================= */


/* =============================================================================
   §0. THE SIX SELF-HOSTED FACES (F-1; tokens.json font.$shipped). Fontsource 5.3.0
   latin files, NOTICE.txt beside them. font-display: swap. ⛔ Zero Google Fonts
   requests anywhere (S-5, B-19); the URLs are relative to this stylesheet, so they
   resolve on the site's own host whatever it is (no pinned host, S-8).
   ============================================================================= */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/oswald-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/oswald-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/raleway-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/raleway-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/raleway-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/raleway-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* =============================================================================
   §1. THE VENDOR COUNTER REGISTER (COMPOSITION_NOTES §6a) — ONE block, each
   vendor rule quoted beside its counter. A new frontend-layer discovery is added
   HERE, never patched on the page that noticed it.
   ============================================================================= */
/* frontend-layer.min.css: `html{font-size:62.5%}` — every token is px against a
   16 px (Elementor) rem (107.2 px = 6.7 rem). Countered ONCE, here; no value is
   re-scaled (BRICKS_ADAPTATION §1, brief §4.3). */
html { font-size: 100%; }
/* frontend-layer.min.css: `body{…background-color:#fff;color:#363636;font-family:
   -apple-system,…;font-size:15px;line-height:1.7}` — the site ground, ink and body
   register instead (tokens.json color.ground / type.body). */
body { background-color: var(--ehs-ground); color: var(--ehs-grey); font-family: "Raleway", Arial, sans-serif;
  font-size: 16px; line-height: 25.6px; font-weight: 400; }
/* frontend-layer.min.css: `.brxe-container{align-items:flex-start;display:flex;
   flex-direction:column;…;width:1100px}` — countered per container in §2 (the
   three-property rule, COMPOSITION_NOTES §6a-bis). */
/* frontend-layer.min.css: `[class*=brxe-]{max-width:100%}` — harmless for this site's
   geometry (every authored box ≤ its column); recorded, not countered. */
/* frontend-layer.min.css: `a{font-weight:700}` — every link sets its own weight. */
a { font-weight: inherit; color: inherit; text-decoration: none; }
/* frontend-layer.min.css: `h1,h2,…{margin:0}` + `h1{font-size:2.4em}` `h1,h2{line-height:1.4}` — every heading takes a type role class. */
h1, h2, h3, h4, h5, h6, p, blockquote, figure, ul, dl, dd { margin: 0; }
img { max-width: 100%; height: auto; }
/* ⛔ overflow-x: clip, never hidden (brief §5): `hidden` makes a scroll container and
   breaks position:sticky and the reveal observer's root; `clip` just clips. */
html, body { overflow-x: clip; }


/* =============================================================================
   §2. TOKENS — tokens.json, restated for the stylesheet. ⛔ Asserted equal to the
   Bricks variables by tools/generation/compose-tokens.php on every compose; the
   marker comment below is how it finds this block — do not rename it.
   ============================================================================= */
/* ROOT-TOKENS */
:root {
  --ehs-ground: #121212;
  --ehs-band: #222222;
  --ehs-red: #EB4036;
  --ehs-white: #FFFFFF;
  --ehs-grey: #A5A5A5;
  --ehs-strip-ink: #9B9B9B;
  --ehs-red-fill: #D83B32;
  --ehs-red-on-band: #ED554C;
  --ehs-scrim: rgba(18, 18, 18, 0.60);
  --ehs-scrim-modal: rgba(0, 0, 0, 0.80);
  --ehs-radius-xs: 2px;
  --ehs-radius-sm: 5px;
  --ehs-radius-round: 50%;
  --ehs-shadow-card: rgb(128, 128, 128) 0px 0px 5px 0px;
  --ehs-gap: 20px;
  --ehs-gap-15: 15px;
  --ehs-gap-10: 10px;
  --ehs-gap-5: 5px;
  --ehs-dur-fast: 150ms;
  --ehs-dur-base: 300ms;
  --ehs-dur-reveal: 900ms;
  --ehs-dur-gallery: 180ms;
  --ehs-dur-modal: 200ms;
  --ehs-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ehs-ease-out: cubic-bezier(0, 0, 0.2, 1);
}
:root {
  --ehs-font-display: "Oswald", "Arial Narrow", Arial, sans-serif;  /* tokens.json font.display.stack */
  --ehs-font-body: "Raleway", Arial, sans-serif;                      /* tokens.json font.body.stack */
  /* layout.sectionPadding.authored (AUTHORED sections only: Featured band, project detail) */
  --ehs-pad-authored: 96px;
}
@media (max-width: 1024px) { :root { --ehs-pad-authored: 72px; } }
@media (max-width: 767px)  { :root { --ehs-pad-authored: 56px; } }


/* =============================================================================
   §3. THE CONTAINER LADDER (layout.containerLadder; B-4) — 90 % ≤1024 · 100 % at
   1025–1279 (full-bleed; the $edgeSafe 20 px inset on the text-bearing children, EHS-D-8) ·
   1280 capped from 1280 up.
   ⛔ Three properties together on a .brxe-container (COMPOSITION_NOTES §6a-bis):
   Bricks sets a fixed `width`, so a max-width alone no-ops. The selector is the bare
   class (0,1,0 — equal to Bricks' `.brxe-container`, later in the cascade) so that
   every component rule below that re-lays a container as a row wins on source order
   (measured: a compound `.brxe-container.ehs-container` outranked the header row
   and dropped the CTA to a second line).
   ============================================================================= */
.ehs-container {
  flex-direction: column; align-items: stretch; width: 90%; max-width: none;
  margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;
}
@media (min-width: 1025px) {
  .ehs-container { width: 100%; padding-left: 0; padding-right: 0; }
}
/* 1025…1279 — tokens layout.containerLadder: the container is FULL-BLEED (100 %, side padding 0,
   PARITY — the LIVE containerBox is 1025 at 1025, official B-4) and the `$edgeSafe` 20 px inset goes
   on the TEXT-BEARING CHILDREN (EHS-D-8; live paints the hero h1 at x = −6). TL ruling 2026-09-24
   (official B-4 FAIL 985 vs 1025): the inset had been on the container. :where() keeps this at the
   container's own specificity, so a component that sets its own inline padding (a panel, a card)
   keeps it; image slots are not text-bearing and stay flush. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .ehs-container > :where(:not(.ehs-split__media, .ehs-faq__media, .ehs-hero__media, .ehs-current__img, .ehs-video__poster)) {
    padding-left: 20px; padding-right: 20px;
  }
}
@media (min-width: 1280px) {
  .ehs-container { width: 1280px; padding-left: 0; padding-right: 0; }
}
/* Every band is a full-width section; the container inside carries the ladder. */
.ehs-band { width: 100%; position: relative; }
#brx-content { overflow-x: clip; }


/* Declared = painted (never-a-builder audit L-1, 2026-09-25): the six shipped faces are Oswald 500 / 600 and
   Raleway 400 / 500 / 600 / 400 italic (F-1). The UA's bold (700) for <b>, <strong> and <th> has no face, so
   the browser painted the 600 face under a 700 declaration; declare the face that paints. B-19 asserts every
   visible text element's declared family / weight / style is a shipped face. */
b, strong, th { font-weight: 600; }

/* =============================================================================
   §4. TYPE ROLES — tokens.json type.* (≥1025 `bands['>=1025']`, 768–1024 the
   measured tablet band unless `authored`, ≤767 `authored` where given). Families
   are F-1's. Every role is pinned by class (B-6).
   ============================================================================= */
.ehs-display, .ehs-page-title, .ehs-section-title, .ehs-person-name, .ehs-partners-title,
.ehs-panel-title, .ehs-card-title, .ehs-step-title, .ehs-role-label, .ehs-eyebrow,
.ehs-counter, .ehs-strip-label, .ehs-strip-value, .ehs-btn, .ehs-nav__link {
  font-family: var(--ehs-font-display); text-transform: uppercase; letter-spacing: normal; margin: 0;
}
.ehs-display, .ehs-page-title { font-size: 107.2px; line-height: 107.2px; font-weight: 600; color: var(--ehs-white); }
.ehs-section-title, .ehs-person-name { font-size: 56px; line-height: 67.2px; font-weight: 600; color: var(--ehs-white); }
.ehs-partners-title { font-size: 38.4px; line-height: 46.08px; font-weight: 600; color: var(--ehs-white); }
.ehs-panel-title { font-size: 32px; line-height: 41.6px; font-weight: 600; color: var(--ehs-white); }
.ehs-card-title { font-size: 24px; line-height: 31.2px; font-weight: 600; color: var(--ehs-white); }
.ehs-step-title { font-size: 19.2px; line-height: 24.96px; font-weight: 500; color: var(--ehs-white); }
.ehs-role-label { font-size: 16px; line-height: 16px; font-weight: 500; color: var(--ehs-white); }
.ehs-eyebrow { font-size: 16px; line-height: 14.4px; font-weight: 600; letter-spacing: 3.8px; color: var(--ehs-red); }
.ehs-lead { font-family: var(--ehs-font-body); font-size: 19.2px; line-height: 30.72px; font-weight: 400; color: var(--ehs-grey); }
.ehs-body, .ehs-body p { font-family: var(--ehs-font-body); font-size: 16px; line-height: 25.6px; font-weight: 400; color: var(--ehs-grey); }
.ehs-counter { font-size: 72px; line-height: 72px; font-weight: 600; text-transform: none; color: var(--ehs-white); }
.ehs-strip-label { font-size: 17px; line-height: 20.4px; font-weight: 600; color: var(--ehs-strip-ink); }
.ehs-strip-value { font-size: 18px; line-height: 21.6px; font-weight: 600; color: var(--ehs-white); }
.ehs-justify, .ehs-justify p { text-align: justify; }
.ehs-body p + p { margin-top: 16px; }
@media (max-width: 1024px) {
  .ehs-display, .ehs-page-title { font-size: 91.2px; line-height: 91.2px; }
  .ehs-section-title, .ehs-person-name { font-size: 44.8px; line-height: 53.76px; }
  .ehs-partners-title, .ehs-panel-title { font-size: 25.6px; line-height: 30.72px; }
  .ehs-card-title { font-size: 20.8px; line-height: 27.04px; }
  .ehs-step-title { font-size: 17.6px; line-height: 22.88px; }
  .ehs-eyebrow { font-size: 14.4px; line-height: 12.96px; }
  .ehs-lead { font-size: 17.6px; line-height: 28.16px; }          /* type.lead.authored */
  .ehs-justify, .ehs-justify p { text-align: left; }              /* justified runs of 16 px on a phone column river */
}
@media (max-width: 767px) {
  .ehs-display { font-size: clamp(2.75rem, 13.6vw, 3.2rem); line-height: 1; }     /* type.display.authored */
  .ehs-page-title { font-size: clamp(2.5rem, 13.6vw, 3.2rem); line-height: 1; }   /* type.pageTitle.authored */
  .ehs-section-title, .ehs-person-name { font-size: 35.2px; line-height: 42.24px; }
  .ehs-partners-title, .ehs-panel-title { font-size: 22.4px; line-height: 26.88px; }
  .ehs-card-title { font-size: 19.2px; line-height: 24.96px; }
  .ehs-step-title { font-size: 16px; line-height: 19.2px; }
  .ehs-role-label { font-size: 14.4px; line-height: 14.4px; }
  .ehs-counter { font-size: 56px; line-height: 56px; }
}


/* =============================================================================
   §5. FOCUS, LINKS, BUTTONS — E-05 (a11y.focusRing), E-01, E-02, I-14.
   ============================================================================= */
/* The double ring: white outline + red box-shadow, so one clears 3:1 against every
   adjacent colour (EHS-D-13). `:focus-visible` only — a mouse click paints nothing. */
:focus-visible { outline: 2px solid var(--ehs-white); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ehs-red); }
:focus:not(:focus-visible) { outline: none; }
/* Bricks' own skip links (E-16): visible on focus, top-left, white on the ground. */
/* Visually hidden until focused — clipped in place, never parked off-canvas (an element
   at left:-9999px is ink overflow, B-15's ink tier). */
.skip-link:not(:focus) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: absolute; left: 16px; top: 8px; z-index: 1000; display: inline-flex; align-items: center; min-height: 44px; background: var(--ehs-ground); color: var(--ehs-white); padding: 0 16px; font-family: var(--ehs-font-display); text-transform: uppercase; }

/* E-01 primary button: redFill (white 4.57:1), 16/500/1.6 px uppercase, square,
   48 tall (header CTA 171×48 measured). Hover (I-03): fill → transparent + skewX(-10deg)
   on the TRANSFORM shorthand — reveals animate `translate`, so the two compose
   (COMPOSITION_NOTES §12). ⛔ Focus is not hover (I-12): focus paints the ring only.
   A transparent 1 px border is reserved at rest so hover never reflows (I-10). */
.ehs-btn, .brxe-text-link.ehs-btn, .wpcf7 .ehs-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 30px;
  background-color: var(--ehs-red-fill); color: var(--ehs-white); border: 1px solid transparent; border-radius: 0;
  font-family: var(--ehs-font-display); font-size: 16px; line-height: 16px; font-weight: 500; letter-spacing: 1.6px;
  text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background-color var(--ehs-dur-base) var(--ehs-ease-standard), transform var(--ehs-dur-base) var(--ehs-ease-standard), border-color var(--ehs-dur-base);
}
@media (hover: hover) and (pointer: fine) {
  .ehs-btn:hover { background-color: transparent; border-color: var(--ehs-red); transform: skewX(-10deg); }
}
@media (max-width: 1024px) {
  .ehs-btn, .brxe-text-link.ehs-btn { font-size: 14.4px; line-height: 14.4px; min-height: 44px; }
}
/* ≥1025: live's button is padded — the 2026-09-25 supplement measured "MORE ABOUT US" at 1025 as a 153.16 × 32 label
   (2 Arial lines) in a 205 × 64 button: 16 over and under the text. The 48 px one-line button is 1 + 15 + 16 + 15 + 1;
   the min-height stays (F-11) and now equals the padded box instead of centring an unpadded line. */
@media (min-width: 1025px) { .ehs-btn, .brxe-text-link.ehs-btn, .wpcf7 .ehs-btn { padding-top: 15px; padding-bottom: 15px; } }

/* E-02 text CTA: white label + circled arrow, skew on hover (I-05), ≥44 px hit area. */
.ehs-textcta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ehs-white);
  font-family: var(--ehs-font-display); font-size: 16px; line-height: 16px; font-weight: 500; letter-spacing: 1.6px;
  text-transform: uppercase; transition: transform var(--ehs-dur-base) var(--ehs-ease-standard); }
.ehs-textcta__arrow { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--ehs-white); color: var(--ehs-red-fill); align-items: center; justify-content: center; }
.ehs-textcta__arrow svg { width: 12px; height: 12px; stroke-width: 3; }
@media (hover: hover) and (pointer: fine) { .ehs-textcta:hover { transform: skewX(-10deg); } }

/* I-14 text links ("Learn more", "View all projects", the AISC verify link). */
.ehs-textlink { display: inline-flex; align-items: center; min-height: 44px; color: var(--ehs-white);
  font-family: var(--ehs-font-display); font-size: 16px; line-height: 16px; font-weight: 500; letter-spacing: 1.6px;
  text-transform: uppercase; transition: color var(--ehs-dur-fast); text-underline-offset: 3px; }
.ehs-textlink:hover { color: var(--ehs-red); text-decoration: underline; }
.ehs-band--partners .ehs-textlink:hover, .ehs-band--team .ehs-textlink:hover, .ehs-band--cta .ehs-textlink:hover { color: var(--ehs-red-on-band); }

/* Icons (O-7 (b)): stroke glyphs take currentColor; the brand red by default. */
.ehs-icon { display: block; width: 100%; height: 100%; }


/* =============================================================================
   §6. GLOBAL CHROME — header (E-10), drawer (E-11), current marker (E-12),
   strip (E-13), footer (E-14), bottom bar. LAYOUT_TRUTH §3.
   ============================================================================= */
#brx-header { position: relative; z-index: 50; }            /* ⛔ NOT sticky at any width (I-30) */
.ehs-header { position: relative; background: transparent; }
.ehs-header__shell { flex-direction: row; align-items: center; height: 86px; gap: 0; }
.ehs-header__logo { display: block; flex: none; height: 86px; }
.ehs-header__logo img, img.ehs-header__logo { height: 86px; width: auto; display: block;
  transition: transform var(--ehs-dur-base) var(--ehs-ease-standard); }                      /* 151×86 @1440 */
@media (hover: hover) and (pointer: fine) { .ehs-header__logo:hover img, a:hover > img.ehs-header__logo { transform: scale(1.1); } } /* I-04 */
.ehs-nav { display: flex; align-items: stretch; gap: 8px; margin-left: auto; height: 86px; }
.ehs-nav__link { display: inline-flex; align-items: center; padding: 0 20px; height: 86px;
  font-size: 16px; line-height: 16px; font-weight: 600; color: var(--ehs-white);
  transition: color var(--ehs-dur-base) var(--ehs-ease-standard); }                           /* HOME 88×86 = 48 + 2×20 */
.ehs-nav__link:hover { color: var(--ehs-grey); }                                               /* I-01: hover DIMS */
.ehs-nav__link[aria-current] { color: var(--ehs-red); }                                        /* I-02, CAT-014: keyed off the attribute */
.ehs-header__cta { margin-left: 85px; flex: none; }                                            /* nav right 1104 → CTA 1189 @1440 */
.ehs-menu-toggle { display: none; }
.ehs-drawer { display: none; }

@media (max-width: 1024px) {
  .ehs-header__shell { height: 80px; }                                                         /* MF-8 ≤80 */
  .ehs-header__logo, .ehs-header__logo img, img.ehs-header__logo { height: 56px; }
  .ehs-nav { display: none; }
  .ehs-header__cta { margin-left: auto; padding: 0 14px; }                                     /* MF-6: in the bar at every width */
  .ehs-menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; margin-left: 12px; padding: 0; background: transparent; color: var(--ehs-white);
    border: 1px solid #333; cursor: pointer; }
  .ehs-menu-toggle svg { width: 24px; height: 24px; }
  .ehs-menu-toggle .ehs-menu-toggle__close { display: none; }
  .ehs-menu-toggle[aria-expanded="true"] .ehs-menu-toggle__open { display: none; }
  .ehs-menu-toggle[aria-expanded="true"] .ehs-menu-toggle__close { display: inline-flex; }
  .ehs-menu-toggle span { display: inline-flex; }
  /* The drawer: top-anchored, full width, directly under the header; height = content. */
  .ehs-drawer { position: absolute; left: 0; right: 0; top: 100%; background: var(--ehs-ground);
    border-top: 1px solid var(--ehs-band); padding: 0 5% 24px; flex-direction: column; }
  .ehs-drawer:not([hidden]) { display: flex; }
  .ehs-drawer__nav { display: flex; flex-direction: column; }
  .ehs-drawer__link { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--ehs-band);
    font-family: var(--ehs-font-display); font-size: 18px; line-height: 18px; font-weight: 600; text-transform: uppercase; color: var(--ehs-white); }
  .ehs-drawer__link[aria-current] { color: var(--ehs-red); }
  .ehs-drawer__cta { width: 100%; margin-top: 20px; min-height: 48px; }
  .ehs-drawer__contact { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--ehs-band); color: var(--ehs-white);
    font-family: var(--ehs-font-display); text-transform: uppercase; font-weight: 600; font-size: 16px; }
  .ehs-drawer__label { color: var(--ehs-strip-ink); font-size: 14px; letter-spacing: 1.2px; }
}
@media (max-width: 767px) {
  .ehs-header__shell { height: 72px; }                                                         /* MF-8 ≤72 */
  .ehs-header__logo, .ehs-header__logo img, img.ehs-header__logo { height: 44px; }
  .ehs-header__cta { padding: 0 12px; font-size: 14.4px; }
}
/* The page behind an open drawer: scroll locked by site.js (position:fixed on body
   with the offset restored on close) — the OUTCOME is asserted (B-18), not a style. */
body.ehs-scroll-locked { position: fixed; left: 0; right: 0; overflow: hidden; }

/* --- E-13 contact strip — 118 at ≥1025 on every route; #222222 everywhere (EHS-D-4).
   A 1 px #121212 hairline across the container at the top (groundRule, measured). */
.ehs-strip { background: var(--ehs-band); }
.ehs-strip__row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center;  /* two columns since EHS-D-32 (EMAIL US removed) */
  min-height: 118px; border-top: 1px solid var(--ehs-ground); text-align: center; column-gap: 20px; }
.ehs-strip__col { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; }
.ehs-strip-value { display: inline-flex; align-items: center; min-height: 44px; transition: color var(--ehs-dur-fast); }  /* F-11: ≥44 */
.ehs-strip-value:hover { color: var(--ehs-red-on-band); }
@media (max-width: 767px) {
  .ehs-strip__row { grid-template-columns: 1fr; text-align: left; row-gap: 12px; padding: 20px 0; }
  .ehs-strip__col { align-items: flex-start; gap: 2px; padding: 0; }
}

/* --- E-14 footer — 458 at ≥1280 (57 top to the logo; brand column inset to x=180). */
.ehs-footer { background: transparent; }
/* Per rung (TL ruling 2026-09-24, geometry diff G2): LIVE 475 at 1025 (the hours list wraps in its narrower
   column), 458 at ≥1280 — the min-height is the LIVE height of the rung, as F-8a does for the CTA bands. */
@media (min-width: 1025px) { .ehs-footer { min-height: 458px; } }
@media (min-width: 1025px) and (max-width: 1279px) { .ehs-footer { min-height: 475px; } }
.ehs-footer__cols { flex-direction: row !important; align-items: flex-start; justify-content: space-between; padding-top: 57px !important; }
.ehs-footer__brand { display: flex; flex-direction: column; align-items: flex-start; width: 670px; margin-left: 100px; }
.ehs-footer__logo img, img.ehs-footer__logo { width: 202px; height: auto; display: block;
  transition: transform var(--ehs-dur-base) var(--ehs-ease-standard); }                                          /* 202×115 */
/* I-100 (TL 2026-09-25, O-2 (a)): live's footer logo carries elementor-animation-grow — I-04's register. */
@media (hover: hover) and (pointer: fine) { a.ehs-footer__logo:hover img { transform: scale(1.1); } }
.ehs-footer__para { margin-top: 24px; font-size: 16px; line-height: 25.6px; color: var(--ehs-grey); }
.ehs-social { display: flex; gap: 10px; }
.ehs-social--footer { margin-top: 40px; }
.ehs-social__link { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  transition: background-color var(--ehs-dur-base), color var(--ehs-dur-base), transform var(--ehs-dur-base), opacity var(--ehs-dur-base); }
.ehs-social__link svg { width: 16px; height: 16px; }
.ehs-social--footer .ehs-social__link { width: 37px; height: 37px; background: var(--ehs-red); color: var(--ehs-white); }
@media (hover: hover) and (pointer: fine) {
  .ehs-social--footer .ehs-social__link:hover { background: transparent; color: var(--ehs-red); transform: scale(0.9); opacity: 0.9; } /* I-09 */
}
.ehs-footer__hours { display: flex; gap: 20px; width: 428px; padding-top: 13px; }
.ehs-hours { flex: 1 1 0; }
.ehs-hours__title { margin-bottom: 33px; }
.ehs-hours__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ehs-hours__list li { position: relative; padding-left: 16px; font-family: var(--ehs-font-body); font-size: 16px; line-height: 16px;
  font-weight: 500; text-transform: uppercase; color: var(--ehs-grey); }
.ehs-hours__list li::before { content: "›"; position: absolute; left: 0; top: 0; color: var(--ehs-red); }
.ehs-footer__menu { flex-direction: row !important; align-items: center; padding-top: 20px !important; padding-bottom: 22px !important; }
.ehs-footer-nav { display: flex; flex-wrap: wrap; gap: 0 24px; margin-left: 100px; }
.ehs-footer-nav__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ehs-white);    /* F-11 */
  font-family: var(--ehs-font-display); font-size: 16px; line-height: 16px; font-weight: 500; letter-spacing: 1.6px;
  text-transform: uppercase; transition: color var(--ehs-dur-fast); }
.ehs-footer-nav__link:hover { color: var(--ehs-red); }
.ehs-footer-nav__link[aria-current] { color: var(--ehs-red); }

/* --- bottom bar — 91; a #222222 hairline across the container (bandRule, measured). */
.ehs-bar__row { flex-direction: row !important; align-items: center; justify-content: space-between; min-height: 91px;
  border-top: 1px solid var(--ehs-band); }
.ehs-bar__credit, .ehs-bar__copy { font-family: var(--ehs-font-body); font-size: 16px; line-height: 20px; color: var(--ehs-grey); }
.ehs-bar__credit { display: inline-flex; align-items: center; min-height: 44px; }
.ehs-bar__credit:hover { color: var(--ehs-red); }

@media (max-width: 1024px) {
  .ehs-social--footer .ehs-social__link { width: 44px; height: 44px; }                        /* MF-2 at ≤1024 */
  .ehs-footer-nav__link { min-width: 44px; justify-content: center; }
  .ehs-footer__cols { flex-direction: row !important; flex-wrap: wrap; gap: 32px; padding-top: 48px !important; }
  .ehs-footer__brand { width: auto; flex: 1 1 320px; margin-left: 0; }
  .ehs-footer__hours { width: auto; flex: 1 1 320px; padding-top: 0; }
  .ehs-footer-nav { margin-left: 0; }
}
@media (max-width: 767px) {
  .ehs-footer__cols { flex-direction: column !important; gap: 28px; padding-top: 40px !important; }
  /* ⛔ In a COLUMN the ≤1024 `flex: 1 1 320px` basis becomes a 320 px HEIGHT (≈200 px of
     dead footer at 375 — review finding 3). Content height here. */
  .ehs-footer__brand, .ehs-footer__hours { flex: none; }
  .ehs-footer__logo img, img.ehs-footer__logo { width: 150px; }
  .ehs-footer__hours { gap: 16px; width: 100%; }
  .ehs-hours__title { margin-bottom: 16px; }
  .ehs-hours__list { gap: 12px; }
  .ehs-hours__list li { font-size: 16px; line-height: 16px; }   /* type.listItem ≤767: tokens AUTHORED 16/16 (official B-6) */
  .ehs-social--footer { margin-top: 20px; }
  .ehs-social--footer .ehs-social__link { width: 44px; height: 44px; }                        /* MF-2 */
  .ehs-footer-nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ehs-bar__row { flex-direction: column !important; justify-content: center; min-height: 0; padding: 12px 0; gap: 0; text-align: center; }
}


/* =============================================================================
   §7. SHARED COMPONENTS — section header (E-03), CTA band (E-26), partners (E-24),
   title band (E-30), counter card (E-22), service cards (E-25), corner (E-06).
   ============================================================================= */
.ehs-shead { display: flex; flex-direction: column; gap: 17px; }
.ehs-shead--center { align-items: center; text-align: center; }
/* Eyebrow ink keyed to the band: #EB4036 on #121212 (4.75:1), #ED554C on #222222 (4.55:1) — O-1 (a). */
.ehs-band--partners .ehs-eyebrow, .ehs-band--team .ehs-eyebrow, .ehs-band--docs .ehs-eyebrow,
.ehs-band--cta .ehs-eyebrow, .ehs-faq__card .ehs-eyebrow, .ehs-card--featured .ehs-card__sector { color: var(--ehs-red-on-band); }
.ehs-shead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }

/* E-26 CTA band — #222222; min-height 460 with content vertically centred (TL ruling
   2026-09-24, instruments F-8a: dropping the kicker must not change the band). */
.ehs-band--cta { background: var(--ehs-band); display: flex; flex-direction: column; justify-content: center; min-height: 460px; }
.ehs-cta { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 40px; }
.ehs-cta__title { max-width: 615px; }                                                          /* h2 615 wide @1440 */
@media (max-width: 1024px) { .ehs-band--cta { min-height: 0; padding: 72px 0; } }
/* TL ruling 2026-09-24 (F-8 (a), per width — geometry diff G3): the CTA band's min-height EQUALS the LIVE band
   height AT EACH compared width. LIVE: 460 at 1280 / 1440 / 1920 / 2560 on all three routes; at 1025 the kit
   copy wraps and LIVE is 527 on / and 594 on /services/ and /projects/ — the 1025…1279 rung takes the 1025
   value (WordPress's own `home` body class marks the front page). */
@media (min-width: 1025px) and (max-width: 1279px) {
  .ehs-band--cta { min-height: 594px; }
  body.home .ehs-band--cta { min-height: 527px; }
}
@media (max-width: 767px) {
  .ehs-band--cta { padding: 56px 0; }
  .ehs-cta { flex-direction: column !important; align-items: stretch; gap: 24px; }
  .ehs-cta__btn { width: 100%; }
}

/* E-24 Trusted Partners — #222222, 524 at ≥1025; heading 38.4 centred; four ~200 px logos. */
.ehs-band--partners { background: var(--ehs-band); padding: 121px 0 114px; }
.ehs-partners { align-items: center !important; gap: 46px; }
.ehs-partners-title { text-align: center; }
.ehs-partners__row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.ehs-partners__logo { display: block; flex: none; }
.ehs-partners__logo img, img.ehs-partners__logo { width: 197px; height: 197px; object-fit: contain; display: block; }
@media (max-width: 1024px) {
  .ehs-band--partners { padding: 72px 0; }
  .ehs-partners__row { justify-content: space-around; gap: 20px; }
  .ehs-partners__logo img, img.ehs-partners__logo { width: 150px; height: 150px; }
}
@media (max-width: 767px) {
  .ehs-band--partners { padding: 48px 0; }
  .ehs-partners { gap: 28px; }
  .ehs-partners__row { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 20px; }
  .ehs-partners__logo img, img.ehs-partners__logo { width: 130px; height: 130px; }
}

/* E-30 title band — 50vh (min-height, NEVER px: B-5 at 2560×1440 is 720); the real
   photograph under rgba(18,18,18,0.60) over the whole band (worst case 4.88:1);
   the pageTitle h1 centred. ≤1024: clamp(260px,40svh,380px) · ≤767 clamp(220px,40svh,340px). */
.ehs-titleband { min-height: 50vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--ehs-ground); }
.ehs-titleband__img, .ehs-titleband > .brxe-image { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none; }
.ehs-titleband__img img, img.ehs-titleband__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ehs-titleband--certs .ehs-titleband__img img, .ehs-titleband--certs img.ehs-titleband__img { object-position: 50% 40%; }  /* EHS-D-5 */
.ehs-titleband__scrim { position: absolute !important; inset: 0; background: var(--ehs-scrim); }
.ehs-titleband__inner { position: relative; z-index: 1; align-items: center !important; }
.ehs-titleband .ehs-page-title { text-align: center; }
@media (max-width: 1024px) { .ehs-titleband { min-height: clamp(260px, 40svh, 380px); } }
@media (max-width: 767px)  { .ehs-titleband { min-height: clamp(220px, 40svh, 340px); } }

/* E-06 the CSS corner triangle (replaces the licence-gated Gp-1/Gp-2 PNGs, EHS-D-5):
   a #EB4036 right triangle behind the photo's corner, 20 px proud of it. */
.ehs-corner { position: relative; }
.ehs-corner::before { content: ""; position: absolute; width: 130px; height: 130px; background: var(--ehs-red); z-index: 0; }
.ehs-corner--tl::before { left: -20px; top: -20px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ehs-corner--tr::before { right: -20px; top: -20px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ehs-corner > * { position: relative; z-index: 1; }
/* ≤1024: the triangles sit INSIDE the photo's corner — proud by 20 px they made the stacked media
   box's content wider than the box (official B-15 ink tier, +20 at 360–390 on /about/). */
@media (max-width: 1024px) { .ehs-corner--tl::before { left: 0; top: 0; } .ehs-corner--tr::before { right: 0; top: 0; } }

/* E-22 red counter card — redFill (the 16 px body at 4.57:1); static number (X5). */
.ehs-counter-card { background: var(--ehs-red-fill); color: var(--ehs-white); padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; }
.ehs-counter-card__label { font-family: var(--ehs-font-display); font-size: 24px; line-height: 31.2px; font-weight: 600; text-transform: uppercase; color: var(--ehs-white); }
.ehs-counter-card__text { font-family: var(--ehs-font-body); font-size: 16px; line-height: 25.6px; color: var(--ehs-white); }
.ehs-counter-card .ehs-textcta { margin-top: auto; }

/* E-25 service cards — 3 + 2, ~410×390, 1 px #222222 outline; card 1 the "active"
   style (filled #222222, red link). ⛔ NO card hover (I-07, B-13). */
/* Row 2 (cards 4–5) centres each card in its HALF of the container, as live (1440 capture:
   190…600 and 840…1250 — `space-around` on the 22 px gap reproduces both rows); cards are
   CONTENT-height, top-aligned (live 390 · 340 · 397 · 397 · 340) — review finding 9(a). */
.ehs-svc-grid { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; gap: 22px 22px; margin-top: 45px; }
.ehs-svc-card { width: calc((100% - 44px) / 3); border: 1px solid var(--ehs-band); display: flex; flex-direction: column;
  align-items: center; text-align: center; padding: 60px 40px 40px; gap: 0; min-height: 390px; }   /* G4 (TL 2026-09-24): the 390 floor, content top-aligned */
.ehs-svc-card--active { background: var(--ehs-band); }
.ehs-svc-card__icon { width: 70px; height: 70px; color: var(--ehs-red); stroke-width: 1.5; }
.ehs-svc-card__icon svg { stroke-width: 1.25; }
.ehs-svc-card__title { margin-top: 26px; }
.ehs-svc-card__body { margin-top: 18px; }
.ehs-svc-card__link { margin-top: 18px; }
/* ≥1025: the "Learn more" keeps its 44 px target (F-11) without taking 44 px of layout — live's link is a 20 px
   text line, so the target overhangs 12 px into the card's 40 px bottom padding (the card is live's height). */
@media (min-width: 1025px) { .ehs-svc-card__link { margin-top: 6px; margin-bottom: -12px; } }
/* ≥1025: the section title's box is live's — 60 % of the container (768 at 1280, 615 at 1025, tokens-measured
   ramp h2); the F-1 probe predicts its Oswald lines AT that width (2 at 1280…2560, 2 at 1025). */
@media (min-width: 1025px) { .ehs-band--services .ehs-shead .ehs-section-title { max-width: 60%; } }
.ehs-svc-card--active .ehs-svc-card__link { color: var(--ehs-red-on-band); }
/* I-101 (TL 2026-09-25, O-2 (a)): live's service-card "Learn more" carries elementor-animation-skew — I-05's register. */
.ehs-svc-card__link { transition: color var(--ehs-dur-fast), transform var(--ehs-dur-base) var(--ehs-ease-standard); }
@media (hover: hover) and (pointer: fine) { .ehs-svc-card__link:hover { transform: skewX(-10deg); } }
@media (max-width: 1024px) {
  .ehs-svc-card { width: calc((100% - 22px) / 2); min-height: 0; padding: 40px 28px; }
  .ehs-svc-card:last-child { width: 100%; }
}
@media (max-width: 767px) {
  .ehs-svc-grid { gap: 16px; margin-top: 32px; }
  .ehs-svc-card, .ehs-svc-card:last-child { width: 100%; padding: 24px; }
  .ehs-svc-card__icon { width: 48px; height: 48px; }
  .ehs-svc-card__title { margin-top: 16px; }
  .ehs-svc-card__body { margin-top: 10px; }
  .ehs-svc-card__link { margin-top: 6px; }
}

/* Split bands (about blocks, process): media + copy. Measured proportions per band
   (GMG round 2: one ratio repeated is wrong everywhere) — see each identity class. */
.ehs-split { flex-direction: row !important; align-items: flex-start; justify-content: space-between; }
.ehs-split__media { flex: none; }
.ehs-split__img img, img.ehs-split__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ehs-split__copy { display: flex; flex-direction: column; }
@media (max-width: 1024px) {
  .ehs-split { flex-direction: column !important; align-items: stretch; gap: 40px; }
  .ehs-split__media { width: 100% !important; }
}

/* Quote panel + signature (E-27, O-8 (a): Raleway italic 400, #A5A5A5). */
.ehs-quote { background: var(--ehs-band); border-left: 4px solid var(--ehs-red); padding: 15px 20px; margin-top: 35px; }
.ehs-quote p { font-family: var(--ehs-font-body); font-style: italic; font-size: 16px; line-height: 25.6px; color: var(--ehs-white); }
/* ≥1025: the quote's MEASURED register (LIVE supplement 2026-09-25, / 773ac30c: Raleway italic 500 19.2 / 30.72,
   the panel 11 px over and 14.4 px under the text) — the 2026-09-23 capture never sampled it; 16 / 25.6 was authored.
   The measured 500 italic is not a shipped face (F-1 ships Raleway italic 400 only, O-8 (a)): it painted 400 italic
   under a 500 declaration. Declared = painted (audit L-1, 2026-09-25): 400. */
@media (min-width: 1025px) {
  .ehs-quote { padding: 11px 20px 14.4px; }
  .ehs-quote p { font-size: 19.2px; line-height: 30.72px; font-weight: 400; }
}
.ehs-sigrow { display: flex; align-items: center; gap: 60px; margin-top: 50px; }
.ehs-signature { font-family: var(--ehs-font-body); font-style: italic; font-weight: 400; font-size: 32px; line-height: 38px; color: var(--ehs-grey); }


/* =============================================================================
   §8. HOME — pages/home.md. Band identities: --hero --features --about
   --partners --services --featured --cta.
   ============================================================================= */
/* Hero — 90vh (B-5: 810 @1440×900, 1296 @2560×1440). The copy block is vertically
   centred; its 98 px bottom register reproduces live's centred block (eyebrow at
   y 72 of 810 and 315 of 1296 — the capture, both widths). The photo is an <img> in
   the right 50 % of the VIEWPORT, feathered in over its first 35 %; no text on it. */
.ehs-band--hero { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.ehs-hero__media, .ehs-band--hero > .ehs-hero__media { position: absolute !important; top: 0; right: 0; bottom: 0; width: 50vw !important; max-width: none; }
.ehs-hero__media img, img.ehs-hero__img { width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.ehs-hero__media .brxe-image { width: 100%; height: 100%; }
.ehs-hero__inner { position: relative; z-index: 1; }
.ehs-hero__copy { width: 646px; max-width: 100%; padding-bottom: 98px; display: flex; flex-direction: column; }  /* h1 box 646 @1440 */
/* 1025…1279: the photo panel starts at 50vw and its fade reaches opaque 35 % in, so a 646 px column
   (the 1280+ figure) ran the lead over the fading photo — rendered contrast 2.5 at 1025 (official B-7:
   no text over the photo, lead ≥ 4.5). The column stops 20 px short of the panel in this band. */
@media (min-width: 1025px) and (max-width: 1279px) { .ehs-hero__copy { width: min(646px, 50vw); } }   /* the panel's first 35 % is its fade: the lead ends in it, not over the opaque photo; the 107 px h1's longest word fits */
.ehs-hero__copy .ehs-display { margin-top: 33px; }
.ehs-hero__lead { margin-top: 31px; max-width: 640px; }
/* The rail's geometry is LIVE's, read from the capture pixels (home.viewport.png at 1025 / 1280 / 1440 / 1920 /
   2560; the TL's 2560 rail check, 2026-09-25): two 200 px rules, 40 px from the circles, the whole 601 px rail
   centred 39.5 px ABOVE the band's centre at every width (1440: 151…752 in the 86…896 band; 2560: 394…995), its
   axis at vw − max(1.5625vw, (vw − 1280) / 2 + 20) (1009 at 1025, 1260 at 1280, 1340 at 1440, 1900 at 2560).
   It sits over the photo on both sides: live's photo is full-bleed, the build's is the right-half panel. The
   build had 245 px rules 25 px off the circles, centred on the band (40 px low) and 4 px left at 1025. */
.ehs-social--rail { position: absolute !important; z-index: 2; top: 0; bottom: 79px; height: max-content; margin: auto 0;
  right: calc(max(1.5625vw, (100vw - 1280px) / 2 + 20px) - 16.5px);   /* ⛔ no transform in layout — §RM zeroes it under reduce */
  flex-direction: column; align-items: center; gap: 11px; padding: 0; }
.ehs-social--rail::before, .ehs-social--rail::after { content: ""; width: 1px; height: 200px; background: rgba(165, 165, 165, 0.5); }
.ehs-social--rail::before { margin-bottom: 29px; } .ehs-social--rail::after { margin-top: 29px; }   /* 29 + the 11 gap = live's 40 */
.ehs-social--rail .ehs-social__link { width: 33px; height: 33px; border: 1px solid var(--ehs-red); color: var(--ehs-white); background: transparent; }   /* the glyph PAINTS white at rest on live (capture pixels at 1440 / 2560; the A's computed color is red, the SVG fill is not) — 2026-09-25 */
.ehs-social--rail .ehs-social__link svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .ehs-social--rail .ehs-social__link:hover { background: var(--ehs-red); color: var(--ehs-white); opacity: 0.9; }  /* I-08: glyph → WHITE */
}
@media (max-width: 1024px) {
  /* AUTHORED: the h1 leads; the photograph follows full-bleed at 3:2; no rail. */
  .ehs-band--hero { min-height: 0; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
  .ehs-hero__media, .ehs-band--hero > .ehs-hero__media { position: relative !important; width: 100% !important; aspect-ratio: 3 / 2; height: auto; }
  .ehs-hero__media img, img.ehs-hero__img { -webkit-mask-image: none; mask-image: none; }
  .ehs-hero__copy { width: 100%; padding: 48px 0 40px; }
  .ehs-hero__copy .ehs-display { margin-top: 20px; }
  .ehs-hero__lead { margin-top: 20px; }
  .ehs-social--rail { display: none !important; }
}
@media (max-width: 767px) { .ehs-hero__copy { padding: 36px 0 32px; } }

/* Features row + counter card — 473. ⛔ LT-1 RESOLVED (PR #10 review finding 5): on live
   the FEATURES CONTAINER itself overlaps the hero by 76 px — its top IS the counter card's
   top (y 819/820 in the 1440 capture = hero bottom 895 − 76) and its 473 height IS the card
   (472) + 1. That is the whole of LT-1's 76 (the running sum overstates everything below
   row 2 by exactly this overlap). The build used to carry the 76 on the CARD (margin-top
   −76 inside a band that started at 896) and absorb it with a 36 px about padding-top (live
   112), which left 76 px of surplus bottom padding in the about band and pushed Trusted
   Partners and the rest of the page 76 px low (2280 vs live 2204). Now the band carries the
   overlap, as live does; the card sits at the band top; the image boxes keep their painted
   y (1095 = 820 + 275). */
.ehs-band--features { margin-top: -76px; padding-bottom: 1px; }
.ehs-features { flex-direction: row !important; align-items: flex-start; justify-content: space-between; }
.ehs-features__boxes { display: flex; gap: 29px; padding-top: 275px; padding-bottom: 28px; }   /* live 473 at 1280 = 275 + 169 + 28 + 1; 499 at 1025 = 275 + 195 + 28 + 1 (the body wraps to 3 lines) */
.ehs-imagebox { width: 437px; display: grid; grid-template-columns: 96px 1fr; column-gap: 20px; row-gap: 22px; align-items: center; }
.ehs-imagebox__icon { width: 96px; height: 96px; color: var(--ehs-red); }
.ehs-imagebox__icon svg { stroke-width: 1.25; }
.ehs-imagebox__body { grid-column: 1 / -1; }
.ehs-imagebox__link { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }   /* F-11 */
.ehs-imagebox__link:hover { color: var(--ehs-red); }
.ehs-band--features .ehs-counter-card { width: 344px; min-height: 472px; position: relative; z-index: 3; }   /* 1014…1358 × 820…1292 */
@media (max-width: 1024px) {
  .ehs-band--features { padding: 56px 0; margin-top: 0; }
  .ehs-features { flex-direction: column !important; align-items: stretch; gap: 32px; }
  .ehs-features__boxes { flex-direction: column; padding-top: 0; padding-bottom: 0; gap: 32px; }
  .ehs-imagebox { width: 100%; grid-template-columns: 64px 1fr; }
  .ehs-imagebox__icon { width: 64px; height: 64px; }
  .ehs-band--features .ehs-counter-card { width: 100%; min-height: 0; margin-top: 0; }
}

/* About block — 911. Photo 545×613 (≤ its 759×1012 master) at y 112 (live's band starts at
   1293 under the LT-1 overlap: photo 1405, as painted); 112 + 613 + 186 = 911; the 1,600 +
   overlay 500×291 at (92, 395) of the photo, proud of it by 47 / 73; copy 604 wide from x 756. */
.ehs-band--about { padding: 112px 0 186px; }
/* The media BOX spans the photo (545) AND the 1,600 + overlay proud of it by 47 (592): the overlay is part of the
   media's painted content, so its box must contain it (official B-15 ink tier, +47). The photo keeps 545 (next rule);
   the copy is placed from the right by space-between, so nothing moves. */
.ehs-split--about .ehs-split__media { width: 592px; height: 613px; }
.ehs-split--about .ehs-split__media > .brxe-image, .ehs-split--about .ehs-split__img { width: 545px; height: 613px; }
.ehs-split--about .ehs-split__copy { width: 604px; padding-top: 54px; }
.ehs-split--about .ehs-section-title { margin-top: 17px; }
.ehs-split--about .ehs-body { margin-top: 20px; }
.ehs-stat-overlay { position: absolute !important; left: 92px; top: 395px; width: 500px; height: 291px; z-index: 2 !important;
  display: grid; grid-template-columns: 180px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 20px; padding: 30px;
  background: linear-gradient(90deg, var(--ehs-red-fill) 0%, var(--ehs-red-fill) 45%, var(--ehs-band) 100%); color: var(--ehs-white); }
.ehs-stat-overlay__icon { grid-row: 1 / span 2; width: 140px; height: 140px; color: var(--ehs-white); align-self: center; }
.ehs-stat-overlay__icon svg { stroke-width: 1.25; }
.ehs-stat-overlay__n { align-self: end; }
.ehs-stat-overlay__label { font-family: var(--ehs-font-display); font-size: 24px; line-height: 31.2px; font-weight: 600; text-transform: uppercase; color: var(--ehs-white); }
@media (max-width: 1024px) {
  .ehs-band--about { padding: 56px 0; }
  .ehs-split--about .ehs-split__media, .ehs-split--about .ehs-split__img, .ehs-split--about .ehs-split__media > .brxe-image { width: 100% !important; height: auto; }
  .ehs-split--about .ehs-split__img img, .ehs-split--about img.ehs-split__img { aspect-ratio: 338 / 380; height: auto; }
  .ehs-split--about .ehs-split__copy { width: 100%; padding-top: 0; }
  .ehs-stat-overlay { position: relative !important; left: 0; top: 0; width: 100%; height: auto; grid-template-columns: 72px 1fr; padding: 20px; }
  .ehs-stat-overlay__icon { width: 64px; height: 64px; }
  .ehs-sigrow { gap: 24px; flex-wrap: wrap; margin-top: 28px; }
}
/* 768…1024: the home about photo (759×1012 master) painted up to 922 px wide at 90vw — a
   1.21× upscale at 1024 (PR #10 re-review R-1; B-32 at all 13 widths). Same cap as the
   /about/ intro photo: ≤ its native width, a 4:3 crop. ≥1025 parity and ≤767 untouched. */
@media (min-width: 768px) and (max-width: 1024px) {
  .ehs-split--about .ehs-split__media, .ehs-split--about .ehs-split__img, .ehs-split--about .ehs-split__media > .brxe-image { max-width: 759px; }
  .ehs-split--about .ehs-split__img img, .ehs-split--about img.ehs-split__img { aspect-ratio: 4 / 3; }
}

/* Services — 1248, #121212. */
.ehs-band--services { background: var(--ehs-ground); padding: 124px 0 111px; }
@media (min-width: 1280px) { .ehs-band--services { padding-bottom: 109px; } }   /* LEGACY residue with the F-1 layout model (TL 2026-09-25): 1248 − 2.4 (model Δ: card 3's title over the 390 floor) = 124 + 165.8 + 45 + 802 + 108.8; 1025…1279 keeps 111 */   /* 1248 = 124 + shead 166 (h2 in its measured 768 box: 2 lines) + 45 + grid 802 (two 390 rows) + 111 — the paddings are the band's only unmeasured terms */
@media (max-width: 1024px) { .ehs-band--services { padding: 72px 0; } }
@media (max-width: 767px)  { .ehs-band--services { padding: 56px 0; } }

/* Featured Projects — AUTHORED (F-3a): 96/96 (layout.sectionPadding.authored). */
.ehs-band--featured, .ehs-band--pfeatured { padding: var(--ehs-pad-authored) 0; }
.ehs-band--pfeatured .ehs-shead { margin-bottom: 40px; }   /* the / band's shead-row gap (review finding 9(b)) */


/* =============================================================================
   §9. PROJECT CARDS — E-60 (featured / compact), E-61 (grid). One <a> per card
   (Lane B's modal contract: a[data-ehs-project]). Hover I-61 is tile feedback on a
   clickable tile only — nothing appears on hover (boundary "Is Not" 2).
   ============================================================================= */
.ehs-cards { display: grid; gap: 20px; }
.ehs-cards--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ehs-cards--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ehs-cards--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ehs-cards__cell, .ehs-cards__card { display: flex; flex-direction: column; min-width: 0; }
.ehs-cards__cell > .ehs-cards__card { flex: 1 1 auto; }                   /* equal card heights per row */
.ehs-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--ehs-band); background: var(--ehs-ground);
  transition: border-color var(--ehs-dur-base); }
.ehs-card__ph { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #0b0b0b; }
.ehs-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ehs-dur-base) var(--ehs-ease-standard); }
.ehs-card--grid .ehs-card__ph { max-width: 480px; }
.ehs-card__tx { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.ehs-card__name { font-family: var(--ehs-font-display); font-size: 24px; line-height: 31.2px; font-weight: 600; text-transform: uppercase; color: var(--ehs-white);
  transition: color var(--ehs-dur-base); }
.ehs-card__meta { font-family: var(--ehs-font-body); font-size: 16px; line-height: 25.6px; color: var(--ehs-grey); }
.ehs-card--featured .ehs-card__tx, .ehs-card--compact .ehs-card__tx { background: var(--ehs-band); padding: 32px; flex: 1; gap: 12px; }
.ehs-card__sector { font-family: var(--ehs-font-display); font-size: 16px; line-height: 14.4px; font-weight: 600; letter-spacing: 3.8px; text-transform: uppercase; color: var(--ehs-red-on-band); }
.ehs-card--featured .ehs-card__name { font-size: 38.4px; line-height: 46.08px; }
.ehs-card__highlight { font-family: var(--ehs-font-display); font-size: 18px; line-height: 21.6px; font-weight: 600; text-transform: uppercase; color: var(--ehs-white); margin-top: 2px; }
.ehs-card--compact .ehs-card__tx { padding: 20px; }
.ehs-card:hover, .ehs-card:focus-visible { border-color: var(--ehs-red); }
.ehs-card:hover .ehs-card__name, .ehs-card:focus-visible .ehs-card__name { color: var(--ehs-red); }
.ehs-card--featured:hover .ehs-card__name, .ehs-card--compact:hover .ehs-card__name,
.ehs-card--featured:focus-visible .ehs-card__name, .ehs-card--compact:focus-visible .ehs-card__name { color: var(--ehs-red-on-band); }
@media (hover: hover) and (pointer: fine) { .ehs-card:hover .ehs-card__img { transform: scale(1.04); } }
@media (max-width: 1024px) {
  .ehs-cards--grid, .ehs-cards--compact, .ehs-cards--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ehs-card__name, .ehs-card--featured .ehs-card__name { font-size: 20.8px; line-height: 27.04px; }
  .ehs-card--featured .ehs-card__name { font-size: 25.6px; line-height: 30.72px; }
}
@media (max-width: 767px) {
  .ehs-cards { gap: 12px; }
  .ehs-card__tx, .ehs-card--featured .ehs-card__tx, .ehs-card--compact .ehs-card__tx { padding: 12px; gap: 6px; }
  .ehs-card__name, .ehs-card--featured .ehs-card__name { font-size: 19.2px; line-height: 24.96px; }
  .ehs-card__sector { font-size: 14.4px; line-height: 14.4px; letter-spacing: 2px; }
  .ehs-card__highlight { display: none; }                                   /* compact at ≤767 (pages/projects.md) */
  .ehs-card__meta { font-size: 16px; line-height: 22px; }
}


/* =============================================================================
   §10. /about/ — --intro --partners --process --team.
   ============================================================================= */
/* Intro — 969. Photo 512×695 (≤ its 750×1000 master) left; copy 604 wide split into
   the justified paragraphs (384) and the checklist + counter card (294). */
.ehs-band--intro { padding: 112px 0 162px; }
.ehs-split--intro .ehs-split__media, .ehs-split--intro .ehs-split__img, .ehs-split--intro .ehs-split__media > .brxe-image { width: 512px; height: 695px; }
.ehs-split--intro .ehs-split__copy { width: 698px; }
.ehs-split--intro .ehs-section-title { margin-top: 17px; }
.ehs-intro__cols { display: flex; gap: 20px; margin-top: 20px; align-items: flex-start; }
.ehs-intro__paras { width: 384px; flex: none; }
.ehs-intro__side { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; }
.ehs-checklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ehs-checklist li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--ehs-font-body); font-size: 19.2px; line-height: 24.96px; font-weight: 500; text-transform: uppercase; color: var(--ehs-grey); }
.ehs-checklist .ehs-icon { width: 20px; height: 20px; flex: none; color: var(--ehs-red); margin-top: 2px; }
.ehs-intro__side .ehs-counter-card { padding: 28px 24px; }
@media (max-width: 1024px) {
  .ehs-band--intro { padding: 56px 0; }
  .ehs-split--intro .ehs-split__media, .ehs-split--intro .ehs-split__img, .ehs-split--intro .ehs-split__media > .brxe-image { width: 100% !important; height: auto; }
  .ehs-split--intro .ehs-split__img img, .ehs-split--intro img.ehs-split__img { aspect-ratio: 338 / 400; height: auto; }
  .ehs-split--intro .ehs-split__copy { width: 100%; }
  .ehs-intro__cols { flex-direction: column; }
  .ehs-intro__paras { width: 100%; }
  .ehs-checklist li { font-size: 17.6px; line-height: 22.88px; }   /* type.checkItem 768-1024 (tokens; official B-6) */
}
@media (max-width: 767px) { .ehs-checklist li { font-size: 16px; line-height: 19.2px; } }   /* type.checkItem ≤767 */
/* 768…1024 (authored tablet): the stacked intro photo at the portrait 338/400 ratio was
   922×1091 at 1024 — the page's largest height sink, and a 1.23× upscale of its 750×1000
   master. Here it stays at ≤ its native width in a 4:3 crop (750×562 at 1024, 691×518 at
   768), which brings /about/ under B-17's 1.4 × at every rung (TL F-3 ruling: B-17 binds
   at all 13 widths; was 1.43 at 1024). ≤767 keeps its own portrait crop (§AUTHORED). */
@media (min-width: 768px) and (max-width: 1024px) {
  .ehs-split--intro .ehs-split__media, .ehs-split--intro .ehs-split__img, .ehs-split--intro .ehs-split__media > .brxe-image { max-width: 750px; }
  .ehs-split--intro .ehs-split__img img, .ehs-split--intro img.ehs-split__img { aspect-ratio: 4 / 3; }
}

/* Process — 789. Photo 691×447 left (corner top-right); the steps card 690 wide docked
   over the photo's lower edge — its TEXT zone solid redFill, the fade only beyond it
   (EHS-D-13); copy right. */
.ehs-band--process { padding: 92px 0 250px; }
/* The media box spans the photo (691) AND the steps card docked 60 px in and 690 wide (750): official B-15 ink tier
   (+59). The photo keeps 691; the copy is placed from the right, so nothing moves. */
.ehs-split--process .ehs-split__media { width: 750px; height: 447px; }
.ehs-split--process .ehs-split__media > .brxe-image, .ehs-split--process .ehs-split__img { width: 691px; height: 447px; }
.ehs-split--process .ehs-split__copy { width: 462px; margin-right: 0; padding-top: 0; }   /* ink x 902…1349 @1440, as live (review finding 6) */
.ehs-split--process .ehs-section-title { margin-top: 17px; }
.ehs-split--process .ehs-body { margin-top: 20px; }
.ehs-split--process .ehs-btn { margin-top: 20px; align-self: flex-start; }
.ehs-steps { position: absolute !important; left: 60px; top: 335px; width: calc(100% - 60px); z-index: 2 !important; display: grid !important;
  grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px;
  background: linear-gradient(90deg, var(--ehs-red-fill) 0%, var(--ehs-red-fill) 88%, rgba(216, 59, 50, 0) 100%); }
.ehs-step__num { font-family: var(--ehs-font-display); font-size: 41px; line-height: 41px; font-weight: 600; color: var(--ehs-white); }
.ehs-step .ehs-step-title { margin-top: 12px; }
.ehs-step__body { margin-top: 10px; font-family: var(--ehs-font-body); font-size: 16px; line-height: 25.6px; color: var(--ehs-white); }  /* MF-3: 16 (live 14) */
@media (max-width: 1024px) {
  .ehs-band--process { padding: 56px 0; }
  .ehs-split--process .ehs-split__media, .ehs-split--process .ehs-split__media > .brxe-image, .ehs-split--process .ehs-split__img { width: 100% !important; height: auto; }
  .ehs-split--process .ehs-split__img img, .ehs-split--process img.ehs-split__img { aspect-ratio: 338 / 220; height: auto; }
  .ehs-steps { position: relative !important; left: 0; top: 0; width: 100%; grid-template-columns: 1fr; background: var(--ehs-red-fill); margin-top: 0; }
  .ehs-split--process .ehs-split__copy { width: 100%; margin-right: 0; }
}

/* 1025…1279 (PARITY band, full-bleed container — B-4 ruling) — TL ruling 2026-09-24, geometry diff G2: LIVE's
   PROPORTIONS. The live kit sizes its columns in % of the container with fixed px padding, so every LIVE text box
   the capture measured at BOTH 1025 and 1280 fixes a line  w(W) = a·W + b  (tokens-measured.json ramp samples);
   the build sizes the same box by that line, in container-query units (cqw = 1 % of the container, which IS the
   viewport here minus any scrollbar). At 1280 each line returns the ≥1280 px value, so the rung meets the fixed
   layout without a step. Media boxes (no LIVE box) scale by W/1280. The $edgeSafe inset stays on the side that
   touches the viewport only. Sources (1280 → 1025): home about h2 605 → 478; features imagebox body 437 → 344;
   services card title 330 → 248; about intro h2 698 → 545, paragraphs 384 → 300, side card body 230 → 161;
   process h2 462 → 360; partners band 524 → 480 (logo slot 197 → 153). */
/* ≥1025: the container is the cqw reference (its width is explicit — 100 % to 1279, 1280 above — so inline-size
   containment changes no layout); the rung below and the ≥1025 overhang rules size by it. */
@media (min-width: 1025px) { .ehs-container { container-type: inline-size; } }
@media (min-width: 1025px) and (max-width: 1279px) {
  /* home about (2e867fb3): media 592/545 × 613 scale; copy text = 49.8cqw − 32.5 (+ the 20 px right inset) */
  .ehs-split--about .ehs-split__media { width: 46.25cqw; height: 47.89cqw; }
  .ehs-split--about .ehs-split__media > .brxe-image, .ehs-split--about .ehs-split__img { width: 42.58cqw; height: 47.89cqw; }
  .ehs-split--about .ehs-split__copy { width: calc(49.8cqw - 12.5px); flex: none; padding-left: 0; }
  .ehs-stat-overlay { left: 7.19cqw; top: 30.86cqw; width: calc(46.25cqw - 7.19cqw); height: auto; min-height: 22.73cqw;
    grid-template-columns: 10.94cqw 1fr; padding: 24px; }
  .ehs-stat-overlay__icon { width: 10.94cqw; height: 10.94cqw; }
  /* home features (7140309f): imagebox = its body's LIVE width 36.47cqw − 29.8; the counter card takes the rest */
  .ehs-features > .ehs-features__boxes { flex: none; padding-right: 0; }
  .ehs-features__boxes > .ehs-imagebox { width: calc(36.47cqw - 29.8px); flex: none; }
  .ehs-band--features .ehs-counter-card { flex: 1 1 0; min-width: 0; width: auto; margin-left: 20px; }
  /* services grid (13977900 / 1b5fae39): LIVE's card is 328 at 1025 (title 248 + 2 × 40); the grid sits on the
     container edge (each card carries its own 40 px inset), so the three cards are (W − 2 × 22) / 3 = 327 */
  .ehs-svc-grid { padding-left: 0; padding-right: 0; }
  /* /about/ intro (7802afbb): media 512 × 695 scale; copy text = 60cqw − 70; paragraphs 32.94cqw − 37.6 */
  .ehs-split--intro .ehs-split__media, .ehs-split--intro .ehs-split__img, .ehs-split--intro .ehs-split__media > .brxe-image { width: 40cqw; height: 54.3cqw; }
  .ehs-split--intro .ehs-split__copy { width: calc(60cqw - 50px); flex: none; padding-left: 0; }
  .ehs-intro__cols > .ehs-intro__paras { width: calc(32.94cqw - 37.6px); flex: none; }
  .ehs-intro__cols > .ehs-intro__side { width: auto; flex: 1 1 0; min-width: 0; }
  /* /about/ process (9ca3330): media 750/691 × 447 scale, the steps card docked at the same proportions; copy text = 40cqw − 50 */
  .ehs-split--process .ehs-split__media { width: 60cqw; }
  .ehs-split--process .ehs-split__media > .brxe-image, .ehs-split--process .ehs-split__img { width: calc(29.88cqw + 308.7px); height: 34.9cqw; }
  .ehs-split--process .ehs-split__copy { width: calc(40cqw - 30px); flex: none; padding-left: 0; }
  /* partners (67d9cb89 / 8791017 / cf0e6b3): LIVE 480 at 1025 — the logo slot 153 there, 197 at 1280 */
  .ehs-partners__logo img, img.ehs-partners__logo { width: calc(17.25cqw - 23.9px); height: calc(17.25cqw - 23.9px); }
}
/* 1025…1279 — the LIVE supplement (2026-09-25, PR #12) measured the inner boxes of these bands at 1025. Live's
   bands are 112 / 112 with the TALLER column driving; the copy stacks are gap 20 with 14.4 px paragraph margins.
   The ≥1280 values (padding-bottom 186 / 162 / 250, the 54 px copy offset, 17 px title gap) model the photo-driven
   ≥1280 rows and do not hold where the copy drives. Measured, per band:
   · / about 2e867fb3: copy 41085f8b (eyebrow 14.41, 20, h2, 20, p + 14.39, 20, quote 86.83, 20 + 48 pad, CTA row);
     the media column holds the photo AND the 1,600 + overlay's overhang (live −215 + 289.41 under the photo).
   · /about/ intro 7802afbb: copy 181e534a (eyebrow, 20, h2, 20, the paragraphs with 14.39 margins).
   · /about/ process 9ca3330: copy 40309a58 (eyebrow, 20, h2, 20, paragraphs + 14.39, 20, button 48); the media
     column is the photo + the steps card (live 492 at 1025, 565 at 1280: 28.63cqw + 198.6). */
/* ≥1025 (about, process): live's band is 112 / 112 at EVERY compared width and the media column carries the photo
   plus what overhangs it (the 1,600 + overlay: 5.7cqw = 73 at ≥1280; the steps card: live 492 at 1025, 565 at ≥1280).
   The former padding-bottom 186 / 250 modelled that overhang as band padding, which held only while the copy stayed
   under the photo — in Arial (live's paint) the copy is taller than the photo and the band grew (+11 / +67). */
@media (min-width: 1025px) {
  .ehs-band--about, .ehs-band--process, .ehs-band--intro { padding: 112px 0; }
  .ehs-split--about .ehs-split__media { height: auto; min-height: 53.6cqw; }   /* photo 47.89cqw + the overlay's 5.71cqw overhang (686 at ≥1280) */
  /* /about/ intro: live's copy column (09-23 ramp at ≥1280, the supplement at 1025) — gap 20 under the eyebrow, the
     paragraphs 14.39 apart and 14.39 over the column's foot; at ≥1280 the Oswald column (678.6) sits under the 695
     photo, so the band is 112 + 695 + 112 = 919 where live's Arial column made 969 (the floor's reach, G1 (a)). */
  .ehs-split--intro .ehs-section-title { margin-top: 20px; }
  .ehs-intro__paras p + p { margin-top: 14.4px; }
  .ehs-intro__paras { padding-bottom: 14.4px; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .ehs-split--about .ehs-split__copy, .ehs-split--intro .ehs-split__copy, .ehs-split--process .ehs-split__copy { padding-top: 0; justify-content: center; }
  .ehs-split--about .ehs-section-title, .ehs-split--intro .ehs-section-title, .ehs-split--process .ehs-section-title { margin-top: 20px; }
  .ehs-split--about .ehs-sigrow { margin-top: 68px; }
}
/* ≥1025: the process triangle stays on the PHOTO's top-right corner (20 px proud of it), now that the media box
   also spans the steps card: 59 (box − photo) − 20 = 39 from the box's right edge — inside the box. */
/* /about/ process ≥1025 — the LIVE supplements measured the band (#12 at 1025, #13 at 1280…2560): the MEDIA COLUMN
   drives it — the photo slot (615 × 357.83 at 1025; 691.19 × 446.83 at ≥1280) plus the steps card IN FLOW with
   margin-top −113, flush right (566 wide at 1025, 706.55 at ≥1280; padding 16; three cells 27 apart; 199.64 tall at
   ≥1280): 492.05 at 1025, 565.47 at ≥1280. The copy column (360 / 462 text) stretches to the row; its stack is
   label, 20, h2, 20, the two paragraphs 14.4 apart and 14.4 over the foot, 20, the 48 CTA — not pinned to the foot.
   At ≥1280 the media column is the measured 565.47 slot (2ebdd644), so the band is 112 + 565.47 + 112 = 789.47. */
@media (min-width: 1025px) {
  /* live's band carries no padding: the 112 over and under the row are the inner wrapper's (PR #13 review) */
  .ehs-band--process { padding: 0; }
  .ehs-split--process { align-items: stretch; padding-top: 112px; padding-bottom: 112px; }
  .ehs-split--process .ehs-split__media { height: auto; }
  .ehs-steps { position: relative !important; left: auto; top: auto; margin: -113px 0 0 auto; width: calc(55.12cqw + 1px); padding: 16px; column-gap: 27px; }
  .ehs-split--process .ehs-section-title { margin-top: 20px; }
  .ehs-split--process .ehs-body p + p { margin-top: 14.4px; }
  .ehs-split--process .ehs-body { padding-bottom: 14.4px; }
  .ehs-split--process .ehs-corner--tr::before { right: max(0px, calc(30.12cqw - 330.46px)); }   /* 21.76 proud of the photo's right edge, never outside the box */
}
@media (min-width: 1280px) {
  .ehs-split--process .ehs-split__media { width: 768px; min-height: 565.47px; }
  .ehs-split--process .ehs-split__media > .brxe-image, .ehs-split--process .ehs-split__img { width: 691.19px; height: 446.83px; }
  .ehs-steps { width: 706.55px; }
  .ehs-step { min-height: 199.64px; }
}

/* Team — 771 at 1440, #222222. PHOTO min(45vh, 450px) (EHS-D-16; instruments F-2):
   405 at 900, 450 at ≥1000 — the 360×450 masters never upscale. The label block HANGS
   35 px below the photo, inset 40 px from its left edge (1440 capture: photo 3073…3477,
   label x 120…385, bottom 3512) — review finding 7; the card box is photo + 35, which is
   live's 771 band. Log #36's "20 px inset" was misread and is superseded. */
.ehs-band--team { background: var(--ehs-band); padding: 112px 0 76px; }
.ehs-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 45px; padding-bottom: 35px; }
/* The CARD box IS the photo box — the element EHS-D-16's min(45vh, 450px) rules (B-5 measures it); the
   label hangs 35 px OUT of it (bottom: -35px) and the grid reserves that space (padding-bottom 35;
   row-gap at ≤1024), so the band keeps live's 771 and the card keeps the ruled height. */
.ehs-team-card { position: relative; display: block; max-width: 360px; }
.ehs-team-card__img { width: 100%; height: min(45vh, 450px); object-fit: cover; object-position: 50% 20%; display: block; max-width: 360px; background: #fff; }
.ehs-team-card__label { position: absolute; left: 40px; right: 0; bottom: -35px; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px;
  background: linear-gradient(90deg, var(--ehs-red-fill) 0%, var(--ehs-red-fill) 70%, rgba(216, 59, 50, 0) 100%); }
.ehs-team-card__role { color: var(--ehs-white); }
/* EHS-D-30 (TL, owner-reported 2026-09-25; PARITY under O-2 (a)) — INTERACTIONS I-99: live's team card is an
   `A` container (Elementor `e-con-full e-transform`, `:hover { --e-con-transform-scale: 1.05 }`, transform 0.4s
   ease). The WHOLE card link (photo + hanging label) grows 1.05 about its centre on hover and on keyboard focus.
   Under reduce: no scale (§RM `transform: none`). The band clips x so the grow never overflows (B-15). */
.ehs-band--team { overflow-x: clip; }
.ehs-team-card { transform-origin: 50% 50%; transition: transform 400ms ease; }
.ehs-team-card:hover, .ehs-team-card:focus-visible { transform: scale(1.05); }
@media (max-width: 1024px) {
  .ehs-band--team { padding: 72px 0; }
  .ehs-team { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 55px; }   /* 20 + the 35 px label hang */
}
@media (max-width: 767px) {
  .ehs-band--team { padding: 56px 0; }
  .ehs-team { gap: 12px; margin-top: 28px; padding-bottom: 0; }
  .ehs-team-card__img { height: auto; aspect-ratio: 305 / 405; }
  .ehs-team-card__label { left: 0; bottom: 0; padding: 8px 10px; }
  .ehs-team-card__name { font-size: 16px; line-height: 20px; }
}


/* =============================================================================
   §11. /services/ — --services --cta --faq (image panel 60vh + the dark card with
   the site's one shadow + two accordions + the static counters row).
   ============================================================================= */
/* FAQ + counters — 1475 @1440 (1799 @2560: only the 60vh panel grows). Measured in the
   1440 capture: panel 540 at y 112; the #222222 card 1088 wide overlapping it by 123;
   the counters' numbers 170 below the card; 110 below the counters. */
.ehs-band--faq { padding: 112px 0 110px; }
.ehs-faq { align-items: center !important; }
.ehs-faq__media { width: 100% !important; height: 60vh; overflow: hidden; }                     /* B-5: 540 / 864 */
.ehs-faq__media > .brxe-image, .ehs-faq__img { width: 100%; height: 100%; }
.ehs-faq__img img, img.ehs-faq__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ehs-faq__card { width: 1088px; max-width: 100%; margin-top: -123px; position: relative; z-index: 2; background: var(--ehs-band);
  box-shadow: var(--ehs-shadow-card); padding: 50px 50px 80px; }
.ehs-faq__accs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; align-items: start; }
.ehs-acc { display: flex; flex-direction: column; gap: 12px; }
.ehs-acc__q { margin: 0; }
.ehs-acc__btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 50px; padding: 12px 16px;
  background: var(--ehs-ground); border: 0; border-left: 4px solid var(--ehs-red); color: var(--ehs-white); text-align: left; cursor: pointer;
  font-family: var(--ehs-font-body); font-size: 16px; line-height: 20px; font-weight: 500; text-transform: uppercase; }
.ehs-acc__chev { width: 16px; height: 16px; flex: none; color: var(--ehs-red); transition: rotate var(--ehs-dur-base); }
/* STATE, not motion: the open chevron's static rotate holds under reduce (§RM resets the
   individual transform properties only on .ehs-reveal; the transition is what reduce drops). */
.ehs-acc__btn[aria-expanded="true"] .ehs-acc__chev { rotate: 180deg; color: var(--ehs-white); }
.ehs-acc__a { padding: 14px 16px; background: linear-gradient(90deg, var(--ehs-red-fill) 0%, var(--ehs-red-fill) 50%, var(--ehs-band) 100%); }
.ehs-acc__a p { font-family: var(--ehs-font-body); font-size: 16px; line-height: 25.6px; color: var(--ehs-white); }
/* JS enhancement only: without JS every answer shows (I-98). */
.ehs-js .ehs-acc__item:not(.is-open) .ehs-acc__a { display: none; }
/* The .ehs-counters row (three funfacts under the FAQ card, G5) was REMOVED by client request 2026-09-26 (EHS-D-32). */
/* ≥1025 — the LIVE supplement (2026-09-25, PR #12) measured the FAQ card at all five compared widths
   (3a8a091d): the card overlaps the panel by 100 and pads 48; eyebrow → h2 20; question rows 15 apart, each an
   Oswald 500 19.2 / 24.96 uppercase line box padded 15 over / under, text 21 px in and 60 px clear of the right
   edge; the open answer 15 over / under, 23 in, 60 clear; the counters 112 under the card, number → label 15; the
   band 112 / 112. The authored 16 / 20 Raleway questions and the 50 / 80 card padding were never measured. */
@media (min-width: 1025px) {
  .ehs-band--faq { padding: 112px 0; }
  .ehs-faq__card { margin-top: -100px; padding: 48px; }
  .ehs-faq__card .ehs-shead { gap: 20px; }
  .ehs-acc { gap: 15px; }
  .ehs-acc__btn { min-height: 0; padding: 15px 28px 15px 17px; font-family: var(--ehs-font-display); font-size: 19.2px; line-height: 24.96px; font-weight: 500; }
  .ehs-acc__a { padding: 15px 60px 15px 23px; }
}
/* 1025…1279: the card is 85 % of the container (live 871 at 1025, 1088 of 1280) — here, after the base width rule,
   so it takes (the G2 rung block sits earlier in the file and lost to the base rule). */
@media (min-width: 1025px) and (max-width: 1279px) { .ehs-faq__card { width: 85cqw; } }
@media (max-width: 1024px) {
  .ehs-faq__media { height: auto; aspect-ratio: 16 / 9; }
  .ehs-faq__card { margin-top: 0; padding: 32px 24px; width: 100%; }
  .ehs-faq__accs { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 767px) {
  .ehs-band--faq { padding-bottom: 48px; }
}


/* =============================================================================
   §12. /projects/ — the measured shell (title band 50vh · video 70vh · CTA) around
   the AUTHORED body: --pintro --pfeatured --current --all --video.
   ============================================================================= */
.ehs-band--pintro { padding: var(--ehs-pad-authored) 0 0; }
.ehs-pintro { flex-direction: row !important; align-items: flex-end; justify-content: space-between; gap: 32px; }
.ehs-pintro .ehs-shead { max-width: 615px; }
.ehs-band--current { padding: 0 0 var(--ehs-pad-authored); }
.ehs-current { flex-direction: row !important; align-items: center; gap: 40px; }
.ehs-current__img, .ehs-current > .brxe-image { width: 300px; height: 400px; flex: none; }         /* ≤ its 1920×2560 master */
.ehs-current__img img, img.ehs-current__img { width: 300px; height: 400px; object-fit: cover; display: block; }
.ehs-current__caption { max-width: 420px; }
.ehs-band--all { padding: 0 0 var(--ehs-pad-authored); }
.ehs-band--all:first-of-type { padding-top: var(--ehs-pad-authored); }
.ehs-all__title { margin-bottom: 28px; scroll-margin-top: 16px; }
.ehs-all__filter { margin-bottom: 28px; }
.ehs-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 40px; }
.ehs-pager__links .page-numbers { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.ehs-pager__links a, .ehs-pager__links span.page-numbers, .ehs-pager__links .page-numbers a, .ehs-pager__links .page-numbers span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--ehs-band); color: var(--ehs-white); font-family: var(--ehs-font-display); font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; }
.ehs-pager__links a:hover { border-color: var(--ehs-red); }
.ehs-pager__links [aria-current] { background: var(--ehs-red-fill); border-color: var(--ehs-red-fill); }
.ehs-pager__of { margin-left: auto; color: var(--ehs-grey); font-family: var(--ehs-font-display); font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; }   /* 500: Oswald's lightest shipped face — it painted 500 under an inherited 400 (audit L-1) */
.ehs-pager__of:empty { display: none; }
@media (max-width: 767px) {
  .ehs-pintro { flex-direction: column !important; align-items: stretch; }
  .ehs-pintro__btn { width: 100%; }
  .ehs-current { gap: 16px; }
  .ehs-current__img, .ehs-current > .brxe-image, .ehs-current__img img, img.ehs-current__img { width: 200px; height: 267px; }
}

/* Video band — 70vh (B-5: 630 / 1008). The self-hosted poster under the scrim; the
   heading's ink gradient white → #CCCCCC (EHS-D-13: 3.08:1 as LARGE text at 56 px)
   with the 6 px red bar; the facade button. ⛔ Zero overflow at every width (the live
   77 px overflow's cause, A-059). */
.ehs-band--video { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: #000; }
.ehs-video__poster, .ehs-band--video > .brxe-image { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none; }
.ehs-video__poster img, img.ehs-video__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.ehs-video__scrim { position: absolute !important; inset: 0; background: var(--ehs-scrim); }
.ehs-video { position: relative; z-index: 1; flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 40px; }
.ehs-video__title { font-weight: 500; padding-left: 24px; border-left: 6px solid var(--ehs-red); max-width: 480px;
  background: linear-gradient(90deg, #FFFFFF 40%, #CCCCCC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ehs-video__play { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 22px; background: rgba(18, 18, 18, 0.7);
  color: var(--ehs-white); border: 1px solid var(--ehs-red); cursor: pointer; font-family: var(--ehs-font-display); font-size: 16px; font-weight: 500;
  letter-spacing: 1.6px; text-transform: uppercase; transition: background-color var(--ehs-dur-base); }
.ehs-video__play svg { width: 20px; height: 20px; }
.ehs-video__play:hover { background: var(--ehs-red-fill); }
.ehs-video__facade iframe { display: block; width: min(640px, 100%); aspect-ratio: 16 / 9; height: auto; border: 0; }
.ehs-video__facade { max-width: 100%; }
@media (max-width: 1024px) { .ehs-band--video { min-height: min(70svh, 420px); } }
@media (max-width: 767px) {
  .ehs-video { gap: 24px; }
  .ehs-video__title { max-width: 100%; }
}


/* =============================================================================
   §13. /contact/ — --contact: the form panel (#222222; CF7 renders the <form>) left,
   copy + the site's only map right. Form states per CAT-054/055, INTERACTIONS §5.
   ============================================================================= */
.ehs-band--contact { padding: 112px 0 112px; min-height: 837px; }   /* TL F-8b (parent): a declared floor = the measured 837 (112 + the 613 panel floor + 112); the AUTHORED form makes it taller */
/* DOM order is copy · form · map (the ≤1024 reading order, pages/contact.md §AUTHORED
   row 3); at ≥1025 a grid puts the form left across both rows and copy over map right —
   the measured desktop arrangement. The 1fr second row takes any height the form panel
   has beyond copy + map, so the map stays 30 px under the copy. */
.ehs-contact { display: grid !important; grid-template-columns: 615px minmax(0, 616px); grid-template-rows: auto 1fr;
  grid-template-areas: "form copy" "form map"; justify-content: space-between; align-items: start; column-gap: 40px; row-gap: 0; }
.ehs-contact__form { grid-area: form; width: 615px; background: var(--ehs-band); padding: 45px 48px 48px; min-height: 613px; }  /* F-8b: a floor, not live's number */
.ehs-contact__copy { grid-area: copy; width: 100%; display: flex; flex-direction: column; }
.ehs-contact__copy .ehs-section-title { margin-top: 17px; }
.ehs-contact__copy .ehs-body { margin-top: 20px; }
.ehs-contact__map { grid-area: map; margin-top: 30px; width: 100%; }
.ehs-contact__map iframe { display: block; width: 100%; height: 392px; border: 0; }                  /* 616×392 */
/* EHS-D-18 map facade — the same 616×392 box as live's painted map, a finished panel on
   the band tokens: the address + phone, and the redFill "View map" button (link-first). */
.ehs-mapfacade { min-height: 392px; background: var(--ehs-band); border-left: 4px solid var(--ehs-red); display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start; gap: 24px; padding: 40px; }
.ehs-mapfacade.is-loaded { padding: 0; border-left: 0; background: transparent; min-height: 0; }
.ehs-mapfacade__body { display: flex; flex-direction: column; gap: 8px; }
.ehs-mapfacade__body .ehs-strip-label + .ehs-strip-value { margin-bottom: 14px; }
.ehs-mapfacade__addr { line-height: 26px; }
.ehs-panel-title { margin-bottom: 20px; }
.ehs-form .ehs-formrow { display: flex; gap: 20px; }
.ehs-form .ehs-formrow__half { flex: 1 1 0; }
.ehs-form .ehs-field { display: flex; flex-direction: column; margin-top: 12px; }
.ehs-form label { font-family: var(--ehs-font-body); font-size: 16px; line-height: 20px; color: var(--ehs-grey); margin: 0 0 2px; }
.ehs-form .ehs-req { color: var(--ehs-red-on-band); }
.ehs-form .wpcf7-form-control-wrap { display: block; }
.ehs-form input[type="text"], .ehs-form input[type="email"], .ehs-form input[type="tel"], .ehs-form textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ehs-red); border-radius: 0; color: var(--ehs-grey);
  font-family: var(--ehs-font-body); font-size: 16px; line-height: 25.6px; padding: 8px 8px; min-height: 44px; }   /* MF-7: 16 px */
.ehs-form textarea { height: 130px; resize: vertical; }
.ehs-form input:focus, .ehs-form textarea:focus { color: var(--ehs-white); outline: none; box-shadow: 0 0 0 4px var(--ehs-white); }  /* I-13, measured */
.ehs-form ::placeholder { color: #7a7a7a; }
.ehs-form .ehs-form__turnstile { margin-top: 20px; }
.ehs-form .ehs-formsubmit { margin-top: 24px; }
.ehs-form .ehs-btn--submit { min-height: 48px; }
/* States (I-42…I-45). CF7's own regions: .wpcf7-not-valid-tip (per field, aria-describedby),
   .wpcf7-response-output (the summary). Ink #ED554C on #222222 (4.55:1) + an "Error:"
   text prefix so colour is not the only signal. */
.ehs-form .wpcf7-not-valid-tip { color: var(--ehs-red-on-band); font-size: 16px; line-height: 22px; margin-top: 6px; }
.ehs-form .wpcf7-not-valid-tip::before { content: "Error: "; font-weight: 600; }
.ehs-form .wpcf7-response-output { margin: 20px 0 0 !important; padding: 12px 16px !important; border: 1px solid var(--ehs-grey) !important; color: var(--ehs-white); font-size: 16px; line-height: 24px; }
.ehs-form.invalid .wpcf7-response-output, .ehs-form.unaccepted .wpcf7-response-output { border-color: var(--ehs-red-on-band) !important; color: var(--ehs-red-on-band); }
.ehs-form.sent .wpcf7-response-output { border-color: var(--ehs-white) !important; }
.ehs-form.failed .wpcf7-response-output, .ehs-form.aborted .wpcf7-response-output { border-color: var(--ehs-red-on-band) !important; }
.ehs-form .wpcf7-spinner { display: none; }
.ehs-form.submitting .ehs-btn--submit { opacity: 0.8; cursor: progress; }
@media (max-width: 1024px) {
  .ehs-band--contact { padding: 56px 0; min-height: 0; }
  .ehs-contact { display: flex !important; flex-direction: column !important; align-items: stretch; gap: 32px; }   /* DOM order: copy · form · map */
  .ehs-contact__form, .ehs-contact__copy { width: 100%; min-height: 0; }
  .ehs-contact__map { margin-top: 0; }
  .ehs-contact__form { padding: 28px 20px; }
}
@media (max-width: 767px) {
  .ehs-form .ehs-formrow { flex-direction: column; gap: 0; }
  .ehs-form .ehs-btn--submit { width: 100%; }
  /* The Turnstile widget is a fixed 300 px: at 360 the panel's 20 px side padding left 284 (official
     B-15 ink tier +16 at 360, +2 at 375). 12 px leaves ≥ 300 at every ≤767 rung from 360. */
  .ehs-contact__form { padding-left: 12px; padding-right: 12px; }
  /* pages/contact.md §AUTHORED row 3: 48 px inputs, Message 150, the map 338×250. */
  .ehs-form input[type="text"], .ehs-form input[type="email"], .ehs-form input[type="tel"] { min-height: 48px; }
  .ehs-form textarea { height: 150px; }
  .ehs-contact__map iframe { height: 250px; }
  .ehs-mapfacade { height: 250px; min-height: 0; padding: 16px 20px; gap: 12px; }
  .ehs-mapfacade.is-loaded { height: auto; padding: 0; }
  .ehs-mapfacade__body { gap: 2px; }
  .ehs-mapfacade__body .ehs-strip-label + .ehs-strip-value { margin-bottom: 8px; }
  .ehs-mapfacade__btn { width: 100%; }
}


/* =============================================================================
   §14. /certifications-and-compliance/ — --docs (#222222, 473).
   ============================================================================= */
.ehs-band--docs { background: var(--ehs-band); padding: 112px 0 119px; }
.ehs-docs { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 30px; }
.ehs-docs__item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ehs-doc { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; min-height: 44px; color: var(--ehs-white);
  font-family: var(--ehs-font-display); font-size: 16px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; text-align: center; }
.ehs-doc svg { width: 70px; height: 70px; color: var(--ehs-red); stroke-width: 1.5; transition: transform var(--ehs-dur-base) var(--ehs-ease-standard); }
/* I-102 (TL 2026-09-25, O-2 (a)): live's two document icons carry elementor-animation-grow — I-04's register, on the icon. */
@media (hover: hover) and (pointer: fine) { .ehs-doc:hover svg { transform: scale(1.1); } }
.ehs-doc:hover { color: var(--ehs-red-on-band); }
.ehs-docs__recip { max-width: 440px; text-align: center; }
.ehs-docs__verify { font-size: 14.4px; }
/* (b) TL ruling 2026-09-24: at 1025…1279 the two document titles keep one line each (live's row); the
   reciprocal-states copy between them yields the width; the O-12 verify link stays the row below. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .ehs-doc > span { white-space: nowrap; }
  .ehs-docs__recip { flex: 0 1 440px; min-width: 0; }
}
@media (max-width: 767px) {
  .ehs-band--docs { padding: 48px 0; }
  .ehs-docs { flex-direction: column; gap: 20px; }
  .ehs-doc { flex-direction: row; }
  .ehs-doc svg { width: 44px; height: 44px; }
}


/* =============================================================================
   §15. PERSON ROUTES — --person (926/911/906). Copy left (615), portrait right at
   ≤360×450 CSS px (EHS-D-16), centred in the measured column, on the red block.
   ============================================================================= */
.ehs-band--person { padding: 112px 0 112px; }
.ehs-person { display: grid !important; grid-template-columns: 615px 1fr; grid-template-areas: "copy fig" "vm fig"; column-gap: 50px; row-gap: 40px; align-items: start; }
.ehs-person__copy { grid-area: copy; }
.ehs-person__copy .ehs-person-name { margin-top: 17px; }
.ehs-person__bio { margin-top: 20px; }
.ehs-person__vm { grid-area: vm; display: flex; flex-direction: column; gap: 20px; }
.ehs-vm { display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; row-gap: 10px; padding: 20px; }
.ehs-vm--panel { background: var(--ehs-band); }
.ehs-vm--outline { border: 1px solid var(--ehs-band); }
.ehs-vm__icon { width: 48px; height: 48px; color: var(--ehs-red); grid-row: 1 / span 2; }
.ehs-vm__icon svg { stroke-width: 1.5; }
.ehs-person__figure { grid-area: fig; align-self: center; justify-self: center; position: relative; width: 100%; display: flex; justify-content: center; }
.ehs-person__figure::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(0deg, var(--ehs-red-fill), rgba(216, 59, 50, 0)); z-index: 0; }
.ehs-person__portrait, .ehs-person__figure .brxe-image { position: relative; z-index: 1; }
.ehs-person__portrait img, img.ehs-person__portrait { width: 360px; max-width: 100%; height: auto; display: block; }  /* never above 360×450 */
@media (max-width: 1024px) {
  .ehs-band--person { padding: 40px 0 56px; }
  .ehs-person { grid-template-columns: 1fr; grid-template-areas: "fig" "copy" "vm"; row-gap: 28px; }
  .ehs-person__portrait img, img.ehs-person__portrait { width: 240px; }
}


/* =============================================================================
   §16. 404 — --404 (AUTHORED, pages/404.md): 96/96, h1 at type.sectionTitle.
   ============================================================================= */
.ehs-band--404 { padding: var(--ehs-pad-authored) 0; }
.ehs-notfound { align-items: center !important; text-align: center; }
.ehs-notfound__title { margin-top: 17px; }
.ehs-notfound__body { margin-top: 20px; max-width: 640px; }
.ehs-notfound__links { display: flex; gap: 20px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 767px) { .ehs-notfound__links { flex-direction: column; width: 100%; } .ehs-notfound__links .ehs-btn { width: 100%; } }


/* =============================================================================
   §16b. THE ≤767 AUTHORED BUDGET (LAYOUT_TRUTH §5.1 targets; MF-4: every route's
   375 document ≤ 1.4 × the same build's 1440 height — Scott Quattlebaum's is the
   tightest on the site). Stated last among the layout rules so it outranks each
   band's own ≤767 block on source order (COMPOSITION_NOTES §6b).
   ============================================================================= */
@media (max-width: 767px) {
  /* chrome: strip ≤216 · footer ≤800 · bar ≤90 */
  .ehs-strip__row { row-gap: 4px; padding: 6px 0; }
  .ehs-strip__col { gap: 0; }
  .ehs-footer__cols { gap: 14px; padding-top: 24px !important; }
  .ehs-footer__para { margin-top: 8px; }
  .ehs-social--footer { margin-top: 12px; }
  .ehs-footer__logo img, img.ehs-footer__logo { width: 120px; }
  .ehs-hours__title { margin-bottom: 8px; }
  .ehs-hours__list { gap: 6px; }
  .ehs-footer__menu { padding-top: 8px !important; padding-bottom: 8px !important; }
  /* footer menu 2 × 3 (_global-chrome.md §AUTHORED row 4) — the ≤767 block's 1fr 1fr grid.
     The 3 × 2 compression is gone: it paid for the 320 px basis-as-height (review finding 3). */
  .ehs-bar__row { padding: 8px 0; }
  /* person block ≤1080: portrait first at 240×300 (≤ native), compact vision/mission */
  .ehs-band--person { padding: 16px 0 28px; }
  .ehs-person { row-gap: 16px; }
  .ehs-person__copy .ehs-person-name { margin-top: 10px; }
  .ehs-person__bio { margin-top: 12px; }
  /* person.md: the portrait at 240×300 (the ≤1024 rule above). It had been cut to 200×250 to
     pay for the footer's dead 320 px basis; with that gone every route holds MF-4 at 240. */
  .ehs-person__figure::before { height: 45%; }
  .ehs-vm { grid-template-columns: 32px 1fr; column-gap: 12px; row-gap: 2px; padding: 12px; }
  .ehs-vm__icon { width: 32px; height: 32px; }
  .ehs-person__vm { gap: 10px; }
  /* home: features ≤720 · about ≤1060 · services ≤1520 · featured ≤710 · CTA ≤300 */
  .ehs-band--features { padding: 40px 0; }
  .ehs-features, .ehs-features__boxes { gap: 20px; }
  .ehs-imagebox { row-gap: 10px; grid-template-columns: 48px 1fr; column-gap: 14px; }
  .ehs-imagebox__icon { width: 48px; height: 48px; }
  .ehs-counter-card { padding: 22px 20px; gap: 8px; }
  .ehs-counter-card__label { font-size: 19.2px; line-height: 24.96px; }
  .ehs-band--about { padding: 40px 0; }
  .ehs-split { gap: 24px; }
  .ehs-quote { margin-top: 20px; }
  .ehs-sigrow { margin-top: 20px; }
  .ehs-stat-overlay { padding: 14px 16px; }
  .ehs-band--services { padding: 40px 0; }
  .ehs-svc-grid { gap: 12px; margin-top: 24px; }
  .ehs-svc-card, .ehs-svc-card:last-child { padding: 20px 18px; }
  .ehs-svc-card__icon { width: 40px; height: 40px; }
  .ehs-svc-card__title { margin-top: 10px; }
  .ehs-svc-card__link { margin-top: 0; }
  .ehs-band--featured, .ehs-band--pfeatured { padding: 40px 0; }
  .ehs-shead-row, .ehs-band--pfeatured .ehs-shead { margin-bottom: 20px; }
  .ehs-card--compact .ehs-card__tx { padding: 10px; }
  .ehs-band--cta { padding: 44px 0; }
  .ehs-band--partners { padding: 40px 0; }
  .ehs-band--intro, .ehs-band--process, .ehs-band--team, .ehs-band--contact { padding: 40px 0; }
  .ehs-shead { gap: 12px; }
}


/* =============================================================================
   §17. ENTRANCE REVEALS (I-31, O-2 (a)) — site.js arms `[data-ehs-reveal]` once,
   at 15 % intersection, ONLY when reduced motion is not requested (it checks
   matchMedia first). ⛔ Animates the `translate` PROPERTY, never `transform`
   (COMPOSITION_NOTES §12) — the CTA skew and logo scale keep composing. Without JS
   nothing is hidden. The authored Projects surfaces do not reveal (I-33).
   ============================================================================= */
/* ⛔ The transition lives on the IN state only: declared on the armed state, arming
   itself animated a 900 ms fade-OUT that the reveal then reversed mid-flight
   (measured on /contact/: no reveal ran from its start state). */
.ehs-reveal.is-armed { opacity: 0; }
.ehs-reveal.is-armed[data-ehs-reveal="up"]    { translate: 0 24px; }
.ehs-reveal.is-armed[data-ehs-reveal="down"]  { translate: 0 -24px; }
.ehs-reveal.is-armed[data-ehs-reveal="left"]  { translate: -24px 0; }
.ehs-reveal.is-armed[data-ehs-reveal="right"] { translate: 24px 0; }
.ehs-reveal.is-armed.is-in { opacity: 1; translate: 0 0; transition: opacity var(--ehs-dur-reveal) var(--ehs-ease-out), translate var(--ehs-dur-reveal) var(--ehs-ease-out); }
/* ⛔ An ARMED right-entrance must not overflow its parent (staging-host stand-up 2026-09-25, TL finding; B-15). Until it
   intersects, a `right` reveal rests at `translate: 24px 0`, and a translated box COUNTS in its parent's scrollWidth:
   the CTA containers (/, /services/, /projects/), the /projects/ intro and the home/about split copy read +24 px
   (the band +5 at 375) on any view the visitor — or a sampler — has not scrolled to (the page never scrolls sideways:
   html is overflow-x: clip). The IN state resets `translate` correctly. So the parent clips horizontally ONLY while
   its right-entrance is armed and not yet in (8 px clip margin: the focus ring's 5 px and the CTA skew stay whole);
   once `is-in` lands the clip lifts, so a residual translate in the RESTING state still overflows and B-15 sees it. */
:where(*):has(> .ehs-reveal.is-armed:not(.is-in)[data-ehs-reveal="right"]) { overflow-x: clip; overflow-clip-margin: 8px; }


/* =============================================================================
   §RM. THE REDUCED-MOTION BASELINE — ⛔ THE PLATFORM SHIPS NONE.

   COMPOSITION_NOTES.md §13: the floor is platform-owned, and the golden image does
   not ship it and has no static-asset lane to ship it from. Until it does, a
   motion-bearing site has NO floor at all. This site reveals on every route (B-9's
   floors: / 19, /about/ 12, /services/ 10, /projects/ 3, /contact/ 4, persons 3).

   So the site carries the platform's floor locally (brief §5.1, DECISIONS
   EHS-D-13). ⛔ THIS DOES NOT CLOSE THE GAP — it stays escalated to
   platform-engineer, and this block is temporary by design. Ported from GMG
   (gmg-site/assets/site.css §4, O-10), which shipped it through go-live.

   ⛔ IT RESETS `translate`, `scale` AND `rotate`, NOT ONLY `transform`
   (COMPOSITION_NOTES §12): the reveals animate the individual `translate`
   property, and a block that resets only `transform` leaves an element exactly
   where its animation left it.

   ⛔ SCOPED (TL ruling 2026-09-24, PR #10 review finding 8): suppress transition
   and animation EVERYWHERE; reset `translate`/`scale`/`rotate` ONLY on the
   reveal-bearing elements (`.ehs-reveal`). A blanket `rotate: none` on `*` also
   erased STATE, not motion — the open FAQ chevron (`rotate: 180deg` on
   `[aria-expanded="true"]`) pointed down under reduce. State-bearing glyphs keep
   their static rotate (the chevron rule sits in §11, outside this reset); only the
   transition to it is suppressed. `transform` stays reset everywhere: on this
   site the shorthand carries hover MOTION only (the CTA/text-CTA skew, the logo,
   social and card-image scale — B-10 asserts none of them under reduce), and the
   composer rule below forbids it in layout or state.

   ⛔ AND IT MUST NEVER DELETE CONTENT. A generic suppression freezes a reveal at
   its START state — opacity 0 — which removes the content from the page. So the
   reveal class resolves to its END state here. The composition lane's reveal
   class is `.ehs-reveal` (site.js checks `matchMedia` before arming any reveal,
   brief §5.1); if it names it differently, rename it HERE in the same PR.
   The counters are static text in every mode (D-8: 39 +, 1,600 +; the /services/ 13,000 + / 12 + row removed, EHS-D-32)
   and B-10 asserts they still read so under `reduce`.

   ⚠ CONSEQUENCE FOR COMPOSERS: because this block zeroes `transform` on every
   element under `reduce`, NO LAYOUT OR STATE may depend on it (e.g. centring a
   dialog with `transform: translate(-50%, -50%)`). Centre with inset/grid/flex;
   use `transform` for motion only; express a state (an open chevron) with the
   individual `rotate`/`scale`/`translate` property or a glyph swap — never with
   `transform`. A layout that breaks under `reduce` is a B-10 finding against the
   layout, not a reason to weaken this block.

   B-10 is the gate: under `prefers-reduced-motion: reduce`, zero running
   animations after load, no transform on the CTA hover, no logo scale, and the
   counters' text unchanged.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    /* 0s, not 0.01ms: a 0.01 ms duration still CREATES a CSSTransition (transitionrun
       fires, getAnimations() lists it running) - measured on the composed ACCEPT: the
       focused card's border/colour transitions ran under reduce as a dialog opened (Lane
       B's RM row) and robert's boot window logged a transitionrun. A 0s duration creates
       none. Nothing on the site waits for transitionend. */
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
    transform: none !important;             /* hover motion only on this site (see above) */
  }
  html { scroll-behavior: auto !important; }

  /* ⛔ The reveal-bearing elements: all four reset, and the reveal resolves to its END
     state, never its start. Nothing else loses its individual transform properties. */
  .ehs-reveal, .ehs-reveal::before, .ehs-reveal::after {
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
  }
  .ehs-reveal { opacity: 1 !important; }
}