/* ============================================================================
   CEYLON BUILD WORKS — css/styles.css  (polish pass 2026-10-21)
   Zero-dependency. Layered token architecture, single source of truth.
   HARD LAW: zero raw hex, zero raw px OUTSIDE the token definition block
   below (:root). px is allowed only inside token values and calc() that
   references tokens; media-query breakpoints are expressed in em.
   ---------------------------------------------------------------------------
   Type roles from assets/fonts/typography_scale.json (v1.0):
     display_header = Montserrat 800 · alt_header/subhead = Barlow Condensed 700/800
     body = Inter 400 · label_cta = Inter 600 .06em · footer_micro = Inter 500 .02em
   Contrast law (Brand Master Sheet §1): gold ONLY with navy; never gold body
   text on white; Tagline Gray never used as body text on light surfaces.
   Fixed light theme is a brand decision — no prefers-color-scheme inversion.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: "Montserrat CBW";
  src: url("../assets/fonts/Montserrat-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed CBW";
  src: url("../assets/fonts/BarlowCondensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed CBW";
  src: url("../assets/fonts/BarlowCondensed-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter CBW";
  src: url("../assets/fonts/Inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter CBW";
  src: url("../assets/fonts/Inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter CBW";
  src: url("../assets/fonts/Inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =============================================================== TOKENS ==
   :root is the ONLY place raw hex / raw px may appear.
   Every rule below this block must consume these tokens.

   TOKEN MAP (token → usage)
   ---------------------------------------------------------------------------
   COLOR — brand ramp (verbatim from assets/brand_palette.json v2.0)
     --navy        #1A2C44  deep blocks, dark backdrops, primary surfaces (60%)
     --gold        #F0BD4B  CTA, emblems, accents (30%) — never body text onwhite
     --charcoal    #22252E  wordmark, body text (10%)
     --gray        #7D7D7F  Tagline Gray — display accents ONLY, never body on light
     --white       #FFFFFF  negative space, knockouts, text on navy
   COLOR — derived, palette-safe (documented derivations)
     --navy-deep     shade of navy for deeper bands (#14213A)
     --surface       4% navy tint over white — light section band (#F4F5F7)
     --ink-soft      AA body-strong secondary on white (6.9:1)
     --ink-faint     meta copy floor (≥4.6:1 on white)
     --navy-deep-rgb channel triplet for rgba() derivatives of navy-deep
   COLOR — rgb channel triplets (feed rgba() derivatives only)
     --navy-rgb / --gold-rgb / --white-rgb / --black-rgb
   COLOR — semantic aliases
     --color-bg          page background
     --color-surface     tinted section band
     --color-surface-raised  card/raised surface
     --color-surface-ink     navy section surface
     --color-surface-ink-deep deeper navy band (header scrolled, footer)
     --color-text        default ink
     --color-text-muted  secondary copy on light
     --color-text-faint  meta copy on light
     --color-text-scrim / --color-text-scrim-soft  copy over photography/navy
     --color-text-on-ink copy on navy surfaces
     --color-border / --color-border-strong  hairlines on light surfaces
     --color-border-on-ink / --color-border-on-ink-soft  hairlines on navy
     --color-accent      brand gold
     --color-accent-strong hover-press step of gold (fixed step, never gradient)
   COLOR — state variants
     --tint-hover-light  4% navy tint hover fill on light surfaces
     --tint-hover-ink    8% white tint hover fill on dark surfaces
     --scrim-header      translucent header bar over the hero photo
     --shadow-veil       black veil used under scrolled header / open menu
   COLOR — print (only hex pair allowed for print inversion)
     --print-ink / --print-bg
   ---------------------------------------------------------------------------
   TYPOGRAPHY — families
     --font-display (Montserrat CBW) · --font-cond (Barlow Condensed CBW)
     --font-body (Inter CBW) · --mono reserved for token docs, not UI
   TYPOGRAPHY — fluid scale (clamp where useful); rem-only outside :root
     --fs-display hero hook · --fs-h2 section heads · --fs-h3 card subheads
     --fs-body-lg 1.0625 ctx sizes (menu links, eyebrows) · --fs-body
     --fs-small 0.9375 · --fs-small-sm 0.875 · --fs-micro 0.8125
     --fs-fine 0.75 price units · --fs-step 1.375 process numerals
   TYPOGRAPHY — rhythm & tracking
     --lh-tight 1.05 display · --lh-heading 1.15 h2/h3 · --lh-body 1.45
     --lh-snug 1.5 cards/footer · --lh-loose 1.55 why-us list
     --ls-display .005em display hook · --ls-h2 .01em · --ls-sub .03em
     --ls-cta .06em button labels · --ls-num .14em tile numerals/labels
     --ls-kicker .2em eyebrows/descriptors · --ls-micro .02em trust/footer micro
   ---------------------------------------------------------------------------
   SPACING — strict 4px modular grid (px base values, referenced by name)
     --sp-1..--sp-24 = 4 8 12 16 20 24 28 32 40 48 56 64 80 96
     --sect-pad fluid section padding · --gutter fluid page gutter
     --pad-menu-x fluid mobile-menu horizontal padding
   ---------------------------------------------------------------------------
   CONTROLS & SIZES
     --tap-min 44px touch-target floor · --ctrl-h/-lg/-sm button heights
     --icon-lg inline icon box (channel cards) · --logo-nav-h nav logo height
     --logo-footer-w footer logo cap · --ghost-w demolition ghost cap
     --tick-w gold rule under card headings · --li-dot why-us bullet square
     --step-chip process numeral chip · --step-indent vertical rail indent
     --step-gap-rail chip→copy gap · --card-min-h bento card floor at ≥75em
     --blur-nav header backdrop blur · --nav-h / --nav-h-lg header heights
   ---------------------------------------------------------------------------
   RADII   --r-tile 16 cards/rails · --r-chip 10 pills/notes · --r-pill buttons
           --r-dot 4 why-us bullets · --r-focus 4 focus rounding
   BORDERS --bw-1..--bw-4 hairline/underline/accent/strong weights
   ELEVATION --sh-card resting card shadow · --sh-lift hovered card shadow
             (both tinted to the navy hue — pure black shadows never used)
   Z-SCALE --z-base content · --z-menu mobile panel · --z-nav sticky header
           --z-skip skip link
   MOTION  --dur-1 150ms presses/links · --dur-2 200ms color/border
           --dur-3 250ms card lift · --dur-4 600ms reveals & image zoom
           --ease-standard default curve · --ease-out decel curve (zoom/reveal)
   LAYOUT  --container page measure · breakpoints (tokens in em, px in comment)
           --bp-xs 30em/480 · --bp-sm 37.5em/600 · --bp-md 48em/768 · --bp-lg 75em/1200
   FOCUS   --focus-ring-color/--focus-ring-width/--focus-ring-offset/
           --focus-ring-shadow — the single focus treatment, token-driven
   ========================================================================== */
:root {
  /* --- brand ramp (verbatim brand_palette.json) --- */
  --navy: #1A2C44;
  --gold: #F0BD4B;
  --charcoal: #22252E;
  --gray: #7D7D7F;       /* tagline/secondary display accents ONLY (brand law) */
  --white: #FFFFFF;

  /* --- derived, palette-safe surfaces (cool navy-tinted, no warm beige) --- */
  --navy-deep: #14213A;
  --surface: #F4F5F7;
  --ink: var(--charcoal);
  --ink-soft: #4A4E58;
  --ink-faint: #5C606B;

  /* --- rgb channel triplets --- */
  --navy-rgb: 26, 44, 68;
  --navy-deep-rgb: 20, 33, 58;
  --gold-rgb: 240, 189, 75;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;

  /* --- semantic color aliases --- */
  --color-bg: var(--white);
  --color-surface: var(--surface);
  --color-surface-raised: var(--white);
  --color-surface-ink: var(--navy);
  --color-surface-ink-deep: var(--navy-deep);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-text-faint: var(--ink-faint);
  --color-text-scrim: rgba(var(--white-rgb), 0.87);
  --color-text-scrim-soft: rgba(var(--white-rgb), 0.78);
  --color-text-on-ink: var(--white);
  --color-border: rgba(var(--navy-rgb), 0.14);
  --color-border-strong: rgba(var(--navy-rgb), 0.26);
  --color-border-on-ink: rgba(var(--white-rgb), 0.08);
  --color-border-on-ink-soft: rgba(var(--white-rgb), 0.25);
  --color-accent: var(--gold);
  --color-accent-strong: #E7B037;   /* fixed hover step, never gradient */

  /* --- state variants --- */
  --tint-hover-light: rgba(var(--navy-rgb), 0.04);
  --tint-hover-ink: rgba(var(--white-rgb), 0.08);
  --tint-press-ink: rgba(var(--white-rgb), 0.14);
  --scrim-header: rgba(var(--navy-deep-rgb), 0.72);
  --shadow-veil: rgba(var(--black-rgb), 0.25);
  --gold-alpha-border: rgba(var(--gold-rgb), 0.4);
  --gold-alpha-rail: rgba(var(--gold-rgb), 0.28);
  --gold-alpha-rail-lg: rgba(var(--gold-rgb), 0.22);
  --gold-alpha-fill: rgba(var(--gold-rgb), 0.08);
  --scrim-caption: rgba(var(--navy-deep-rgb), 0.9);
  --on-gold-muted: rgba(var(--navy-rgb), 0.72);

  /* --- print --- */
  --print-ink: #000000;
  --print-bg: #FFFFFF;

  /* --- families --- */
  --font-display: "Montserrat CBW", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-cond: "Barlow Condensed CBW", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter CBW", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace; /* reserved for token docs, not UI */

  /* --- fluid type scale --- */
  --fs-display: clamp(2.7rem, 5.6vw + 0.7rem, 6rem);
  --fs-h2: clamp(1.85rem, 2.2vw + 0.9rem, 2.9rem);
  --fs-h3: clamp(1.3rem, 0.6vw + 1.1rem, 1.6rem);
  --fs-body-lg: 1.0625rem;
  --fs-body: clamp(1rem, 0.2vw + 0.95rem, 1.0625rem);
  --fs-small: 0.9375rem;
  --fs-small-sm: 0.875rem;
  --fs-micro: 0.8125rem;
  --fs-fine: 0.75rem;
  --fs-step: 1.375rem;

  /* --- rhythm & tracking --- */
  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.45;
  --lh-snug: 1.5;
  --lh-loose: 1.55;
  --ls-display: 0.005em;
  --ls-h2: 0.01em;
  --ls-sub: 0.03em;
  --ls-cta: 0.06em;
  --ls-num: 0.14em;
  --ls-kicker: 0.2em;
  --ls-micro: 0.02em;

  /* --- spacing: strict 4px grid --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sect-pad: clamp(var(--sp-16), 6vw, var(--sp-24));
  --gutter: clamp(16px, 5vw, 40px);
  --pad-menu-x: clamp(20px, 6vw, 40px);

  /* --- controls & sizes --- */
  --tap-min: 44px;
  --ctrl-h: 48px;
  --ctrl-h-lg: 56px;
  --ctrl-h-sm: 44px;
  --icon-lg: 24px;
  --logo-nav-h: 50px;
  --logo-footer-w: 240px;
  --ghost-w: 420px;
  --tick-w: 28px;
  --li-dot: 12px;
  --step-chip: 48px;
  --step-indent: 72px;
  --step-gap-rail: 30px;
  --card-min-h: 560px;
  --blur-nav: 14px;
  --nav-h: 72px;
  --nav-h-lg: 76px;

  /* --- radii --- */
  --r-tile: 16px;
  --r-chip: 10px;
  --r-pill: 999px;
  --r-dot: 4px;
  --r-focus: 4px;

  /* --- borders --- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-4: 4px;

  /* --- elevation (navy-tinted; never pure black) --- */
  --sh-card: 0 14px 34px -18px rgba(var(--navy-rgb), 0.28);
  --sh-lift: 0 20px 44px -20px rgba(var(--navy-rgb), 0.34);

  /* --- z-scale --- */
  --z-base: 1;
  --z-menu: 45;
  --z-nav: 50;
  --z-skip: 100;

  /* --- motion --- */
  --dur-1: 150ms;
  --dur-2: 200ms;
  --dur-3: 250ms;
  --dur-4: 600ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --press-y: 1px;
  --lift: 4px;
  --hover-lift-sm: 3px;
  --arrow-nudge: 3px;
  --reveal-y: 18px;

  /* --- motion — look & feel pass (entrance/stagger/ken-burns) --- */
  --delay-1: 60ms;       /* hero entrance stagger steps (≤90ms law) */
  --delay-2: 150ms;
  --delay-3: 240ms;
  --stagger-step: 90ms;  /* grouped scroll-reveal children per-item step */
  --dur-ken: 9000ms;     /* hero Ken Burns drift */

  /* --- look & feel — texture / divider geometry --- */
  --rule-w: 44px;        /* gold section-head hairline width */
  --grain-a: 3px;        /* diagonal hairline grain: 3px band / 16px period */
  --grain-b: 16px;

  /* --- layout --- */
  --container: 1200px;
  /* breakpoint tokens (px in comments; queries below use em) */
  --bp-xs: 30em;      /* 480 */
  --bp-sm: 37.5em;    /* 600 */
  --bp-md: 48em;      /* 768 */
  --bp-lg: 75em;      /* 1200 */

  /* --- focus ring --- */
  --focus-ring-color: var(--gold);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-shadow: 0 0 0 5px rgba(var(--navy-rgb), 0.9);

  /* --- payment brand marks (footer chips + /payment-options/ marks) --- */
  --pay-logo-h: 1.4rem;      /* wordmark height inside footer chips */
  --pay-logo-h-lg: 2.2rem;   /* wordmark height on /payment-options/ */
}

/* ============================================================ RESET/BASE = */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================= UTILITIES = */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  fill: none; stroke: currentColor; stroke-width: var(--bw-2);
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}

.container { width: min(100% - (2 * var(--gutter)), var(--container)); margin-inline: auto; }
.section { padding-block: var(--sect-pad); }
.section--tint { background: var(--color-surface); }
/* Navy bands carry a barely-there diagonal grain (token alpha, token steps) —
   breaks the flat-vector feel without reading as decoration. */
.section--ink {
  background:
    repeating-linear-gradient(
      115deg,
      rgba(var(--white-rgb), 0.035) 0 var(--grain-a),
      rgba(var(--navy-rgb), 0) var(--grain-a) var(--grain-b)),
    var(--color-surface-ink);
  color: var(--color-text-on-ink);
}

.skip-link {
  position: fixed; top: -100%; left: var(--sp-4); z-index: var(--z-skip);
  background: var(--color-surface-ink); color: var(--color-text-on-ink);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-chip); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--sp-2); }

section[id], article[id], [id="top"] { scroll-margin-top: calc(var(--nav-h) + var(--sp-2)); }

/* ============================================================ COMPONENTS = */
/* ---- buttons: pill family, uppercase CTA labels ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); min-height: var(--ctrl-h);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill); border: var(--bw-2) solid transparent;
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600;
  letter-spacing: var(--ls-cta); text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-standard),
              background-color var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard),
              opacity var(--dur-2) var(--ease-standard);
  white-space: nowrap;
}
.btn:active { transform: translateY(var(--press-y)) scale(0.99); }
.btn--gold { background: var(--color-accent); color: var(--color-surface-ink); }
.btn--gold:hover { background: var(--color-accent-strong); }

/* micro-press sheen: one light band sweeps across gold CTAs in the hover pass
   (clipped by the pill, transform-only, gold-family only per CTA discipline) */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(var(--white-rgb), 0) 0%,
    rgba(var(--white-rgb), 0.38) 50%,
    rgba(var(--white-rgb), 0) 100%);
  transform: translateX(-110%);
  transition: transform var(--dur-4) var(--ease-out);
}
.btn--gold:hover::after,
.btn--gold:focus-visible::after { transform: translateX(110%); }
.btn--gold::after { will-change: transform; }
.btn--ghost {
  background: transparent; color: var(--color-text-on-ink);
  border-color: rgba(var(--white-rgb), 0.55);
}
.btn--ghost:hover {
  border-color: var(--color-text-on-ink); background: var(--tint-hover-ink);
}
.btn--lg { min-height: var(--ctrl-h-lg); padding: var(--sp-4) var(--sp-8); font-size: var(--fs-body); }
.btn--nav { min-height: var(--ctrl-h-sm); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-micro); }
/* disabled / submitting defense — pattern kept for any future async action */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none; pointer-events: none;
}

/* ---- eyebrow (single kicker treatment, gold on ink only) ---- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-cond); font-weight: 800; font-size: var(--fs-body-lg);
  letter-spacing: var(--ls-kicker); text-transform: uppercase; white-space: nowrap;
  color: var(--color-accent);
  padding-bottom: var(--sp-1);
  margin-bottom: var(--sp-4);
}

/* ---- section heads ---- */
.section-head { max-width: 62ch; margin-bottom: var(--sp-12); }
.section-head h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: var(--ls-h2);
  line-height: var(--lh-heading);
  font-size: var(--fs-h2); color: var(--color-surface-ink);
}
.section-head__sub { margin-top: var(--sp-4); color: var(--color-text-muted); max-width: 56ch; }
.section-head--inverse h2 { color: var(--color-text-on-ink); }
.section-head--inverse .section-head__sub { color: var(--color-text-scrim-soft); }

/* gold hairline divider closes every intro — wipes in from the left with the
   reveal (JS-gated so no-JS readers never lose it) */
.section-head::after {
  content: ""; display: block; width: var(--rule-w); height: var(--bw-3);
  margin-top: var(--sp-4); background: var(--color-accent);
  transform-origin: 0 50%;
}
html.js [data-reveal]:not(.is-visible) .section-head::after { transform: scaleX(0); }
html.js [data-reveal].is-visible .section-head::after {
  transform: none;
  transition: transform var(--dur-4) var(--ease-out);
}

/* ============================================================== HEADER == */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  background: var(--scrim-header);
  -webkit-backdrop-filter: blur(var(--blur-nav));
  backdrop-filter: blur(var(--blur-nav));
  border-bottom: var(--bw-1) solid var(--color-border-on-ink);
  transition: background-color var(--dur-3) var(--ease-standard);
}
.site-header.is-scrolled {
  background: var(--color-surface-ink-deep);
  border-bottom-color: var(--shadow-veil);
}

/* gold scroll-progress hairline riding the header's bottom edge (JS-driven
   custom property --prog, 0→1; green theater-light for page position) */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: var(--bw-3); z-index: var(--z-base); pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(var(--gold-rgb), 0.85) 0%,
    var(--color-accent) 100%);
  transform: scaleX(var(--prog, 0));
  transform-origin: 0 50%;
}

/* header compresses as one unit at scroll — bar and logo shrink on the same
   token curve; the open mobile panel pins back to full height so the panel's
   `top: var(--nav-h)` offset can never drift from a compressed bar */
.nav {
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--sp-6);
  width: min(100% - (2 * var(--gutter)), var(--container));
  margin-inline: auto;
}
.nav { transition: height var(--dur-3) var(--ease-standard); }
.site-header.is-scrolled .nav { height: calc(var(--nav-h) - var(--sp-3)); }
.site-header .nav.is-open { height: var(--nav-h); }
.nav__logo { transition: height var(--dur-3) var(--ease-standard); }
.site-header.is-scrolled .nav__logo { height: calc(var(--logo-nav-h) - var(--sp-3)); }
.nav__brand { display: inline-flex; align-items: center; margin-right: auto; }
/* matches the --tap-min control floor: keeps the brand descriptor line legible above the kill size (brand law) */
.nav__logo { width: auto; height: var(--logo-nav-h); padding: var(--r-dot) 0; }
.nav__links {
  display: flex; align-items: center;
  gap: clamp(var(--sp-4), 2.4vw, var(--sp-8));
}
.nav__links a {
  color: var(--color-text-scrim); text-decoration: none;
  font-size: var(--fs-small); font-weight: 500;
  padding: var(--sp-3) 0; /* approaches the --tap-min touch floor on desktop-only surfaces */
  border-bottom: var(--bw-2) solid transparent;
  transition: color var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard);
}
.nav__links a:hover { color: var(--color-text-on-ink); }
.nav__links a.is-active { color: var(--color-text-on-ink); border-bottom-color: var(--color-accent); }
/* the persistent active state keeps its full-time border; the slide is free for hover */
.nav__links a.is-active::after { content: none; }
/* underline slide-in: grows from the left on entry, exits to the right —
   the transparent border above keeps the tap floor and geometry identical */
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: var(--bw-2); background: var(--color-accent);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--dur-2) var(--ease-standard);
}
.nav__links a { position: relative; }
.nav__links a:hover::after,
.nav__links a:focus-visible::after,
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav__actions { display: flex; align-items: center; gap: var(--sp-3); }
.nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min); border-radius: var(--r-chip);
  background: transparent; color: var(--color-text-on-ink);
  border: var(--bw-1) solid var(--color-border-on-ink-soft); cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-standard);
}
.nav__toggle:hover { background: var(--tint-hover-ink); }
.nav__toggle .icon--close { display: none; }
.nav__toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav__toggle[aria-expanded="true"] .icon--close { display: block; }

/* mobile menu — open/closed panel with per-link hover/focus tints */
@media (max-width: 47.9375em) {          /* just under --bp-md — hamburger owns touch widths */
  .nav__toggle { display: flex; }        /* reachable control state */
  .nav__links { display: none; }         /* anchors surface through the panel */
}
.nav.is-open .nav__links {
  display: flex; position: fixed; top: var(--nav-h); left: 0; right: 0;
  z-index: var(--z-menu); flex-direction: column; align-items: stretch; gap: 0;
  background: var(--color-surface-ink-deep);
  padding: var(--sp-2) 0 var(--sp-4);
  border-bottom: var(--bw-1) solid rgba(var(--black-rgb), 0.4);
}
.nav.is-open .nav__links a {
  display: block; padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--pad-menu-x);
  font-size: var(--fs-body-lg);
  border-bottom: var(--bw-1) solid var(--color-border-on-ink);
  transition: background-color var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard);
}
.nav.is-open .nav__links a:hover,
.nav.is-open .nav__links a:focus-visible { color: var(--color-text-on-ink); background: var(--tint-hover-ink); }
.nav.is-open .nav__links a.is-active { border-bottom-color: var(--gold-alpha-border); }
/* panel links keep their hairline rows — the desktop underline slide stays desktop-only */
.nav.is-open .nav__links a::after { content: none; }
.nav.is-open .nav__links li + li a { border-top: 0; }

/* ================================================================ HERO == */
.hero {
  position: relative; isolation: isolate;
  min-height: min(100svh, 56rem); display: flex; align-items: flex-end;
  padding-top: calc(var(--nav-h) + var(--sp-10)); overflow: hidden;
}
.hero__media, .hero__media img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 60% 22%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    200deg,
    rgba(var(--navy-rgb), 0.34) 0%,
    rgba(var(--navy-rgb), 0.62) 55%,
    rgba(var(--navy-deep-rgb), 0.9) 100%);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(var(--navy-deep-rgb), 0.82) 0%,
    rgba(var(--navy-deep-rgb), 0.55) 42%,
    rgba(var(--navy-deep-rgb), 0) 72%);
}
.hero__inner { padding-block: var(--sp-16) var(--sp-20); max-width: 100%; }
.hero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  text-transform: uppercase; /* content pack H1 — uppercase, no descenders at 1.05 */
  color: var(--color-text-on-ink); text-wrap: balance; max-width: 13ch;
}
.hero__sub {
  margin-top: var(--sp-4); max-width: 44ch;
  font-family: var(--font-cond); font-weight: 700;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  letter-spacing: var(--ls-sub); color: var(--color-text-scrim);
}
.hero__cta { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* =============================================================== TRUST == */
.trust {
  background:
    repeating-linear-gradient(
      115deg,
      rgba(var(--white-rgb), 0.03) 0 var(--grain-a),
      rgba(var(--navy-rgb), 0) var(--grain-a) var(--grain-b)),
    var(--color-surface-ink-deep);
  color: var(--color-text-on-ink);
  border-top: var(--bw-3) solid var(--color-accent);
}
.trust__list {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-5);
}
.trust__list li {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-small); font-weight: 500; letter-spacing: var(--ls-micro);
}
.trust__list .icon { color: var(--color-accent); stroke-width: 2.5; }

/* ============================================================= SERVICES = */
.bento { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.bento__card {
  position: relative; background: var(--color-surface-raised);
  border: var(--bw-1) solid var(--color-border);
  border-radius: var(--r-tile); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-3) var(--ease-standard),
              box-shadow var(--dur-3) var(--ease-standard),
              border-color var(--dur-3) var(--ease-standard);
}
.bento__card:hover,
.bento__card:focus-within {
  transform: translateY(calc(-1 * var(--lift))); box-shadow: var(--sh-lift);
  border-color: var(--color-border-strong);
}
.bento__media { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.bento__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-4) var(--ease-out);
}
.bento__card:hover .bento__media img,
.bento__card:focus-within .bento__media img { transform: scale(1.04); } /* image zoom treatment */
.crop-brick { object-position: 50% 35%; }    /* keep the lifted brick + trowel in wide crops */
.crop-diptych { object-position: 50% 22%; }  /* keep the leak→sealed seam in frame */
.crop-mep { object-position: 62% 42%; }      /* keep the switch + probes centred */
.crop-reno { object-position: 50% 60%; }     /* keep both workers' faces in flat crops */
.bento__card--wide .bento__media { aspect-ratio: 16 / 9; }
/* navy duotone wash unifies every photo at rest; hover/focus dissolves it to
   full color — the consistent image-doubling rule */
.bento__media::after {
  content: ""; position: absolute; inset: 0; z-index: var(--z-base);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(var(--navy-rgb), 0.05) 0%,
    rgba(var(--navy-rgb), 0.3) 100%);
  opacity: 0.9;
  transition: opacity var(--dur-4) var(--ease-standard);
}
.bento__card:hover .bento__media::after,
.bento__card:focus-within .bento__media::after { opacity: 0.25; }
.bento__body {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-3); padding: var(--sp-6); flex: 1;
}
.bento__num {
  font-family: var(--font-cond); font-weight: 800; font-size: var(--fs-small);
  letter-spacing: var(--ls-num); color: var(--color-text-faint);
  /* unified chip language — renders as an outlined pill, kin to the process
     numeral chips and the price chips */
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-1) var(--sp-2);
  border: var(--bw-1) solid var(--color-border-strong);
  border-radius: var(--r-chip);
}
.bento__num--gold { color: var(--color-accent); border-color: var(--color-border-on-ink-soft); }
.bento__card h3 {
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-h3); letter-spacing: var(--ls-sub);
  line-height: var(--lh-heading); color: var(--color-surface-ink);
}
.bento__rule { width: var(--tick-w); height: var(--bw-3); background: var(--color-accent); }
.bento__line { color: var(--color-text-muted); font-size: var(--fs-small); line-height: var(--lh-snug); }
.bento__price {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body);
  color: var(--color-surface-ink);
  background: var(--color-surface);
  border: var(--bw-1) solid var(--color-border); border-radius: var(--r-chip);
  padding: var(--sp-2) var(--sp-3); margin-top: auto;
}
.bento__price span {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-fine);
  color: var(--color-text-faint); letter-spacing: var(--ls-micro);
}
.bento__price--gold { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface-ink); }
.bento__price--gold span { color: var(--on-gold-muted); }
.bento__link {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2);
  position: relative; /* ::after pads the hit area to the --tap-min floor without moving pixels */
  font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-micro);
  color: var(--color-surface-ink); text-decoration: none;
  border-bottom: var(--bw-2) solid var(--color-accent); padding-bottom: var(--sp-1);
}
.bento__link::after { content: ""; position: absolute; inset: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3)); }
.bento__link .icon { transition: transform var(--dur-2) var(--ease-standard); }
.bento__link:hover .icon { transform: translateX(var(--arrow-nudge)); }
.bento__link--gold { color: var(--color-accent); }
.bento__link--gold:hover, .bento__link--gold:focus-visible { color: var(--color-text-on-ink); }

/* ink counterweight tile (06) — official white ghost symbol on navy */
.bento__card--ink { background: var(--color-surface-ink); border-color: var(--color-surface-ink); }
.bento__card--ink .bento__body { position: relative; z-index: var(--z-base); }
.bento__card--ink h3 { color: var(--color-text-on-ink); }
.bento__card--ink .bento__line { color: var(--color-text-scrim-soft); }
.bento__ghost {
  position: absolute; right: -14%; bottom: -22%; width: 72%;
  max-width: var(--ghost-w); height: auto;
  opacity: 0.09; pointer-events: none;
}

/* ============================================================== WHY-US == */
.whyus__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-10); align-items: start;
}
.whyus__media {
  position: relative; margin: 0; border-radius: var(--r-tile);
  overflow: hidden; box-shadow: var(--sh-card);
}
.whyus__media img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
/* same navy doublé as the bento media — one image-doubling rule site-wide */
.whyus__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(var(--navy-rgb), 0.05) 0%,
    rgba(var(--navy-rgb), 0.3) 100%);
}
.whyus__media figcaption {
  position: absolute; inset: auto 0 0; background: var(--scrim-caption); color: var(--color-text-scrim);
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-micro);
  line-height: 1.4; padding: var(--sp-3) var(--sp-4);
  border-top: var(--bw-3) solid var(--color-accent);
}
.whyus__content .section-head { margin-bottom: var(--sp-8); }
.whyus__list { display: grid; gap: var(--sp-5); }
.whyus__list li {
  position: relative; padding-left: var(--sp-6);
  font-size: var(--fs-small); line-height: var(--lh-loose); color: var(--color-text-muted);
}
.whyus__list li strong { color: var(--color-text); font-weight: 600; }
.whyus__list li::before {
  content: ""; position: absolute; left: 0; top: var(--sp-1);
  width: var(--li-dot); height: var(--li-dot);
  background: var(--color-accent); border-radius: var(--r-dot);
}
.whyus__note {
  margin-top: var(--sp-8); padding: var(--sp-4) var(--sp-4);
  background: var(--color-surface);
  border-left: var(--bw-4) solid var(--color-surface-ink); border-radius: var(--r-chip);
  font-size: var(--fs-small); color: var(--color-text-muted);
}

/* ============================================================= PROCESS == */
.steps {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6); counter-reset: step;
}
.step { position: relative; padding-left: var(--step-indent); }
.step__num {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-cond); font-weight: 800; font-size: var(--fs-step);
  letter-spacing: 0.08em; color: var(--color-accent);
  width: var(--step-chip); height: var(--step-chip);
  display: flex; align-items: center; justify-content: center;
  border: var(--bw-2) solid var(--gold-alpha-border);
  border-radius: var(--r-pill); background: var(--gold-alpha-fill);
}
.step::after {
  content: ""; position: absolute;
  left: calc((var(--step-chip) - var(--bw-2)) / 2);
  top: calc(var(--step-chip) + var(--sp-2));
  bottom: calc(-1 * var(--sp-6));
  width: var(--bw-2); background: var(--gold-alpha-rail);
}
.step:last-child::after { display: none; }
.step h3 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body-lg);
  letter-spacing: var(--ls-h2); color: var(--color-text-on-ink);
}
.step p {
  margin-top: var(--sp-2); font-size: var(--fs-small);
  color: var(--color-text-scrim-soft); max-width: 34ch;
}

/* ============================================================= CONTACT == */
.contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.channel {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-6);
  border: var(--bw-1) solid var(--color-border); border-radius: var(--r-tile);
  background: var(--color-surface-raised); color: var(--color-text); text-decoration: none;
  transition: transform var(--dur-3) var(--ease-standard),
              box-shadow var(--dur-3) var(--ease-standard),
              border-color var(--dur-3) var(--ease-standard);
}
.channel > .icon { color: var(--color-surface-ink); margin-bottom: var(--sp-2); width: var(--icon-lg); height: var(--icon-lg); transition: color var(--dur-2) var(--ease-standard); }
a.channel:hover > .icon { color: var(--color-accent); }
.channel__label {
  font-family: var(--font-cond); font-weight: 800; font-size: var(--fs-small-sm);
  letter-spacing: var(--ls-num); text-transform: uppercase; color: var(--color-surface-ink);
}
.channel__value { font-weight: 600; font-size: var(--fs-body-lg); color: var(--color-text); overflow-wrap: anywhere; }
.channel__meta { font-size: var(--fs-micro); color: var(--color-text-faint); line-height: var(--lh-snug); }
a.channel:hover {
  transform: translateY(calc(-1 * var(--hover-lift-sm))); box-shadow: var(--sh-card); border-color: var(--color-border-strong);
}
.channel--static { background: var(--color-surface-raised); }
.channel--primary { background: var(--color-surface-ink); border-color: var(--color-surface-ink); }
.channel--primary > .icon { color: var(--color-accent); }
.channel--primary .channel__label { color: var(--color-accent); }
.channel--primary .channel__value { color: var(--color-text-on-ink); }
.channel--primary .channel__meta { color: var(--color-text-scrim-soft); }

/* ============================================================== FOOTER ==
   Footer Standardization (2026-10-22) — IA per research/footer-standard-brief.md
   §6: brand block (logo · tagline · icon-only social row, tap targets via
   the --tap-min token,
   aria-labels) · services column (6 card anchors) · company column · next
   action (WhatsApp CTA + verified contacts) → payment trustmark band → legal
   row across the bottom. Honesty law: unknown facts render as .todo-chip
   [OWNER TODO] markers, never as invented claims. */
.site-footer {
  background:
    repeating-linear-gradient(
      115deg,
      rgba(var(--white-rgb), 0.03) 0 var(--grain-a),
      rgba(var(--navy-rgb), 0) var(--grain-a) var(--grain-b)),
    var(--color-surface-ink-deep);
  color: var(--color-text-scrim);
  border-top: var(--bw-3) solid var(--color-accent);
}
.site-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-10);
  align-items: start;
  padding-block: var(--sp-12) var(--sp-10);
}
.site-footer__brand { max-width: 34ch; }
.site-footer__logo { width: min(var(--logo-footer-w), 70%); height: auto; }
.site-footer__tagline {
  margin-top: var(--sp-5); font-size: var(--fs-small);
  color: var(--color-text-scrim); line-height: var(--lh-snug);
}
.site-footer__descriptor {
  margin-top: var(--sp-2); font-family: var(--font-cond); font-weight: 700;
  font-size: var(--fs-small-sm); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: rgba(var(--white-rgb), 0.62);
  /* Tagline Gray computes <4.5:1 on navy at micro sizes — AA-compliant scrim-white used here */
}
/* social row — icon-only buttons: aria-label in markup, var(--tap-min) size
   floor, 3:1+ contrast (white/gold glyphs on the navy-deep surface) */
.site-footer__social {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-5);
}
/* .icon-svg marks each social anchor as a pure svg-glyph link with no text
   child (icon-only law); the tap-size rule below keeps working per anchor. */
.icon-svg { -webkit-tap-highlight-color: transparent; }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  border: var(--bw-1) solid var(--color-border-on-ink-soft); border-radius: var(--r-pill);
  color: var(--color-text-on-ink); text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard),
              background-color var(--dur-2) var(--ease-standard);
}
.site-footer__social a:hover { border-color: var(--gold-alpha-border); color: var(--color-accent); background: var(--tint-hover-ink); }
.site-footer__social .icon { width: var(--icon-lg); height: var(--icon-lg); }

.site-footer__head {
  font-family: var(--font-cond); font-weight: 800; font-size: var(--fs-small);
  letter-spacing: var(--ls-num); text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--sp-4);
}
.site-footer__list { display: grid; gap: var(--sp-3); font-size: var(--fs-small); }
.site-footer__list li { display: flex; gap: var(--sp-3); align-items: flex-start; line-height: var(--lh-snug); }
.site-footer__list .icon { color: var(--color-accent); }
.site-footer__list a {
  color: var(--color-text-on-ink); text-decoration: none;
  border-bottom: var(--bw-1) solid var(--gold-alpha-border); padding-bottom: var(--sp-1);
}
.site-footer__list a:hover { border-bottom-color: var(--color-accent); color: var(--color-accent); }
.site-footer__list--links a { border-bottom: 0; padding: 0; }
.site-footer__list--links a:hover { color: var(--color-accent); }

/* next action — the ONE clear CTA + verified contact facts */
.site-footer__cta-line {
  font-size: var(--fs-small); color: var(--color-text-scrim); line-height: var(--lh-snug);
}
.site-footer__btn { margin-top: var(--sp-4); }
.site-footer__cta .site-footer__list { margin-top: var(--sp-5); }
.site-footer__cta .site-footer__list span { overflow-wrap: anywhere; }

/* payment trustmark band — acceptance copy; honest rollout note, no
   active-merchant claim (see the OWNER TODO in index.html markup) */
.site-footer__pay {
  border-top: var(--bw-1) solid var(--color-border-on-ink);
  border-bottom: var(--bw-1) solid var(--color-border-on-ink);
  background: rgba(var(--black-rgb), 0.14);
}
.site-footer__pay-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-6); padding-block: var(--sp-5);
}
.site-footer__pay-mark {
  font-family: var(--font-cond); font-weight: 800; font-size: var(--fs-small-sm);
  letter-spacing: var(--ls-sub); text-transform: uppercase;
  color: var(--color-text-on-ink);
}
.site-footer__pay-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap-min);
  font-size: var(--fs-small); font-weight: 600; color: var(--color-text-on-ink);
  text-decoration: none; border-bottom: var(--bw-2) solid var(--gold-alpha-border);
}
.site-footer__pay-link .icon { color: var(--color-accent); transition: transform var(--dur-2) var(--ease-standard); }
.site-footer__pay-link:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.site-footer__pay-link:hover .icon { transform: translateX(var(--arrow-nudge)); }
.site-footer__pay-note {
  flex-basis: 100%; font-size: var(--fs-micro); letter-spacing: var(--ls-micro);
  color: rgba(var(--white-rgb), 0.66);
}

/* legal row — always the bottom band; entity + reg-no TODO + policy links */
.site-footer__legal { border-top: var(--bw-1) solid rgba(var(--white-rgb), 0.1); }
.site-footer__legal-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-5); font-size: var(--fs-micro);
  color: rgba(var(--white-rgb), 0.66);
}
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.site-footer__legal-links a {
  color: var(--color-text-on-ink); text-decoration: none;
  border-bottom: var(--bw-1) solid var(--gold-alpha-border); padding-bottom: var(--sp-1);
}
.site-footer__legal-links a:hover { border-bottom-color: var(--color-accent); color: var(--color-accent); }
#app-privacy-note { display: none; }

/* ================================================= FOOTER SUBPAGES ======
   /careers/ /payment-options/ /terms/ /privacy/ — same tokens, same band
   language as the homepage (navy page-head → light prose). Content paints
   statically (no [data-reveal]) so reads and QA captures are race-free. */
.page-head {
  background:
    repeating-linear-gradient(
      115deg,
      rgba(var(--white-rgb), 0.035) 0 var(--grain-a),
      rgba(var(--navy-rgb), 0) var(--grain-a) var(--grain-b)),
    var(--color-surface-ink);
  color: var(--color-text-on-ink);
  padding-top: calc(var(--nav-h) + var(--sp-16));
  padding-bottom: var(--sp-12);
  border-bottom: var(--bw-3) solid var(--color-accent);
}
.page-head__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 2.6vw + 1rem, 3.4rem);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  text-transform: uppercase; color: var(--color-text-on-ink);
}
.page-head__sub {
  margin-top: var(--sp-4); max-width: 56ch;
  font-size: var(--fs-body-lg); color: var(--color-text-scrim);
}
.crumbs { margin-bottom: var(--sp-5); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.crumbs li {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-micro);
}
.crumbs li + li::before { content: "/"; color: rgba(var(--white-rgb), 0.5); }
.crumbs a { color: var(--color-accent); text-decoration: none; }
.crumbs a:hover { color: var(--color-text-on-ink); }
.crumbs [aria-current="page"] { color: var(--color-text-scrim); }

.page-body { padding-block: var(--sect-pad); }
.page-body .container { display: grid; gap: var(--sp-12); justify-items: start; }

/* shared long-form prose / doc styling (terms · privacy · careers) */
.prose { max-width: 72ch; display: grid; gap: var(--sp-5); align-content: start; }
.prose > * + * { margin-top: 0; } /* grid gap carries all rhythm */
.prose h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--ls-h2);
  color: var(--color-surface-ink);
}
.prose h2::after {
  content: ""; display: block; width: var(--tick-w); height: var(--bw-3);
  margin-top: var(--sp-2); background: var(--color-accent);
}
.prose h3 {
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-body-lg); letter-spacing: var(--ls-sub);
  color: var(--color-surface-ink);
}
.prose p { color: var(--color-text-muted); }
.prose strong { color: var(--color-text); font-weight: 600; }
.prose a {
  color: var(--color-surface-ink); text-decoration: none;
  border-bottom: var(--bw-1) solid var(--gold-alpha-border);
}
.prose a:hover, .prose a:focus-visible { color: var(--color-text); border-bottom-color: var(--color-accent); }
.prose .todo-chip { margin-inline: var(--sp-1); }

/* gold-square list — the why-us bullet language reused for doc/option lists */
.list-gold { display: grid; gap: var(--sp-3); }
.list-gold li {
  position: relative; padding-left: var(--sp-6);
  font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--color-text-muted);
}
.list-gold li strong { color: var(--color-text); font-weight: 600; }
.list-gold li::before {
  content: ""; position: absolute; left: 0; top: var(--sp-1);
  width: var(--li-dot); height: var(--li-dot);
  background: var(--color-accent); border-radius: var(--r-dot);
}

/* visible owner-TODO markers — deliberately styled so they read as deliberate
   editorial placeholders, never as broken copy */
.todo-chip {
  display: inline-block; padding: var(--sp-1) var(--sp-2);
  border: var(--bw-1) dashed var(--gold-alpha-border);
  border-radius: var(--r-dot);
  background: var(--gold-alpha-fill);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-micro);
  color: var(--color-surface-ink); white-space: normal;
}
.site-footer .todo-chip, .page-head .todo-chip {
  background: rgba(var(--gold-rgb), 0.16);
  color: var(--color-accent);
}
.page-head .todo-chip { font-size: var(--fs-small-sm); }

/* payment option cards (/payment-options/) */
.pay-options { display: grid; gap: var(--sp-5); width: 100%; max-width: 72ch; }
.pay-card {
  display: grid; gap: var(--sp-4);
  background: var(--color-surface-raised);
  border: var(--bw-1) solid var(--color-border); border-radius: var(--r-tile);
  padding: var(--sp-6);
}
.pay-card__url {
  margin-top: var(--sp-1); font-size: var(--fs-small-sm); color: var(--color-text-faint);
}
.pay-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
  letter-spacing: var(--ls-h2); color: var(--color-surface-ink);
}

/* =============================================================== STATES =
   focus system — gold ring token; double ring on light, single on ink      */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--focus-ring-shadow);
  border-radius: var(--r-focus);
}
.section--ink :focus-visible, .hero :focus-visible, .trust :focus-visible,
.site-footer :focus-visible { box-shadow: none; }

/* selection — brand pair, gold highlight with navy ink */
::selection { background: var(--color-accent); color: var(--color-surface-ink); }

/* ================================================================ MOTION =
   JS-gated reveals. The travel animates on the independent `translate`
   property (NOT transform) so `transform` stays free for component hover /
   focus states — a hover lift can never be shadowed by the reveal rule.    */
html.js [data-reveal] { opacity: 0; translate: 0 calc(-1 * var(--reveal-y)); }
html.js [data-reveal].is-visible {
  opacity: 1; translate: none;
  transition: opacity var(--dur-4) var(--ease-standard),
              translate var(--dur-4) var(--ease-standard);
}

/* ---- look & feel pass: cinematic entrance choreography ----------------
   Shared rise keyframe (translate/opacity only — 60fps, no layout work).
   Hero children cascade with ≤90ms steps; grouped containers
   ([data-reveal-stagger]) cascade their children on the same curve when the
   group enters. JS assigns --child-i; no-JS readers never see hidden state. */
@keyframes cbw-rise {
  from { opacity: 0; translate: 0 var(--reveal-y); }
  to   { opacity: 1; translate: 0 0; }
}
.hero__inner > * { animation: cbw-rise var(--dur-4) var(--ease-out) both; }
.hero__inner > :nth-child(2) { animation-delay: var(--delay-1); }
.hero__inner > :nth-child(3) { animation-delay: var(--delay-2); }
.hero__inner > :nth-child(4) { animation-delay: var(--delay-3); }

/* slow Ken Burns settle on the hero plate — one drift, origin at the crew */
.hero__media img { animation: cbw-kenburns var(--dur-ken) var(--ease-out) both; }
@keyframes cbw-kenburns {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* staged groups: children pre-hidden only under .js, cascade with the shared
   curve + per-child delay; hover transitions on cards stay untouched because
   choreography runs on the animation/translate track, not `transform` */
html.js [data-reveal-stagger]:not(.is-visible) > * { opacity: 0; }
html.js [data-reveal-stagger].is-visible > * {
  animation: cbw-rise var(--dur-4) var(--ease-standard) both;
  animation-delay: calc(var(--child-i, 0) * var(--stagger-step));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  html.js [data-reveal] { opacity: 1; translate: none; transition: none; }
  .bento__card:hover, .bento__card:focus-within, .channel:hover, a.channel:hover,
  .btn:active { transform: none; }
  .bento__card:hover .bento__media img, .bento__card:focus-within .bento__media img {
    transform: none;
  }
  .bento__link .icon { transform: none !important; }
  /* look & feel pass: hero entrance, Ken Burns and staged cascades settle
     instantly for reduced-motion users (global 0ms kill + explicit finals) */
  .hero__inner > * , .hero__media img,
  html.js [data-reveal-stagger].is-visible > * { animation: none; }
  html.js [data-reveal-stagger]:not(.is-visible) > * { opacity: 1; }
  html.js [data-reveal]:not(.is-visible) .section-head::after,
  html.js [data-reveal].is-visible .section-head::after { transform: none; transition: none; }
  .btn::after { display: none; }
}

/* ================================================================ PRINT =
   black-on-white, chrome stripped; links keep their labels                */
@media print {
  .site-header, .skip-link, .hero__cta, .hero__scrim, .hero::after,
  .site-footer__social, .bento__ghost { display: none !important; }
  body { color: var(--print-ink); background: var(--print-bg); }
  .section--ink, .section--tint, .trust, .site-footer,
  .bento__card, .channel { background: var(--print-bg); color: var(--print-ink); }
  .section--ink h2, .section-head--inverse h2, .step h3,
  .bento__card h3, .channel__value { color: var(--print-ink); }
  .step p, .channel__meta, .site-footer, .bento__line { color: var(--print-ink); }
  .bento__card, .channel { border: var(--bw-1) solid var(--print-ink); box-shadow: none; }
  .bento__media img { filter: grayscale(100%); }
  .step__num { color: var(--print-ink); border-color: var(--print-ink); background: none; }
  a { color: var(--print-ink); text-decoration: none; }
  /* Footer Standardization: subpage navy bands + footer band children + TODO
     chips would otherwise print white/gold-on-white */
  .page-head, .site-footer__pay { background: var(--print-bg); color: var(--print-ink); border-color: var(--print-ink); }
  .page-head__title, .page-head__sub, .crumbs a, .crumbs [aria-current="page"],
  .site-footer__pay-mark, .site-footer__pay-link, .site-footer__pay-note,
  .site-footer__legal-row, .site-footer__legal-links a,
  .site-footer__cta .site-footer__list a, .site-footer__cta .site-footer__list span,
  .todo-chip { color: var(--print-ink); }
  .todo-chip { background: none; }
}

/* ==================================================== RESPONSIVE (em) == */
@media (min-width: 37.5em) {              /* --bp-sm 600 */
  .trust__list { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: repeat(2, 1fr); }
  .pay-options { grid-template-columns: repeat(2, 1fr); } /* subpage instalment cards */
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-8); }
  .step::after { display: none; }
  .step { padding-left: 0; padding-top: calc(var(--step-chip) + var(--step-gap-rail)); }
  .step__num { top: 0; }
}

@media (min-width: 48em) {                /* --bp-md 768 */
  :root { --nav-h: var(--nav-h-lg); }     /* token swap only — no raw value */
  .whyus__grid { grid-template-columns: 5fr 7fr; gap: var(--sp-16); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__card--wide { grid-column: span 2; }
  .bento__card--wide .bento__media { aspect-ratio: 21 / 9; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 75em) {                /* --bp-lg 1200 */
  .trust__list { grid-template-columns: repeat(4, 1fr); }
  .step::after {                          /* horizontal rail linking the five chips */
    display: block;
    left: calc(var(--step-chip) + var(--sp-2));
    right: calc(-1 * var(--sp-6));
    top: calc((var(--step-chip) - var(--bw-2)) / 2);
    bottom: auto;
    width: auto; height: var(--bw-2); background: var(--gold-alpha-rail-lg);
  }
  .step:last-child::after { display: none; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento__card--wide { grid-column: span 2; }
  /* definite geometry: fixed aspect media + content-sized bodies — the only
     free space is the small band pinning the price chips to a common row */
  .bento__card--wide .bento__media { aspect-ratio: 21 / 9; }
  .bento__card { min-height: var(--card-min-h); }
  .bento__card--wide .bento__body { padding: var(--sp-8); }
  .contact__grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); }
  .step { padding-top: calc(var(--step-chip) + var(--step-gap-rail)); }
  /* Footer Standardization column order: brand · services · company · next action */
  .site-footer__grid { grid-template-columns: 3.5fr 3fr 2.5fr 3.5fr; }
}

/* ------------------------------------------------------------- portrait -- */
@media (max-width: 30em) {                /* --bp-xs 480 */
  .btn--nav { display: inline-flex; }
  .hero { min-height: 92svh; }
  .hero__media img { object-position: 70% 45%; } /* focus the crew cluster on narrow viewports */
}

/* =================================== FOOTER MODERN — mega CTA + pay chips ==
   2026-10-22 owner pass. Big-type opener → link grid → chip trustmark band →
   legal row (already styled above). Rem-fluid, tokens only. */
.site-footer__mega {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-20) var(--sp-16);
  border-bottom: var(--bw-3) solid rgba(var(--white-rgb), 0.06);
  overflow: hidden;
}
.site-footer__wm {
  position: absolute;
  inset-block-start: calc(var(--sp-12) * -1);
  inset-inline-end: calc(var(--sp-10) * -1);
  width: clamp(12.5rem, 26vw, 22.5rem);
  height: auto;
  opacity: 0.055;
  transform: rotate(12deg);
  pointer-events: none;
}
.site-footer__eyebrow {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--color-accent);
}
.site-footer__mega-line {
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  font-size: clamp(2.3rem, 4.4vw + 1rem, 4.6rem);
  color: var(--color-text-on-ink);
}
.mega-gold { color: var(--color-accent); }
.site-footer__mega-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  position: relative;
  z-index: 1;
}
.site-footer__mega-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--ctrl-h-sm);
  font-weight: 600;
  color: var(--color-text-on-ink);
  text-decoration: none;
  border-bottom: var(--bw-2) solid rgba(var(--gold-rgb), 0.5);
  transition: border-color var(--dur-ken, 300ms) var(--ease-standard);
}
.site-footer__mega-tel svg { color: var(--color-accent); transition: transform var(--dur-ken, 300ms) var(--ease-standard); }
.site-footer__mega-tel:hover svg,
.site-footer__mega-tel:focus-visible svg { transform: translateX(var(--arrow-nudge)); }
.site-footer__mega-tel:hover { border-color: var(--color-accent); }
.site-footer__mega-note {
  font-size: var(--fs-small-sm);
  color: var(--color-text-scrim);
}

/* payment trustmark chips (modern pill row) */
.site-footer__paylist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.site-footer__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--ctrl-h-sm);
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(var(--white-rgb), 0.95);
  color: var(--color-surface-ink);
  font-size: var(--fs-small-sm);
}
.site-footer__paylogo {
  height: var(--pay-logo-h);
  width: auto;
  display: block;
}
.site-footer__chip--soon {
  border: var(--bw-1) dashed rgba(var(--gold-rgb), 0.55);
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--color-text-on-ink);
  font-size: var(--fs-micro);
}

/* payment brand marks row — /payment-options/ prose */
.pay-marks {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-6); margin-block: var(--sp-2);
}
.pay-marks img { height: var(--pay-logo-h-lg); width: auto; display: block; }

@media print {
  .site-footer__mega { border: none; }
  .site-footer__chip, .site-footer__mega-tel { color: var(--print-ink); }
}