/* ============================================================
   CANADIAN SHIELD — Design System  (cs.css)
   R4 — refined white skin, R3 brand-board palette.
   Palette (D26 exact): Shield Black #0B0D0F · Stealth Grey #1C1F23 ·
     Tactical Green #4B5B36 · Field Drab #7A7F3F · Gold #C9A227 ·
     Signal Red #B71C1C · Arctic Grey #E6E8EA · Paper #F7F7F4
   Type: DIN Next Condensed → Oswald (display) · Inter/system (body)
   Accent rules (binding):
     · OLIVE (#4B5B36) is the text/interactive accent — AA on white.
     · GOLD (#C9A227) is reserved for SOLID button fills (black-on-gold)
       and small decorative accents only. Never gold body text on white.
   R4 additions: honesty chips (.chip), line-mark strip (.lines/.line-card),
   honesty band (.honesty), nav FR language link, refined type rhythm,
   card hover polish. All R3 class names preserved — other pages depend on:
   .nav .wrap .links .logo/.wm .btn/.btn.ghost .card .pill .stats .spec
   .foot .eyebrow .lede .rule .tint/.tint-2 .hero .reveal .sr-only
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --black:#1C1E1A; --stealth:#F1F2EC; --tactical:#4B5B36; --drab:#5E6B3E;
  --gold:#C9A227; --red:#A8341F; --arctic:#2B2B28;
  --steel:#8A8F86; --steel-lt:#C7CAC2; --ink-2:#F1F2EC;
  --line:rgba(28,30,26,.14); --line-2:rgba(28,30,26,.28);
  --paper:#F7F7F4; --text:#1C1E1A; --muted:#5B6058;
  --muted-2:#4A4E46;
  /* domain accents (sub-brand marks; R3 board underlines) */
  --air:#2E5C8A; --ground:#4B5B36; --water:#1F6E8C; --under:#41464C; --rescue:#A8341F;
  --indus:#9C6423; /* Industrial (Work) Unit — legacy accent; R3 board renders Industrial in OLIVE. [verify] — reconciliation owed to Joe */
  --gold-soft:rgba(201,162,39,.14);
  --card:#FFFFFF;
  --display:'Oswald','DIN Next Condensed','Barlow Condensed',Impact,sans-serif;
  --body:'Inter',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --mono:'SF Mono',Menlo,Consolas,monospace;
  --maxw:1200px; --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);
  font-size:16px;line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--tactical);text-decoration:none;transition:color .2s}
a:hover{color:var(--black)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}

/* ---- type scale & rhythm (R4 refinement) ---- */
h1,h2,h3,h4,.dsp{font-family:var(--display);font-weight:600;letter-spacing:.012em;line-height:1.04;text-transform:uppercase;margin:0;text-wrap:balance}
h1{font-size:clamp(44px,7vw,88px);font-weight:700;letter-spacing:.005em;line-height:1.0}
h2{font-size:clamp(30px,4.2vw,52px)}
h3{font-size:clamp(22px,2.4vw,30px)}
h4{font-size:19px;letter-spacing:.035em}
p{margin:0 0 16px}
.lede{font-size:clamp(17px,1.6vw,21px);line-height:1.62;color:#3A3D34;font-weight:400;text-wrap:pretty}
.eyebrow{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--tactical)}
.eyebrow.green{color:var(--drab)}
.small{font-size:13.5px;color:var(--muted)}
.tabnum{font-variant-numeric:tabular-nums}

/* ---- accent rule ---- */
.rule{width:64px;height:3px;background:var(--gold);border:0;margin:20px 0}
.rule.green{background:var(--tactical)}

/* ---- buttons (R5: SOLID fills are OLIVE; ghost = olive interactive) ----
   Owner change 2026-08-14: solid buttons moved off gold onto olive, matching
   the nav CONTACT and the "3D" badge, so every solid action on the site reads
   as one accent. Gold is now decorative/semantic only — the .rule, card edge,
   honesty .chip and .v verify tag keep it, because there gold means "check
   this figure", which is a different job from "press this".                */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;
  font-size:15px;letter-spacing:.12em;text-transform:uppercase;padding:14px 26px;border-radius:2px;
  border:1px solid var(--tactical);color:#F7F7F4;background:var(--tactical);cursor:pointer;transition:.22s var(--ease)}
.btn:hover{background:#5C6E43;color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(75,91,54,.30)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.ghost{background:transparent;color:var(--arctic);border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--tactical);color:var(--tactical);background:rgba(75,91,54,.05)}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}

/* ---- top nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .3s,border-color .3s,backdrop-filter .3s,box-shadow .3s;
  background:#fff;border-bottom:3px solid var(--tactical)}
.nav.solid{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line),0 8px 24px rgba(28,30,26,.06)}
.nav .wrap{display:flex;align-items:center;min-height:82px;gap:20px;padding-top:6px;padding-bottom:6px}
/* HARD RULE (R4, production regression fix): the logo/wordmark must NEVER
   shrink, wrap or clip. flex:none + nowrap guarantees the lockup at any
   viewport; the links row wraps instead. Do not relax this. */
.nav .logo{display:flex;align-items:center;gap:13px;flex:none;white-space:nowrap}
.nav .logo img{height:74px!important;width:auto;flex:none}
.nav .logo .wm{display:flex;flex-direction:column;justify-content:center;line-height:1}
.nav .logo .wm b{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:.03em;color:var(--black);white-space:nowrap}
.nav .logo .wm b i{font-style:normal;color:var(--drab)}
.nav .logo .wm small{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-top:2px;font-weight:600;white-space:nowrap}
.nav .links{margin-left:auto;display:flex;align-items:center;gap:0 2px;flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
/* R8 — 2026-08-14, overflow regression fix. Adding the BROCHURES primary
   link (+99px incl. padding/gap) overspent the row. Budget, measured with
   the shipped Oswald 500 metrics: .wrap caps at 1200px (−56px padding =
   1144px content); minus the logo lockup (~249px) and the 20px wrap gap,
   the links row gets ~875px — and the 10-link row was ~895px. So COMPANY
   wrapped down onto the utility row at EVERY viewport ≥ ~1256px (above the
   cap the deficit is width-independent; no breakpoint can fix it). Fix:
   horizontal link padding 11px→8px (−60px across ten links → ~40px slack);
   the ::after underline inset is kept in sync below. Face, size, weight,
   letter-spacing and uppercase are untouched. Locale rows (DE/FI measured)
   are shorter than English and keep >140px slack even with a translated
   Brochures link added later. Below ~1160px the primary row wraps
   right-aligned under the existing 8px row-gap (intentional — see R4 note
   on the logo), and ≤940px the burger takes over, both unchanged. Do not
   restore the 11px padding without re-measuring the row.                   */
.nav .links a{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:#3A3D34;padding:8px 8px;border-radius:2px;position:relative;white-space:nowrap}
.nav .links a::after{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:2px;background:var(--tactical);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.nav .links a:hover{color:var(--black);background:rgba(75,91,54,.06)}
.nav .links a:hover::after,.nav .links a.active::after{transform:scaleX(1)}
.nav .links a.active{color:var(--black)}
/* CONTACT — olive fill, paper text (R5; was gold/black). Pairs with the
   olive "3D" badge so the nav's two solid accents now read as one family.
   Contrast: #F7F7F4 on #4B5B36 ≈ 7.0:1 — clears AA and AAA for this size. */
.nav .links a.cta{background:var(--tactical);color:#F7F7F4;margin-left:8px;padding:10px 20px}
.nav .links a.cta:hover{background:#5C6E43}
.nav .links a.cta::after{display:none}
.nav .links a.lang{border:1px solid var(--line-2);padding:7px 11px;margin-left:6px;font-size:12px;letter-spacing:.14em;color:var(--muted-2)}
.nav .links a.lang:hover{border-color:var(--tactical);color:var(--tactical);background:transparent}
.nav .links a.lang::after{display:none}
.nav .burger{display:none;margin-left:auto;background:none;border:0;color:var(--black);cursor:pointer;padding:8px}
.nav .burger svg{width:26px;height:26px}

/* ---- family quick-links (R7, tightened+right-anchored R9) ----
   Live in .nav-util — a full-width flex item inside .links (flex-basis:100%
   forces it onto its own line under the main link row). Both rows are tight,
   right-anchored clusters (justify-content:flex-end, small gap) so COMPANY
   and the language controls sit flush against the same right edge, with the
   icon row/CONTACT/CLIENT PORTAL packed close together rather than spread
   across the full width. flex-wrap:nowrap on nav-util keeps it locked to a
   single line — it was breaking into a 3rd row at some widths when it could
   wrap internally; do not re-add wrap here.
   All six marks carry a "3D" badge and open their CSH-3D interactive film
   (target=_blank). The whole row is hidden on mobile: the same destinations
   are already reachable from the burger menu.

   R5 — SQUARE TILE REBUILD (owner ask: "we need square"). Three defects
   fixed together:
     (1) the R3 PNGs were OPAQUE, so each mark punched a white rectangle
         through the tinted pill. Assets regenerated at R4 with the
         edge-connected background flood-filled to alpha (interior whites —
         badger stripes, goose cheek — deliberately preserved).
     (2) marks had different aspect ratios, so a border-radius:999px pill
         sized by padding came out a different WIDTH per icon. Tiles are now
         a fixed 34×34 square with object-fit:contain — aspect no longer
         leaks into layout.
     (3) marks were optically unequal (a wide goose read smaller than a
         square badger). R4 art is normalized by INK AREA, not bounding box,
         so every mark carries ~20% coverage of its tile and they sit at the
         same visual weight. Do not re-normalize by long edge.              */
.nav-util{flex-basis:100%;display:flex;align-items:center;justify-content:flex-end;
  gap:2px 8px;flex-wrap:nowrap;margin-top:4px}
.fic-group{display:inline-flex;align-items:center;gap:12px;margin-right:14px;
  padding-right:14px;border-right:1px solid var(--line-2)}
/* R7 — BOXLESS, ON A SQUARE GRID (owner: "drop the boxes… everything square").
   The tinted tiles are gone; the marks themselves are the UI. The square
   discipline is kept invisibly: every .fic is a fixed 56×56 slot on an
   identical 12px pitch, and every R7 PNG is a square 256 canvas with the
   art optically centred — so the row lines up like a ruled grid even though
   nothing draws a box. Do not let these collapse to intrinsic img width;
   the fixed square slot IS the alignment system.                            */
.fic{position:relative;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;flex:0 0 56px;
  text-decoration:none;line-height:0;opacity:.92;
  transition:opacity .2s,transform .2s}
.fic:hover{opacity:1}
.fic img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1;
  image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;
  will-change:transform;transition:transform .25s var(--ease)}
/* "3D" badge — olive chip, top-right of the invisible slot */
.fic .fic-3d{position:absolute;top:-5px;right:-4px;z-index:2;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.02em;color:#F7F7F4;background:var(--tactical);border:1px solid rgba(247,247,244,.9);
  border-radius:3px;padding:1px 5px;line-height:1.35}

/* ---- R7 icon motion ----
   Two layers, transforms only (the PNGs are flat — no parts to articulate):
   1) ENTRANCE: on page load each mark rises into the row, staggered
      left-to-right — one flight settling onto a wire.
   2) HOVER: a signature move per animal, matched to its film beat —
      goose lifts off · grizzly shakes · orca breaches · badger digs ·
      the gear turns · the cell deploys forward.
   Both are killed wholesale under prefers-reduced-motion.                   */
@keyframes ficIn{from{opacity:0;transform:translateY(10px)}to{opacity:.92;transform:none}}
.fic{animation:ficIn .5s var(--ease) both}
.fic:nth-child(1){animation-delay:.05s}.fic:nth-child(2){animation-delay:.13s}
.fic:nth-child(3){animation-delay:.21s}.fic:nth-child(4){animation-delay:.29s}
.fic:nth-child(5){animation-delay:.37s}.fic:nth-child(6){animation-delay:.45s}

@keyframes ficGoose{0%{transform:none}40%{transform:translateY(-7px) rotate(-7deg)}
  70%{transform:translateY(-3px) rotate(-3deg)}100%{transform:translateY(-5px) rotate(-5deg)}}
@keyframes ficGrizzly{0%,100%{transform:none}20%{transform:rotate(-8deg)}
  45%{transform:rotate(7deg)}70%{transform:rotate(-4deg)}}
@keyframes ficOrca{0%{transform:none}35%{transform:translateY(-8px) rotate(9deg)}
  65%{transform:translateY(2px) rotate(-4deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes ficBadger{0%,100%{transform:none}25%{transform:translateY(3px) rotate(-3deg)}
  50%{transform:translateY(5px) rotate(3deg)}75%{transform:translateY(2px) rotate(-2deg)}}
@keyframes ficGear{from{transform:rotate(0)}to{transform:rotate(28deg)}}
@keyframes ficCell{0%{transform:none}55%{transform:translateX(5px)}100%{transform:translateX(3px)}}

.fic:hover img[src*="Line-Mark-Goose"]{animation:ficGoose .6s var(--ease) forwards}
.fic:hover img[src*="Line-Mark-Grizzly"]{animation:ficGrizzly .55s var(--ease)}
.fic:hover img[src*="Line-Mark-Orca"]{animation:ficOrca .65s var(--ease)}
.fic:hover img[src*="Line-Mark-Badger"]{animation:ficBadger .55s var(--ease)}
.fic:hover img[src*="Line-Mark-Industrial"]{animation:ficGear .5s var(--ease) forwards}
.fic:hover img[src*="Line-Mark-Forward-Cell"]{animation:ficCell .45s var(--ease) forwards}

@media(prefers-reduced-motion:reduce){
  .fic{animation:none}
  .fic:hover img{animation:none!important;transform:none!important}
}

@media(max-width:940px){
  .fic-group{display:none}
  .nav-util{display:block;flex-basis:auto;margin-top:0}
  .nav .links{position:fixed;inset:82px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
    padding:8px 0;transform:translateY(-120%);transition:transform .3s var(--ease);max-height:calc(100vh - 82px);overflow:auto}
  .nav .links.open{transform:translateY(0)}
  .nav .links a{padding:14px 28px;border-bottom:1px solid var(--line);font-size:17px}
  .nav .links a::after{display:none}
  .nav .links a.cta{margin:10px 28px;text-align:center;border:0}
  .nav .links a.lang{margin:0;border:0;border-bottom:1px solid var(--line)}
  .nav .burger{display:block}
}

/* ---- section framing ---- */
section{position:relative;padding:clamp(64px,9vw,120px) 0}
.sec-head{max-width:820px}
.sec-head .eyebrow{display:block;margin-bottom:14px}
.tint{background:var(--ink-2)}
.tint-2{background:linear-gradient(180deg,#F7F7F4,#EFF0E9)}

/* ---- hero shell ---- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;
  border-bottom:1px solid var(--line);background:#fff}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .scrim{position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 20% 30%,rgba(255,255,255,.25),rgba(247,247,244,.82) 70%),
             linear-gradient(180deg,rgba(255,255,255,.4),var(--paper))}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:clamp(28px,6vh,72px)}
.hero h1{margin:.1em 0}
.hero h1 .g{color:var(--drab)}
.hero .lockup{max-width:min(760px,88vw);width:100%;height:auto;margin:14px auto 0}
.hero .tag{font-family:var(--display);font-weight:600;font-size:clamp(16px,2vw,22px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--black);margin-top:20px}
.hero .doms{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--tactical);margin-top:8px}

/* ---- grids & cards ---- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:linear-gradient(180deg,#FFFFFF,#FBFBFA);border:1px solid var(--line);border-radius:4px;
  padding:26px;transition:.28s var(--ease);position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(28,30,26,.04)}
.card:hover{border-color:rgba(75,91,54,.4);transform:translateY(-4px);box-shadow:0 22px 44px rgba(28,30,26,.12)}
.card .k{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tactical);display:block;margin-bottom:10px}
.card h3,.card h4{margin-bottom:8px}
.card p{color:var(--muted);font-size:14.5px;margin:0}
.card .edge{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transition:width .28s var(--ease)}
.card:hover .edge{width:5px}
.card.air .edge{background:var(--air)} .card.ground .edge{background:var(--ground)}
.card.water .edge{background:var(--water)} .card.under .edge{background:var(--under)} .card.rescue .edge{background:var(--rescue)}
.card.indus .edge{background:var(--indus)}
.pill.indus{border-color:var(--indus);color:#7A4E1C}

/* ---- stat band ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.stats .s{background:var(--ink-2);padding:26px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.stats .n{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,44px);color:var(--tactical);line-height:1}
.stats .l{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.45}

/* ---- spec table ---- */
.spec{width:100%;border-collapse:collapse;font-size:14.5px}
.spec th,.spec td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font-family:var(--display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--muted);background:var(--ink-2)}
.spec td{color:#33362F}
.spec tr:hover td{background:rgba(28,30,26,.03)}
.spec .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--black)}

/* ---- pills / chips ---- */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:2px;border:1px solid var(--line-2);color:var(--muted)}
.pill.gold{border-color:var(--gold);background:var(--gold-soft);color:#7A5C00}
.pill.green{border-color:var(--tactical);color:var(--tactical)}
.pill.red{border-color:var(--red);color:var(--red)}
.pill.solid{background:var(--gold);color:var(--black);border-color:var(--gold)}

/* ---- honesty chips (R4) ----
   The visible honesty tag that must accompany every modelled / derived /
   unverified figure. Default = gold "check this" register.
   .chip.grey  — neutral status (e.g. "concept-stage · TRL 2")
   .chip.green — confirmed/existing capability                                */
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#6E5306;background:var(--gold-soft);
  border:1px solid rgba(201,162,39,.8);border-radius:3px;padding:3px 9px;white-space:nowrap;line-height:1.7}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}
.chip.grey{color:var(--muted-2);background:rgba(28,30,26,.045);border-color:var(--line-2)}
.chip.grey::before{background:var(--steel)}
.chip.green{color:var(--tactical);background:rgba(75,91,54,.08);border-color:rgba(75,91,54,.55)}
.chip.green::before{background:var(--tactical)}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---- legacy verify tag (kept for older pages) ---- */
.v{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--black);
  background:var(--gold);padding:1px 7px;border-radius:2px;text-transform:uppercase}

/* ---- line-mark strip (R4) ----
   Five R3 line marks (Goose · Grizzly · Orca · Badger · Industrial), each a
   link to its family page, with the R3-board accent underline:
   .acc-navy (Goose, Orca) · .acc-olive (Grizzly, Industrial [verify]) ·
   .acc-black (Badger). Industrial-accent reconciliation owed to Joe.        */
.lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.line-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  background:#fff;padding:30px 18px 24px;position:relative;transition:background .25s var(--ease)}
.line-card:hover{background:#FBFBF7}
.line-card img{height:54px;width:auto;transition:transform .3s var(--ease)}
.line-card:hover img{transform:translateY(-4px)}
.line-card .lm-name{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--black)}
.line-card .lm-dom{font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted)}
.line-card .ul{width:42px;height:3px;border-radius:1px;background:var(--tactical);transition:width .3s var(--ease)}
.line-card:hover .ul{width:66px}
.line-card.acc-navy .ul{background:var(--air)}
.line-card.acc-olive .ul{background:var(--tactical)}
.line-card.acc-black .ul{background:var(--black)}

/* ---- honesty band (R4) ----
   The "we show our work" statement panel — confident, not apologetic.
   White card, heavy olive flank, mono ledger list.                          */
.honesty{background:#fff;border:1px solid var(--line);border-left:5px solid var(--tactical);
  border-radius:4px;padding:clamp(28px,4.5vw,46px);box-shadow:0 1px 3px rgba(28,30,26,.05)}
.honesty .big{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.8vw,34px);
  text-transform:uppercase;letter-spacing:.02em;color:var(--black);margin:4px 0 14px}
.honesty .big em{font-style:normal;color:var(--tactical)}
.honesty .ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:22px}
.honesty .ledger .li{border:1px solid var(--line);border-radius:3px;padding:14px 16px;background:#FCFCFA}
.honesty .ledger .li b{display:block;font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--black);margin-bottom:5px}
.honesty .ledger .li span{font-size:13px;color:var(--muted);line-height:1.55}

/* ---- doctrine / ethos block (dark panel — deliberate) ---- */
.ethos{background:linear-gradient(135deg,#0B0D0F,#171B14);border:1px solid var(--line);
  border-left:4px solid var(--tactical);border-radius:4px;padding:34px}
.ethos .big{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.6vw,32px);color:#fff;text-transform:uppercase;letter-spacing:.02em;margin:6px 0 12px}
.ethos .big em{font-style:normal;color:#9BA86A}

/* ---- domain header (system pages) ---- */
.domainhero{position:relative;padding:clamp(90px,13vw,150px) 0 clamp(50px,7vw,80px);border-bottom:1px solid var(--line);overflow:hidden}
.domainhero .tagrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.domainhero .accent{width:52px;height:52px;border-radius:4px;display:flex;align-items:center;justify-content:center}

/* ---- reveal animation ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important;animation:none!important}}

/* ---- animated backgrounds (SVG/CSS) ---- */
.topo{position:absolute;inset:0;opacity:.5;pointer-events:none}
.gridlines{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(80% 60% at 50% 40%,#000,transparent)}
.scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;animation:scan 6s linear infinite}
@keyframes scan{0%{top:0}100%{top:100%}}
.pulse{animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.spin-slow{transform-origin:center;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dash{stroke-dasharray:6 8;animation:dashmove 2.2s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-28}}

/* ---- footer (deliberate dark band; text hardcoded light) ---- */
.foot{background:#171913;border-top:3px solid var(--tactical);padding:56px 0 40px}
.foot .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
.foot h5{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#9AA0A6;margin:0 0 14px}
.foot a{display:block;color:#C7CAC2;font-size:14px;padding:5px 0}
.foot a:hover{color:var(--gold)}
.foot .brandline{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot .brandline b{font-family:var(--display);font-weight:700;font-size:18px;color:#fff;letter-spacing:.03em}
.foot .guardrail{border-left:3px solid var(--tactical);padding:10px 14px;margin:26px 0 0;
  font-size:13px;color:#B9BCB2;line-height:1.6;background:rgba(75,91,54,.12);border-radius:0 3px 3px 0}
.foot .disc{border-top:1px solid rgba(230,232,234,.14);margin-top:26px;padding-top:22px;font-size:12px;color:#8A8F86;line-height:1.6}
@media(max-width:780px){.foot .cols{grid-template-columns:1fr 1fr}}

/* ---- utility ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.center{text-align:center}.mt0{margin-top:0}.mb0{margin-bottom:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:28px}}
.badge-note{display:inline-flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);
  border:1px solid var(--line-2);border-radius:3px;padding:8px 12px}

/* ============================================================
   MOTION LAYER — logo animation, shield power-on, sheen, richer reveals
   (global; applies to every page via cs.css. Respects reduced-motion.)
   ============================================================ */

/* nav logo entrance */
.nav .logo{opacity:0;transform:translateY(-6px)}
.nav .logo.logo-in{animation:logoIn .7s var(--ease) forwards}
@keyframes logoIn{to{opacity:1;transform:none}}
/* the inline shield "powers on": subtle draw + settle */
.nav .logo svg{transform-origin:center;animation:shieldOn .9s var(--ease) both}
@keyframes shieldOn{0%{opacity:0;transform:scale(.82) rotate(-4deg)}60%{opacity:1}100%{opacity:1;transform:none}}
.nav .logo.has-real-logo svg{animation:none}

/* gleam sweep across the wordmark on load (and on hover) */
.nav .logo .wm{position:relative;overflow:hidden}
.nav .logo .wm::after{content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:sheen 5.5s ease-in-out 1s infinite}
@keyframes sheen{0%{left:-140%}18%,100%{left:160%}}

/* HERO SHIELD power-on — add class .shield-assemble to a hero <svg>/<img> */
.shield-assemble{animation:heroShield 1.2s var(--ease) both}
@keyframes heroShield{0%{opacity:0;transform:translateY(14px) scale(.9)}
  55%{opacity:1}100%{opacity:1;transform:none}}
/* a slow ambient gleam any element can opt into */
.gleam{position:relative;overflow:hidden}
.gleam::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
  transform:translateX(-100%);animation:gleamMove 6s ease-in-out 2s infinite}
@keyframes gleamMove{0%{transform:translateX(-100%)}22%,100%{transform:translateX(100%)}}

/* richer reveal variants (opt-in via classes) */
.reveal.left{transform:translateX(-30px)}.reveal.left.in{transform:none}
.reveal.right{transform:translateX(30px)}.reveal.right.in{transform:none}
.reveal.scale{transform:scale(.94);opacity:0}.reveal.scale.in{transform:none;opacity:1}
.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s}

/* card hover accent sweep */
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:translateX(-100%);transition:transform .5s var(--ease);opacity:0}
.card:hover::before{transform:translateX(100%);opacity:1}

/* animated domain accent underline on section labels */
.slabel .sn{position:relative}

@media(prefers-reduced-motion:reduce){
  .nav .logo{opacity:1;transform:none;animation:none}
  .nav .logo svg{animation:none}
  .nav .logo .wm::after,.gleam::after,.card::before{animation:none;display:none}
  .shield-assemble{animation:none}
  .card,.card .edge,.line-card img,.line-card .ul,.nav .links a::after{transition:none}
  .card:hover{transform:none}
  .line-card:hover img{transform:none}
}

/* ============================================================
   ACCESSIBILITY + CRAFT (R2.0 elevation pass, retained & extended)
   ============================================================ */

/* on-brand text selection */
::selection{background:var(--gold);color:var(--black)}
::-moz-selection{background:var(--gold);color:var(--black)}

/* skip-to-content link: invisible until keyboard-focused */
.skip-link{position:fixed;top:-60px;left:14px;z-index:999;background:var(--gold);color:var(--black);
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 18px;border-radius:2px;transition:top .2s var(--ease)}
.skip-link:focus{top:14px;outline:2px solid var(--black);outline-offset:2px}

/* visible, on-brand keyboard-focus ring everywhere (:focus-visible only) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--tactical);outline-offset:3px;border-radius:1px}
.nav .links a:focus-visible{outline-offset:-2px}
.btn:focus-visible{outline:2px solid var(--black);outline-offset:4px}
.cform input:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--tactical);outline-offset:2px}

@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}

/* ============================================================
   R9 — 2026-08-14 · BROCHURE SYSTEM (42-file marketing relaunch)
   Scope: brochures/*.html ONLY — activated by <body class="bro bro-{family}">.
   Everything above this line is untouched; every rule below is additive and
   namespaced (.bro- / .sheet- / .rule.fam / html.holding). Reference
   implementation: brochures/goose.html · pattern spec:
   brochures/_DESIGN-SYSTEM-R9.md — follow it mechanically.

   DOCTRINE OF THIS BLOCK
   · LIGHT SKIN ONLY. The dark ".film" chapters are retired in brochures.
     Every brochure surface is #FFFFFF, --paper #F7F7F4, --ink-2 #F1F2EC or
     .tint-2. The single sanctioned dark element is the slim .sheet-plate
     data bar (white-on-black, 15.6:1).
   · FAMILY ACCENT IS A TOKEN. Components read --fam (graphic accent) and
     --fam-ink (AA-safe text accent). Set once on <body>: bro-air ·
     bro-ground · bro-water · bro-under · bro-indus · bro-defence.
     No family class = house olive.
   · MEASURED CONTRAST on --paper #F7F7F4 (WCAG, worst surface):
     #1C1E1A 15.7:1 · #3A3D34 10.3:1 · #33362F 11.5:1 · #4A4E46 7.9:1 ·
     #5B6058 6.0:1 · olive #4B5B36 6.9:1 · air #2E5C8A 6.5:1 ·
     water #1F6E8C 5.3:1 · under #41464C 8.9:1 · indus-ink #7A4E1C 6.7:1 ·
     defence #A8341F 6.2:1 · gold-ink #6E5306 6.7:1 · gold-stroke #8A6A10
     4.7:1 (graphics + large text only).
     NEVER set text in raw gold #C9A227 on a light surface (2.25:1 — this
     class of failure is why the relaunch exists) and never use raw --indus
     #9C6423 for body-size text (4.59:1, no margin) — use --fam-ink.
   · MOTION: reveal-on-scroll (.reveal — shared js), stat count-up
     ([data-count] — shared js), mark draw-on (.bro-mark-draw), scroll
     progress (.bro-progress — page js), one page-local mechanism loop per
     brochure. The global reduced-motion kill-switch above already stops all
     animation; static fallbacks for the new pieces close this block.
   ============================================================ */

/* ---- family accent scope ---- */
.bro{--fam:var(--tactical);--fam-ink:var(--tactical);
  --fam-soft:rgba(75,91,54,.07);--fam-line:rgba(75,91,54,.38)}
.bro.bro-air{--fam:#2E5C8A;--fam-ink:#2E5C8A;--fam-soft:rgba(46,92,138,.07);--fam-line:rgba(46,92,138,.38)}
.bro.bro-ground{--fam:#4B5B36;--fam-ink:#4B5B36;--fam-soft:rgba(75,91,54,.07);--fam-line:rgba(75,91,54,.38)}
.bro.bro-water{--fam:#1F6E8C;--fam-ink:#1F6E8C;--fam-soft:rgba(31,110,140,.07);--fam-line:rgba(31,110,140,.38)}
.bro.bro-under{--fam:#41464C;--fam-ink:#41464C;--fam-soft:rgba(65,70,76,.07);--fam-line:rgba(65,70,76,.38)}
.bro.bro-indus{--fam:#9C6423;--fam-ink:#7A4E1C;--fam-soft:rgba(156,100,35,.08);--fam-line:rgba(156,100,35,.42)}
.bro.bro-defence{--fam:#A8341F;--fam-ink:#A8341F;--fam-soft:rgba(168,52,31,.06);--fam-line:rgba(168,52,31,.38)}
.bro .eyebrow{color:var(--fam-ink)}
.rule.fam{background:var(--fam)}
.bro-hairline{height:1px;background:linear-gradient(90deg,transparent,var(--fam-line),transparent)}

/* ---- product mark (assets/img/marks/{slug}.svg — stroke="currentColor") ----
   Inline the mark's SVG when it must tint or animate; <img src> renders it
   black-on-light (fine for sibling cards). Draw-on requires pathLength="1"
   on each solid path; dashed detail paths keep class="dashkeep" and NO
   pathLength (they fade in instead of drawing). */
.bro-mark{color:var(--fam-ink)}
.bro-mark svg{display:block;width:100%;height:100%}
.bro-mark-draw path:not(.dashkeep){stroke-dasharray:1;stroke-dashoffset:1;
  animation:broDraw 1.1s var(--ease) forwards}
.bro-mark-draw path:nth-child(2){animation-delay:.18s}
.bro-mark-draw path:nth-child(3){animation-delay:.3s}
.bro-mark-draw path:nth-child(4){animation-delay:.42s}
.bro-mark-draw path.dashkeep{opacity:0;animation:broFade .5s .7s var(--ease) forwards}
@keyframes broDraw{to{stroke-dashoffset:0}}
@keyframes broFade{to{opacity:1}}

/* ---- splash — light enter gate (replaces the dark #splash treatment) ---- */
html.holding,html.holding body{overflow:hidden}
.bro-splash{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(95% 75% at 50% 36%,#FFFFFF,#ECEDE6 82%);transition:opacity .7s var(--ease)}
.bro-splash.gone{opacity:0;pointer-events:none}
.bro-splash .bs-grid{position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(28,30,26,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,30,26,.05) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
.bro-splash .bs-scan{position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.35;animation:scan 7s linear infinite}
.bro-splash .bs-card{position:relative;background:#FFFFFF;border:1px solid var(--line-2);border-top:4px solid var(--fam);
  max-width:660px;width:min(92vw,660px);padding:36px 42px 28px;text-align:center;
  box-shadow:0 30px 90px rgba(28,30,26,.22);animation:broSplashIn .8s var(--ease) both}
@keyframes broSplashIn{0%{opacity:0;transform:translateY(18px) scale(.97)}100%{opacity:1;transform:none}}
.bro-splash .bs-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--fam-ink);font-weight:700;text-transform:uppercase}
.bro-splash .bs-mark{width:88px;height:88px;margin:14px auto 0}
.bro-splash h1{font-family:var(--display);font-size:clamp(24px,4vw,31px);letter-spacing:.11em;font-weight:700;
  color:var(--black);margin:10px 0 4px}
.bro-splash h1 span{color:var(--fam-ink)}
.bro-splash .bs-creed{font-family:var(--mono);font-size:11px;letter-spacing:.16em;margin-top:8px;color:#33362F;text-transform:uppercase}
.bro-splash .bs-creed b{color:var(--fam-ink)}
.bro-splash .bs-blurb{font-size:13px;line-height:1.6;color:var(--muted);margin:16px auto 0;max-width:52ch}
.bro-splash .bs-btns{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.bro-splash .bs-go{background:var(--fam);color:#fff;font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;
  font-weight:700;padding:16px 30px;border:0;border-radius:2px;cursor:pointer;transition:filter .2s,transform .2s}
.bro-splash .bs-go:hover{filter:brightness(.88);transform:translateY(-1px)}
.bro-splash .bs-alt{background:transparent;color:#3A3D34;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  font-weight:700;padding:16px 18px;border:1px solid var(--line-2);border-radius:2px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;transition:.2s var(--ease)}
.bro-splash .bs-alt:hover{border-color:var(--fam);color:var(--fam-ink);background:var(--fam-soft)}
.bro-splash .bs-order{margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--fam-ink);font-weight:700}
.bro-splash .bs-law{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;color:#6E5306;text-transform:uppercase;line-height:1.9}

/* ---- scroll progress + sticky in-page section nav ----
   Page js measures the fixed header once and sets --nav-h on <html>;
   .bro-progress is a fixed 3px family-accent bar scaled by scroll. */
.bro-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:320;background:var(--fam);
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.bro-subnav{position:sticky;top:var(--nav-h,148px);z-index:130;background:rgba(247,247,244,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bro-subnav .wrap{display:flex;align-items:center;gap:2px;min-height:52px;overflow-x:auto;scrollbar-width:none}
.bro-subnav .wrap::-webkit-scrollbar{display:none}
.bro-subnav .bsn-code{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;margin-right:auto;padding-right:16px;white-space:nowrap}
.bro-subnav a{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);padding:16px 12px 14px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.bro-subnav a:hover{color:var(--black)}
.bro-subnav a.on{color:var(--fam-ink);border-bottom-color:var(--fam)}

/* ---- hero — light product hero (replaces .film .pr-hero) ---- */
.bro-hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;
  padding:150px 0 60px;background:linear-gradient(180deg,#FFFFFF,var(--paper) 55%,#EFF0E9);
  border-bottom:1px solid var(--line)}
@media(max-width:940px){.bro-hero{padding-top:110px}}
.bro-hero .bh-scene{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;opacity:.9}
.bro-hero .bh-scene svg{width:min(1500px,130vw);height:auto}
@media(max-width:720px){.bro-hero .bh-scene svg{width:190vw}}
.bro-hero .bh-scrim{position:absolute;inset:0;
  background:radial-gradient(110% 80% at 24% 30%,rgba(255,255,255,.9),rgba(255,255,255,.2) 62%),
    linear-gradient(180deg,rgba(255,255,255,.6),transparent 45%,rgba(247,247,244,.55))}
.bro-hero .wrap{position:relative;z-index:2}
.bro-hero .bh-kicker{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bro-hero .bh-mark{width:56px;height:56px;flex:none}
.bro-hero h1{color:var(--black);font-size:clamp(42px,6.6vw,84px);margin-top:14px}
.bro-hero h1 .g{color:var(--fam-ink)}
.bro-hero .tag{font-family:var(--display);font-weight:600;font-size:clamp(15px,1.9vw,21px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--black);margin-top:18px}
.bro-hero .doms{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--fam-ink);margin-top:10px}
.bro-hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---- legal band — the surviving compliance lines (NOT status chips) ----
   Patent pending · export control · carrier-not-a-munition. These are law
   and doctrine, not maturity hedging; they ride in every defence brochure. */
.bro-legal{display:flex;gap:8px 10px;flex-wrap:wrap;margin-top:26px}
.bro-legal span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line-2);
  border-radius:3px;padding:4px 10px;line-height:1.7;background:rgba(255,255,255,.65);text-align:left}
.bro-legal span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--fam);flex:none}

/* ---- key figures band — counting numbers (shared js [data-count]) ---- */
.bro-band{background:#FFFFFF;border-bottom:1px solid var(--line);padding:clamp(34px,5vw,56px) 0}
.bro-band .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(18px,3vw,34px)}
.bro-band .bb{text-align:center;padding:6px 10px;border-left:1px solid var(--line)}
.bro-band .bb:first-child{border-left:0}
.bro-band .bb .n{font-family:var(--display);font-weight:700;font-size:clamp(38px,4.6vw,58px);line-height:1;
  color:var(--fam-ink);font-variant-numeric:tabular-nums}
.bro-band .bb .n .u{font-size:.45em;font-weight:600;letter-spacing:.06em}
.bro-band .bb .l{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);line-height:1.7}
@media(max-width:720px){.bro-band .bb{border-left:0;border-top:1px solid var(--line);padding-top:16px}
  .bro-band .bb:first-child{border-top:0;padding-top:6px}}

/* ---- mechanism stage — light panel (replaces the dark .stage) ---- */
.bro-stgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,54px);align-items:center}
@media(max-width:940px){.bro-stgrid{grid-template-columns:1fr}}
.bro-ghost{font-family:var(--display);font-weight:700;font-size:clamp(64px,9vw,120px);line-height:.9;
  color:transparent;-webkit-text-stroke:1.2px var(--fam-line);display:block;margin-bottom:6px}
.bro-stlabel{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--fam-ink);
  text-transform:uppercase;display:block;margin-bottom:12px}
.bro-stage{background:#FFFFFF;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;
  position:relative;box-shadow:0 24px 60px rgba(28,30,26,.10)}
.bro-stage svg{display:block;width:100%;height:auto}
.bro-stage .cap{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);background:rgba(247,247,244,.92);padding:4px 8px;
  border-radius:2px;border:1px solid var(--line)}
.bro-stage .lamp{position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--muted-2);text-transform:uppercase}
.bro-stage .lamp i{width:7px;height:7px;border-radius:50%;background:var(--fam);display:inline-block;
  animation:pulse 3s ease-in-out infinite}

/* ---- callout — light doctrine/ethos panel (replaces the dark .ethos-d) ---- */
.bro-callout{background:var(--fam-soft);border:1px solid var(--fam-line);border-radius:4px;padding:26px 24px}
.bro-callout .big{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.4vw,27px);
  letter-spacing:.04em;text-transform:uppercase;color:var(--black);margin:8px 0 12px}
.bro-callout .big em{font-style:normal;color:var(--fam-ink)}
.bro-callout p{font-size:13.5px;color:#3A3D34;line-height:1.6;margin:0}

/* ---- tick list — "nothing aboard" style claims ---- */
.bro-ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.bro-ticks li{position:relative;padding:12px 14px 12px 42px;background:#FFFFFF;border:1px solid var(--line);
  border-radius:3px;font-size:13.5px;color:#33362F;line-height:1.5}
.bro-ticks li::before{content:"";position:absolute;left:15px;top:17px;width:13px;height:7px;
  border-left:2.5px solid var(--fam);border-bottom:2.5px solid var(--fam);transform:rotate(-45deg)}
.bro-ticks li b{color:var(--black)}

/* ---- scenario walk — light cards (replaces the dark .walk .w) ---- */
.bro-walk{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.bro-walk .w{background:#FFFFFF;border:1px solid var(--line);border-top:3px solid var(--fam);
  border-radius:4px;padding:24px 22px;transition:.25s var(--ease)}
.bro-walk .w:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,30,26,.10);border-color:var(--fam-line);border-top-color:var(--fam)}
.bro-walk .w .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--fam-ink);
  text-transform:uppercase;display:block;margin-bottom:10px}
.bro-walk .w h4{color:var(--black);font-size:17px;margin-bottom:8px}
.bro-walk .w p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55}

/* ---- FULL SPEC SHEET — the Ford/GMC-grade grouped data card ----
   One .sheet-plate identity bar, then .bro-sheet of .sheet-group blocks.
   Each group: h3.sheet-h header + dl.sheet-rows of dt/dd pairs. No status
   column, no chips — figures are stated plainly; ~ marks an approximation. */
.sheet-plate{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;background:var(--black);
  color:#F7F7F4;border-radius:4px;padding:14px 20px;margin-top:34px}
.sheet-plate .sp-mark{width:40px;height:40px;color:#E6E8EA;flex:none}
.sheet-plate b{font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:16px;text-transform:uppercase}
.sheet-plate .sp-code{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:#C9A227;text-transform:uppercase}
.sheet-plate .sp-fam{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:#C7CAC2;text-transform:uppercase}
@media(max-width:720px){.sheet-plate .sp-fam{margin-left:0;flex-basis:100%}}
.bro-sheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(16px,2.2vw,24px);
  align-items:start;margin-top:24px}
@media(max-width:400px){.bro-sheet{grid-template-columns:1fr}}
.sheet-group{background:#FFFFFF;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  box-shadow:0 1px 3px rgba(28,30,26,.05)}
.sheet-h{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--black);padding:14px 18px;
  border-bottom:2px solid var(--fam);background:var(--ink-2);margin:0}
.sheet-h .idx{font-family:var(--mono);font-size:10px;color:var(--fam-ink);letter-spacing:.1em;font-weight:700}
.sheet-rows{margin:0;padding:4px 0}
.sheet-rows .rw{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:16px;padding:11px 18px;
  border-bottom:1px solid var(--line);transition:background .2s}
.sheet-rows .rw:last-child{border-bottom:0}
.sheet-rows .rw:hover{background:var(--fam-soft)}
.sheet-rows dt{font-size:13px;color:var(--muted-2);margin:0;line-height:1.5}
.sheet-rows dd{font-size:13.5px;font-weight:600;color:var(--black);margin:0;text-align:right;
  line-height:1.5;font-variant-numeric:tabular-nums;text-wrap:pretty}
.sheet-note{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#6E5306;margin-top:16px;line-height:1.8}

/* ---- family at-a-glance — sibling comparison cards ---- */
.bro-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.bro-glance .gc{position:relative;display:block;background:#FFFFFF;border:1px solid var(--line);
  border-radius:4px;padding:22px 20px 18px;text-decoration:none;transition:.25s var(--ease)}
.bro-glance .gc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,30,26,.10);border-color:var(--fam-line)}
.bro-glance .gc img,.bro-glance .gc .gc-mark{height:54px;width:auto;margin-bottom:12px}
.bro-glance .gc .gc-code{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--muted-2);
  text-transform:uppercase;display:block}
.bro-glance .gc h4{color:var(--black);font-size:17px;margin:4px 0 6px}
.bro-glance .gc p{font-size:13px;color:var(--muted);margin:0;line-height:1.5}
.bro-glance .gc[aria-current="page"]{border-color:var(--fam);box-shadow:inset 0 0 0 1px var(--fam);pointer-events:none}
.bro-glance .gc .gc-tag{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.14em;color:#fff;background:var(--fam);padding:2px 7px;border-radius:2px;text-transform:uppercase}
.bro-glance .gc-hit{position:absolute;inset:0;z-index:1;-webkit-tap-highlight-color:transparent}
.bro-glance .gc-pdf{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--muted-2);text-decoration:none;padding:12px 16px;min-height:20px;
  border:1px solid var(--line);border-radius:99px;transition:border-color .2s var(--ease),color .2s var(--ease);
  -webkit-tap-highlight-color:transparent}
.bro-glance .gc-pdf:hover{border-color:var(--fam,var(--black));color:var(--fam,var(--black))}
.bro-glance .gc[aria-current="page"] .gc-pdf{pointer-events:auto}

/* ---- R9 reduced-motion statics (the global kill-switch stops the
        animations; these pin the resting states) ---- */
@media(prefers-reduced-motion:reduce){
  .bro-progress{display:none}
  .bro-mark-draw path:not(.dashkeep){stroke-dashoffset:0}
  .bro-mark-draw path.dashkeep{opacity:1}
  .bro-walk .w,.bro-glance .gc,.bro-glance .gc-pdf,.bro-subnav a,.bro-splash .bs-go,.bro-splash .bs-alt{transition:none}
  .bro-walk .w:hover,.bro-glance .gc:hover,.bro-splash .bs-go:hover{transform:none}
}