/* ============================================================
   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);
  min-width:0}
/* CDNS-REV-001: a .btn used inside a narrow padded panel (industrial.html's dark .ethos card,
   in the right-hand column of a .two grid on mobile) doesn't have room for a longer label
   ("The Manufacturing Thesis") at its natural single-line width, and as a flex item defaults to
   min-width:auto — sized to that natural width regardless of its container — so it overflowed
   the card and the page. min-width:0 lets it shrink and wrap its label onto a second line
   instead when its container is this tight; every other .btn on the site has enough room that
   this never triggers, so they're unaffected. */
.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:1180px){   /* R11 2026-09-08: nine labels + util on ONE row need ≥1181px; the burger takes over below */
  .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}
/* CDNS-REV-001: auto-fit/minmax(Npx,1fr) can never size a track below Npx, so once a container's
   own content width drops below N (true for .wrap's ~264px content box on any phone up to ~430px
   wide once its 56px of side padding is subtracted) the grid is forced past its container and the
   page overflows horizontally. min(Npx,100%) keeps the same N-px target column width — and the
   same breakpoint at which it switches from one column to two/three — at every width wide enough
   to honour it, and simply lets the column shrink to 100% (i.e. genuinely single-column) instead
   of overflowing once the container can't. No visual change above the old floor. */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),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;display:block;overflow-x:auto;max-width:100%}
/* display:block + overflow-x:auto lets a table that still can't fit its content at very narrow
   widths (even after the .two min-width:0 fix above) scroll horizontally within its own box
   instead of forcing the page to scroll — thead/tbody/tr/td keep their own table-part display
   values, so internal row/column layout is unaffected. */
.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:normal;
  text-align:left;min-width:0;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}
/* CDNS-REV-001: chips are meant to be short single-line labels, and the overwhelming majority
   are short enough that white-space:normal never visibly changes them — they just render on one
   line same as nowrap would, since wrapping only triggers when a chip doesn't fit its available
   width. A few chips run much longer (e.g. manufacturing.html's "platform heritage — three
   decades of mobile HDD rig design & operation, to 1,000,000 lb"), and forcing those to stay on
   one line either overflows the page (nowrap) or, once a container's own min-width:0 lets it
   shrink to fit the layout around it (see .two below), gets silently clipped by an ancestor's
   overflow:hidden (e.g. .card) instead — worse than overflowing, because it fails silently. This
   used to only apply white-space:normal below 480px, but the clipping case isn't a mobile-only
   problem (company.html's NATO-export chip clips inside a .card at full desktop width once its
   .two column is allowed to shrink), so it's unconditional now. min-width:0 is what actually lets
   the wrap take effect — a flex item's automatic minimum size defaults to its content's
   min-content (i.e. its longest run of unbroken text), not 0, so without this the chip still
   can't shrink below nowrap width even with wrapping otherwise allowed. */

/* ---- 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}}
/* CDNS-REV-001: grid items default to min-width:auto, which sizes them to their content's
   min-content rather than the grid track — a wide child (a table with long unbreakable cell
   content, or a long chip/button label, are the cases that surfaced this) forced its whole track
   wider than the viewport and dragged its sibling column along with it, blowing out the page
   horizontally on mobile even though .two itself was correctly sized. min-width:0 lets both
   columns actually shrink to the track width they're given.
   This was briefly scoped to :has(.spec) instead of a blanket .two>*, because an unscoped rule
   let a .card with a long .chip shrink below the chip's old nowrap width and, since .card has
   overflow:hidden, that clipped the chip's text instead of fixing anything. The real fix for
   that turned out to be the .chip itself (now min-width:0 + white-space:normal unconditionally,
   see above) rather than avoiding this rule — a chip that can wrap no longer needs its column to
   stay wide, so scoping this to just the table case is no longer necessary and was leaving a
   real page-overflow bug unfixed in every other .two block with a long chip or button label. */
.two>*{min-width:0}
.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 img.gc-photo{height:auto;width:100%;max-height:150px;object-fit:contain;margin-bottom:12px;border:none;background:none;box-shadow:none;border-radius:0;padding:0}
.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}
}

/* R10-START */
/* ============================================================
   R10 — 2026-09-07 · NAV DROPDOWNS + BROCHURE LIBRARY
   Owner ask: "wire all the brochures into the Brochures tab on
   the menu; tighten; highly professional."
   · SYSTEMS and BROCHURES become hover / focus dropdowns. No caret
     is drawn, so the primary row keeps the R8 width budget exactly
     (the ten labels are byte-identical). The label still navigates
     (index#fleet / brochures/), so touch and no-JS users lose nothing.
   · ≤940px the panels become accordions inside the burger menu,
     opened by the .dd-tog chevron button.
   · The family-grouped card styles that were repeated inline in
     every #brochures / #fleet-nav section now live here once.
   · Library page (brochures/index.html) filter bar + family rows.
   Everything below is additive and namespaced (.nav-dd / .dd- /
   .ddm- / .lib- / .bro-fam-row / .fam-link). Nothing above changes.
   ============================================================ */

/* ---- dropdown scaffolding (desktop) ---- */
.nav .wrap{position:relative}
.nav .links .nav-dd{position:relative;display:inline-flex;align-items:center}
.nav .links .nav-dd-mega{position:static}
.nav .links .dd-tog{display:none}
.nav .links .dd-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:260;min-width:320px;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--tactical);border-radius:0 0 4px 4px;
  box-shadow:0 22px 48px rgba(28,30,26,.14);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s}
.nav .links .dd-panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:10px}
.nav .links .nav-dd.open > .dd-panel,
.nav .links .nav-dd:focus-within > .dd-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav .links .nav-dd.open > a.dd-top{color:var(--black);background:rgba(75,91,54,.06)}
.nav .links .nav-dd.open > a.dd-top::after{transform:scaleX(1)}

/* panel links reset the primary-row treatment */
.nav .links .dd-panel a{display:block;font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:0;
  text-transform:none;color:var(--black);padding:9px 14px;border-radius:3px;white-space:nowrap;line-height:1.35}
.nav .links .dd-panel a::after{display:none}
.nav .links .dd-panel a:hover{background:rgba(75,91,54,.07);color:var(--black)}

/* SYSTEMS — simple list */
.nav .links .dd-simple a b{display:block;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--black)}
.nav .links .dd-simple a small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.nav .links .dd-simple a:hover b{color:var(--tactical)}
.nav .links .dd-simple a.dd-more{margin-top:6px;border-top:1px solid var(--line);border-radius:0;padding-top:12px;
  font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tactical)}
.nav .links .dd-simple a.dd-more:hover{background:transparent;color:var(--black)}

/* BROCHURES — mega panel, aligned to the content column */
.nav .links .dd-mega{left:0;right:0;top:100%;min-width:0;padding:22px 26px 18px}
.nav .links .dd-mega .ddm-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:0 8px 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.nav .links .dd-mega .ddm-head b{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--black)}
.nav .links .dd-mega .ddm-head span{font-size:13px;color:var(--muted)}
.nav .links .dd-mega .ddm-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 22px}
.nav .links .dd-mega .ddm-col{min-width:0}
.nav .links .dd-mega .ddm-fam,.nav .links .dd-mega span.ddm-fam{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;padding:8px 8px 5px;white-space:nowrap;border-radius:3px}
.nav .links .dd-mega a.ddm-fam:hover{background:transparent;text-decoration:underline;text-underline-offset:3px}
.nav .links .dd-mega .ddm-fam + .ddm-fam,.nav .links .dd-mega .ddm-it + .ddm-fam{margin-top:12px}
.nav .links .dd-mega a.ddm-it{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 8px;font-size:13.5px}
.nav .links .dd-mega a.ddm-it small{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--muted);flex:none}
.nav .links .dd-mega a.ddm-it:hover small{color:var(--tactical)}
.nav .links .dd-mega .ddm-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:14px;padding:14px 8px 0}
.nav .links .dd-mega a.ddm-all{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:#F7F7F4;background:var(--tactical);padding:10px 18px;border-radius:2px}
.nav .links .dd-mega a.ddm-all:hover{background:#5C6E43;color:#fff}
.nav .links .dd-mega a.ddm-all .ar{transition:transform .2s}
.nav .links .dd-mega a.ddm-all:hover .ar{transform:translateX(4px)}
.nav .links .dd-mega .ddm-foot small{font-size:12px;color:var(--muted);max-width:60ch}


/* ---- mobile: accordion inside the burger menu ---- */
@media(max-width:1180px){
  .nav .links .nav-dd{display:block;position:relative}
  .nav .links .nav-dd > a.dd-top{display:block;padding-right:76px}
  .nav .links .dd-tog{display:flex;position:absolute;right:20px;top:8px;width:40px;height:40px;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--line-2);border-radius:3px;color:var(--black);cursor:pointer;padding:0}
  .nav .links .dd-tog::before{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
  .nav .links .nav-dd.open .dd-tog{border-color:var(--tactical);color:var(--tactical)}
  .nav .links .nav-dd.open .dd-tog::before{transform:translateY(2px) rotate(225deg)}
  .nav .links .dd-panel,.nav .links .nav-dd:focus-within > .dd-panel{position:static;display:none;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px 0 10px;background:var(--ink-2);min-width:0;transition:none}
  .nav .links .nav-dd.open > .dd-panel{display:block}
  .nav .links .dd-panel::before{display:none}
  .nav .links .dd-panel a{padding:10px 28px 10px 44px;border-bottom:0;font-size:15px;white-space:normal}
  .nav .links .dd-simple a.dd-more{margin:6px 28px 0 44px;padding:12px 0 4px}
  .nav .links .dd-mega{padding:0}
  .nav .links .dd-mega .ddm-cols{display:block}
  .nav .links .dd-mega .ddm-head{padding:12px 28px 10px 44px;margin:0}
  .nav .links .dd-mega .ddm-fam,.nav .links .dd-mega span.ddm-fam{padding:12px 28px 4px 44px}
  .nav .links .dd-mega .ddm-fam + .ddm-fam,.nav .links .dd-mega .ddm-it + .ddm-fam{margin-top:0}
  .nav .links .dd-mega .ddm-foot{padding:14px 28px 6px 44px;margin-top:8px}
}

/* ---- family-grouped brochure cards (shared; was inline in every section) ---- */
.bro-fam{margin-top:30px}
.bro-fam:first-of-type{margin-top:0}
.bro-fam-h{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;margin-bottom:14px}
.bro-fam-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.bro-fam-row .bro-fam-h{margin-bottom:0}
.fam-link{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--tactical);text-decoration:none}
.fam-link:hover{color:var(--black)}
.fam-link .ar{display:inline-block;transition:transform .2s var(--ease)}
.fam-link:hover .ar{transform:translateX(4px)}
#brochures .gc,#fleet-nav .gc,#library .gc{position:relative}
#brochures .gc-code,#fleet-nav .gc-code,#library .gc-code{color:var(--muted-2)}
.gc-cta{display:block;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);font-weight:600}
.gc-cta .ar{display:inline-block;transition:transform .2s var(--ease)}
.gc:hover .gc-cta .ar{transform:translateX(4px)}
.gc.air:hover{border-color:var(--air);box-shadow:0 18px 40px rgba(46,92,138,.16)}
.gc.air:hover .gc-cta{color:var(--air)}
.gc.ground:hover{border-color:var(--ground);box-shadow:0 18px 40px rgba(75,91,54,.16)}
.gc.ground:hover .gc-cta{color:var(--ground)}
.gc.water:hover{border-color:var(--water);box-shadow:0 18px 40px rgba(31,110,140,.16)}
.gc.water:hover .gc-cta{color:var(--water)}
.gc.under:hover{border-color:var(--under);box-shadow:0 18px 40px rgba(65,70,76,.16)}
.gc.under:hover .gc-cta{color:var(--under)}
.gc.indus:hover{border-color:var(--indus);box-shadow:0 18px 40px rgba(156,100,35,.16)}
.gc.indus:hover .gc-cta{color:#7A4E1C}
.gc.defence:hover,.gc.eddie:hover{border-color:#A8341F;box-shadow:0 18px 40px rgba(168,52,31,.16)}
.gc.defence:hover .gc-cta,.gc.eddie:hover .gc-cta{color:#A8341F}
.bro-glance .gc img.gc-photo.is-render{aspect-ratio:3/2;object-fit:cover;max-height:none;border-radius:3px}
.bro-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.sec-head .bro-cta{margin-top:22px}

/* ---- library page ---- */
.libhero{background:radial-gradient(90% 120% at 82% 0%,rgba(75,91,54,.08),transparent 60%),#fff}
.libhero .marks{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:26px 0 6px}
.libhero .marks img{width:64px;height:64px;object-fit:contain;opacity:.92}
.lib-bar{position:sticky;top:calc(var(--nav-h,82px) + 8px);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:4px;
  padding:12px 14px;box-shadow:0 8px 24px rgba(28,30,26,.06)}
.lib-pills{display:flex;gap:6px;flex-wrap:wrap}
.lib-pill{--fam:var(--tactical);display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:8px 13px;border-radius:2px;border:1px solid var(--line-2);background:#fff;color:#3A3D34;cursor:pointer;
  transition:.2s var(--ease)}
.lib-pill small{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted);font-weight:600}
.lib-pill:hover{border-color:var(--fam);color:var(--black)}
.lib-pill.on{background:var(--fam);border-color:var(--fam);color:#fff}
.lib-pill.on small{color:rgba(255,255,255,.8)}
.lib-pill:focus-visible{outline:2px solid var(--black);outline-offset:2px}
.lib-search{position:relative;flex:1 1 260px;max-width:360px}
.lib-search input{width:100%;box-sizing:border-box;font-family:var(--body);font-size:14px;padding:10px 12px 10px 38px;border:1px solid var(--line-2);border-radius:2px;
  background:#fff;color:var(--black)}
.lib-search input:focus{outline:2px solid var(--tactical);outline-offset:1px;border-color:var(--tactical)}
.lib-search svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--muted)}
.lib-count{margin:16px 2px 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.lib-empty{margin:26px 0 0;padding:18px 20px;border:1px dashed var(--line-2);border-radius:4px;color:var(--muted)}
#library .bro-fam{margin-top:34px}
#library .bro-fam[hidden]{display:none}
#library .gc[hidden]{display:none}
.lib-read .card .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted);display:block;margin-bottom:10px}
@media(prefers-reduced-motion:reduce){
  .nav .links .dd-panel{transition:none}
  .fam-link .ar,.gc-cta .ar,.nav .links .dd-mega a.ddm-all .ar,.nav .links .dd-tog::before{transition:none}
}

/* ---- Wave 1 (2026-09-07 pm): render galleries · legal prose · contact cards ---- */
.rg{margin:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;transition:.25s var(--ease)}
.rg:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,30,26,.10)}
.rg img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#fff}
.rg img.contain{object-fit:contain;padding:18px;box-sizing:border-box}
.rg figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding:10px 12px;border-top:1px solid var(--line)}
.legal-body{max-width:820px}
.legal-body h3{margin-top:38px;font-size:clamp(20px,2vw,26px)}
.legal-body h3:first-child{margin-top:0}
.legal-body p{margin:12px 0 0;color:#33362F;text-wrap:pretty}
.legal-body a,.contact-card a{color:var(--tactical);text-decoration:underline;text-underline-offset:3px}
.legal-body a:hover,.contact-card a:hover{color:var(--black)}
.contact-card p{color:#33362F}
.rgrid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
@media(prefers-reduced-motion:reduce){.rg{transition:none}.rg:hover{transform:none}}
/* R10-END */


/* ============================================================
   R9 — PRESENTATION PASS, 2026-09-11
   Source of truth: tools/r11/css/_R9-presentation-layer.css
   It is inserted into cs-R9-*.css BEFORE the "/* R11 (rebuild" marker,
   because rebuild.py's patch_css() TRUNCATES the stylesheet at that
   marker and re-appends its generated watermark rules — anything after
   it is destroyed on the next rebuild.

   Additive only. Every R8 rule stands; every class name other pages
   depend on is untouched. Adds motion, depth and typographic finish —
   and adds NO claim, no copy and no colour outside the binding accent
   rules at the head of this file: OLIVE is the interactive accent,
   GOLD only for solid fills and small decorative accents, never gold
   body text on white. Every effect degrades to the R8 appearance if it
   cannot run, and every one is disabled under prefers-reduced-motion.
   ============================================================ */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:.22s; --t-mid:.45s; --t-slow:.85s;
  --lift:0 18px 44px rgba(28,30,26,.13);
  --lift-sm:0 8px 20px rgba(28,30,26,.09);
  --edge:rgba(75,91,54,.42);
}

/* 1 · reveal, with weight — a block arrives rather than slides */
.reveal{transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.reveal:not(.in){transform:translateY(26px) scale(.994)}
.reveal.in{transform:none}

/* 2 · a photograph opens from its own lower edge instead of blinking in.
   NOTE the opacity floor: .rise never goes fully transparent, so if the
   observer never fires the frame is still legible rather than invisible. */
.rise{clip-path:inset(12% 0 0 0);transform:scale(1.035);opacity:.55;
  transition:clip-path 1.05s var(--ease-out),transform 1.4s var(--ease-out),opacity .7s linear}
.rise.in{clip-path:inset(0 0 0 0);transform:none;opacity:1}

/* 3 · parallax — nothing moves until JS writes --py */
.parallax{will-change:transform;transform:translate3d(0,var(--py,0px),0)}

/* 4 · depth on the dark bands: two radial washes, no image, no weight */
.tint-2,.band-dark{position:relative;isolation:isolate}
.tint-2::before,.band-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(255,255,255,.055),transparent 58%),
    radial-gradient(90% 70% at 88% 100%,rgba(201,162,39,.05),transparent 62%)}

/* 5 · the gold sweep — the house's one piece of ornament, on things that behave like a door */
.sweep{position:relative;overflow:hidden}
.sweep::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:translateX(-100%);opacity:0;transition:transform .62s var(--ease-out),opacity .3s}
.sweep:hover::before,.sweep:focus-within::before{transform:translateX(100%);opacity:1}

/* 6 · cards and buttons: lift, not glow */
.card,.lcard,.line-card{transition:transform var(--t-mid) var(--ease-out),
  box-shadow var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-out)}
.card:hover,.line-card:hover{transform:translateY(-4px);box-shadow:var(--lift);border-color:var(--edge)}
.btn{transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),
  background-color var(--t-fast) linear,color var(--t-fast) linear}
.btn:hover{transform:translateY(-2px);box-shadow:var(--lift-sm)}
.btn:active{transform:translateY(0);box-shadow:none}

/* 7 · focus is visible and olive on everything interactive — finish includes accessibility */
a:focus-visible,button:focus-visible,.btn:focus-visible,.card:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--tactical);outline-offset:3px;border-radius:2px}

/* 8 · a hairline that reports how far down the page the reader is */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;pointer-events:none;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--tactical),var(--gold));opacity:.9}

/* 9 · type: finish */
h1,h2,.hero h1{text-wrap:balance}
p,li,.lede{text-wrap:pretty}
h1{letter-spacing:-.006em}
.hero h1{letter-spacing:-.012em}
.stats .n,.spec .v,.kfig .n{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1}

/* 10 · honour the reader's setting */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal:not(.in),.rise,.parallax{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .sweep::before{display:none}
  .card:hover,.line-card:hover,.btn:hover{transform:none}
  .progress{display:none}
}
/* 11 · figure drift — TRIED AND BACKED OUT, 2026-09-11. Kept as a note so nobody rebuilds it.
   The idea: hold the frame still and let the photograph drift inside it on scroll. It needs the frame to
   clip (overflow:hidden) and the image to sit slightly oversized (scale ~1.06) so the drift never exposes an
   edge. Both are wrong here:
     · .rfig has NO rules in R8 at all — a figure renders at its natural size and clips nothing. Adding a clip
       and a scale would crop product imagery for the first time, contained cut-outs included. That is the
       "jellyfish cut in half" failure the figure standard was written to stop (FIGURE-STANDARD_2026-09-10).
     · .figband cells carry .ar-free for very wide and portrait frames precisely so they keep their own shape;
       scaling those crops them too.
   A drift is worth having, but it needs a figure component that is a cropping window BY DESIGN, with the
   contained cut-outs opted out of it. That is a figure-standard change and the owner's call, not a CSS tweak.
   ---------- end R9 presentation layer ---------- */

/* R11 (rebuild, 2026-09-07) */
.spec-wrap .spec{width:100%;border-collapse:collapse;background:#fff}
.spec-wrap .spec th{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tactical);border-bottom:2px solid var(--tactical)}
.libhero .marks{display:none}
.bro.bro-autonomy{--fam:var(--tactical);--fam-ink:var(--tactical);--fam-soft:rgba(75,91,54,.07);--fam-line:rgba(75,91,54,.38)}
.gc.autonomy:hover{border-color:var(--tactical);box-shadow:0 18px 40px rgba(75,91,54,.16)}
.gc.autonomy:hover .gc-cta{color:var(--tactical)}
/* R11 page-spec components */
figure.rg.specfig{max-width:860px}
figure.rg.specfig img{width:100%;max-height:520px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:4px;display:block}
figure.rg.specfig figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:10px}
/* R11 watermark drawings (2026-09-08, owner: "i want it to look like steadyeddie.ca with the watermarked imagery") — the
   sister site's .wm mechanism, ported: one large engineering drawing (text-stripped sheet or edge-traced model, ink on
   white, 1400 × 955) behind a section at ~12% in multiply, faded at the edges, held to one side. Tiles live in
   assets/img/wm/wm-<name>-1400.webp; the per-tile rules are generated by wmx_rules() (see below). Class it on a section:
   `wmx wmx-<name>` (right side by default) or `wmx wmx-left wmx-<name>`. */
section.wmx{position:relative;overflow:hidden;isolation:isolate}
section.wmx>.wrap{position:relative;z-index:1}
section.wmx::before{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;background-size:auto 118%;background-position:right -6% center;mix-blend-mode:multiply;opacity:.12;-webkit-mask-image:radial-gradient(ellipse 78% 88% at 50% 50%,#000 42%,transparent 100%);mask-image:radial-gradient(ellipse 78% 88% at 50% 50%,#000 42%,transparent 100%)}
section.wmx.wmx-left::before{background-position:left -6% center}
section.wmx.wmx-soft::before{opacity:.08}
section.photo.wmx::before{display:none}
@media (max-width:760px){section.wmx::before{background-size:auto 92%;opacity:.09}}
section.wmx.wmx-aquifer::before{background-image:url(../img/wm/wm-aquifer-1400.webp)}
section.wmx.wmx-cab-plan::before{background-image:url(../img/wm/wm-cab-plan-1400.webp);background-size:auto 120%}
section.wmx.wmx-cones::before{background-image:url(../img/wm/wm-cones-1400.webp);background-size:auto 116%}
section.wmx.wmx-crate-layer::before{background-image:url(../img/wm/wm-crate-layer-1400.webp);background-size:auto 116%;background-position:right -4% center}
section.wmx.wmx-cs-120::before{background-image:url(../img/wm/wm-cs-120-1400.webp)}
section.wmx.wmx-cs-310::before{background-image:url(../img/wm/wm-cs-310-1400.webp)}
section.wmx.wmx-cs-320::before{background-image:url(../img/wm/wm-cs-320-1400.webp)}
section.wmx.wmx-cs-410::before{background-image:url(../img/wm/wm-cs-410-1400.webp)}
section.wmx.wmx-cs-460::before{background-image:url(../img/wm/wm-cs-460-1400.webp)}
section.wmx.wmx-forward-cell::before{background-image:url(../img/wm/wm-forward-cell-1400.webp)}
section.wmx.wmx-gimbal::before{background-image:url(../img/wm/wm-gimbal-1400.webp);background-size:auto 112%}
section.wmx.wmx-goose-ga::before{background-image:url(../img/wm/wm-goose-ga-1400.webp)}
section.wmx.wmx-joystick-pod::before{background-image:url(../img/wm/wm-joystick-pod-1400.webp);background-size:auto 126%;background-position:right -2% center;opacity:.10}
section.wmx.wmx-launcher::before{background-image:url(../img/wm/wm-launcher-1400.webp)}
section.wmx.wmx-machine-iso::before{background-image:url(../img/wm/wm-machine-iso-1400.webp);background-size:auto 122%}
section.wmx.wmx-machine-plan::before{background-image:url(../img/wm/wm-machine-plan-1400.webp);background-size:auto 124%}
section.wmx.wmx-machine-sweep::before{background-image:url(../img/wm/wm-machine-sweep-1400.webp)}
section.wmx.wmx-pedal-pod::before{background-image:url(../img/wm/wm-pedal-pod-1400.webp);background-size:auto 132%;background-position:right -4% center}
section.wmx.wmx-pod-elevation::before{background-image:url(../img/wm/wm-pod-elevation-1400.webp);background-size:auto 120%;background-position:right -4% center}
section.wmx.wmx-pod-plan::before{background-image:url(../img/wm/wm-pod-plan-1400.webp)}
section.wmx.wmx-safety-paths::before{background-image:url(../img/wm/wm-safety-paths-1400.webp);background-size:auto 112%;background-position:right -2% center;opacity:.11}
section.wmx.wmx-tractor::before{background-image:url(../img/wm/wm-tractor-1400.webp);background-size:auto 122%}
section.wmx.wmx-travel-pod::before{background-image:url(../img/wm/wm-travel-pod-1400.webp);background-size:auto 126%;background-position:right -2% center;opacity:.10}
section.wmx.wmx-trembler::before{background-image:url(../img/wm/wm-trembler-1400.webp)}
/* R11 drawing width (2026-09-08, owner: "formatting, this is WAY to big for what it is") — a mechanism drawing sits in
   the text column, not across the whole wrap; only a figure marked wide may run to the wrap. */
figure.diagram{max-width:820px}
figure.diagram.wide{max-width:1144px}
section.photo figure.diagram{max-width:760px}
/* R11 white band (2026-09-10, late night) — owner: "put them on a white background and centre the image on it" and "i like it when
   they bleed off the page on either side". A product render on a white ground runs as a white section from edge to edge with the
   render centred at full size between the head and the blocks; a spec section opts in with photo.fit = "whole". */
section.photo-whole{background:#fff;position:relative}
section.photo-whole::before{display:none!important}
section.photo-whole .pw-media{margin:clamp(20px,3vw,40px) calc(50% - 50vw) clamp(24px,3.2vw,44px);padding:0 clamp(12px,3vw,48px);background:#fff;display:flex;justify-content:center}
section.photo-whole .pw-media picture{display:block;width:100%;max-width:1480px}
section.photo-whole .pw-media img{display:block;width:100%;height:auto}
/* R11 spec sheets (2026-09-10, late night) — owner: "fully rebuild the spec sheets for each of our products and wire them to the site,
   full depth, fully polish, branded". tools/specsheets/make_specsheets.py writes the page. Every group of the specification sits under a
   short olive-ruled head on one column grid, so the tables line up down the page; a jump row opens a long specification; the document
   line closes the sheet; the /programs index links each sheet and its PDF. */
h3.ss-group{font-size:clamp(15px,1.25vw,17px);letter-spacing:.14em;line-height:1.25;margin:clamp(34px,4vw,52px) 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--tactical);scroll-margin-top:110px}
h3.ss-group + .spec-wrap{margin-top:14px!important}
.spec-wrap table.spec.ss{table-layout:fixed;width:100%;min-width:640px}
table.spec.ss col.c-k{width:33%}
table.spec.ss col.c-v{width:27%}
table.spec.ss col.c-b{width:40%}
.spec-wrap table.spec.ss td:first-child{font-weight:600;color:var(--black)}
.spec-wrap table.spec.ss td:nth-child(2){color:var(--black);font-variant-numeric:tabular-nums}
.spec-wrap table.spec.ss td:nth-child(3){color:var(--muted);font-size:13.5px}
p.ss-jump{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px 10px}
p.ss-jump a{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--black);border:1px solid var(--line);background:#fff;padding:7px 11px}
p.ss-jump a:hover{border-color:var(--tactical);color:var(--tactical)}
p.ss-meta{margin:22px 0 0;font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
p.ss-links a{font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
/* The presentation pass (2026-09-11), read against wiredindustries.ca and evensteven.team: the specification sits on WI's blueprint
   ground (its tables stay on white), and the sheet closes on ink with a gold rule, the way both sites close and the way the PDF's own
   closing block does. Scoped by what only a spec sheet carries (h3.ss-group, p.ss-meta), so no product page changes. */
section:has(h3.ss-group){background-color:#fff;background-image:linear-gradient(rgba(75,91,54,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(75,91,54,.075) 1px,transparent 1px);background-size:24px 24px;background-position:center top}
section:has(h3.ss-group) .spec-wrap table.spec.ss{background:#fff}
section:has(p.ss-meta){background:var(--black);border-top:4px solid #C9A227}
section:has(p.ss-meta) .eyebrow{color:#C9A227}
section:has(p.ss-meta) h2{color:#F7F7F4}
section:has(p.ss-meta) .lede{color:#D9DBD3}
section:has(p.ss-meta) hr.rule{background:#C9A227;border-color:#C9A227}
section:has(p.ss-meta) .btn.ghost{color:#F7F7F4;border-color:rgba(247,247,244,.45);background:transparent}
section:has(p.ss-meta) .btn.ghost:hover{color:#C9A227;border-color:#C9A227}
section:has(p.ss-meta) p.ss-meta{color:rgba(247,247,244,.58)}
.stats.ss-stats.long .n{font-size:clamp(20px,2.1vw,30px);line-height:1.12}   /* a range or an 'Up to' figure stays on one line */
/* R11 photo band (2026-09-08) — a section with `photo` in its spec, the way steadyeddie.ca's .sec.photo works: the picture
   as a full-bleed media layer, a dark gradient scrim, the section's own head and blocks in white over it, a mono caption
   line at the foot. Owner: "layer one of these photos behind this text … look at how we did it on steadyeddie.ca". */
section.photo{position:relative;isolation:isolate;background:#0B0D0F;min-height:clamp(420px,60vh,720px);display:block}
section.photo>picture.media{position:sticky;top:0;height:100vh;height:100svh;z-index:0;display:block;overflow:hidden}
section.photo>picture.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
section.photo>.scrim{position:sticky;top:0;height:100vh;height:100svh;margin-top:-100vh;margin-top:-100svh;z-index:1;background:linear-gradient(90deg,rgba(11,13,15,.29) 0%,rgba(11,13,15,.20) 48%,rgba(11,13,15,.04) 100%),linear-gradient(180deg,rgba(11,13,15,.09) 0%,rgba(11,13,15,.22) 45%,rgba(11,13,15,.42) 100%)}
section.photo>.wrap{position:relative;z-index:2;width:100%;margin-top:-100vh;margin-top:-100svh;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(40px,5vw,64px);color:#F7F7F4}
section.photo .eyebrow{color:#C7CAC2}
section.photo h2{color:#F7F7F4}
section.photo .rule{border-color:rgba(247,247,244,.30)}
section.photo .lede{color:rgba(247,247,244,.9);text-shadow:0 1px 4px rgba(0,0,0,.5)}
section.photo .prose p{color:rgba(247,247,244,.9);text-shadow:0 1px 4px rgba(0,0,0,.5)}
section.photo .prose a{color:#fff;text-decoration-color:rgba(247,247,244,.5)}
section.photo .prose strong{color:#fff}
section.photo .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,247,244,.72);margin-top:22px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
section.photo .spec-wrap .spec,section.photo table{background:rgba(255,255,255,.96)}
section.photo .btn.ghost{color:#F7F7F4;border-color:rgba(247,247,244,.42)}
section.photo .diagram figcaption,section.photo figure figcaption,section.photo table caption,section.photo .spec-wrap caption{color:rgba(247,247,244,.72);text-shadow:0 1px 3px rgba(0,0,0,.6)}
section.photo .two p{color:rgba(247,247,244,.9);text-shadow:0 1px 4px rgba(0,0,0,.5)}
section.photo .two a,section.photo .two strong{color:#fff}
section.photo .bro-callout{background:rgba(255,255,255,.94)}
section.photo figure.diagram,section.photo .diagram{background:rgba(255,255,255,.96);border-radius:6px;padding:12px}
section.photo .card,section.photo .card h3,section.photo .card h4,section.photo .step,section.photo .steps>*,section.photo .steps h3,section.photo .steps h4,section.photo .pair>*,section.photo .pair h3,section.photo .pair h4,section.photo .tick,section.photo .ticks>*,section.photo .stat,section.photo .stats>*,section.photo .spec-wrap,section.photo .bro-callout,section.photo .bro-callout .big,section.photo .bro-callout p{color:#14181A}
section.photo .card p,section.photo .steps p,section.photo .pair p,section.photo .pair li{color:#3C4A42}
@media (max-width:760px){section.photo>.scrim{background:linear-gradient(180deg,rgba(11,13,15,.25) 0%,rgba(11,13,15,.36) 50%,rgba(11,13,15,.45) 100%)}}
body:not(.bro){--fam:var(--tactical);--fam-ink:var(--tactical);--fam-soft:rgba(75,91,54,.07);--fam-line:rgba(75,91,54,.38)}
.prose p{max-width:76ch;margin:0 0 14px;font-size:17px;line-height:1.75;color:#33362F}
.prose p:last-child{margin-bottom:0}
.prose ul{margin:0 0 14px 20px;line-height:1.7;color:#33362F}
.diagram{margin:0}
.diagram svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:4px;background:#fff}
.diagram figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:10px}
.cs{font-family:var(--mono);font-size:.82em;letter-spacing:.08em;color:var(--muted);font-weight:400}
.dd-panel a b .cs{font-size:.78em;color:var(--muted)}
.spec-wrap .spec td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14.5px;line-height:1.6;color:#33362F}
.spec-wrap .spec th{padding:12px 14px;text-align:left}
.spec-wrap .spec tr:hover td{background:rgba(75,91,54,.04)}
.card ul.bro-ticks{margin-top:8px}

/* ---- the doctrine strip, identical on every page of both properties (SITE-PLAN-2 §3.3, §4.6) */
.foot .doct-strip{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(230,232,234,.14);font-family:var(--display);font-weight:500;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:#9BA86A}
.foot .doct-strip .dv{color:#5B6058;font-weight:400}
.foot .doct-strip + .disc{border-top:0;margin-top:16px;padding-top:0}
@media(max-width:560px){.foot .doct-strip{font-size:11.5px;letter-spacing:.12em;gap:0 8px}}

/* ============================================================================================================
   R11 IMAGERY AND PRESENTATION — the five components of SITE-PLAN-2 §6b.2, built once before the trees fork.
   Reference: the sister site's own <picture> ladder (AVIF + WebP + JPEG, 480/960/1600/2400, explicit sizes) and
   its section watermark. .diagram needs nothing — it is styled at lines 992-994. .wm is NOT free in this
   stylesheet: it is the nav wordmark, 8 rules, so the tile class is .wmk.
   ============================================================================================================ */

/* 1 · picture.hero-media — the full-bleed media hero, with a slow pan */
.mediahero{position:relative;isolation:isolate;overflow:hidden;background:#0B0D0F;min-height:clamp(420px,58vh,660px);display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0;display:block;overflow:hidden;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}
.hero-media.motion-pan img{animation:cs-pan 38s ease-in-out infinite alternate;transform-origin:center 45%;will-change:transform}
@keyframes cs-pan{from{transform:scale(1.045) translate3d(-1.1%,0,0)}to{transform:scale(1.10) translate3d(1.1%,0,0)}}
.mediahero .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,13,15,.20) 0%,rgba(11,13,15,.58) 56%,rgba(11,13,15,.88) 100%)}
.mediahero > .wrap{position:relative;z-index:2;padding-top:88px;padding-bottom:56px;width:100%}
.mediahero .eyebrow{color:#C7CAC2}
.mediahero h1{color:#F7F7F4}
.mediahero h1 span{color:#B9C48F}
.mediahero .lede{color:rgba(247,247,244,.86)}
.mediahero .rule{border-color:rgba(247,247,244,.30)}
.mediahero .btn.ghost{color:#F7F7F4;border-color:rgba(247,247,244,.42)}
.mediahero .btn.ghost:hover{border-color:#F7F7F4;background:rgba(247,247,244,.08)}
.mediahero .cap{position:absolute;left:20px;right:20px;bottom:12px;z-index:2;margin:0;text-align:right;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(247,247,244,.62)}
@media(prefers-reduced-motion:reduce){.hero-media.motion-pan img{animation:none}}

/* 2 · the responsive ladder — every <img> carries a srcset; the <source> order is AVIF, WebP, then the JPEG fallback */
picture.rimg{display:block}
picture.rimg img{display:block;width:100%;height:auto}
figure.rfig{margin:30px auto 0;max-width:900px}
figure.rfig picture.rimg img{max-height:540px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:4px}
figure.rfig.wide{max-width:1144px}
figure.rfig figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:10px}

/* 2b · .plate-dark — the Water treatment. SITE-PLAN-2 §6b.3 left this open for /systems/water (then /systems/orca): renders/cs-310.jpg and
   renders/cs-320.jpg are the only two of the twelve renders on a black ground, and the plan required either a
   recut on white or a deliberate dark plate. DELIBERATE (2026-09-08). E03 holds a white-ground Jellyfish master
   (`Jelly white.png`, 1392x1130, opaque white) but no white-ground Orca master at all — `Orca2.png`, `Orca3.png`
   and the banner `Orca Clear.png` are all lit on the dark ground — so a recut would stand the family's two
   platforms on two different grounds. The dark plate is the water column, it is the ground both masters were lit
   for, and it is the ground the Orca banner's own JPEG fallback rung is already flattened on. Reversing it later
   is a small change: drop `"plate": "dark"` from the two picture blocks in tools/r11/pages/systems_water.json and
   recut the two masters. The class is opt-in per figure, so no other page's figures move. */
figure.rfig.plate-dark picture.rimg img{background:#0B0D0F;border-color:#20242A}
.figband figure.plate-dark{background:#0B0D0F;border-color:#20242A}
.figband figure.plate-dark picture.rimg img{background:#0B0D0F}
.figband figure.plate-dark figcaption{color:rgba(247,247,244,.62)}
.figband figure.plate-dark figcaption b{color:#F7F7F4}

/* R11 WHITE SKIN (owner 2026-09-09 ~17:1x: "lets apply the images as background shots with the text overlay and watermarks in
   between, lets switch to a white skin too"). The body has been var(--paper) since R8; what was dark was every image-backed
   element — section.photo on #0B0D0F under a black scrim, .mediahero the same, the plate-dark figures. Under body.skin-light
   those go to paper: the picture stays full-bleed, a paper-white fog rises from the text edge instead of a black one, the type
   is the page's own ink, the plates are white. The class is set per directory by LIGHT_SKIN_DIRS in shell(); the landing hero
   (rule 8) is not a spec page and never carries it. Mobile stacks the prose over the picture, so the fog is even there. */
body.skin-light section.photo{background:var(--paper)}
body.skin-light section.photo>picture.media img{filter:brightness(1.03) saturate(1.04)}
body.skin-light section.photo>.scrim{background:linear-gradient(90deg,rgba(247,247,244,.94) 0%,rgba(247,247,244,.89) 30%,rgba(247,247,244,.58) 56%,rgba(247,247,244,.10) 82%,rgba(247,247,244,0) 100%),linear-gradient(180deg,rgba(247,247,244,.14) 0%,rgba(247,247,244,0) 24%,rgba(247,247,244,0) 72%,rgba(247,247,244,.24) 100%)}
body.skin-light section.photo>.wrap{color:var(--text)}
body.skin-light section.photo .eyebrow{color:var(--fam-ink)}
body.skin-light section.photo h2{color:var(--text)}
body.skin-light section.photo .rule{border-color:var(--line-2)}
body.skin-light section.photo .lede,body.skin-light section.photo .prose p,body.skin-light section.photo .prose ul,body.skin-light section.photo .two p{color:#33362F;text-shadow:none}
body.skin-light section.photo .prose a,body.skin-light section.photo .two a{color:var(--text);text-decoration-color:rgba(28,30,26,.4)}
body.skin-light section.photo .prose strong,body.skin-light section.photo .two strong{color:var(--text)}
body.skin-light section.photo .cap{color:var(--muted-2);text-shadow:none}
body.skin-light section.photo .btn.ghost{color:var(--text);border-color:var(--line-2)}
body.skin-light section.photo .btn.ghost:hover{border-color:var(--text);background:rgba(28,30,26,.05)}
body.skin-light section.photo .diagram figcaption,body.skin-light section.photo figure figcaption,body.skin-light section.photo table caption,body.skin-light section.photo .spec-wrap caption{color:var(--muted-2);text-shadow:none}
@media (max-width:760px){body.skin-light section.photo>.scrim{background:linear-gradient(180deg,rgba(247,247,244,.80) 0%,rgba(247,247,244,.87) 45%,rgba(247,247,244,.93) 100%)}}
body.skin-light .mediahero{background:var(--paper)}
body.skin-light .hero-media img{filter:brightness(1.03) saturate(1.04)}
body.skin-light .mediahero .scrim{background:linear-gradient(180deg,rgba(247,247,244,.03) 0%,rgba(247,247,244,.20) 40%,rgba(247,247,244,.78) 76%,rgba(247,247,244,.96) 100%),linear-gradient(90deg,rgba(247,247,244,.52) 0%,rgba(247,247,244,.18) 48%,rgba(247,247,244,0) 100%)}
body.skin-light .mediahero .eyebrow{color:var(--fam-ink)}
body.skin-light .mediahero h1{color:var(--text)}
body.skin-light .mediahero .lede{color:#33362F}
body.skin-light .mediahero .rule{border-color:var(--line-2)}
body.skin-light .mediahero .btn.ghost{color:var(--text);border-color:var(--line-2)}
body.skin-light .mediahero .btn.ghost:hover{border-color:var(--text);background:rgba(28,30,26,.05)}
body.skin-light .mediahero .cap{color:var(--muted-2)}
@media (max-width:760px){body.skin-light .mediahero .scrim{background:linear-gradient(180deg,rgba(247,247,244,.28) 0%,rgba(247,247,244,.80) 46%,rgba(247,247,244,.96) 100%)}}
body.skin-light figure.rfig.plate-dark picture.rimg img,body.skin-light .figband figure.plate-dark,body.skin-light .figband figure.plate-dark picture.rimg img{background:#fff;border-color:var(--line)}
body.skin-light .figband figure.plate-dark figcaption{color:var(--muted-2)}
body.skin-light .figband figure.plate-dark figcaption b{color:var(--text)}

/* 3 · .wmk — a watermark tile behind a section, at opacity .07. Add `wmk` plus a named `wmk-<tile>` class. */
.wmk{position:relative;isolation:isolate}
.wmk::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.07;
  background-image:var(--wmk);background-repeat:repeat;background-position:center;background-size:var(--wmk-size,320px auto)}
.wmk > *{position:relative;z-index:1}
/* named tiles: the url() is relative to THIS stylesheet (assets/css/), so it resolves from any page depth.
   An inline --wmk on a page does NOT work: a url() in a custom property resolves against the stylesheet that
   consumes it, so a page-relative path 404s. The block below is GENERATED by patch_css() from the contents of
   assets/img/tiles/, so a tile dropped in that folder cannot ship without its rule and a rule cannot outlive its
   tile. Do not hand-write a .wmk- rule here; add the SVG instead, and give it a size in WMK_SIZE if 320px is wrong. */
.wmk-cab-plan{--wmk:url(../img/tiles/wmk-cab-plan.svg);--wmk-size:300px auto}
.wmk-dock{--wmk:url(../img/tiles/wmk-dock.svg);--wmk-size:320px auto}
.wmk-domains{--wmk:url(../img/tiles/wmk-domains.svg);--wmk-size:320px auto}
.wmk-forward-cell{--wmk:url(../img/tiles/wmk-forward-cell.svg);--wmk-size:320px auto}
.wmk-grid{--wmk:url(../img/tiles/wmk-grid.svg);--wmk-size:320px auto}
.wmk-keys{--wmk:url(../img/tiles/wmk-keys.svg);--wmk-size:320px auto}
.wmk-launch-chain{--wmk:url(../img/tiles/wmk-launch-chain.svg);--wmk-size:320px auto}
.wmk-strata{--wmk:url(../img/tiles/wmk-strata.svg);--wmk-size:320px auto}
.wmk-tooling{--wmk:url(../img/tiles/wmk-tooling.svg);--wmk-size:300px auto}
.wmk-tracks{--wmk:url(../img/tiles/wmk-tracks.svg);--wmk-size:320px auto}
.wmk-water{--wmk:url(../img/tiles/wmk-water.svg);--wmk-size:320px auto}
@media(prefers-reduced-motion:no-preference){.wmk::before{transition:opacity .4s ease}}

/* 3b · ONE-ROW HEADER (owner 2026-09-08: "fix the menu bar, align it to one row"). The R8 header put .nav-util on its own
   line (flex-basis:100%). With nine dropdown labels the row and the utility block share one line: labels at 13px/.045em with
   7px side padding, the globe and Enquiries tightened, nowrap. Measured on test.cdnshield.ca: one row at 1200, 1280, 1440 and
   1920 px; at 1100 px the utility block overflows, so the burger breakpoint in the R8 stylesheet and script moved 940 → 1180. */
@media(min-width:1181px){
  .nav .links{flex-wrap:nowrap;gap:0 1px}
  .nav .links a.dd-top{font-size:13px;letter-spacing:.045em;padding:8px 7px}
  .nav-util{flex-basis:auto;margin-top:0;margin-left:6px;flex:none}
  .nav .links a.cta{padding:9px 14px;margin-left:8px}
  .nav .links a.lang{padding:7px 9px;margin-left:6px}
  /* the hero's five buttons on one row (the CDNS Autonomy button joined the owner's four on 2026-09-08): 1103 px of buttons
     + 56 px of gaps did not fit a 1144 px row by 15 px; 4 px less side padding on each button makes 1119. */
  #main .cta-row .btn{padding-left:22px;padding-right:22px}
}

/* 4 · .cs-code — the mono designation that follows a program name in a heading (61 pages used it against 0 rules) */
.cs-code{font-family:var(--mono);font-weight:400;font-size:.50em;letter-spacing:.10em;color:var(--muted);
  margin-left:.5em;white-space:nowrap;vertical-align:.18em}
.cs-code.sm,h4 .cs-code,h5 .cs-code,p .cs-code,li .cs-code{font-size:.78em;letter-spacing:.08em;vertical-align:.04em;margin-left:.4em}
.mediahero .cs-code,.bro-stage .cs-code{color:rgba(247,247,244,.62)}

/* 6 · the twenty program line marks on the roster cards (§6b.3, row `/programs`, `/brochures/`). The marks are
   drawn with stroke="currentColor" and are inlined by tools/r11/rebuild.py mark_svg(), so the family class on the
   card is what tints them. Height matches the pre-existing .gc-mark rule so a card's proportions do not move, and
   the width is stated rather than left to `auto`: all twenty marks are drawn on the same square 256x256 viewBox,
   so 54x54 is exact and does not depend on a browser deriving the ratio from the viewBox. */
.bro-glance .gc .gc-mark{display:block;height:54px;width:54px;margin-bottom:12px;color:var(--muted-2);opacity:.92;
  transition:color .25s var(--ease),opacity .25s var(--ease)}
.bro-glance .gc.air .gc-mark{color:var(--air)}
.bro-glance .gc.ground .gc-mark{color:var(--ground)}
.bro-glance .gc.water .gc-mark{color:var(--water)}
.bro-glance .gc.under .gc-mark{color:var(--under)}
.bro-glance .gc.autonomy .gc-mark{color:var(--tactical)}
.bro-glance .gc.defence .gc-mark{color:#A8341F}
.bro-glance .gc:hover .gc-mark{opacity:1}
@media(prefers-reduced-motion:reduce){.bro-glance .gc .gc-mark{transition:none}}

/* 5 · .figband — a captioned multi-figure band. This is specification, not a gallery: the retired .rgrid render
   gallery is struck by no_photographs() and "in the metal" is banned wording. Every figure carries its caption. */
.figband{display:grid;gap:20px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.figband.b2{grid-template-columns:repeat(2,1fr)}
.figband.b3{grid-template-columns:repeat(3,1fr)}
.figband.b4{grid-template-columns:repeat(4,1fr)}
.figband figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px 14px 12px}
.figband figure picture.rimg img{aspect-ratio:4/3;object-fit:contain;background:#fff}
.figband figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);margin-top:10px;line-height:1.5}
.figband figcaption b{display:block;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--text)}
@media(max-width:860px){.figband.b3,.figband.b4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.figband,.figband.b2,.figband.b3,.figband.b4{grid-template-columns:1fr}}

/* 7 · .seq — a scroll-driven image sequence (2026-09-09). One motion of one machine, told in frames from the same
   camera; the frames are 2D renders on the derivative ladder, so rule 5's film clause is untouched. THE ROW BELOW IS
   THE DEFAULT and the sequence is the enhancement: rebuild.py's sequence() emits a captioned row of the frames, and
   cs.js adds `.seq-on` only when it is actually going to drive it — never under prefers-reduced-motion, and never
   at all without JS. So the degraded state is not a fallback written twice; it is what the CSS says first.
   Nothing here reads as a video player: no control, no play affordance, and the step marks are discrete rules that
   move rather than a bar that fills. The frames are the subject, so the plate is white and the chrome is a hairline. */
.seq{margin:30px 0 0}
.seq .seq-stage{display:grid;gap:20px;grid-template-columns:repeat(var(--seq-n,3),1fr)}
.seq .seq-frame{margin:0;background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px 14px 12px}
.seq .seq-frame picture.rimg img{width:100%;aspect-ratio:var(--seq-aspect,3/1);object-fit:contain;background:#fff}
.seq .seq-frame figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);margin-top:10px;line-height:1.5}
.seq>figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-top:12px;line-height:1.5}
.seq .seq-foot{display:none}
@media(max-width:860px){.seq .seq-stage{grid-template-columns:1fr}}
/* driven: the row becomes one aspect-locked box and the frames cross-fade on the figure's own scroll progress */
.seq.seq-on .seq-stage{display:block;position:relative;aspect-ratio:var(--seq-aspect,3/1);
  background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seq.seq-on .seq-frame{position:absolute;inset:0;padding:0;border:0;border-radius:0;background:transparent;
  opacity:0;transition:opacity .5s var(--ease)}
.seq.seq-on .seq-frame.is-on{opacity:1}
.seq.seq-on .seq-frame picture.rimg{display:block;width:100%;height:100%}
.seq.seq-on .seq-frame picture.rimg img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.seq.seq-on .seq-frame figcaption{display:none}
.seq.seq-on .seq-foot{display:flex;align-items:center;gap:14px;margin-top:14px;min-height:18px}
.seq .seq-steps{display:flex;align-items:center;gap:7px;margin:0;padding:0;list-style:none;flex:none}
.seq .seq-steps li{width:18px;height:2px;border-radius:2px;background:var(--line);
  transition:width .3s var(--ease),background .3s var(--ease)}
.seq .seq-steps li.is-on{width:28px;background:var(--tactical)}
.seq .seq-label{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
section.photo .seq .seq-label{color:rgba(247,247,244,.72);text-shadow:0 1px 3px rgba(0,0,0,.6)}
section.photo .seq .seq-steps li{background:rgba(247,247,244,.26)}
@media(prefers-reduced-motion:reduce){.seq .seq-frame,.seq .seq-steps li{transition:none}}
/* ============================================================================
   R12 · PRODUCT-DESIGN PASS (2026-09-09) — presentation only, brand tokens only.
   Returned by the creative director; applied by the parent session into the R11 CSS block of tools/r11/rebuild.py
   (patch_css() re-emits the whole block on every build; never edit the stylesheet by hand).
   ============================================================================ */

/* 1 · roster grids (/programs #library, the family pages' #brochures, /fleet).
   auto-fill keeps a two-card family on the same column width as a four-card one;
   a fixed 16:10 box makes every card the same height whatever its master's air. */
/* auto-FIT, not auto-fill: auto-fill keeps the empty tracks, so the two-card Water family sat as two small cards
   in a four-column grid with half a row of dead space — which is what 'falling apart' looked like. auto-fit
   collapses the empty tracks and the row fills, at the cost of cross-family module equality, which is the
   cheaper thing to lose. */
.bro-glance{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:18px}
.bro-glance .gc{display:flex;flex-direction:column;padding:18px 18px 20px}
.bro-glance .gc>picture.rimg{display:block;margin:0 0 14px}
.bro-glance .gc img.gc-photo{width:100%;height:auto;max-height:none;aspect-ratio:16/10;
  object-fit:contain;background:#F1F2EC;border-radius:3px;padding:10px;margin:0}
/* a card with no render does NOT reserve the image box: an empty bordered void reads as a missing picture, not as a
   deliberate card. The grid stretches every card to the row's height anyway, so the type simply starts at the top. */
.bro-glance .gc h4{font-size:16px;margin:2px 0 6px}
.bro-glance .gc p{font-size:13px;line-height:1.52}
.bro-glance .gc:hover img.gc-photo{background:var(--gold-soft)}
@media(max-width:560px){.bro-glance{grid-template-columns:1fr}}

/* 2 · the two-column prose block. `two` now carries paragraphs lifted out of a
   prose wall, so it has to read as prose: same size, leading, colour, measure. */
.two>div>p{font-size:17px;line-height:1.75;color:#33362F;max-width:58ch;margin:0 0 14px}
.two>div>p:last-child{margin-bottom:0}
.two>div>ul{font-size:17px;line-height:1.7;color:#33362F;margin:0 0 14px 20px}

/* 3 · the contained figure. With the drawings gone, `picture` is the only figure
   left in the text column, so it takes the drawing's old measure and rhythm. */
/* A contained figure shares the prose's left edge and carries a bottom margin. Centred at 900px against prose set
   left at 76ch, it read as a second column; and with no bottom margin its caption ran into the next paragraph. */
figure.rfig{margin:34px 0 32px;max-width:860px}
/* 460px suits a landscape frame and guillotines a portrait one: a tall product cut-out shown at figure width is
   the whole machine, and capping it short is what makes a figure read as a slice. */
figure.rfig picture.rimg img{max-height:620px;padding:8px}
figure.rfig.wide{max-width:1144px;margin-left:0}
figure.rfig.wide picture.rimg img{max-height:560px}
figure.rfig figcaption{margin:12px auto 0;line-height:1.5;max-width:76ch}   /* cold review 2026-09-10 §1.10 / CDN-LOG-026 §7.1: a 76ch caption block with no auto margins sits flush left
      inside its figure, so a centred caption landed 178px left of the image centre in an 860px box. */
section.photo figure.rfig{max-width:760px;margin-left:0}

/* 4 · the figure band — captions align across a band whatever their length. */
.figband{gap:22px;margin-top:34px}
.figband figure{display:flex;flex-direction:column;padding:16px 16px 14px}
.figband figure picture.rimg{display:block}
.figband figcaption{margin-top:12px}
.figband figure.ar-free picture.rimg img{aspect-ratio:auto}   /* 2026-09-10: wide and portrait frames are not forced into 4:3 */
.figband.b2 figure picture.rimg img{aspect-ratio:16/10}

/* 5 · the photo band on the white skin. The paper fog covers the left of the
   frame: 76ch of 17px runs to 56% of a 1144px wrap, which is exactly where the
   fog thins. 62ch stops at about 47%, inside it. */
section.photo .sec-head{max-width:720px}
section.photo .prose p,section.photo .prose ul{max-width:62ch}
section.photo .lede{max-width:58ch}
section.photo .spec-wrap{max-width:860px}
section.photo .grid.g4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
section.photo>.wrap{padding-bottom:clamp(48px,6vw,80px)}

/* 6 · cards. A four-up row needs a tighter box than a two-up one, and a card
   body is one short paragraph — never a second prose column. */
.grid{gap:20px}
.grid.g4 .card{padding:22px 20px}
.grid.g4 .card h4{font-size:17px}
.card p{line-height:1.6}
.card p+p{margin-top:10px}
.card .small{font-size:12.5px}
/* a tick list is prose, and it stops where the prose stops rather than running the whole wrap */
.bro-ticks{max-width:80ch}
section.photo .bro-ticks{max-width:64ch}

/* 8 · the spec table. cs-R8 line 297 sets `.spec{display:block;overflow-x:auto}` so a long table can scroll on a
   phone — but a table set to display:block is a block box whose rows size to their content, so `width:100%` never
   stretches it and every spec table on the site has been sitting at about half the width of the figure above it.
   Put the scrolling on the wrapper, where it belongs, and give the table back its table layout. */
.spec-wrap{overflow-x:auto;max-width:1144px}
.spec-wrap .spec{display:table;width:100%;table-layout:auto}
.spec-wrap .spec caption{caption-side:bottom;text-align:left}

/* 7 · section rhythm. A hairline separates a tinted or watermarked band from the
   paper above it without adding a colour; the safety net stops two adjacent
   watermarks reading as one field; a band gets air under it. */
section.tint,section.tint-2{border-top:1px solid var(--line)}
section.wmx+section.wmx::before{opacity:.08}
section.photo+section{padding-top:clamp(72px,10vw,132px)}
.sec-head+.prose,.sec-head+.grid{margin-top:6px}

/* R16 · 2026-09-10, owner on the Water figures: "these should be centred", "should be on the clear
   background", "don't crop the renders like that". A figure is centred in its column, and the plate it
   sits on is the page's own paper rather than a white card, so a clear-ground render joins the page
   instead of sitting in a box on it. */
figure.rfig{margin-left:auto;margin-right:auto}
figure.rfig picture.rimg img{background:transparent;border:0;padding:0}
figure.rfig figcaption{text-align:center}
.figband figure{margin-left:auto;margin-right:auto}

/* R15 · a bright photographic hero, 2026-09-10. Water's new scene set is daylight, and the paper scrim
   bleached it. `scrim-dark` restores the dark wash and the light type the composition assumes, on the
   light skin as on the dark one. Everything is scoped to the class so no other hero moves. */
body.skin-light .mediahero.scrim-dark{background:#0B0D0F}
body.skin-light .mediahero.scrim-dark .scrim{background:
  linear-gradient(180deg,rgba(11,13,15,.34) 0%,rgba(11,13,15,.30) 42%,rgba(11,13,15,.62) 100%),
  linear-gradient(90deg,rgba(11,13,15,.62) 0%,rgba(11,13,15,.34) 46%,rgba(11,13,15,.06) 100%)}
body.skin-light .mediahero.scrim-dark .eyebrow{color:#C7CAC2}
body.skin-light .mediahero.scrim-dark h1{color:#F7F7F4}
/* the hero writes style="color:var(--tactical)" inline on the accent line, and an inline declaration
   outranks any selector — the olive reads as mud over a bright hull without this. */
body.skin-light .mediahero.scrim-dark h1 span{color:#B9C48F!important}
body.skin-light .mediahero.scrim-dark .lede{color:rgba(247,247,244,.90)}
body.skin-light .mediahero.scrim-dark .rule{border-color:rgba(247,247,244,.34)}
body.skin-light .mediahero.scrim-dark .cap{color:rgba(247,247,244,.66)}
body.skin-light .mediahero.scrim-dark .btn.ghost{color:#F7F7F4;border-color:rgba(247,247,244,.46)}
body.skin-light .mediahero.scrim-dark .btn.ghost:hover{border-color:#F7F7F4;background:rgba(247,247,244,.10)}
body.skin-light .mediahero.scrim-dark .cs-code{color:rgba(247,247,244,.66)}

/* ============================================================================
   R14 · THE PRESENTATION CRITIC'S PASS (2026-09-10) — read off captures, not off specs.
   ============================================================================ */

/* 1 · a portrait object gets a portrait box. figure.rfig is a fixed 860 px frame with the border on the
   image, so a 230x552 source contained inside it filled 29% of the box and the rest was bordered white.
   The class is set in figure_picture(), where the manifest can be asked the master's aspect. */
figure.rfig.portrait{max-width:520px}
figure.rfig.portrait.wide{max-width:560px}

/* 2 · a watermark drawing belongs behind text, not behind a picture. Sized to the section rather than to
   the empty column beside the type, it ran under the figures in a two-up band and out past the wrap. */
section.wmx:has(figure,.figband,picture)::before{display:none}

/* 3 · one measure per page. The spec wrapper took its width from whatever parent it landed in, so a table
   inside a photo section came out at 860 and the next one at 1144, and the page's right edge stepped. */
.spec-wrap{max-width:none;width:100%}

/* 4 · a prose block emitted straight after a two-column block sat 3 px under the left column's last line
   and read as a continuation of it. The builder gives 28-30 px after .grid; this matches. */
.two+.prose,.two+p,.two+.bro-ticks{margin-top:28px}

/* ============================================================================
   R13 · THE WHOLE-OBJECT HERO (2026-09-10) — owner: "the jelly fish the star of the show
   and we've got it cut in half."
   The hero band runs about 2.4:1 and .hero-media img is object-fit:cover, so it takes a
   centre slice of anything squarer and the machine loses its top and bottom. That is fine
   for a scene and wrong for a product: a cut-out is the whole object or it is nothing.
   `"fit": "whole"` in a hero's media (see hero_media) opts the frame into contain instead.
   It only works where the frame's own ground matches the band's, which under the paper
   skin means a white-ground cut-out — the ground then runs on into the band and the join
   is invisible. The object sits right and the type reads on the left, which is where the
   light skin's 90deg paper fog already is; on a phone the two stack and the object goes
   to the top, over the 180deg fog. The pan is dropped in hero_media, because panning a
   contained image slides it about inside its own letterbox.
   ============================================================================ */
.mediahero:has(.hero-media.fit-whole){min-height:clamp(470px,58vh,630px)}
/* the frame's own ground is pure white and the page is paper, so a contained cut-out draws a faint
   rectangle where the two meet. mix-blend-mode cannot fix it — .mediahero isolates and .hero-media is
   positioned with a z-index, so the image blends against an empty backdrop and nothing happens. Take
   the band to the frame's own white instead: the join disappears and the band reads as a product stage.
   body.skin-light sets .mediahero to paper, so this has to win on specificity, which :has() does. */
body.skin-light .mediahero:has(.hero-media.fit-whole){background:#FFF}
/* The left 42% is the type's and the object never enters it. `object-position:right` alone is not
   enough: a wide object contained in a wide band is width-limited, so it fills the full width and
   "right" resolves to no offset at all — which is how the CS-411 plant ended up under its own
   headline. Reserving the column in the padding holds for any aspect the frame happens to be. */
.hero-media.fit-whole img{object-fit:contain;object-position:right center;padding:56px 26px 40px 50%}
/* The type takes the left half and stops there. A contained object is a silhouette rather than a
   field, so a line of lede crossing it reads as text lying on the machine — which is what the
   full-width wrap did on the first build of this rule. `!important` is load-bearing here and not
   laziness: the hero writes style="max-width:66ch" inline on the lede, and an inline declaration
   outranks any selector. */
.mediahero:has(.hero-media.fit-whole) .eyebrow,
.mediahero:has(.hero-media.fit-whole) h1,
.mediahero:has(.hero-media.fit-whole) .lede,
.mediahero:has(.hero-media.fit-whole) .rule{max-width:min(46%,600px)!important}
.mediahero:has(.hero-media.fit-whole) .tagrow{max-width:min(74%,900px)}
/* and the headline comes down a size. A whole-object hero shares the stage with the machine, so
   88px of display type would need more than half the band to set a long word like UNDERGROUND. */
.mediahero:has(.hero-media.fit-whole) h1{font-size:clamp(34px,4.6vw,64px)}
/* and the fog turns ninety degrees. The default rises from the foot of the band, which is exactly
   where a whole object keeps its feet: it ghosted the ballast module and the drop weight off the
   CS-320. Fade from the type edge across instead, and leave the object's own ground alone. */
.mediahero:has(.hero-media.fit-whole) .scrim{background:linear-gradient(90deg,
  rgba(247,247,244,.96) 0%,rgba(247,247,244,.90) 30%,rgba(247,247,244,.42) 50%,rgba(247,247,244,0) 68%)}
/* On a phone the two do not sit side by side, and overlaying them does not work either: a contained
   object fills the band, the wrap is bottom-aligned but tall, and the headline lands on the machine.
   Give the object its own strip at the top and start the type below it. No fog is then needed at all,
   because nothing overlaps anything — which is why the scrim goes rather than getting heavier. */
@media(max-width:980px){
  /* .nav is position:fixed and its wrap is min-height 82px over 6+6 of padding, so the top ~94px of
     every hero sits behind it. The cover crop hid that; a contained object does not, and the machine
     lost its head. The strip starts below the nav and the wrap clears strip and nav together. */
  .mediahero:has(.hero-media.fit-whole){--hm:300px;--nav:94px;min-height:auto}
  .mediahero:has(.hero-media.fit-whole) .hero-media{inset:var(--nav) 0 auto 0;height:var(--hm)}
  .hero-media.fit-whole img{object-position:center center;padding:16px 18px 8px}
  .mediahero:has(.hero-media.fit-whole) > .wrap{padding-top:calc(var(--nav) + var(--hm) + 18px)}
  .mediahero:has(.hero-media.fit-whole) .scrim{display:none}
  .mediahero:has(.hero-media.fit-whole) .cap{position:static;text-align:left;margin-top:18px}
  .mediahero:has(.hero-media.fit-whole) .eyebrow,
  .mediahero:has(.hero-media.fit-whole) h1,
  .mediahero:has(.hero-media.fit-whole) .lede,
  .mediahero:has(.hero-media.fit-whole) .rule,
  .mediahero:has(.hero-media.fit-whole) .tagrow{max-width:none!important}}
@media(max-width:560px){.mediahero:has(.hero-media.fit-whole){--hm:240px}}
/* R11-END */