/* ==========================================================================
   SWEETWATER MECHANICAL — DESIGN SYSTEM  r12
   --------------------------------------------------------------------------
   Contract: /CLASS-CONTRACT.md  ·  every page links
     /assets/css/styles.css?v=r12   and   /assets/js/site.js?v=r12
   --------------------------------------------------------------------------
   Accent blue #0072CE is the documented brand token AND matches the pixel
   measurement of the logo edge light (core #0B76BB / median #076FB5).
   #0072CE = 4.05:1 on #0A0A0A -> NOT body-text safe on dark.
   Use --blue-bright #2E96F5 (6.41:1) for blue text on dark surfaces,
   and --blue-ink #00629E (5.94:1) for blue text on light surfaces.
   --------------------------------------------------------------------------
   NO grayscale / desaturate filter exists anywhere in this file. Media is
   pushed UP in saturation on purpose (client feedback #2).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- raw brand palette ---
     LOCKED Jul 27, 2026 (Giuseppe): primary BLACK, secondary WHITE, then
     GUNMETAL. Blue is an ACCENT ONLY — never a surface, never a primary fill.
     John on the call: "our colors are black, white and silver/gunmetal, and
     then the blue is an accent — it's only really a kickback to Clean Water."
     Anything that needs the accent uses var(--accent)/var(--accent-text),
     which point at gunmetal. Direct var(--blue) use is deliberate and rare. */
  --black: #0a0a0a;
  --charcoal: #121315;
  --panel: #17181b;
  --panel-2: #1e2024;
  --steel: #4d4d4d;          /* surfaces + borders ONLY — 2.34:1, never text */
  --silver: #c0c0c0;
  --gun: #53565a;            /* THE primary accent (John, Jul 27). 7.02:1 w/ white */
  --gun-bright: #9aa0a6;     /* gunmetal TEXT on dark. 7.31:1 */
  --gun-ink: #3d4247;        /* gunmetal TEXT on light. 9.42:1 */
  --gun-deep: #2b2e31;
  --white: #ffffff;

  --blue: #0072ce;           /* ACCENT ONLY — hairline rules + selection. Not a fill. */
  --blue-bright: #2e96f5;    /* blue TEXT on dark. 6.41:1 */
  --blue-ink: #00629e;       /* blue TEXT on light. 5.94:1 */
  --blue-deep: #044983;
  --blue-abyss: #002a4d;

  --paper: #f4f5f7;          /* the light band surface */
  --paper-2: #ffffff;
  --paper-3: #e7e9ee;
  --ink: #101215;            /* headline ink on paper */
  --ink-body: #3d434c;       /* body ink on paper — 9.14:1 */
  --ink-muted: #5b636e;      /* meta ink on paper — 5.57:1 */

  --body: #c3c8cf;           /* body text on dark — 11.77:1 */
  --body-dim: #9aa0a6;       /* meta text on dark — neutral gunmetal ramp */

  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --line-ink: rgba(16, 18, 21, 0.10);
  --line-ink-strong: rgba(16, 18, 21, 0.18);

  /* --- semantic surface vars: these FLIP inside .band-light --- */
  --surface: var(--panel);
  --surface-2: var(--panel-2);
  --surface-sunk: #101113;
  --ink-strong: var(--white);
  --text: var(--body);
  --text-dim: var(--body-dim);
  --hair: var(--line);
  --hair-strong: var(--line-strong);
  --accent: var(--gun);
  --accent-text: var(--gun-bright);
  --shadow-a: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 10px rgba(0, 0, 0, 0.20);
  --shadow-b: 0 6px 18px rgba(0, 0, 0, 0.34), 0 18px 44px rgba(0, 0, 0, 0.26);
  --shadow-lift: 0 10px 26px rgba(0, 0, 0, 0.40), 0 26px 60px rgba(0, 0, 0, 0.30);
  --glow-blue: 0 0 0 1px rgba(83, 86, 90, 0.55), 0 8px 30px rgba(0, 0, 0, 0.30);

  /* --- spacing scale (8px base) --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px; --s10: 120px;

  /* --- type scale — 14px floor, everywhere --- */
  --t-xs: 14px;
  --t-sm: 15px;
  --t-base: clamp(16px, 0.95rem + 0.16vw, 17px);
  --t-md: clamp(17px, 1rem + 0.34vw, 19px);
  --t-lg: clamp(19px, 1.05rem + 0.55vw, 23px);
  --h4: clamp(16px, 0.95rem + 0.35vw, 19px);
  --h3: clamp(20px, 1.05rem + 0.75vw, 27px);
  --h2: clamp(26px, 1.2rem + 2.8vw, 54px);
  --h1: clamp(30px, 1.25rem + 4.2vw, 76px);
  --h1-hero: clamp(32px, 1.35rem + 4.6vw, 86px);

  /* --- motion --- */
  --ease-out: cubic-bezier(0.22, 0.75, 0.28, 1);
  --ease-slam: cubic-bezier(0.16, 0.86, 0.24, 1);
  --dur-1: 0.16s;
  --dur-2: 0.26s;
  --dur-3: 0.45s;

  --max: 1200px;
  --header-h: 74px;
  --util-h: 38px;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;                 /* clip, never hidden — hidden kills sticky */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--black);
  color: var(--text);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-base);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg, canvas { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
::selection { background: var(--blue); color: #fff; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: clamp(18px, 5vw, 32px); }
.wrap-narrow { max-width: 880px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 300;
  background: var(--accent); color: #fff; padding: 12px 20px;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   3. FOCUS — one visible ring, everywhere, never removed
   -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 1px;
}
.band-light :focus-visible { outline-color: var(--gun-ink); }
.cta-band :focus-visible, .band-accent :focus-visible { outline-color: #ffffff; }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--ink-strong);
  font-family: "Chakra Petch", "Montserrat", sans-serif;
  text-transform: uppercase;
  line-height: 1.05;
  text-wrap: balance;
}

.display { font-weight: 700; letter-spacing: 0.004em; line-height: 0.99; }
h1.display { font-size: var(--h1); }
h2.display { font-size: var(--h2); }
h3.display { font-size: var(--h3); }
h3 { font-size: var(--h4); font-weight: 800; letter-spacing: 0.035em; }
h4 { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.2em; }

/* Headings are SOLID by default — maximum contrast, no gray wash. The old build
   painted every H1/H2 with a ramp that spent 68% of its length at #9d9d9d,
   which is a large part of why the client read the site as black-and-white. */
.display { color: var(--ink-strong); }

/* .display.steel is the ONE opt-in exception: a brushed-steel ramp that echoes
   the logo's own metal. Use it on the hero H1 only, where the mark sits
   directly above it and the material match is the point. Darkest stop #c9d1da
   holds 10.2:1 on #0a0a0a, so it stays body-safe even at the ramp's floor. */
.band-dark .display.steel, .band-charcoal .display.steel, .hero .display.steel, .page-hero .display.steel {
  background: linear-gradient(176deg, #ffffff 0%, #f3f6f9 32%, #c9d1da 62%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .display.steel { -webkit-text-fill-color: currentColor; color: var(--ink-strong); background: none; }
}
.band-light .display, .band-light .display.steel { color: var(--ink); -webkit-text-fill-color: var(--ink); background: none; }

/* blue emphasis inside a gradient headline */
.display .hl, .display .accent, .hl, .accent {
  color: var(--accent-text);
  -webkit-text-fill-color: var(--accent-text);
  background: none;
}
.display .ln { display: block; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--accent-text);
  font-family: "Chakra Petch", "Montserrat", sans-serif;
}
.eyebrow::before {
  content: ""; width: 30px; height: 2px; background: var(--accent);
  transform: skewX(-30deg); flex-shrink: 0;
}
.band-light .eyebrow { color: var(--gun-ink); }
.eyebrow.no-tick::before, .sec-head.center .eyebrow::before { display: none; }

.lead { font-size: var(--t-md); color: var(--text); font-weight: 500; line-height: 1.6; text-wrap: pretty; }
.band-dark .lead, .band-charcoal .lead, .hero .lead, .page-hero .lead { color: #d7dce2; }
.band-light .lead { color: var(--ink-body); }
p { text-wrap: pretty; }
.small { font-size: var(--t-xs); color: var(--text-dim); }

/* --------------------------------------------------------------------------
   5. BUTTONS — cut-steel bevel, 48px min tap target
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 30px;
  font-family: "Chakra Petch", "Montserrat", sans-serif;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; cursor: pointer; border: 0; position: relative;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.btn:focus-visible { clip-path: none; outline-offset: 2px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-a); }
.btn-primary:hover { background: var(--accent-text); transform: translateY(-2px); box-shadow: var(--glow-blue); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost { background: rgba(255, 255, 255, 0.07); color: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-2px); }
.band-light .btn-ghost { background: rgba(16, 18, 21, 0.04); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-ink-strong); }
.band-light .btn-ghost:hover { background: rgba(16, 18, 21, 0.08); }

.btn-solid { background: var(--white); color: var(--black); }
.btn-solid:hover { background: #eeeeee; transform: translateY(-2px); }
.btn-lg { min-height: 56px; padding: 17px 38px; font-size: var(--t-sm); }
.btn-block { width: 100%; }

/* text link with arrow */
.link-cue {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-strong);
}
.link-cue::after { content: "→"; color: var(--accent-text); transition: transform var(--dur-1) var(--ease-out); }
.link-cue:hover::after { transform: translateX(5px); }
.band-light .link-cue { color: var(--ink); }
.band-light .link-cue::after { color: var(--gun-ink); }

/* --------------------------------------------------------------------------
   6. UTILITY BAR + HEADER + NAV
   -------------------------------------------------------------------------- */
.util-bar {
  position: relative; z-index: 120;
  background: #060708; border-bottom: 1px solid var(--line);
  font-size: var(--t-xs);
}
.util-bar .wrap { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 3vw, 28px); min-height: var(--util-h); }
.util-bar a {
  display: inline-flex; align-items: center; gap: 7px; min-height: var(--util-h); padding-block: 4px;
  color: #a9b0b9; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--t-xs);
  transition: color var(--dur-1) var(--ease-out);
}
.util-bar a:hover { color: var(--white); }
.util-bar a.ub-phone { color: var(--accent-text); }
.util-bar svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }
@media (max-width: 620px) {
  .util-bar .wrap { justify-content: space-between; gap: 10px; }
  .util-bar a { font-size: var(--t-xs); letter-spacing: 0.04em; }
  .util-bar .ub-hide-sm { display: none; }
}

.site-header {
  position: sticky; top: 0; z-index: 110;
  background: rgba(10, 10, 10, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  transition: transform var(--dur-3) var(--ease-out), background var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); gap: 20px;
}
.site-header.is-scrolled { background: rgba(8, 9, 10, 0.95); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.site-header.is-hidden { transform: translateY(-102%); }

/* ---- THE LOCKUP (feedback #5) — real cut-steel logo art, not a font ---- */
.brand-lockup {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding-block: 6px; flex-shrink: 0;
}
.brand-lockup .bl-mark, .brand-lockup .bl-word { display: block; }
.brand-lockup .bl-mark img {
  height: 34px; width: auto;
  filter: drop-shadow(0 0 9px rgba(83, 86, 90, 0.34)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
  transition: filter var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.brand-lockup .bl-word img {
  height: 30px; width: auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
  transition: filter var(--dur-2) var(--ease-out);
}
.brand-lockup:hover .bl-mark img { filter: drop-shadow(0 0 14px rgba(154, 160, 166, 0.55)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6)); transform: translateY(-1px); }
@media (max-width: 900px) {
  .brand-lockup { gap: 9px; }
  .brand-lockup .bl-mark img { height: 29px; }
  .brand-lockup .bl-word img { height: 25px; }
}
@media (max-width: 380px) {
  .brand-lockup .bl-mark img { height: 26px; }
  .brand-lockup .bl-word img { height: 21px; }
}

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: "Chakra Petch", "Montserrat", sans-serif;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: #d9dde2; border-bottom: 2px solid transparent;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.nav a:hover { color: var(--white); border-color: var(--accent); }
.nav a[aria-current="page"], .nav a.active { color: var(--white); border-color: var(--accent); }
.nav .nav-cta {
  background: var(--accent); color: #fff; padding: 0 22px; min-height: 44px; border-bottom: 0;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  font-weight: 800; letter-spacing: 0.12em;
}
.nav .nav-cta:hover { background: var(--accent-text); color: #fff; border-color: transparent; }
.nav .nav-cta:focus-visible { clip-path: none; }

.nav-toggle {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px; flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--white);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  /* fixed, NOT absolute: the header is sticky, and an absolutely positioned
     child of a sticky element resolves against its static flow position, not
     its stuck position. site.js sets --nav-top from the header's live rect. */
  .nav {
    position: fixed; top: var(--nav-top, 74px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(8, 9, 10, 0.985);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-strong);
    padding: 8px 0 20px; max-height: calc(100dvh - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav a { min-height: 56px; padding-inline: clamp(18px, 5vw, 32px); border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--accent); }
  .nav .nav-cta { margin: 14px clamp(18px, 5vw, 32px) 0; justify-content: center; border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   7. SECTION SCAFFOLDING + BAND FAMILY (dark / charcoal / light / accent)
   -------------------------------------------------------------------------- */
section.band, .band { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
.band.tight { padding: clamp(40px, 5.5vw, 72px) 0; }
.band.flush { padding-block: 0; }

.band-dark { background: var(--black); }
.band-charcoal { background: var(--charcoal); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* THE LIGHT BAND — client feedback #3. Flips every semantic token. */
.band-light {
  --surface: var(--paper-2);
  --surface-2: var(--paper);
  --surface-sunk: var(--paper-3);
  --ink-strong: var(--ink);
  --text: var(--ink-body);
  --text-dim: var(--ink-muted);
  --hair: var(--line-ink);
  --hair-strong: var(--line-ink-strong);
  --accent-text: var(--gun-ink);
  --shadow-a: 0 1px 2px rgba(16, 18, 21, 0.06), 0 2px 10px rgba(16, 18, 21, 0.05);
  --shadow-b: 0 6px 18px rgba(16, 18, 21, 0.09), 0 18px 40px rgba(16, 18, 21, 0.07);
  --shadow-lift: 0 10px 26px rgba(16, 18, 21, 0.11), 0 26px 56px rgba(16, 18, 21, 0.09);
  background: var(--paper);
  color: var(--ink-body);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* hairline seam so a light band meeting a dark band reads deliberate */
.band-light::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, rgba(0, 114, 206, 0) 42%);
}
.band-light.no-seam::before { display: none; }

.sec-head { max-width: 780px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head h2, .sec-head h1 { margin: 16px 0 14px; }
.sec-head p { max-width: 66ch; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center p { margin-inline: auto; }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }

.hairline { height: 1px; background: var(--hair); border: 0; margin-block: var(--s6); }

/* --------------------------------------------------------------------------
   8. HERO — the logo slam (deliverable B)
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: min(92svh, 860px);
  display: flex; align-items: center;
  padding: clamp(72px, 12vw, 130px) 0 clamp(56px, 9vw, 104px);
  background: radial-gradient(120% 90% at 22% 8%, #16191d 0%, #0a0a0a 58%, #050506 100%);
}
.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media video, .hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.16) contrast(1.04);      /* colour UP — feedback #2 */
}
/* Bottom-weighted scrim. Legible text, colour survives. Old build crushed the
   frame to SATAVG 1.79 with a 93% black wash; this tops out at 82% at the very
   bottom edge and lets the mid-frame breathe at 24%. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 7, 9, 0.90) 0%, rgba(6, 7, 9, 0.80) 32%, rgba(6, 7, 9, 0.38) 64%, rgba(6, 7, 9, 0.10) 100%),
    linear-gradient(to top, rgba(6, 7, 9, 0.78) 0%, rgba(6, 7, 9, 0.34) 40%, rgba(6, 7, 9, 0.10) 70%, rgba(6, 7, 9, 0.44) 100%);
}
@media (max-width: 860px) {
  /* text runs full width on phones, so the scrim has to as well */
  .hero-media::after {
    background:
      linear-gradient(to top, rgba(6, 7, 9, 0.90) 0%, rgba(6, 7, 9, 0.74) 42%, rgba(6, 7, 9, 0.52) 76%, rgba(6, 7, 9, 0.62) 100%);
  }
}

/* the persisting outlined ghost of the mark */
.hero-ghost {
  position: absolute; z-index: -2; pointer-events: none;
  right: -14%; top: 50%; width: min(1180px, 128%);
  transform: translateY(-50%);
  opacity: 0.075; mix-blend-mode: screen;
}
.hero-ghost img { width: 100%; height: auto; }
.band-light .hero-ghost { mix-blend-mode: multiply; opacity: 0.06; }

.hero-dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }

.hero .wrap { position: relative; z-index: 1; }
.hero-inner { max-width: 900px; }
.hero-mark-wrap { display: block; }
.hero-mark {
  width: clamp(112px, 26vw, 236px); height: auto; margin-bottom: clamp(18px, 3vw, 30px);
  filter: drop-shadow(0 12px 38px rgba(0, 0, 0, 0.80));
  transform-origin: 50% 62%;
  will-change: transform, opacity, filter;
}
.hero h1.display { font-size: var(--h1-hero); margin-bottom: clamp(14px, 2vw, 22px); }
.hero .lead { max-width: 62ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: clamp(24px, 4vw, 38px); }
.hero-ctas .btn { flex: 1 1 auto; min-width: 200px; }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: clamp(26px, 4vw, 40px);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gun-bright);
}
.hero-facts li { display: flex; align-items: center; gap: 9px; }
.hero-facts li::before { content: ""; width: 8px; height: 8px; background: var(--accent); transform: skewX(-20deg); flex-shrink: 0; }

/* --- pre-states: applied ONLY when JS is on and motion is allowed. --- */
/* The headline NEVER has a pre-state — it is the LCP element and paints first. */
.js.anim .hero-mark { opacity: 0; }
.js.anim .hero-ghost { opacity: 0; transform: translateY(-50%) scale(1.07); }
.js.anim .hero-inner > *:not(.hero-mark) { opacity: 1; }

.hero.is-slamming .hero-mark { animation: markSlam 760ms var(--ease-slam) both; }
.hero.is-landed .hero-ghost { animation: ghostSettle 1400ms 60ms var(--ease-out) both, ghostDrift 34s 1.4s ease-in-out infinite alternate; }
.hero.is-jolt { animation: heroJolt 380ms cubic-bezier(0.24, 0.9, 0.3, 1) both; }

@keyframes markSlam {
  0%   { opacity: 0;   transform: scale(2.85) translateY(-9%); filter: blur(16px) drop-shadow(0 0 0 rgba(83, 86, 90,0)); }
  14%  { opacity: 1; }
  56%  { transform: scale(0.972) translateY(0.7%); filter: blur(0) drop-shadow(0 0 40px rgba(154,160,166,0.5)); animation-timing-function: cubic-bezier(0.32, 0, 0.24, 1); }
  70%  { transform: scale(1.018) translateY(-0.5%); }
  82%  { transform: scale(0.995); }
  92%  { transform: scale(1.004); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 10px 34px rgba(0,0,0,0.75)); }
}
@keyframes ghostSettle {
  from { opacity: 0; transform: translateY(-50%) scale(1.07); }
  to   { opacity: 0.075; transform: translateY(-50%) scale(1); }
}
@keyframes ghostDrift {
  from { transform: translateY(-50%) scale(1) translateX(0); }
  to   { transform: translateY(-52%) scale(1.035) translateX(-2.2%); }
}
@keyframes heroJolt {
  0%   { transform: translate3d(0, 0, 0); }
  18%  { transform: translate3d(0, 4px, 0); }
  38%  { transform: translate3d(-2px, -2px, 0); }
  58%  { transform: translate3d(1px, 1.5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* impact shock ring */
.hero-shock {
  position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 0;
  border-radius: 50%; box-shadow: 0 0 0 2px rgba(178, 205, 232, 0.55);
}
.hero-shock.is-fire { animation: shockOut 620ms cubic-bezier(0.14, 0.86, 0.2, 1) both; }
@keyframes shockOut {
  0%   { opacity: 0.85; transform: scale(0.3) scaleY(0.34); }
  100% { opacity: 0;    transform: scale(13) scaleY(4.4); }
}

@media (max-width: 640px) {
  .hero { min-height: min(88svh, 720px); text-align: left; }
  .hero-ghost { right: -30%; width: 168%; opacity: 0.06; }
  .hero-ctas .btn { flex: 1 1 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   9. PAGE HERO (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative; overflow: clip; isolation: isolate;
  min-height: min(64svh, 620px); display: flex; align-items: flex-end;
  padding: clamp(90px, 13vw, 150px) 0 clamp(40px, 6vw, 68px);
  background: #0a0a0a;
}
.page-hero .hero-media { position: absolute; inset: 0; z-index: -1; }
.page-hero .hero-media video, .page-hero .hero-media img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(1.16) contrast(1.04);
}
.page-hero .hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(6, 7, 9, 0.92) 0%, rgba(6, 7, 9, 0.66) 34%, rgba(6, 7, 9, 0.30) 72%, rgba(6, 7, 9, 0.44) 100%),
    linear-gradient(100deg, rgba(6, 7, 9, 0.62) 0%, rgba(6, 7, 9, 0.22) 55%, rgba(6, 7, 9, 0) 82%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1.display { font-size: var(--h1); }
.page-hero p.lead { max-width: 60ch; margin: clamp(14px, 2vw, 22px) 0 clamp(22px, 3vw, 30px); }
.page-hero .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); }
.ph-center { align-items: center; text-align: center; }
.ph-center .wrap { text-align: center; }
.ph-center p.lead { margin-inline: auto; }
.ph-center .hero-ctas { justify-content: center; }
.ph-center .eyebrow::before { display: none; }

/* --------------------------------------------------------------------------
   10. .market-card — the six large clickable market cards (feedback #12)
   -------------------------------------------------------------------------- */
.market-grid {
  display: grid; gap: clamp(14px, 2vw, 20px);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .market-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .market-grid { grid-template-columns: repeat(3, 1fr); } }

.market-card {
  --mc-pad: clamp(22px, 3vw, 30px);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; min-height: 264px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--hair);
  padding: var(--mc-pad);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.market-card:has(.mc-media) { padding-top: 0; }
.market-card::after {                       /* blue edge-light wipe, on hover only */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--accent-text), var(--accent));
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}
.market-card:hover, .market-card:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.market-card:hover::after, .market-card:focus-visible::after { transform: scaleX(1); }
.market-card:focus-visible { outline-offset: 4px; }

/* Optional media header — a real image band across the top of the card, not a
   washed-out backdrop. Reads identically on light and dark surfaces. */
.mc-media {
  position: relative; display: block; overflow: hidden;
  height: clamp(140px, 17vw, 176px);
  margin: 0 calc(var(--mc-pad) * -1) var(--mc-pad);
}
.mc-media img, .mc-media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.1); transition: transform 0.9s var(--ease-out);
}
.market-card:hover .mc-media img, .market-card:hover .mc-media video { transform: scale(1.06); }
.mc-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 7, 9, 0.55) 0%, rgba(6, 7, 9, 0.10) 55%, rgba(6, 7, 9, 0) 100%);
}

.mc-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 16px; flex-shrink: 0;
  background: rgba(83, 86, 90, 0.14); box-shadow: inset 0 0 0 1px rgba(83, 86, 90, 0.40);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: background var(--dur-2) var(--ease-out);
}
.mc-icon svg { width: 24px; height: 24px; stroke: var(--accent-text); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.market-card:hover .mc-icon { background: rgba(83, 86, 90, 0.24); }

.mc-title {
  display: block; font-family: "Chakra Petch", "Montserrat", sans-serif;
  font-size: var(--h3); font-weight: 700; line-height: 1.04; text-transform: uppercase;
  color: var(--ink-strong); margin-bottom: 12px;
}
.mc-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.mc-list li {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--text);
  padding: 5px 11px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--hair);
}
.band-light .mc-list li { background: rgba(16, 18, 21, 0.045); }
.mc-desc { font-size: var(--t-sm); color: var(--text); margin-bottom: 18px; }
.mc-cue {
  display: inline-flex; align-items: center; gap: 9px; margin-top: auto;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-strong);
}
.mc-cue::after { content: "→"; color: var(--accent-text); transition: transform var(--dur-1) var(--ease-out); }
.market-card:hover .mc-cue::after { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   11. .scope-list — spec-sheet capability list (feedback #13 + #14)
   -------------------------------------------------------------------------- */
.scope-list { display: grid; gap: 0; border-top: 1px solid var(--hair); counter-reset: scope; }
.scope-list.cols-2 { grid-template-columns: 1fr; }
.scope-list.cols-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .scope-list.cols-2 { grid-template-columns: repeat(2, 1fr); column-gap: clamp(24px, 4vw, 56px); }
}
@media (min-width: 1000px) {
  .scope-list.cols-3 { grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 3vw, 44px); }
}

.scope-item {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: 4px 16px; padding: 17px 4px 16px;
  border-bottom: 1px solid var(--hair);
  transition: background var(--dur-1) var(--ease-out);
}
.scope-item:hover { background: rgba(83, 86, 90, 0.045); }
.si-index {
  font-family: "Chakra Petch", monospace; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.12em; color: var(--accent-text); font-variant-numeric: tabular-nums;
  min-width: 2.4ch;
}
.si-index::before { counter-increment: scope; content: counter(scope, decimal-leading-zero); }
.si-index.manual::before { content: none; }
.si-name {
  font-family: "Chakra Petch", "Montserrat", sans-serif; font-size: var(--t-md); font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-strong); line-height: 1.2;
  display: flex; align-items: baseline; gap: 12px;
}
.si-name::after {                            /* dot leader — the spec-sheet tell */
  content: ""; flex: 1 1 auto; height: 0;
  border-bottom: 1px dashed var(--hair-strong); transform: translateY(-3px);
}
.si-note { grid-column: 2; font-size: var(--t-sm); color: var(--text-dim); line-height: 1.5; }
.scope-item.is-lead { border-bottom-color: var(--hair-strong); }

/* --------------------------------------------------------------------------
   12. .roadmap — the 6-step visual process (feedback #16)
   -------------------------------------------------------------------------- */
.roadmap {
  position: relative; display: grid; gap: 0;
  grid-template-columns: 1fr;
  --rm-node: 54px;
}
.roadmap::before, .roadmap::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--rm-node) / 2 - 1px); top: calc(var(--rm-node) / 2);
  bottom: calc(var(--rm-node) / 2); width: 2px;
}
.roadmap::before { background: var(--hair-strong); }
.roadmap::after {
  background: linear-gradient(180deg, var(--accent-text), var(--accent));
  transform: scaleY(0); transform-origin: top center;
  transition: transform 1500ms cubic-bezier(0.35, 0, 0.2, 1);
  box-shadow: 0 0 14px rgba(83, 86, 90, 0.5);
}
.roadmap.is-drawn::after { transform: scaleY(1); }

.rm-step { position: relative; z-index: 1; display: grid; grid-template-columns: var(--rm-node) 1fr; gap: 18px; padding-bottom: clamp(24px, 4vw, 36px); }
.rm-step:last-child { padding-bottom: 0; }
.rm-node {
  width: var(--rm-node); height: var(--rm-node); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-sunk); box-shadow: inset 0 0 0 2px var(--hair-strong);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  transition: box-shadow var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out);
}
.band-light .rm-node { background: var(--paper-2); }
.rm-num {
  font-family: "Chakra Petch", "Montserrat", sans-serif; font-size: 19px; font-weight: 700;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
  transition: color var(--dur-3) var(--ease-out);
}
.rm-step.is-on .rm-node { box-shadow: inset 0 0 0 2px var(--accent), 0 0 22px rgba(83, 86, 90, 0.35); background: rgba(83, 86, 90, 0.10); }
.rm-step.is-on .rm-num { color: var(--accent-text); }
.rm-body { padding-top: 6px; }
.rm-title {
  display: block; font-family: "Chakra Petch", "Montserrat", sans-serif;
  font-size: var(--t-md); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink-strong); line-height: 1.15;
}
.rm-note { display: block; font-size: var(--t-sm); color: var(--text-dim); margin-top: 6px; max-width: 34ch; }

@media (min-width: 900px) {
  /* gap MUST stay 0 — the rail spans centre-of-first to centre-of-last using
     100%/12, which is only exact when the columns are gapless. Breathing room
     comes from .rm-body padding instead. */
  .roadmap { grid-template-columns: repeat(6, 1fr); gap: 0; }
  .rm-body { padding-inline: clamp(6px, 1.2vw, 16px); }
  .roadmap.steps-4 { grid-template-columns: repeat(4, 1fr); }
  .roadmap.steps-5 { grid-template-columns: repeat(5, 1fr); }
  .roadmap::before, .roadmap::after {
    left: calc(100% / 12); right: calc(100% / 12); top: calc(var(--rm-node) / 2 - 1px);
    bottom: auto; width: auto; height: 2px;
  }
  .roadmap::after {
    background: linear-gradient(90deg, var(--accent-text), var(--accent));
    transform: scaleX(0); transform-origin: left center;
  }
  .roadmap.is-drawn::after { transform: scaleX(1); }
  .roadmap.steps-4::before, .roadmap.steps-4::after { left: 12.5%; right: 12.5%; }
  .roadmap.steps-5::before, .roadmap.steps-5::after { left: 10%; right: 10%; }
  .rm-step { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; padding-bottom: 0; }
  .rm-body { padding-top: 0; }
  .rm-note { margin-inline: auto; }
}
/* stagger — CSS-driven, page agents add no inline styles */
.rm-step .rm-node, .rm-step .rm-num { transition-delay: 0ms; }
.roadmap.is-drawn .rm-step:nth-child(1) { --d: 120ms; }
.roadmap.is-drawn .rm-step:nth-child(2) { --d: 320ms; }
.roadmap.is-drawn .rm-step:nth-child(3) { --d: 520ms; }
.roadmap.is-drawn .rm-step:nth-child(4) { --d: 720ms; }
.roadmap.is-drawn .rm-step:nth-child(5) { --d: 920ms; }
.roadmap.is-drawn .rm-step:nth-child(6) { --d: 1120ms; }
.roadmap.is-drawn .rm-step .rm-node, .roadmap.is-drawn .rm-step .rm-num { transition-delay: var(--d, 0ms); }

/* --------------------------------------------------------------------------
   13. .why-builders — "we think like builders" (feedback #15)
   -------------------------------------------------------------------------- */
.why-builders { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (min-width: 640px) { .why-builders { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why-builders { grid-template-columns: repeat(3, 1fr); } }
.wb {
  background: var(--surface); padding: clamp(24px, 3vw, 34px) clamp(20px, 2.5vw, 30px);
  display: flex; flex-direction: column; gap: 10px;
  transition: background var(--dur-2) var(--ease-out);
}
.wb:hover { background: var(--surface-2); }
.wb-mark { width: 30px; height: 4px; background: var(--accent); transform: skewX(-30deg); flex-shrink: 0; }
.wb b {
  font-family: "Chakra Petch", "Montserrat", sans-serif; font-size: var(--t-lg); font-weight: 700;
  line-height: 1.14; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-strong);
}
.wb span { font-size: var(--t-sm); color: var(--text-dim); }

/* --------------------------------------------------------------------------
   14. .service-map — interactive coverage map (feedback #18)
   -------------------------------------------------------------------------- */
.service-map { display: grid; gap: clamp(24px, 4vw, 44px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .service-map { grid-template-columns: 1.12fr 0.88fr; } }

.sm-canvas {
  position: relative; background: var(--surface-sunk); border: 1px solid var(--hair);
  padding: clamp(14px, 2vw, 22px); overflow: hidden;
}
.sm-canvas svg { width: 100%; height: auto; display: block; }
.sm-region {
  fill: rgba(255, 255, 255, 0.05); stroke: var(--hair-strong); stroke-width: 1.5;
  cursor: pointer; transition: fill var(--dur-2) var(--ease-out), stroke var(--dur-2) var(--ease-out);
}
.band-light .sm-region { fill: rgba(16, 18, 21, 0.05); }
.sm-region:hover, .sm-region:focus-visible { fill: rgba(83, 86, 90, 0.22); stroke: var(--accent-text); }
.sm-region.is-active { fill: rgba(83, 86, 90, 0.30); stroke: var(--accent-text); stroke-width: 2; }
.sm-region:focus-visible { outline: none; stroke: var(--accent-text); stroke-width: 3; }
/* SVG font sizes are user units and shrink with the viewBox. These are set so
   they still render at or above the 14px floor once the canvas is scaled. */
.sm-label {
  fill: var(--text-dim); font-family: "Chakra Petch", "Montserrat", sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; pointer-events: none;
}
.sm-label.is-active { fill: var(--accent-text); }
.sm-pin { fill: var(--accent-text); pointer-events: none; transition: r var(--dur-2) var(--ease-out); }
.sm-pin-label { fill: var(--text-dim); font-size: 15px; font-weight: 600; pointer-events: none; }
.sm-note { font-size: var(--t-xs); color: var(--text-dim); margin-top: 12px; }
/* SVG text scales with the viewBox. Below 720px the canvas shrinks to ~0.47x,
   which would render the pin labels at ~6px — drop them and lean on the city
   list instead, and scale the region labels back up to a legible size. */
@media (max-width: 720px) {
  .sm-pin, .sm-pin-label { display: none; }
  .sm-label { font-size: 28px; letter-spacing: 0.1em; }
}

.sm-key { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s5); }
.sm-key button {
  min-height: 44px; padding: 10px 18px;
  font-family: "Chakra Petch", "Montserrat", sans-serif; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair-strong);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.sm-key button:hover { color: var(--ink-strong); box-shadow: inset 0 0 0 1px var(--accent); }
.sm-key button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }
.sm-key button:focus-visible { clip-path: none; }

.sm-cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.sm-city {
  background: var(--surface); padding: 14px 16px; min-height: 52px; display: flex; align-items: center; gap: 10px;
  font-size: var(--t-sm); font-weight: 600; color: var(--text);
  transition: background var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.sm-city::before { content: ""; width: 7px; height: 7px; background: var(--steel); transform: skewX(-20deg); flex-shrink: 0; transition: background var(--dur-1) var(--ease-out); }
.sm-city.is-match { color: var(--ink-strong); background: var(--surface-2); }
.sm-city.is-match::before { background: var(--accent); }
.sm-city.is-dim { opacity: 0.34; }
.sm-empty { padding: 16px; font-size: var(--t-sm); color: var(--text-dim); }

/* --------------------------------------------------------------------------
   15. .apply-form + forms (feedback #17)
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--surface); border: 1px solid var(--hair);
  padding: clamp(22px, 4vw, 44px); box-shadow: var(--shadow-a);
}
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
}
.field .req { color: var(--accent-text); }
.field input, .field select, .field textarea {
  background: var(--surface-sunk); border: 1px solid var(--hair-strong); color: var(--ink-strong);
  padding: 14px 16px; font-size: 16px;      /* 16px minimum — stops iOS zoom-on-focus */
  border-radius: 2px; width: 100%;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.band-light .field input, .band-light .field select, .band-light .field textarea { background: var(--paper-2); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); opacity: 0.75; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--hair-strong); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(83, 86, 90, 0.32);
}
.field textarea { min-height: 132px; resize: vertical; }
.field-help { font-size: var(--t-xs); color: var(--text-dim); }
.field-error { font-size: var(--t-xs); color: #ff9b8a; font-weight: 700; }

/* file upload */
.file-field { display: flex; flex-direction: column; gap: 9px; }
.file-drop {
  position: relative;
  display: flex; align-items: center; gap: 14px; min-height: 68px;
  padding: 14px 18px; background: var(--surface-sunk);
  border: 1px dashed var(--hair-strong); border-radius: 2px; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.band-light .file-drop { background: var(--paper-2); }
/* .file-drop is itself a <label>, so it matches .field label — out-specify it. */
.field label.file-drop, .file-drop { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--text); font-size: var(--t-sm); }
.file-drop:hover, .file-drop:focus-within { border-color: var(--accent); background: rgba(83, 86, 90, 0.06); }
.file-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop svg { width: 24px; height: 24px; stroke: var(--accent-text); fill: none; stroke-width: 1.7; flex-shrink: 0; }
.file-drop .fd-text { font-size: var(--t-sm); color: var(--text); }
.file-drop .fd-text b { display: block; color: var(--ink-strong); font-size: var(--t-sm); font-weight: 700; }
.file-name { font-size: var(--t-xs); color: var(--accent-text); font-weight: 700; }

.apply-form .form-actions,
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s2); }
.form-note { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--text-dim); }

/* HARD SAFEGUARD: rendered by site.js when a form has no live endpoint.
   Never ship a form that silently swallows a lead. */
.form-fallback {
  grid-column: 1 / -1; display: none; gap: 12px; flex-direction: column;
  padding: 18px 20px; background: rgba(255, 176, 66, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 66, 0.35);
  font-size: var(--t-sm); color: var(--text);
}
.form-fallback.is-shown { display: flex; }
.form-fallback b { color: var(--ink-strong); }

/* --------------------------------------------------------------------------
   16. .resource-grid — client resource centre (feedback #20)
   -------------------------------------------------------------------------- */
.resource-grid { display: grid; gap: clamp(14px, 2vw, 18px); grid-template-columns: 1fr; }
@media (min-width: 620px) { .resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .resource-grid { grid-template-columns: repeat(3, 1fr); } }

.rc-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px; min-height: 190px;
  background: var(--surface); border: 1px solid var(--hair);
  padding: clamp(20px, 2.6vw, 28px);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.rc-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-text), var(--accent));
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}
a.rc-card:hover, a.rc-card:focus-visible { transform: translateY(-4px); border-color: var(--hair-strong); box-shadow: var(--shadow-lift); }
a.rc-card:hover::after, a.rc-card:focus-visible::after { transform: scaleX(1); }
.rc-kind {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-text);
}
.rc-kind svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.rc-title {
  font-family: "Chakra Petch", "Montserrat", sans-serif; font-size: var(--t-lg); font-weight: 700;
  text-transform: uppercase; line-height: 1.14; color: var(--ink-strong);
}
.rc-desc { font-size: var(--t-sm); color: var(--text); flex: 1 1 auto; }
.rc-action {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: auto;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-strong);
}
.rc-action::after { content: "→"; color: var(--accent-text); transition: transform var(--dur-1) var(--ease-out); }
.rc-card:hover .rc-action::after { transform: translateX(5px); }
.rc-card[data-state="request"] .rc-action::after { content: "✉"; }

/* --------------------------------------------------------------------------
   17. .sticky-cta — the persistent call to action (feedback #19)
   -------------------------------------------------------------------------- */
.sticky-cta, .sticky-call {
  position: fixed; inset: auto 0 0 0; z-index: 95;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px clamp(12px, 4vw, 18px) calc(10px + env(safe-area-inset-bottom));
  background: rgba(8, 9, 10, 0.96);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-strong);
  transform: translateY(115%);
  transition: transform var(--dur-3) var(--ease-out);
}
.sticky-cta.is-on, .sticky-call.is-on { transform: none; }
.sticky-cta.is-tucked { transform: translateY(115%); }
.sticky-cta a, .sticky-call a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  font-family: "Chakra Petch", "Montserrat", sans-serif;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.sticky-cta a:focus-visible { clip-path: none; }
.sticky-cta .sc-call, .sticky-call .sc-call { background: var(--accent); color: #fff; }
.sticky-cta .sc-call:hover { background: var(--accent-text); }
.sticky-cta .sc-bid, .sticky-call .sc-bid { background: rgba(255, 255, 255, 0.10); color: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); }
.sticky-cta svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }

/* clearance so the bar never covers the footer */
body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }

/* DESKTOP: the pill is OFF (Giuseppe, Jul 27 2026 — "fix it").

   It used to float bottom-right at 346x70. Because it is position:fixed, it sat
   over whatever happened to be in that corner — and a scroll-position sweep of
   all 9 pages at 1440x900 found it covering content at ~25 positions, including
   FORM LABELS on /contact, /careers and /client-resources. That is not a
   cosmetic overlap; it hides fields while someone is filling them in.

   Body padding cannot fix this: padding reserves space at the end of the
   DOCUMENT, while a fixed element floats over the VIEWPORT — it only ever
   solved the footer case, which is why the footer needed its own JS tuck.

   Nothing is lost on desktop. The header is sticky and hide-on-scroll-DOWN /
   return-on-scroll-UP (see initHeader), so it comes back on any upward gesture,
   and it already carries "Request a Bid" with the phone number in the util bar.
   The pill stays on mobile, where it is the correct pattern — the header
   collapses to a hamburger and a bottom bar is in thumb reach. */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .sticky-cta, .sticky-call { display: none; }
}

/* --------------------------------------------------------------------------
   18. .duo-grid / .duo-card — the in-page division split (feedback #8)
   -------------------------------------------------------------------------- */
.duo-grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.4vw, 24px); }
@media (min-width: 860px) { .duo-grid { grid-template-columns: 1fr 1fr; } }

.duo-card {
  position: relative; isolation: isolate; overflow: hidden;
  /* centred, not bottom-anchored — the two cards carry different chip counts and
     flex-end made Commercial Service start visibly lower than New Construction */
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  min-height: clamp(400px, 48vw, 520px);
  padding: clamp(30px, 3.8vw, 48px);
  border: 1px solid var(--hair);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.duo-card:hover, .duo-card:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.duo-card:focus-visible { clip-path: none; }
.duo-media { position: absolute; inset: 0; z-index: -1; }
.duo-media img, .duo-media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.14) contrast(1.03); transition: transform 0.9s var(--ease-out);
}
.duo-card:hover .duo-media img, .duo-card:hover .duo-media video { transform: scale(1.05); }
.duo-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 7, 9, 0.93) 4%, rgba(6, 7, 9, 0.55) 46%, rgba(6, 7, 9, 0.18) 100%);
  transition: background var(--dur-3) var(--ease-out);
}
.duo-card:hover .duo-media::after {
  background: linear-gradient(to top, rgba(8, 9, 10, 0.93) 4%, rgba(12, 13, 15, 0.52) 46%, rgba(6, 7, 9, 0.16) 100%);
}
.duo-tag {
  display: inline-block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px;
}
.duo-card h3.display, .duo-card .duo-title {
  font-family: "Chakra Petch", "Montserrat", sans-serif;
  font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; line-height: 1.0; text-transform: uppercase;
  color: #fff; margin-bottom: 12px;
}
.duo-card p, .duo-card .duo-p { display: block; color: #d7dce2; font-size: var(--t-sm); max-width: 42ch; margin: 0 auto 22px; }
.duo-card .link-cue { color: #fff; }

/* --------------------------------------------------------------------------
   19. Kept components — capability strip, service cards, chips, why cards
   -------------------------------------------------------------------------- */
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (min-width: 620px) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cap-grid { grid-template-columns: repeat(5, 1fr); } }
.cap {
  background: var(--surface); padding: clamp(24px, 3vw, 34px) 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 13px; min-height: 132px;
  transition: background var(--dur-2) var(--ease-out);
}
.cap:hover { background: var(--surface-2); }
.cap svg { width: 32px; height: 32px; stroke: var(--text-dim); fill: none; stroke-width: 1.6; transition: stroke var(--dur-2) var(--ease-out); }
.cap:hover svg { stroke: var(--accent-text); }
.cap span { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-strong); }

.svc-grid { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
@media (min-width: 620px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hair);
  padding: clamp(22px, 3vw, 30px);
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.svc::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-text), var(--accent));
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}
.svc:hover { border-color: var(--hair-strong); transform: translateY(-4px); box-shadow: var(--shadow-b); }
.svc:hover::after { transform: scaleX(1); }
.svc h3 { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; color: var(--ink-strong); }
.svc h3::before { content: ""; width: 9px; height: 9px; background: var(--steel); transform: skewX(-20deg); flex-shrink: 0; transition: background var(--dur-2) var(--ease-out); }
.svc:hover h3::before { background: var(--accent); }
.svc p { font-size: var(--t-sm); color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  padding: 11px 20px; min-height: 44px; display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--hair-strong);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.band-light .chips li { background: rgba(16, 18, 21, 0.045); }

.why-grid { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
@media (min-width: 900px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why { background: var(--surface); border: 1px solid var(--hair); padding: clamp(22px, 3vw, 30px); }
.why h3 { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; color: var(--ink-strong); }
.why h3::before { content: ""; width: 9px; height: 9px; background: var(--accent); transform: skewX(-20deg); flex-shrink: 0; }
.why p { font-size: var(--t-sm); color: var(--text); }

/* leadership credentials (feedback #21) */
.cred-list { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (min-width: 760px) { .cred-list { grid-template-columns: repeat(2, 1fr); } }
.cred {
  background: var(--surface); padding: 20px 24px; display: flex; align-items: flex-start; gap: 14px;
  font-size: var(--t-sm); font-weight: 600; color: var(--text);
}
.cred::before { content: ""; width: 10px; height: 10px; margin-top: 7px; background: var(--accent); transform: skewX(-20deg); flex-shrink: 0; }
.cred b { color: var(--ink-strong); font-weight: 700; }

/* --------------------------------------------------------------------------
   20. MEDIA — marquees, video strip, ambience. NO desaturation anywhere.
   -------------------------------------------------------------------------- */
.logo-marquee { overflow: hidden; position: relative; padding: 14px 0; }
.logo-marquee::before, .logo-marquee::after { content: ""; position: absolute; inset-block: 0; width: clamp(48px, 10vw, 110px); z-index: 2; pointer-events: none; }
.logo-marquee::before { left: 0; background: linear-gradient(90deg, var(--marquee-fade, var(--charcoal)), transparent); }
.logo-marquee::after { right: 0; background: linear-gradient(-90deg, var(--marquee-fade, var(--charcoal)), transparent); }
.band-light .logo-marquee { --marquee-fade: var(--paper); }
.band-dark .logo-marquee { --marquee-fade: var(--black); }
.logo-track { display: flex; align-items: center; gap: clamp(48px, 8vw, 96px); width: max-content; animation: roll 40s linear infinite; padding-right: clamp(48px, 8vw, 96px); }
.logo-marquee:hover .logo-track, .logo-marquee:focus-within .logo-track { animation-play-state: paused; }
.logo-track img {
  height: clamp(46px, 7vw, 70px); width: auto; max-width: 200px; object-fit: contain; flex-shrink: 0;
  opacity: 0.8; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.logo-track img:hover { opacity: 1; transform: scale(1.04); }
/* The builder logo files are dark ink on transparent. On a light band they need
   NO filter. On a dark band they must be inverted, not grayscale-blown. */
.band-dark .logo-track img, .band-charcoal .logo-track img { filter: brightness(0) invert(1); opacity: 0.62; }
.band-dark .logo-track img:hover, .band-charcoal .logo-track img:hover { opacity: 0.95; }

.marquee { overflow: hidden; position: relative; }
.marquee::before, .marquee::after { content: ""; position: absolute; inset-block: 0; width: clamp(40px, 8vw, 90px); z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--marquee-fade, var(--black)), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--marquee-fade, var(--black)), transparent); }
.band-light .marquee { --marquee-fade: var(--paper); }
.marquee-track { display: flex; gap: 18px; width: max-content; animation: roll 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.m-col { display: flex; flex-direction: column; gap: 18px; width: clamp(220px, 26vw, 300px); flex-shrink: 0; }
.m-col img { width: 100%; object-fit: cover; border: 1px solid var(--hair); filter: saturate(1.08); }
.m-col .tall { height: clamp(240px, 30vw, 340px); }
.m-col .short { height: clamp(150px, 18vw, 200px); }

.video-strip { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .video-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .video-strip { grid-template-columns: repeat(4, 1fr); } }
.video-strip video, .video-strip img {
  width: 100%; height: clamp(180px, 22vw, 250px); object-fit: cover;
  border: 1px solid var(--hair); filter: saturate(1.12) contrast(1.02);
}

.media-frame { position: relative; overflow: hidden; border: 1px solid var(--hair); }
.media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.12); }
.media-cap { font-size: var(--t-xs); color: var(--text-dim); margin-top: 10px; }

/* AMBIENCE — licensed stock used ONLY as category atmosphere.
   Anything inside .ambience must carry a .media-cap naming the CATEGORY.
   It may never sit under an "our work" heading. */
.ambience { position: relative; }
.ambience .media-cap::before { content: "Category imagery · "; color: var(--text-dim); }

.fleet-pair { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .fleet-pair { grid-template-columns: 1fr 1fr; } }
.fleet-pair img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--hair); }

/* --------------------------------------------------------------------------
   21. TEAM
   -------------------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 2vw, 18px); }
@media (min-width: 620px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .team-grid { grid-template-columns: repeat(5, 1fr); } }
.team-grid.lead-row { grid-template-columns: repeat(auto-fit, minmax(190px, 260px)); justify-content: center; }
.tm {
  background: var(--surface); border: 1px solid var(--hair); overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.tm:hover { transform: translateY(-4px); border-color: var(--hair-strong); box-shadow: var(--shadow-b); }
.tm .tm-photo { aspect-ratio: 4 / 5; overflow: hidden; position: relative; background: var(--surface-sunk); }
.tm .tm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: saturate(1.06); }
.tm .tm-initials {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2b2f34, #101113);
  font-family: "Chakra Petch", sans-serif; font-size: clamp(32px, 6vw, 50px); font-weight: 700; color: var(--silver);
}
.tm .tm-meta { padding: 14px 13px; text-align: center; }
.tm .tm-meta b { display: block; color: var(--ink-strong); font-size: var(--t-sm); font-weight: 800; }
.tm .tm-meta span { font-size: var(--t-xs); font-weight: 600; color: var(--accent-text); letter-spacing: 0.03em; }
.team-group { margin-bottom: clamp(40px, 6vw, 64px); }
.team-group .tg-head { text-align: center; margin-bottom: var(--s6); }
.team-group .tg-head h3 { font-size: var(--h3); }
.team-group .tg-head p { font-size: var(--t-sm); color: var(--text-dim); margin-top: 6px; }

/* --------------------------------------------------------------------------
   22. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band, .band-accent {
  position: relative; overflow: hidden;
  background: linear-gradient(118deg, #0a0a0a 0%, #2b2e31 54%, var(--gun) 100%);
  padding: clamp(56px, 8vw, 96px) 0;
  --ink-strong: #ffffff; --text: #d8dade; --hair: rgba(255, 255, 255, 0.24); --hair-strong: rgba(255, 255, 255, 0.4);
}
.cta-band::before {
  content: ""; position: absolute; inset: -40px -60px -40px auto; width: 46%;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.055) 0 26px, transparent 26px 78px);
  transform: skewX(-12deg); pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 2; text-align: center; }
.cta-band .eyebrow { color: var(--silver); }
.cta-band h2 { font-size: var(--h2); font-weight: 700; color: #fff; -webkit-text-fill-color: #fff; background: none; }
.cta-band p { color: #d8dade; max-width: 58ch; margin: var(--s4) auto var(--s6); font-weight: 500; font-size: var(--t-md); }
.cta-band .hero-ctas, .cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
.cta-band .btn-primary { background: #fff; color: var(--black); }
.cta-band .btn-primary:hover { background: #eeeeee; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.cta-band .btn-ghost { background: rgba(255, 255, 255, 0.10); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, 0.2); }
.cta-band .cta-sub { font-size: var(--t-xs); color: var(--silver); margin-top: var(--s5); letter-spacing: 0.06em; }

/* --------------------------------------------------------------------------
   23. CONTACT
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 48px); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 360px 1fr; } }
.contact-list li { display: flex; gap: 15px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.contact-list svg { width: 21px; height: 21px; stroke: var(--accent-text); fill: none; stroke-width: 1.8; flex-shrink: 0; margin-top: 4px; }
.contact-list b { display: block; color: var(--ink-strong); font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.contact-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.contact-list a:hover { color: var(--accent-text); }

/* --------------------------------------------------------------------------
   24. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--charcoal); border-top: 1px solid var(--line); padding: clamp(44px, 6vw, 68px) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); padding-bottom: clamp(32px, 5vw, 48px); }
@media (min-width: 620px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.3fr; } }
.site-footer h4 { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin-bottom: 15px; }
.site-footer ul li { margin-bottom: 2px; }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-sm); color: #b4b8bc; }
.site-footer ul a:hover { color: #fff; }
.site-footer ul li.plain { font-size: var(--t-sm); color: #b4b8bc; padding-block: 11px; }
.footer-brand .fb-logo { display: inline-block; margin-bottom: 14px; }
.footer-brand .fb-logo img { width: clamp(170px, 26vw, 210px); height: auto; }
.footer-brand p { font-size: var(--t-sm); max-width: 34ch; color: var(--gun-bright); }
.footer-tag { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); margin-top: 14px; }
.footer-bottom {
  border-top: 1px solid var(--line); padding: 20px 0 26px; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 10px; font-size: var(--t-xs); color: var(--gun-bright);
}
.footer-bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   25. REVEAL ON SCROLL — opt-in, never required for content to exist
   -------------------------------------------------------------------------- */
.js.anim [data-reveal] { opacity: 0; transform: translateY(18px); }
.js.anim [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.js.anim [data-reveal="1"].is-in { transition-delay: 90ms; }
.js.anim [data-reveal="2"].is-in { transition-delay: 180ms; }
.js.anim [data-reveal="3"].is-in { transition-delay: 270ms; }
.js.anim [data-reveal="4"].is-in { transition-delay: 360ms; }

/* --------------------------------------------------------------------------
   26. REDUCED MOTION — global, non-negotiable
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .logo-track, .marquee-track { animation: none !important; transform: none !important; }
  .marquee, .logo-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hero-mark, .hero-ghost { opacity: 1 !important; transform: none !important; }
  .hero-ghost { opacity: 0.075 !important; transform: translateY(-50%) !important; }
  .hero-dust, .hero-shock { display: none !important; }
  .roadmap::after { transform: none !important; }
  .rm-step .rm-node { box-shadow: inset 0 0 0 2px var(--accent) !important; }
  .rm-step .rm-num { color: var(--accent-text) !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   27. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .util-bar, .sticky-cta, .sticky-call, .hero-dust, .hero-ghost, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .band-dark, .band-charcoal, .cta-band { background: #fff !important; }
  h1, h2, h3, h4, .display { color: #000 !important; -webkit-text-fill-color: #000 !important; background: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* hero quick-links — John, Jul 27: "just have a hyperlink to new construction,
   a hyperlink to commercial service and call it a day" */
.hero-links { margin-top: var(--s3); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.hero-links a { color: var(--accent-text); text-decoration: none;
  border-bottom: 1px solid rgba(154, 160, 166, 0.45); padding-bottom: 2px; }
.hero-links a:hover { color: var(--ink-strong); border-bottom-color: currentColor; }

/* one progression, referenced everywhere else — John, Jul 27: "have the list
   somewhere on the website just one time" */
.scope-ref { font-size: var(--t-sm); color: var(--text-dim); margin-top: var(--s4); }
.scope-ref a { color: var(--accent-text); }

/* small sister-company link, bottom of the footer — John, Jul 27: "a small
   hyperlink at the bottom just like what they've got, just to [be] consistent" */
.footer-sister { font-size: 13px; color: var(--text-dim); opacity: 0.72; }
.footer-sister a { color: inherit; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }
.footer-sister a:hover { color: var(--ink-strong); opacity: 1; }



/* market groups — two headers, boxes beneath, LEFT-ALIGNED and column-matched
   so the two groups line up with each other (Giuseppe, Jul 27) */
.market-group-title {
  font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.01em; color: var(--ink-strong); text-align: left;
  margin: clamp(30px, 4vw, 46px) 0 clamp(14px, 1.8vw, 20px);
  padding-bottom: 10px; border-bottom: 2px solid var(--hair-strong);
}
.market-group-title:first-of-type { margin-top: 0; }
/* both groups share the 3-col template so cards align across groups */
@media (min-width: 1000px) { .market-grid { grid-template-columns: repeat(3, 1fr); } }

/* ambience frames carry no intrinsic height — give them the clip's ratio */
.ambience .media-frame { aspect-ratio: 16 / 9; }
.ambience { margin: 0 0 clamp(22px, 3vw, 32px); }

/* division cards — centred composition (Giuseppe, Jul 27) */
.duo-card .chips { justify-content: center; gap: 8px; margin-bottom: 26px; }
.duo-card .chips li { padding: 9px 15px; min-height: 38px; font-size: 12px; letter-spacing: 0.06em; }
.duo-card .duo-tag { letter-spacing: 0.3em; margin-bottom: 14px; }
.duo-card .duo-title { margin-bottom: 14px; }
/* hairline over the link so the two cards close on the same visual beat */
.duo-card .link-cue {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--hair-strong);
  width: 100%; justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   BLUE ACCENT LAYER — Giuseppe, Jul 27: "small hints of the blue throughout."
   The hierarchy is unchanged: black primary, white secondary, gunmetal third.
   Blue is used for ONE consistent job — it marks things: section ticks, step
   numerals, and whatever the user is touching (hover / focus). It is never a
   surface, a fill, or body text. Dial the whole layer back by deleting this
   block; nothing structural depends on it.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. the tick before every section eyebrow */
.eyebrow::before { background: var(--blue); }

/* 2. the 01–09 step numerals */
.si-index { color: var(--blue-bright); }
.band-light .si-index { color: var(--blue-ink); }

/* 3. arrows light up blue on hover — gunmetal at rest */
.link-cue:hover::after,
.band-light .link-cue:hover::after { color: var(--blue-bright); }
.band-light .link-cue:hover::after { color: var(--blue-ink); }

/* 4. the sweep under a card on hover */
.market-card::after { background: var(--blue); }

/* 5. chips pick up a blue edge on hover */
.chips li { transition: box-shadow var(--dur-1) var(--ease-out); }
.chips li:hover { box-shadow: inset 3px 0 0 0 var(--blue), inset 0 0 0 1px var(--hair-strong); }

/* 6. focus + live form fields — blue means "this is yours to touch" */
:focus-visible { outline-color: var(--blue-bright); }
.band-light :focus-visible { outline-color: var(--blue-ink); }
.field:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.28);
}

/* 7. the footer strapline */
.footer-tag { color: var(--blue-bright); }

/* 8. hairline that opens each market group */
.market-group-title { border-bottom-color: var(--gun); box-shadow: inset 0 -2px 0 -1px transparent; }
.market-group-title::after {
  content: ""; display: block; width: 52px; height: 2px; background: var(--blue);
  margin-top: 10px; margin-bottom: -12px; transform: skewX(-30deg);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PASS — Jul 27, audited live at 390px across all 9 pages.
   Page overflow was already zero everywhere; these are the tap-target and
   containment fixes the audit turned up.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* util-bar links measured 38px — below the 44px touch minimum */
  .util-bar a { min-height: 44px; padding-block: 8px; }

  /* the sister-company footer link was 16px tall — worst offender on the site */
  .footer-sister { width: 100%; }
  .footer-sister a { display: inline-flex; align-items: center; min-height: 44px; }

  /* contact-list rows measured 19px, and the list ran 47px past its container:
     li is a flex row, so its min-content width was pinned to the longest
     unbreakable string — office@sweetwatermechanical.com. The inner div needs
     min-width:0 before it will shrink, and the anchor needs a break opportunity. */
  /* .contact-list is a GRID ITEM — grid children default to min-width:auto,
     which is what was pinning it 47px past its column. */
  .contact-list { max-width: 100%; min-width: 0; }
  .contact-list a, .contact-list li > a { min-height: 44px; }
  .contact-list li { min-width: 0; }
  .contact-list li > div { min-width: 0; flex: 1 1 auto; }
  .contact-list a { overflow-wrap: anywhere; word-break: break-word; }

  /* the bid-form fallback links measured 19px */
  .form-fallback a { display: inline-flex; align-items: center; min-height: 44px;
                     overflow-wrap: anywhere; }
  .form-fallback span { display: inline; }

  /* form controls were 30px */
  .field input, .field textarea, .field select,
  input[type="text"], input[type="tel"], input[type="email"], select, textarea {
    min-height: 48px; font-size: 16px;   /* 16px stops iOS zooming the page on focus */
  }
  textarea { min-height: 120px; }

  /* long addresses and emails must never push the layout */
  .footer-grid a, .site-footer a { overflow-wrap: anywhere; }

  /* the two division cards stack — give them room to breathe rather than
     inheriting the desktop min-height */
  .duo-card { min-height: 0; padding: clamp(26px, 7vw, 34px) clamp(20px, 5vw, 28px); }
  .duo-card .chips li { padding: 9px 14px; min-height: 38px; font-size: 12.5px; }

  /* ambience clips: keep the ratio, lose the fixed height */
  .ambience .media-frame { aspect-ratio: 16 / 10; }
}