/* ============================================================
   KELKAR AUTO — site/styles.css  v2 (image-led redesign)
   Direction C "The Standard" + Loadex-grade image grammar:
   full-bleed navy-graded photography, hairline grid overlays,
   label-rail asymmetry, image tiles, statement type.
   Tokens inherited verbatim from DESIGN.md / kelkar-colour-system.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --navy-950:#000B2B; --navy-900:#00164F; --navy-800:#062A6E; --navy-700:#103E8C;
  --navy-600:#1D55AC; --navy-500:#2C6CC6; --navy-300:#8DB0E6; --navy-100:#E7EEFA;
  --steel-950:#0E1216; --steel-900:#151A20; --steel-800:#222A32; --steel-700:#333D47;
  --steel-600:#4B5763; --steel-500:#6B7783; --steel-400:#93A0AC; --steel-300:#BCC7D0;
  --steel-200:#DCE3E9; --steel-100:#EEF2F5;
  --red-700:#94001F; --red-600:#B60127; --red-500:#D5012D;
  --midnight:#0A0B0D; --void:#000C33; --paper:#F7F9FB;

  --bg:var(--paper);
  --bg-anchor:var(--midnight);
  --surface:#FFFFFF;
  --ink:var(--steel-950);
  --ink-heading:var(--navy-900);
  --ink-on-dark:#EAF0F6;
  --muted:var(--steel-600);
  --muted-on-dark:var(--steel-300);
  --rule:rgba(0,22,79,.13);
  --rule-on-dark:rgba(255,255,255,.14);
  --red-400:#E7405C;
  --accent:var(--red-500);
  --accent-hover:var(--red-600);
  /* Kelkar Red is only 3.7:1 on near-black — below AA for small text. Red-400 from the
     brand ramp measures 5.0:1, so it carries red-coded LABELS on dark fields.
     Full-strength red stays for marks and fills, which are not text. */
  --accent-on-dark:var(--red-400);
  --link:var(--navy-500);

  /* forged gradient — copied exactly from kelkar-colour-system.html */
  --forge:
    radial-gradient(85% 78% at 50% 128%, #D5012D 0%, #8E0A22 30%, transparent 67%),
    radial-gradient(64% 84% at 110% 82%, rgba(213,1,45,.55) 0%, transparent 58%),
    radial-gradient(60% 68% at -10% 100%, #D5012D 0%, transparent 54%),
    radial-gradient(62% 46% at 50% 116%, rgba(213,1,45,.4) 0%, transparent 60%),
    radial-gradient(55% 60% at 90% -10%, rgba(44,108,198,.44), transparent 66%),
    linear-gradient(160deg,#00164F 0%,#000C33 100%);

  --font-display:'Archivo',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --section-pad:clamp(4rem,8vw,8rem);
  --container:1280px;
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --radius:0;

  --z-dropdown:100; --z-sticky:200; --z-backdrop:300; --z-modal:400; --z-toast:500; --z-tooltip:600;

  --ease-out:cubic-bezier(.22,.8,.32,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);

  /* ---------- HERO LATTICE (v1.11) ----------
     ONE definition of the hero's tracks, consumed by three things that must agree:
     the rules overlay, the content grid, and the nav CTA. Because the nav CTA's width is
     the third column, its left edge lands exactly on the last vertical rule — which is
     also the image's right edge. That single shared boundary is what makes the structure
     read as engineered rather than decorative.
     Rows are FIXED (not auto) on purpose: the overlay's cells are empty, and an `auto`
     row would collapse to 0 there while sizing to content in the real grid, so the two
     lattices would drift apart. Row 3 takes the 1fr, absorbing any hero height — which is
     also why the ?flat 820px hero still lines up. */
  --hero-c2:clamp(300px,26vw,420px);
  --hero-c3:clamp(200px,15vw,250px);
  --hero-cols:minmax(0,1fr) var(--hero-c2) var(--hero-c3);
  --hero-row-band:clamp(88px,11vh,132px);
  --hero-rows:76px var(--hero-row-band) minmax(0,1fr) var(--hero-row-band);
  --hero-rule:rgba(255,255,255,.15);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-display);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block;height:auto}
a{color:var(--link);text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--navy-500);outline-offset:3px}
::selection{background:var(--navy-900);color:#fff}

h1,h2,h3{color:var(--ink-heading);text-wrap:balance}
h1{font-size:clamp(3rem,6.6vw,6rem);font-weight:600;letter-spacing:-.025em;line-height:1.02}
h2{font-size:clamp(2rem,4vw,3.25rem);font-weight:600;letter-spacing:-.02em;line-height:1.08}
h3{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:600;line-height:1.25}
p{max-width:68ch;text-wrap:pretty}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--font-mono);font-size:.78125rem;letter-spacing:.1em;text-transform:uppercase}
.lead{font-size:clamp(1.125rem,1.6vw,1.25rem);color:var(--muted);max-width:56ch}

/* statement type (Loadex move): big calm sentence, steel-blue highlights */
.statement{
  font-size:clamp(2rem,3.9vw,3.5rem);font-weight:600;line-height:1.1;
  letter-spacing:-.022em;color:var(--ink);max-width:20ch;text-wrap:balance}
.statement .hl{color:var(--navy-500)}
.on-dark .statement{color:#fff}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-mono);font-weight:500;font-size:.8125rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:1.15em 1.9em;border:0;border-radius:var(--radius);
  cursor:pointer;min-height:48px;
  transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out);
  touch-action:manipulation;
}
.btn .arrow{display:inline-block;transition:transform .25s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-line{background:transparent;color:var(--ink);border:1px solid rgba(0,22,79,.28)}
.btn-line:hover{border-color:var(--navy-900);background:rgba(0,22,79,.04)}
.btn-outline:hover{border-color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.textlink{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--link);min-height:44px}
.textlink .arrow{transition:transform .25s var(--ease-out)}
.textlink:hover .arrow{transform:translateX(4px)}

/* ---------- Shared image grammar ---------- */
/* navy-graded frame: one visual world for every photo */
.frame{position:relative;overflow:hidden;background:var(--steel-900)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.06) contrast(1.06) brightness(1.03)}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,22,79,.03),rgba(0,12,51,.07))}
/* engineered hairline grid over full-bleed imagery */
.gridlines::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/25% 100%;
  border-right:1px solid rgba(255,255,255,.07)}
.grain{position:absolute;inset:0;opacity:.42;pointer-events:none;z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

/* label-rail scaffold: tiny mono label left, content offset right */
.rail{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem)}
.rail-label{color:var(--muted)}
.on-dark .rail-label{color:var(--steel-400)}

.section{padding-block:var(--section-pad)}
.anchor{background:var(--bg-anchor);color:var(--ink-on-dark)}
.anchor h2{color:#fff}
.mist{background:var(--steel-100)}

/* ---------- Nav ---------- */
.nav{position:fixed;inset-inline:0;top:0;z-index:var(--z-sticky);
  transition:background .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.nav-inner{padding:0 0 0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:76px}
.nav-logo{display:inline-flex;align-items:center;min-height:44px}
.nav-logo img{height:30px;width:auto}
.nav-links{display:flex;gap:clamp(14px,2vw,28px);list-style:none;align-items:center}
.nav-links a{color:var(--ink-on-dark);font-family:var(--font-mono);font-size:.8125rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:500;
  padding:10px 2px;min-height:44px;display:inline-flex;align-items:center}
.nav-links a:hover{color:#fff}
.nav-end{display:flex;align-items:center;gap:12px;height:76px;padding-right:0}
.nav-end .nav-toggle{margin-right:var(--gutter)}
/* width = the hero's third column, so the CTA's left edge lands exactly on the last
   vertical rule — the same boundary as the hero image's right edge. This is the alignment
   that makes the nav look built into the grid rather than floated over it. */
.nav-cta{flex-shrink:0;height:76px;min-height:76px;width:var(--hero-c3);
  padding:0 16px;display:inline-flex;align-items:center;justify-content:center;
  text-align:center;line-height:1.25}
.nav.scrolled{background:rgba(0,12,51,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav-toggle{display:none;background:none;border:1px solid var(--rule-on-dark);color:var(--ink-on-dark);
  width:44px;height:44px;flex-shrink:0;cursor:pointer;font-size:20px;line-height:1}

/* ---------- §1 HERO — full-bleed photo under forge, inset window ---------- */
.hero{position:relative;background:var(--bg-anchor);color:var(--ink-on-dark);
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero .container{width:100%}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.06)}
.hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(0,11,32,.92) 0%,rgba(0,12,51,.72) 46%,rgba(0,12,51,.38) 100%)}
.hero-forge{position:absolute;inset:0;z-index:1;background:var(--forge);opacity:.5;mix-blend-mode:multiply}
.hero .gridlines::before{content:none}

/* the lattice: same tracks as .hero-grid, so the rules cannot drift off the content */
.hero-rules{position:absolute;inset:0;z-index:2;pointer-events:none;
  display:grid;grid-template-columns:var(--hero-cols);grid-template-rows:var(--hero-rows)}
.hero-rules span{border-left:1px solid var(--hero-rule);border-top:1px solid var(--hero-rule)}
.hero-rules span:nth-child(3n+1){border-left:0}   /* column 1 = viewport edge */
.hero-rules span:nth-child(-n+3){border-top:0}    /* row 1 = viewport top */

.hero-grid{position:relative;z-index:4;flex:1;display:grid;
  grid-template-columns:var(--hero-cols);grid-template-rows:var(--hero-rows);
  min-height:100svh;
  /* v1.12: the hero copy used to start at the raw gutter (x≈56), while every other
     section starts at the container's content edge (x≈208 at 1600) — the hero sat 150px
     further left than the whole rest of the page, which is what read as "too far left".
     This reproduces the container's own maths. `100%` resolves against the grid AREA
     (column 1), so adding the two fixed columns back gives the true content width without
     the scrollbar error that 100vw would introduce. max() keeps it at the gutter on
     narrower screens, where the container is already full-bleed. */
  --hero-left:max(var(--gutter),
    calc((100% + var(--hero-c2) + var(--hero-c3) - var(--container)) / 2 + var(--gutter)))}
/* row 3 = the photograph's row. Top-aligned rather than centred so the copy block starts
   with the image instead of drifting down as the viewport gets taller. */
.hz-main{grid-column:1;grid-row:3;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(1.5rem,4.5vh,3.5rem) var(--gutter) 0 var(--hero-left)}
.hcell{min-width:0;padding:0 clamp(16px,1.6vw,26px);
  display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:22px}
.hcell .mono{display:block;color:var(--steel-300);margin-bottom:8px;letter-spacing:.12em}
.hcell p{color:#fff;font-size:1.0625rem;font-weight:500}
.hc-compliance{grid-column:2;grid-row:2}
.hc-output    {grid-column:2;grid-row:4}
.hc-capacity  {grid-column:3;grid-row:4}
/* fills its cell exactly — all four edges are lattice rules, no private borders */
.hc-shot{grid-column:2;grid-row:3;padding:0;overflow:hidden;background:var(--steel-900)}
.hc-shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.02) contrast(1.05)}
.hero .kicker{color:var(--steel-300);margin-bottom:var(--s3)}
.hero h1{color:#fff;max-width:12ch}
.hero .sub{margin-top:var(--s3);font-size:clamp(1.125rem,1.7vw,1.3125rem);color:#DCE6F0;max-width:52ch;line-height:1.55}
.hero-ctas{margin-top:var(--s5);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
/* sized to row 4 so its top edge lands ON the lattice rule. It used to draw its own
   border-top at whatever height the content happened to end — a line that agreed with
   nothing. Now the trust bar, "Monthly output" and "Annual capacity" all sit in row 4,
   divided by the lattice. */
.hero-trust{grid-column:1;grid-row:4;position:relative;z-index:4;
  border-top:0;margin-top:0;display:flex;align-items:center;
  padding-left:var(--hero-left);padding-right:var(--gutter)}
.hero-trust .mono{color:var(--steel-300);letter-spacing:.08em;line-height:1.9;max-width:none}
.hero-trust b{color:#fff;font-weight:500}

/* hero load choreography (CSS-only; completes headless; killed by .flat/reduced) */
.hero .kicker,.hero h1,.hero .sub,.hero-ctas{animation:heroRise .8s var(--ease-out-expo) both}
.hcell,.hero-rules{animation:heroFade 1.1s var(--ease-out) .45s both}
.hero h1{animation-delay:.08s}.hero .sub{animation-delay:.18s}.hero-ctas{animation-delay:.28s}
.hero-trust{animation:heroFade 1s var(--ease-out) .55s both}
.hero-media{animation:mediaDrift 2.6s var(--ease-out-expo) both}
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
@keyframes mediaDrift{from{transform:scale(1.05)}to{transform:none}}

/* ---------- §2 Logo marquee ---------- */
.marquee-strip{background:var(--surface);border-block:1px solid var(--rule);padding-block:var(--s4)}
/* v1.10: was --muted (steel-600), which landed in the same tonal band as the greyscaled
   logos — label and marks read as one flat grey layer. Navy separates the two: the line
   that speaks is brand-dark, the marks it introduces stay grey. 15.1:1 on white. */
.marquee-strip .kicker{color:var(--ink-heading);text-align:center;display:block;
  margin-bottom:clamp(1.25rem,2.4vw,1.75rem)}
.marquee{overflow:hidden;position:relative}
.marquee-track{display:flex;gap:clamp(40px,6vw,88px);width:max-content;
  animation:marquee 42s linear infinite;align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
/* v1.9: the mock text wordmarks are gone, replaced by the real marks. Rule kept for any
   brand we cannot source a file for. */
.marquee-item{font-weight:800;font-size:clamp(1.05rem,1.8vw,1.375rem);
  letter-spacing:.04em;color:var(--steel-500);white-space:nowrap;text-transform:uppercase}

/* ---------- real customer marks ----------
   Grayscale per DESIGN.md §6. NOT silhouetted (`brightness(0)`): tested, and it collapses
   any mark with a coloured container — JCB became a solid block, Cummins a blob, MTU two
   bare parallelograms. grayscale + a slight opacity lift keeps every mark legible and
   still reads as one uniform wall.
   Heights are PER MARK, not uniform. A square emblem (JCB, Cummins) and a long wordmark
   (Honeywell, Wirtgen) set to the same height do not carry the same visual weight — at a
   flat 34px Honeywell dominated the row and Force Motors was unreadable. These values are
   optically matched, not measured. */
.mq-logo{flex:none;width:auto;
  filter:grayscale(1) opacity(.74);
  transition:filter .35s var(--ease-out)}
.marquee:hover .mq-logo{filter:grayscale(1) opacity(.92)}
.mq-jcb      {height:calc(40px * var(--mq,1))}
.mq-cummins  {height:calc(36px * var(--mq,1))}
.mq-hitachi  {height:calc(23px * var(--mq,1))}
.mq-wirtgen  {height:calc(23px * var(--mq,1))}
.mq-mahindra {height:calc(27px * var(--mq,1))}
.mq-mtu      {height:calc(30px * var(--mq,1))}
.mq-honeywell{height:calc(21px * var(--mq,1))}
.mq-force    {height:calc(36px * var(--mq,1))}
@keyframes marquee{to{transform:translateX(-50%)}}
/* .marquee-proof removed in v1.10 with the sentence it styled. */

/* ---------- §3 USP — rail + statement + image column ---------- */
.usp-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.usp-head .rail-label{display:block;margin-bottom:var(--s3)}
.usp-statement .lead{margin-top:var(--s3)}
/* mosaic: ONE block, hairline gaps, asymmetric split (tall plate + stacked pair) */
.usp-gal{display:grid;grid-template-columns:repeat(12,1fr);
  grid-template-rows:1.08fr .92fr;gap:10px;
  height:clamp(420px,46vw,620px);margin-bottom:clamp(2.5rem,5vw,4rem)}
.usp-gal .frame{height:100%;min-height:0}
.ug-a{grid-column:1/8;grid-row:1/3}
.ug-b{grid-column:8/13;grid-row:1/2}
.ug-c{grid-column:8/13;grid-row:2/3}
.usp-ctas{margin-top:var(--s5);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.usp-rows{border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(3,1fr)}
.usp-row{padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.usp-row:last-child{border-right:0}
.usp-row + .usp-row{padding-left:var(--s4)}
.usp-row .mono{color:var(--accent);display:block;margin-bottom:var(--s1);letter-spacing:.12em}
.usp-row h3{margin-bottom:6px;font-size:1.1875rem;font-weight:700}
.usp-row p{color:var(--muted);font-size:.9846rem;line-height:1.6}
/* ---------- §3 the trade-off — two paths converging on one answer ----------
   A diagram, not a comparison table: the buyer's own dilemma stated in their terms,
   then resolved. Copy is deliberately short — this must be scannable in ~6 seconds. */
.tradeoff{margin-top:var(--s6)}
.tradeoff-q{font-size:clamp(1.0625rem,1.5vw,1.1875rem);color:var(--muted);
  margin-bottom:var(--s3);max-width:none}
.tradeoff-paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.path{border:1px solid var(--rule);background:var(--paper);
  padding:clamp(1.25rem,2.2vw,1.75rem);position:relative}
/* faint diagonal hatch = the compromise lane; recedes behind the answer below */
.path::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(0,22,79,.045) 9px 10px)}
.path-label{display:block;color:var(--muted);letter-spacing:.12em;margin-bottom:12px}
.path p{color:var(--muted);font-size:1rem;line-height:1.6;max-width:34ch;position:relative}
/* the junction: two stems dropping into one */
.tradeoff-join{position:relative;height:44px}
.tradeoff-join span{position:absolute;background:var(--steel-400)}
.tradeoff-join span:nth-child(1){left:25%;top:0;width:1px;height:22px}
.tradeoff-join span:nth-child(2){right:25%;top:0;width:1px;height:22px}
.tradeoff-join span:nth-child(3){left:25%;right:25%;top:22px;height:1px}
/* the red stem is the resolution — it drops into the answer band */
.tradeoff-join::after{content:"";position:absolute;left:calc(50% - 1px);top:22px;
  width:2px;height:22px;background:var(--accent)}
.tradeoff-answer{border:1px solid var(--navy-900);background:var(--navy-900);color:#fff;
  padding:clamp(1.5rem,2.6vw,2rem) clamp(1.5rem,2.6vw,2.25rem);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3) clamp(1.5rem,3vw,2.5rem);
  align-items:baseline}
.tradeoff-answer .mono{color:var(--navy-300);letter-spacing:.12em;white-space:nowrap}
/* 68ch, not 58: at the trimmed length 58ch broke the line three ways and left the right
   third of the navy band empty. Two full lines reads as one resolved statement. */
.tradeoff-answer p{color:#fff;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.5;
  max-width:68ch;font-weight:500}
.tradeoff-answer b{font-weight:700;border-bottom:2px solid var(--accent);padding-bottom:1px}

/* closing beat — bookends the §3 statement (same grammar: plain half + steel-blue half) */
.usp-kicker{margin-top:var(--s5);max-width:24ch;
  font-size:clamp(1.375rem,2.4vw,2rem);font-weight:600;line-height:1.15;
  letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.usp-kicker .hl{color:var(--navy-500)}
.usp-kicker + .usp-ctas{margin-top:var(--s4)}

/* ---------- §4 Numbers — midnight anchor over facility imagery ---------- */
.numbers{position:relative;overflow:hidden}
.numbers-media{position:absolute;inset:0;z-index:0}
.numbers-media img,.numbers-media video{width:100%;height:100%;object-fit:cover;
  filter:saturate(.6) contrast(1.05);display:block}
.numbers-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,8,12,.88),rgba(6,8,12,.76) 55%,rgba(0,12,51,.86))}
.numbers .container{position:relative;z-index:4}
.numbers .lead{color:var(--muted-on-dark)}
.numbers-head{margin-bottom:clamp(2rem,5vw,3.5rem)}
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule-on-dark)}
.num-cell{padding:var(--s4) var(--s3) var(--s4) 0;border-bottom:1px solid var(--rule-on-dark)}
.num-cell + .num-cell{border-left:1px solid var(--rule-on-dark);padding-left:var(--s3)}
.numbers-grid .num-cell:nth-child(4n+1){padding-left:0;border-left:0}
.num-val{font-weight:800;font-size:clamp(2.25rem,4.4vw,3.5rem);color:#fff;letter-spacing:-.02em;
  line-height:1;font-variant-numeric:tabular-nums}
.num-val .unit{font-size:.45em;font-weight:600;color:var(--steel-300);letter-spacing:0}
.num-label{margin-top:var(--s2);color:var(--steel-300);font-size:.75rem;letter-spacing:.09em;line-height:1.5}
.num-val .unit{white-space:nowrap}

/* ---------- §5 Single-Source Line — the DIMENSION LINE ----------
   Stations sit on a continuous rule with extension ticks, the way a technical
   drawing dimensions a part. Two rails of four so it reads left-to-right without
   horizontal scroll. The rule is the structural line the brand is built on. */
.line-head{margin-bottom:clamp(2.25rem,5vw,3.5rem)}
/* ---------- §5 THE DRAWING SHEET ----------
   The mechanism rendered as a real technical drawing: sheet frame, crop marks, blueprint
   grid, eight operation views of the same bracket, and a title block. Inline SVG only. */
.sheet{position:relative;background:var(--paper);border:1px solid var(--rule);
  padding:clamp(1.5rem,3.2vw,3rem) clamp(1.25rem,2.8vw,2.5rem) 0;margin:0}
.sheet-grid{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:
    linear-gradient(rgba(0,22,79,.05) 1px,transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg,rgba(0,22,79,.05) 1px,transparent 1px) 0 0/32px 100%}
/* corner crop marks — the detail that makes it read as a drawing, not a card */
.sheet-crop{position:absolute;width:12px;height:12px;pointer-events:none}
.sheet-crop.tl{top:9px;left:9px;border-top:1px solid var(--navy-500);border-left:1px solid var(--navy-500)}
.sheet-crop.tr{top:9px;right:9px;border-top:1px solid var(--navy-500);border-right:1px solid var(--navy-500)}
.sheet-crop.bl{bottom:9px;left:9px;border-bottom:1px solid var(--navy-500);border-left:1px solid var(--navy-500)}
.sheet-crop.br{bottom:9px;right:9px;border-bottom:1px solid var(--navy-500);border-right:1px solid var(--navy-500)}
.sheet-head{position:relative;display:flex;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;padding-bottom:clamp(1.25rem,2.4vw,2rem);
  border-bottom:1px solid var(--rule)}
.sheet-head .mono{color:var(--muted);font-size:.7rem;letter-spacing:.1em}

.ops{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.op{position:relative;padding:clamp(1.25rem,2.2vw,1.75rem) clamp(.75rem,1.4vw,1.25rem);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.op:nth-child(4n){border-right:0}
.op:nth-child(n+5){border-bottom:0}
.op-dwg{display:block;width:100%;height:auto;overflow:visible}
.op-meta{margin-top:clamp(.75rem,1.4vw,1.125rem)}
.op-n{display:block;color:var(--muted);font-size:.7rem;letter-spacing:.14em;margin-bottom:5px;
  transition:color .3s var(--ease-out)}
.op-meta h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.005em;line-height:1.2}
.op-meta p.mono{color:var(--muted);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;margin-top:5px;max-width:none}

/* ---- drawing language ---- */
.op-dwg .part{fill:none;stroke:var(--navy-900);stroke-width:1.6;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.op-dwg .fillpaper{fill:var(--paper)}
.op-dwg .fillfaint{fill:rgba(0,22,79,.07)}
.op-dwg .fillfaint2{fill:rgba(0,22,79,.13)}
.op-dwg .ghost{fill:none;stroke:var(--navy-900);stroke-width:1.4;
  stroke-dasharray:5 3.5;vector-effect:non-scaling-stroke}
.op-dwg .ghost2{fill:none;stroke:var(--steel-400);stroke-width:1;
  stroke-dasharray:3 2.5;vector-effect:non-scaling-stroke}
.op-dwg .offcut{fill:none;stroke:var(--steel-300);stroke-width:1;
  stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
/* dimension + extension lines, arrowheads */
.op-dwg .dim path{fill:none;stroke:var(--steel-500);stroke-width:.9;vector-effect:non-scaling-stroke}
.op-dwg .dim .fill{fill:var(--steel-500);stroke:none}
/* centre marks + bend line: dash-dot, the drafting convention */
.op-dwg .centre path{fill:none;stroke:var(--navy-500);stroke-width:.9;
  stroke-dasharray:7 2 1.4 2;vector-effect:non-scaling-stroke}
.op-dwg .bend{fill:none;stroke:var(--accent);stroke-width:1.1;
  stroke-dasharray:8 2.5 1.6 2.5;vector-effect:non-scaling-stroke}
/* laser kerf marks, weld bead, coating hatch, crate straps */
.op-dwg .kerf path{fill:none;stroke:var(--accent);stroke-width:1.2;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.op-dwg .bead path{fill:none;stroke:var(--accent);stroke-width:1.3;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.op-dwg .coated{fill:url(#coathatch);stroke:var(--navy-900);stroke-width:1.6;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.op-dwg .hatchline{stroke:var(--navy-500);stroke-width:.7;opacity:.55}
.op-dwg .mate{fill:rgba(213,1,45,.08);stroke:var(--accent);stroke-width:1.4;
  vector-effect:non-scaling-stroke}
/* AWS fillet-weld symbol — perpendicular leg always on the left, as in the standard */
.op-dwg .weldsym{fill:var(--accent);stroke:none}
.op-dwg .fast circle{fill:var(--paper);stroke:var(--accent);stroke-width:1.1;vector-effect:non-scaling-stroke}
.op-dwg .balloon circle{fill:none;stroke:var(--steel-500);stroke-width:.9;vector-effect:non-scaling-stroke}
.op-dwg .balloon path{fill:none;stroke:var(--steel-500);stroke-width:.9;vector-effect:non-scaling-stroke}
.op-dwg .crate{fill:rgba(0,22,79,.05);stroke:var(--navy-900);stroke-width:1.5;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.op-dwg .strap{fill:none;stroke:var(--accent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.op-dwg .mark path{fill:none;stroke:var(--steel-600);stroke-width:1.1;vector-effect:non-scaling-stroke}
/* annotation type — mono, the same family as every other data label on the site */
.op-dwg .tx{font-family:var(--font-mono);font-size:6.4px;fill:var(--steel-600);
  letter-spacing:.06em;text-anchor:middle}
.op-dwg .anchor-s{text-anchor:start}
.op-dwg .balloon-n{font-size:7.5px;fill:var(--steel-600);text-anchor:middle}

/* hover lifts one operation out of the sheet */
.op:hover .op-n{color:var(--accent)}
.op:hover .op-dwg .part,.op:hover .op-dwg .coated,.op:hover .op-dwg .crate{stroke:var(--navy-700)}
.op.pre{transition-delay:calc(var(--i,0)*55ms)}

/* ---- title block: bottom-right, as on a real sheet ---- */
.titleblock{position:relative;display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  border-top:1px solid var(--navy-900);margin:0 calc(clamp(1.25rem,2.8vw,2.5rem) * -1);
  padding:0 clamp(1.25rem,2.8vw,2.5rem)}
.tb-cell{padding:clamp(.875rem,1.6vw,1.25rem) clamp(.75rem,1.4vw,1.25rem);
  border-left:1px solid var(--rule);display:grid;gap:6px;align-content:center}
.tb-cell:first-child{border-left:0;padding-left:0}
.tb-k{color:var(--muted);font-size:.66rem;letter-spacing:.14em}
.tb-v{font-size:1rem;font-weight:600;color:var(--ink-heading)}
.tb-v.mono{font-size:.875rem;letter-spacing:.06em;font-weight:500}
.tb-hero{font-size:1.5rem!important;font-weight:700!important;color:var(--accent)}

.ssl{display:grid;gap:clamp(2.5rem,4.5vw,4rem);--ssl-gap:clamp(10px,1.4vw,20px)}
/* gap:0 so each station's rule segment butts against the next = ONE continuous line.
   The visual gap between shots comes from margin on .ssl-shot instead. */
.ssl-rail{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.ssl-stop{position:relative;display:flex;flex-direction:column}
.ssl-shot{display:block;overflow:hidden;aspect-ratio:4/5;background:var(--steel-800);
  margin-right:var(--ssl-gap)}
.ssl-shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.02) contrast(1.04);transition:transform .7s var(--ease-out-expo)}
.ssl-stop:hover .ssl-shot img{transform:scale(1.04)}
/* extension tick: drops from the shot down to the rule, like a drawing's extension line */
.ssl-tick{display:block;width:1px;height:20px;background:var(--rule);
  transition:background .3s var(--ease-out)}
.ssl-stop:hover .ssl-tick{background:var(--accent)}
/* .ssl-meta carries the rule as a real border, so it spans the full column and joins its neighbours */
.ssl-meta{border-top:1px solid var(--rule);position:relative}
.ssl-stop:last-child .ssl-meta::after{content:"";position:absolute;right:0;top:-4px;
  width:7px;height:7px;transform:rotate(45deg);
  border-top:1px solid var(--rule);border-right:1px solid var(--rule)}
/* the number straddles the rule and breaks it, the way a dimension label does */
/* numerals stay steel: 8 red marks in one view would blow the ≤10% red budget.
   Red is reserved for the hover tick, so it still means "this one". */
.ssl-n{display:inline-block;position:relative;top:-8px;
  background:var(--steel-100);padding-right:10px;
  font-size:.75rem;letter-spacing:.12em;color:var(--muted);line-height:16px;
  transition:color .3s var(--ease-out)}
.ssl-stop:hover .ssl-n{color:var(--accent)}
.ssl-name{display:block;margin-top:-2px;font-weight:600;font-size:1.0625rem;
  color:var(--ink-heading);letter-spacing:-.005em}
.ssl-spec{display:block;margin-top:3px;font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.ssl-stop.pre{transition-delay:calc(var(--i,0)*70ms)}
.line-benefits{margin-top:clamp(2.5rem,4.5vw,3.5rem);display:flex;gap:var(--s5);flex-wrap:wrap}
.line-benefits div{font-weight:600;color:var(--ink-heading)}
.line-benefits div::before{content:"—";color:var(--accent);margin-right:.5em;font-weight:400}

/* ---------- §6 What we make — expanding image gallery ---------- */
.make-head{margin-bottom:clamp(2rem,5vw,3.5rem)}
.xgal{display:flex;gap:2px;height:min(64vh,600px)}
.xpanel{position:relative;overflow:hidden;flex:1;min-width:0;cursor:pointer;background:var(--steel-900);
  border:0;padding:0;text-align:left;color:#fff;
  transition:flex .65s var(--ease-out-expo)}
.xpanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.04) contrast(1.05);transition:transform .65s var(--ease-out-expo)}
.xpanel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,11,32,.16) 30%,rgba(0,11,32,.85))}
.xpanel.active{flex:2.7}
.xpanel:hover img{transform:scale(1.03)}
.xpanel-inner{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:clamp(16px,2vw,28px)}
.xpanel h3{color:#fff;font-size:clamp(1rem,1.5vw,1.375rem);font-weight:700;letter-spacing:-.005em}
.xpanel .xcopy{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--ease-out-expo),opacity .45s var(--ease-out) .1s}
.xpanel.active .xcopy{max-height:220px;opacity:1}
.xcopy p{color:#DCE6F0;font-size:.9846rem;line-height:1.55;margin-top:10px;max-width:44ch}
.xcopy .for-line{color:var(--steel-300);font-size:.875rem;margin-top:8px}

/* ---------- §7 Capabilities — sticky photo split + tag chips ---------- */
.cap-split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2.5rem,5vw,5.5rem);align-items:start}
.cap-sticky{position:sticky;top:104px}
.cap-sticky .rail-label{display:block;margin-bottom:var(--s3)}
.cap-sticky .frame{margin-top:var(--s4);aspect-ratio:4/3}
.cap-blocks{border-top:1px solid var(--rule)}
.cap-block{padding:clamp(1.75rem,3vw,2.5rem) 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s3) var(--s4)}
.cap-block h3{font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:600;letter-spacing:-.01em}
.cap-block .cb-desc{color:var(--muted);font-size:1rem;line-height:1.55}
.cb-focus{grid-column:1/-1}
.cb-focus .mono{display:block;color:var(--muted);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* v1.7: flat steel-100 on a paper section read as bland — a light tag on a light field
   with nothing to catch the eye. Now a machined spec tag: a light-to-steel gradient so
   it has a top edge, a navy hairline, a 1px inner highlight and a contact shadow, with
   the value in navy rather than graphite. Colour and depth, still 0-radius, no red spend. */
.chip{position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#EBEFF4 100%);
  color:var(--ink-heading);font-size:.9375rem;font-weight:600;
  padding:9px 14px 9px 26px;
  border:1px solid rgba(0,22,79,.15);
  box-shadow:0 1px 2px rgba(0,22,79,.07), inset 0 1px 0 #fff;
  transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out),
             transform .25s var(--ease-out)}
/* spec dash: the same mark a drawing uses to key a value */
.chip::before{content:"";position:absolute;left:11px;top:50%;
  width:7px;height:1px;background:var(--navy-500)}
.chip:hover{border-color:rgba(0,22,79,.32);transform:translateY(-1px);
  box-shadow:0 4px 12px -4px rgba(0,22,79,.24), inset 0 1px 0 #fff}
/* §7 had no action at all; this sits under the sticky photo */
.cap-cta{margin-top:var(--s4)}

/* ---------- §8 Quality — exhibit plate + credential rail (v1.5) ----------
   Was a 2×2 badge grid beside a square photo with an overlapping inset — a predictable
   card layout that read flat. Rebuilt as: the argument left, two ruled proof frames on
   one plate right, and a FULL-WIDTH credential rail beneath — four machined cells on a
   single continuous rule, the way a certificate register reads. Scarcity carries the
   emphasis: the rare credential is the only cell marked in red.
   Field stays true near-black #040507 (client request) — body text >12:1. */
.quality{position:relative;overflow:hidden;background:#040507;color:var(--ink-on-dark)}
/* two low sources + a deep vignette: light with a direction, not an even wash */
.quality::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(86% 62% at 2% -10%, rgba(44,108,198,.22) 0%, transparent 54%),
    radial-gradient(66% 58% at 98% 112%, rgba(213,1,45,.16) 0%, transparent 56%),
    radial-gradient(140% 118% at 50% 46%, transparent 28%, rgba(0,0,0,.9) 100%)}
/* blueprint lattice, masked off at top and bottom so it never meets a section edge —
   this is what the old flat panel was missing: structure behind the type */
.q-grid-lines{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) 0 0/100% 48px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/12.5% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.quality .container{position:relative;z-index:2}
.quality h2{color:#fff}
.quality .lead{color:#C9D4DE;max-width:44ch;margin-top:var(--s3)}
.quality .rail-label{display:block;color:var(--steel-400);margin-bottom:var(--s3)}

/* stretch, not start: the copy column is much shorter than the exhibit pair, which left
   a ~195px hole under the CTA. The intro is a column and the CTA is pushed to its foot
   with margin-top:auto, so the button base lands on the exhibit plate's base. The gap
   becomes a deliberate alignment instead of leftover space. */
.q-top{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(2rem,4.5vw,4.5rem);align-items:stretch}
.q-intro{display:flex;flex-direction:column}

/* the claim carries the one red hairline in the section */
.q-claim{margin-top:clamp(1.75rem,3.4vw,2.75rem);
  border-left:2px solid var(--accent);padding-left:clamp(1rem,1.8vw,1.5rem)}
.q-claim p{color:#fff;font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.5;
  font-weight:500;max-width:44ch}
.q-claim b{font-weight:700}
.q-claim .q-trace{color:var(--steel-300);font-size:.9846rem;font-weight:400;margin-top:8px}

/* two exhibits, hairline-ruled. NOT wrapped in a bordered plate — a card holding two
   cards is a nested card, and the hairline does the same job with less furniture. */
.q-plate{display:grid;gap:1px;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.15)}
.q-plate .frame img{filter:saturate(1.02) contrast(1.06) brightness(1.02)}
/* the plate's height is what drives the balance of this section: too tall and the copy
   column ends hundreds of px short, leaving a void wherever the CTA lands. These ratios
   put the two columns within ~60px of each other. */
.q-ex-a{aspect-ratio:16/9}
.q-ex-b{aspect-ratio:21/9}

/* credential rail — one continuous rule, four cells hung off it */
.q-rail{margin-top:clamp(2.75rem,5vw,4.5rem);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.22)}
.q-cert{position:relative;display:grid;align-content:start;gap:10px;
  padding:clamp(1.5rem,2.4vw,2rem) clamp(1rem,1.8vw,1.75rem) 0 0;
  border-left:1px solid rgba(255,255,255,.13)}
.q-cert:first-child{border-left:0}
.q-cert + .q-cert{padding-left:clamp(1rem,1.8vw,1.75rem)}
/* each cell's own segment of the rule lights on hover — instrumented, not decorative */
.q-cert::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:transparent;transition:background .3s var(--ease-out)}
.q-cert:hover::before{background:rgba(255,255,255,.55)}
.q-scope{color:var(--steel-400);letter-spacing:.12em;font-size:.7rem}
.q-cert b{font-size:clamp(1.125rem,1.8vw,1.4375rem);font-weight:700;color:#fff;
  letter-spacing:-.01em;line-height:1.1}
.q-by{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;
  color:var(--steel-400);line-height:1.55}
/* the rare credential is the only marked cell. Red on near-black is 3.7:1 — below AA —
   so the LABEL uses red-400 (5.0:1) and full-strength red is kept for the hairline,
   which is a mark, not text. */
.q-cert-key::before,.q-cert-key:hover::before{background:var(--accent)}
.q-cert-key .q-scope{color:var(--accent-on-dark)}
.q-cert-key .q-by{color:var(--steel-300)}

/* ---------- §9 Footprint — bright photography + a LIGHT frosted panel ----------
   The blue veil is gone: the photograph carries the section now. Legibility moved
   entirely into a LIGHT glass panel (Loadex treatment) carrying DARK type — which is
   what makes it safe over a bright daylight plant shot. A white frost at .78 composites
   to ≥184 even over pure black, so navy copy clears AA no matter what is behind it. */
/* v1.5: the card had grown to 1060px of a 1280 container — the photograph behind it was
   invisible, which defeats the whole treatment. Now the band runs tall, the card is
   ~600px and anchored to the BOTTOM, so the container mouth, the crates and the loading
   crew all read above and to the right of the copy. The photo is the design again. */
/* asymmetric padding is what actually pulls the card down: equal padding just centres it
   again however tall the band gets. Deep top, shallow bottom, anchored flex-end. */
.fp-band{position:relative;overflow:hidden;
  padding-block:clamp(7rem,13vw,11rem) clamp(2.75rem,4.5vw,4rem);
  min-height:clamp(620px,80vh,900px);display:flex;align-items:flex-end}
.fp-media{position:absolute;inset:0;z-index:0}
.fp-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) contrast(1.02)}
/* no colour cast — only a soft neutral floor so the panel edge reads against the photo */
.fp-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,18,30,.28) 0%,rgba(12,18,30,.06) 38%,rgba(12,18,30,.22) 100%)}
.fp-lines{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/25% 100%}
.fp-inner{position:relative;z-index:4;width:100%;display:flex;justify-content:flex-start}

/* one light glass card — kicker, headline, sub and the four cells, at ~half the width */
/* .84, not .78. White at α composites to (α*255) over ANY backdrop, so the alpha sets a
   guaranteed floor for everything printed on this panel: .78 floors at rgb(199), where
   --muted measures 4.12:1 (under AA) if the photo behind ever goes dark. .84 floors at
   rgb(214) and --muted clears 4.80:1 over pure black — legible by construction rather
   than by luck of which part of the photograph sits behind it. */
.fp-card{
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 30px 80px -34px rgba(0,12,51,.55);
  padding:clamp(1.5rem,2.6vw,2.25rem);max-width:min(100%,608px)}
.fp-card .rail-label{display:block;color:var(--muted);margin-bottom:var(--s3)}
.fp-band h2{color:var(--ink);font-size:clamp(1.875rem,3.2vw,2.75rem);font-weight:600;
  letter-spacing:-.022em;line-height:1.08;max-width:16ch}
.fp-band h2 .hl{color:var(--navy-500)}
.fp-sub{color:var(--muted);font-size:clamp(1rem,1.35vw,1.0625rem);line-height:1.6;
  max-width:42ch;margin-top:var(--s2)}

/* 2×2, hairline lattice. Four columns of paragraph is what made the panel span the band. */
.glass{display:grid;grid-template-columns:1fr 1fr;
  margin-top:clamp(1.35rem,2.4vw,1.75rem);
  border-top:1px solid rgba(0,22,79,.16)}
.glass-cell{padding:clamp(1rem,1.7vw,1.35rem) clamp(1rem,1.6vw,1.35rem);
  border-left:1px solid rgba(0,22,79,.16)}
.glass-cell:nth-child(2n+1){border-left:0;padding-left:0}
.glass-cell:nth-child(2n){padding-right:0}
.glass-cell:nth-child(n+3){border-top:1px solid rgba(0,22,79,.16);padding-bottom:0}
.glass-cell .mono{display:block;color:var(--muted);letter-spacing:.12em;margin-bottom:8px}
.glass-cell h3{color:var(--ink-heading);font-size:1.0625rem;font-weight:700;
  line-height:1.25;margin-bottom:6px}
.glass-cell p{color:var(--muted);font-size:.9375rem;line-height:1.55;max-width:32ch}
/* Kelkar Red is 5.2:1 on pure white but only 3.7:1 on this panel's real composited
   surface — and this is 12.5px text. Red-700 from the ramp measures 5.45:1 against the
   panel's worst-case floor. Still unmistakably the red marker, now legible. */
.glass-proof .mono{color:var(--red-700)}
.glass-cell.pre{transition-delay:calc(var(--i,0)*80ms)}
.fp-cta{margin-top:clamp(1.35rem,2.4vw,1.75rem);
  border-top:1px solid rgba(0,22,79,.16);padding-top:clamp(1.25rem,2.2vw,1.6rem)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fp-card{background:rgba(255,255,255,.93)}
}

/* ---------- §10 Founder / legacy — leadership composition (v1.5) ----------
   Was copy-right / one-portrait-left, which named two directors and showed one. Now three
   ruled blocks: the argument, the two of them together at full width, then the named
   portraits. The wide frame is the section's dominant idea; the portraits attach the
   names to faces. Left-aligned throughout, hairlines carrying the structure. */
.lg-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
  padding-bottom:clamp(1.75rem,3vw,2.5rem)}
.lg-head-copy .lead{margin-top:var(--s3)}
.legacy-beats{border-top:1px solid var(--rule)}
.legacy-beat{padding:var(--s2) 0;border-bottom:1px solid var(--rule);
  display:flex;gap:var(--s3);align-items:baseline}
.legacy-beat .mono{color:var(--accent);flex-shrink:0;width:64px}
.legacy-beat p{color:var(--muted);font-size:.9846rem}

/* the two of them, one frame, full container width — no crop, native 16:9.
   NO max-height here: capping the height caps the WIDTH through the aspect ratio, which
   is what stopped this spanning the container. */
.lg-hero{aspect-ratio:16/9;width:100%}

/* three equal portrait cells: the two named directors and one of the 530+. Equal widths
   mean all three bottom-align on their captions, which is what killed the ~330px hole
   the closing block used to leave in the third column. */
.lg-foot{margin-top:clamp(10px,1.4vw,18px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);align-items:start}
.lg-por{min-width:0}
.lg-por .frame{aspect-ratio:3/4}
.lg-por figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);
  display:grid;gap:5px}
.lg-por figcaption b{font-size:1.0625rem;font-weight:700;color:var(--ink-heading);
  letter-spacing:-.01em;line-height:1.2}
.lg-por figcaption .mono{color:var(--muted);font-size:.66rem;letter-spacing:.09em;
  line-height:1.5}
/* closing rail: full width under the three portraits, statement left, red CTA right */
.lg-rail{margin-top:clamp(1.75rem,3vw,2.5rem);
  padding-top:clamp(1.5rem,2.6vw,2rem);border-top:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4) clamp(2rem,4vw,4rem);flex-wrap:wrap}
.legacy-line{color:var(--ink);font-size:clamp(1.125rem,1.9vw,1.5rem);
  font-weight:600;line-height:1.3;letter-spacing:-.012em;max-width:34ch;
  text-wrap:balance}
.lg-rail .legacy-cta{margin-top:0;flex-shrink:0}

/* ---------- §11 Close — forged anchor with molten imagery ---------- */
/* ---------- §12 Contact — the RFQ destination ----------
   DARK, at Sarthak's call (it was built light to avoid three dark bands). Kept distinct
   from §11 and the footer: §11 is now LIGHT, this is cool near-black + blueprint grid,
   and the form is a raised panel. Every colour re-measured for AA. */
.contact{position:relative;overflow:hidden;background:#07080B;color:var(--ink-on-dark);
  padding-block:var(--section-pad)}
.contact::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) 0 0/100% 44px,
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) 0 0/44px 100%}
.contact::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90% 70% at 6% -6%, rgba(44,108,198,.20) 0%, transparent 58%),
    radial-gradient(70% 60% at 98% 106%, rgba(213,1,45,.14) 0%, transparent 60%)}
.contact .container{position:relative;z-index:2}
.ct-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,5vw,5rem);align-items:start}
.ct-intro h2{font-size:clamp(1.875rem,3.4vw,3rem);font-weight:600;
  line-height:1.1;letter-spacing:-.02em;color:#fff}
.ct-intro h2 .hl{color:var(--navy-300)}
.ct-intro .rail-label{display:block;color:var(--steel-300);margin-bottom:var(--s3)}
.ct-intro .lead{margin-top:var(--s3);max-width:44ch;color:#C6D2DE}

.ct-direct{margin-top:var(--s5);border-top:1px solid var(--rule-on-dark)}
.ct-direct-row{display:grid;grid-template-columns:104px 1fr;gap:var(--s2);
  align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule-on-dark)}
.ct-direct-row .mono{color:var(--steel-400);letter-spacing:.12em}
/* the values were body size (17px) against 12.5px mono keys — the detail shouted louder
   than the label naming it. 15px keeps them comfortably readable and lets the row read
   as a spec pair rather than a headline. */
.ct-direct-row a,.ct-direct-row .ct-confirm{font-size:.9375rem;line-height:1.5}
.ct-direct a{color:#fff;text-decoration:none;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.3)}
.ct-direct a:hover{border-bottom-color:var(--accent)}
.ct-confirm{border-bottom:1px dashed var(--steel-500)!important;color:var(--steel-300)!important}

.ct-nda{margin-top:var(--s5);border-left:2px solid var(--navy-500);padding-left:var(--s3)}
.ct-nda .mono{display:block;color:var(--navy-300);letter-spacing:.12em;margin-bottom:8px}
.ct-nda p{color:#BCC7D0;font-size:.9846rem;line-height:1.6;max-width:46ch}

/* the form is a RAISED panel. v1.6: it was two translucent white washes over the field,
   which read as a faint tint rather than an object. Now an OPAQUE dark base (#12161C →
   #0C0F14) sitting proud of the #07080B section, with a light wash across the top, a 1px
   bevel and a two-stage shadow (tight contact + wide ambient). The inputs, which are
   rgba(0,0,0,.42), now read as wells cut INTO a solid panel instead of holes in a haze. */
.ct-form{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);
  background:
    linear-gradient(163deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.014) 44%,rgba(255,255,255,0) 78%),
    linear-gradient(180deg,#12161C 0%,#0C0F14 100%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 6px 18px -8px rgba(0,0,0,.85),
    0 42px 84px -30px rgba(0,0,0,.95);
  padding:clamp(1.5rem,3vw,2.5rem)}
/* bevel: the edge catching the section's key light, same device as the footer plinth */
.ct-form::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26) 24%,
    rgba(141,176,230,.42) 52%,rgba(255,255,255,.20) 78%,transparent)}
.ct-span{grid-column:1/-1}
.ct-field{display:grid;gap:8px;min-width:0}
.ct-field label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel-300)}
.ct-opt{text-transform:none;letter-spacing:.02em;color:var(--steel-400)}
.ct-field input,.ct-field select,.ct-field textarea{
  width:100%;font-family:var(--font-display);font-size:1rem;color:#fff;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.2);border-radius:0;
  padding:13px 14px;min-height:48px;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.ct-field textarea{min-height:120px;resize:vertical;line-height:1.55}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#94A2B0}
.ct-field input:hover,.ct-field select:hover,.ct-field textarea:hover{border-color:rgba(255,255,255,.36)}
.ct-field input:focus-visible,.ct-field select:focus-visible,.ct-field textarea:focus-visible{
  outline:2px solid var(--navy-500);outline-offset:1px;border-color:var(--navy-500);
  background:rgba(0,0,0,.62)}
.ct-field [aria-invalid="true"]{border-color:var(--accent)}
.ct-field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#94A2B0 50%),linear-gradient(135deg,#94A2B0 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.ct-field select option{background:#12161B;color:#fff}
.ct-field input[type=file]{padding:11px 14px;color:var(--steel-300);font-size:.9rem;cursor:pointer}
.ct-field input[type=file]::file-selector-button{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.24);
  border-radius:0;padding:8px 12px;margin-right:14px;cursor:pointer}
.ct-field input[type=file]::file-selector-button:hover{background:rgba(255,255,255,.2)}
.ct-submit{grid-column:1/-1;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s1)}
.ct-note{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--steel-300);max-width:none}
.ct-note.err{color:#FF8A9C;text-transform:none;letter-spacing:.02em;font-size:.85rem}
.ct-note.ok{color:#7FE0A8;text-transform:none;letter-spacing:.02em;font-size:.85rem}

/* misc rules lost in the same edit */
.make{}
.legacy-cta{margin-top:var(--s4)}
.tb-wide{}
.tb-accent{}

/* ---------- §11 Close — LIGHT, image bleeding right under an overlapping card ----------
   Was a dark forged anchor; three dark bands ran into the footer. Light also means the
   copy sits on solid paper — no scrim, nothing to measure, legible by construction. */
.close-light{position:relative;background:var(--paper);padding-block:var(--section-pad);overflow:hidden}
.cl-grid{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center}
/* image starts in column 2 and bleeds off the right edge of the viewport */
/* 16/9 = the new frame's native aspect (1672×942). Aspect discipline: size the cell to
   the image, never crop the image into the cell. */
.cl-shot{grid-column:2;position:relative;margin-right:calc(50% - 50vw);
  aspect-ratio:16/9;overflow:hidden;background:var(--steel-900)}
.cl-shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.04) contrast(1.04)}
/* card overlaps the image, sitting in column 1 and spilling into column 2 */
.cl-card{grid-column:1;grid-row:1;position:relative;z-index:2;
  background:var(--surface);border:1px solid var(--rule);
  box-shadow:0 40px 90px -40px rgba(0,12,51,.42);
  padding:clamp(1.75rem,3.4vw,3rem);margin-right:calc(clamp(1.5rem,4vw,4rem) * -1)}
.cl-card .rail-label{display:block;margin-bottom:var(--s3)}
.close-light h2{font-size:clamp(1.875rem,3.4vw,2.875rem);font-weight:600;
  letter-spacing:-.022em;line-height:1.1;color:var(--ink);max-width:16ch}
.close-light h2 .hl{color:var(--navy-500)}
.cl-sub{margin-top:var(--s3);color:var(--muted);font-size:clamp(1rem,1.4vw,1.125rem);
  line-height:1.6;max-width:46ch}
.cl-ramp{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule);
  color:var(--muted);font-size:.9846rem;line-height:1.6;max-width:46ch}
.cl-ctas{margin-top:var(--s4);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.cl-also{margin-top:var(--s3);color:var(--muted);font-size:.9375rem}
/* 44px tap target via padding, underline via text-decoration. `border-bottom` on a
   min-height:44px inline-flex draws the rule at the BOX edge, ~11px under the baseline,
   which reads as a detached floating line. text-decoration tracks the text instead. */
.cl-also a{color:var(--ink-heading);font-weight:500;
  display:inline-block;padding-block:12px;line-height:1.45;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:rgba(0,22,79,.34);
  transition:text-decoration-color .2s var(--ease-out)}
.cl-also a:hover{text-decoration-color:var(--accent)}

/* section-level CTA — one action, contextual wording, same destination */
.sec-cta{margin-top:clamp(2rem,4vw,3rem);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
/* auto pushes it to the foot of the intro column (see .q-top); the padding is the
   minimum breathing room when the column is too short for auto to do anything. */
.quality .sec-cta{margin-top:auto;padding-top:clamp(2rem,4vw,3rem)}

/* ---------- Footer — glow + glass ----------
   Three blurred colour fields behind a frosted panel. Kelkar's palette, not the
   reference's rose: navy and steel carry it, red stays scarce (one CTA + one hairline).
   Glass here is DARK-tinted because the field behind it is midnight. */
/* isolate keeps the light fields resolving against this footer's own midnight field
   rather than anything behind the page. */
.footer{position:relative;overflow:hidden;isolation:isolate;background:var(--midnight);
  color:var(--steel-300);padding-block:clamp(3rem,6vw,5rem) clamp(1.5rem,3vw,2.5rem);
  border-top:1px solid var(--rule-on-dark)}
/* a cool horizon at the top edge + a soft vignette. The vignette is deliberately WEAK:
   the light fields below live in the corners, and a heavy vignette just cancels them. */
.footer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 64% at 50% -12%, rgba(44,108,198,.13), transparent 62%),
    radial-gradient(150% 120% at 50% 52%, transparent 54%, rgba(0,0,0,.5) 100%)}

/* v1.5: the glows were three flat radial discs at even opacity — coloured circles, not
   light. Real sources have a bright core, a long asymmetric falloff, and they RAKE.
   These are wide ellipses, rotated off axis, so they rake rather than sit.
   Still radial gradients, never `filter: blur()` — blur promotes each glow to its own
   compositing layer, which is what mis-composited this panel white before.
   v1.7 — NO mix-blend-mode. It was `screen`, which over a near-black field is visually
   almost a no-op (screen against ~4% luminance ≈ the source colour) but forced the
   compositor to RE-BLEND three large layers on every animation frame. Measured with
   alternating samples: screen 52.9 fps median vs 60.3 without, against a 61.0 static
   baseline. Dropping it is what makes the drift below free. Alphas are nudged up to
   replace the small additive lift the blend gave where the fields overlap. */
.footer-glow{position:absolute;inset:-8% -6%;pointer-events:none;user-select:none}
.fg{position:absolute}
.fg-navy{top:-42%;left:-16%;width:82rem;height:48rem;transform:rotate(-11deg);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(110,160,232,.58) 0%, rgba(60,124,210,.36) 24%,
    rgba(29,85,172,.17) 46%, rgba(0,22,79,.06) 68%, transparent 84%)}
/* red stays the scarce one: smaller, lower, dimmer than the navy key */
.fg-red{bottom:-46%;right:-10%;width:62rem;height:40rem;transform:rotate(10deg);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(238,86,112,.34) 0%, rgba(213,1,45,.21) 24%,
    rgba(148,0,31,.08) 50%, transparent 78%)}
/* the steel fill bridges the two so the middle of the plinth isn't a dead zone */
.fg-steel{top:-6%;right:16%;width:56rem;height:38rem;transform:rotate(-6deg);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(196,210,224,.21) 0%, rgba(147,160,172,.09) 42%, transparent 74%)}
/* the raking sheen: one soft diagonal band of light across the whole plinth */
.fg-sheen{inset:0;width:100%;height:100%;
  background:linear-gradient(101deg, transparent 24%, rgba(255,255,255,.05) 43%,
    rgba(255,255,255,.014) 52%, transparent 66%)}

/* ---------- footer: liquid drift ----------
   ONE field moves: the navy key light drifts slowly across the static red and steel
   fields, so the combined gradient never sits still. Sarthak's condition was that this
   must not make the page heavy, so it was measured rather than assumed. Alternating
   1s samples at the footer, median of 5, against a 61.0 fps static baseline:

     three fields drifting (rotate + translate + scale) ....... 33.3
     three fields, translate only ............................. 31.2
     three fields, translate only + will-change layers ........ 31.7
     ONE field, translate only ................................ 59.1   ← shipped
     static baseline .......................................... 61.0

   The cost scales with the NUMBER of large animated layers, not with the kind of
   transform: three movers cost ~30 fps, one costs 1.9. One is also enough to read as
   liquid, because it is the dominant light and it travels across the other two.

   The rest of the cost control:
   1. TRANSFORM ONLY, rotation held constant inside the keyframe so only translation
      changes. No background-position, no filter, no layout property.
   2. GATED ON VISIBILITY. `.lit` is added by an IntersectionObserver as the footer
      approaches and removed when it leaves, so on a 14,000px page this is idle for the
      ~95% of scroll where the footer isn't on screen.
   3. A WANDERING PATH, not a back-and-forth. v1.8: `alternate` retraced the same line and
      read as a mechanism sliding. This is a closed loop through four off-axis points over
      96s, so the light never repeats a direction. Still ONE layer and still only
      `transform`, so it is the same work the 2-keyframe version measured at 1.3 fps —
      extra waypoints on an already-compositor-animated property are free.
   ⚠ An opacity breathe was tried here and REMOVED. It adds a second animated property and
      could not be measured cleanly (the verification pane started rAF-throttling, baseline
      included), and unmeasured motion is not shippable under the "must not make the page
      heavy" constraint. If it's wanted, benchmark it on real hardware first.
   Killed entirely by reduced-motion and by ?flat. */
@media (prefers-reduced-motion:no-preference){
  .footer.lit .fg-navy{will-change:transform;
    animation:fgTide 96s cubic-bezier(.42,0,.58,1) infinite}
}
@keyframes fgTide{
  0%  {transform:translate3d(-4%,-2%,0) rotate(-11deg)}
  27% {transform:translate3d(3%,4%,0)   rotate(-11deg)}
  52% {transform:translate3d(9%,-2%,0)  rotate(-11deg)}
  76% {transform:translate3d(2%,5%,0)   rotate(-11deg)}
  100%{transform:translate3d(-4%,-2%,0) rotate(-11deg)}}
.footer-grid-lines{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/25% 100%}
/* film grain over the gradients — this is what stops them banding and reading as CSS */
.footer .grain{opacity:.22;z-index:1}
.footer .container{position:relative;z-index:2}
/* the plinth runs wider than the 1280 body: it reads as the base of the page, and it is
   what gives the four nav columns enough width to stop the email overflowing */
.footer .container{max-width:1560px}

/* NO backdrop-filter here. There is nothing behind this panel but flat midnight and two
   soft gradient glows, so a backdrop blur would be visually identical to painting the
   tint directly — while being genuinely fragile: backdrop-filter inside an
   overflow:hidden ancestor samples the wrong layer and blows the panel out white.
   The glass read comes from the layered tint + hairline border, not the blur. */
.footer-glass{
  position:relative;
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,3.12fr);
  gap:clamp(2rem,4vw,4rem);
  /* v1.6: an OPAQUE dark base under the tints. The panel was translucent enough that the
     light fields behind it lifted its surface and flattened the text against it. Solid
     now: the atmosphere stays in the air AROUND the plinth, the plinth reads as an object,
     and every text colour gains contrast (steel-300 links 11.3:1, steel-400 detail 7.3:1). */
  background:
    linear-gradient(135deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.018) 40%, rgba(255,255,255,0) 72%),
    radial-gradient(120% 150% at 8% 0%, rgba(44,108,198,.22) 0%, rgba(0,22,79,.20) 50%, rgba(0,0,0,.30) 100%),
    linear-gradient(180deg, #0B0D11 0%, #07090C 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 8px 22px -10px rgba(0,0,0,.8),
    0 44px 90px -38px rgba(0,0,0,.95);
  padding:clamp(1.75rem,3.4vw,2.75rem)}
/* bevel highlight: a 1px edge catching the key light, brightest where the navy field is.
   This one detail is most of what separates "glass" from "a dark box with a border". */
.footer-glass::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30) 20%,
    rgba(141,176,230,.52) 48%,rgba(255,255,255,.24) 76%,transparent)}

.fg-brand img{height:30px;width:auto}
.fg-line{margin-top:var(--s3);color:var(--steel-300);font-size:.9846rem;
  line-height:1.6;max-width:36ch}
.fg-certs{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:6px}
.fg-certs span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel-300);
  border:1px solid rgba(255,255,255,.16);padding:6px 10px}
.fg-cta{margin-top:var(--s4)}

/* structural vertical hairlines between the columns — the page's own grammar, and they
   make the plinth read as architecture rather than a floating card */
.fg-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.fg-col{padding-inline:clamp(1rem,1.8vw,1.75rem);
  border-left:1px solid rgba(255,255,255,.09)}
.fg-col:first-child{border-left:0;padding-left:0}
.fg-col:last-child{padding-right:0}
.fg-k{display:block;color:var(--navy-300);letter-spacing:.14em;margin-bottom:var(--s3);
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12)}
.fg-col ul{list-style:none;display:grid;gap:11px}
.fg-col a{color:var(--steel-300);font-size:.9375rem;line-height:1.45;
  display:inline-flex;align-items:center;min-height:24px;
  transition:color .2s var(--ease-out)}
.fg-col a:hover{color:#fff}
.fg-plain li{color:var(--steel-400);font-size:.9375rem;line-height:1.45}
.fg-plain em{font-style:normal;color:var(--steel-400)}
/* the reach column carries the longest unbroken strings on the page (an email, a phone).
   Wrap them anywhere rather than let them push the column open. */
.fg-reach li,.fg-reach a{overflow-wrap:anywhere;font-size:.875rem}

.footer-base{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:var(--s3);
  border-top:1px solid rgba(255,255,255,.1)}
.footer .mono{font-size:.6875rem;letter-spacing:.08em;color:var(--steel-400)}
.footer .ct-confirm{border-bottom:1px dashed var(--steel-600)!important;
  color:var(--steel-400)!important}

/* ---------- Scroll-reveal enhancement (JS adds .pre then .in) ---------- */
.pre{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.pre.in{opacity:1;transform:none}
.line-tile.pre{transition-delay:calc(var(--i,0)*60ms)}
.num-cell.pre{transition-delay:calc(var(--i,0)*70ms)}
.usp-row.pre{transition-delay:calc(var(--i,0)*90ms)}
.q-cert.pre{transition-delay:calc(var(--i,0)*80ms)}
.glass-cell.pre{transition-delay:calc(var(--i,0)*90ms)}

/* ---------- Flat mode (?flat — headless verification) ---------- */
.flat *,.flat *::before,.flat *::after{animation:none!important;transition:none!important}
.flat .pre{opacity:1!important;transform:none!important}
.flat .marquee-track{animation:none!important}
.flat .hero,.flat .hero-grid{min-height:820px}


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
  .pre{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .rail{grid-template-columns:1fr;gap:var(--s3)}
  /* the lattice is a desktop structure — one column has no lattice to draw, and the
     side cells collapse, so it is switched off rather than left drawing stray rules */
  .hero-rules{display:none}
  .hero-grid{grid-template-columns:1fr;grid-template-rows:auto;min-height:100svh;
    --hero-left:var(--gutter)}
  .hz-main{grid-column:1;grid-row:auto;justify-content:flex-end;
    padding-top:120px;padding-bottom:0}
  .hero-trust{grid-column:1;grid-row:auto}
  .hc-shot,.hc-output,.hc-capacity{display:none}
  .hc-compliance{grid-column:1;grid-row:auto;
    border-top:1px solid var(--hero-rule);
    padding:20px var(--gutter);justify-content:flex-start}
  .hero-trust{height:auto;margin-top:var(--s5);
    padding-block:var(--s3) var(--s4);border-top:1px solid var(--hero-rule)}
  .usp-gal{height:clamp(380px,54vw,520px)}
  .cap-split{grid-template-columns:1fr}
  .cap-sticky{position:static}
  .numbers-grid{grid-template-columns:repeat(2,1fr)}
  .numbers-grid .num-cell:nth-child(2n+1){padding-left:0;border-left:0}
  .numbers-grid .num-cell:nth-child(2n){border-left:1px solid var(--rule-on-dark);padding-left:var(--s3)}
  .line-tiles{grid-template-columns:repeat(2,1fr)}
  /* drawing sheet folds to 2 columns — cell borders re-flow to keep a clean lattice */
  .ops{grid-template-columns:repeat(2,1fr)}
  .op:nth-child(4n){border-right:1px solid var(--rule)}
  .op:nth-child(2n){border-right:0}
  .op:nth-child(n+5){border-bottom:1px solid var(--rule)}
  .op:nth-child(n+7){border-bottom:0}
  .titleblock{grid-template-columns:1fr 1fr}
  .tb-cell:nth-child(3){border-left:0}
  .tb-cell:nth-child(n+3){border-top:1px solid var(--rule)}
  /* close: card stops overlapping, image drops below */
  .cl-grid{grid-template-columns:1fr}
  .cl-card{grid-column:1;grid-row:1;margin-right:0}
  .cl-shot{grid-column:1;grid-row:2;margin-right:calc(50% - 50vw);margin-left:calc(50% - 50vw);margin-top:var(--s5);aspect-ratio:16/9}
  /* §8 folds: copy over exhibits, rail to 2×2 */
  .q-top{grid-template-columns:1fr}
  .q-plate{grid-template-columns:1fr 1fr;gap:1px}
  .q-ex-a,.q-ex-b{aspect-ratio:4/3}
  .q-rail{grid-template-columns:1fr 1fr}
  .q-cert{padding-left:0}
  .q-cert:nth-child(2n){padding-left:clamp(1rem,1.8vw,1.75rem)}
  .q-cert:nth-child(2n+1){border-left:0}
  .q-cert:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13);
    margin-top:clamp(1.25rem,2vw,1.75rem)}
  /* §10 folds: head stacks; the three portraits hold their row down to tablet */
  .lg-head{grid-template-columns:1fr;gap:var(--s4);align-items:start}
  .legacy-line{max-width:46ch}
  /* §8 copy column stops stretching once it sits above the exhibits */
  .q-intro{display:block}
  .quality .sec-cta{margin-top:clamp(2rem,4vw,3rem);padding-top:0}
  .ct-grid{grid-template-columns:1fr}
  .footer-glass{grid-template-columns:1fr}
  .fg-nav{grid-template-columns:1fr 1fr;row-gap:var(--s5)}
  .fg-col:nth-child(2n+1){border-left:0;padding-left:0}
  }
@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:grid;place-items:center}
  .nav.open{background:rgba(0,12,51,.96);backdrop-filter:blur(14px)}
  .nav.open .nav-links{display:flex;flex-direction:column;align-items:flex-start;
    position:absolute;top:76px;left:0;right:0;
    background:rgba(0,12,51,.96);backdrop-filter:blur(14px);
    padding:var(--s3) var(--gutter) var(--s4);gap:4px;
    border-bottom:1px solid var(--rule-on-dark)}
  .usp-rows{grid-template-columns:1fr}
  .usp-row{border-right:0;padding-left:0!important;padding-right:0}
  /* phones: mosaic becomes a tall plate over a tight pair */
  .usp-gal{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
    height:auto;gap:8px}
  .ug-a{grid-column:1/-1;grid-row:1/2;aspect-ratio:4/3}
  .ug-b{grid-column:1/2;grid-row:2/3;aspect-ratio:1/1}
  .ug-c{grid-column:2/3;grid-row:2/3;aspect-ratio:1/1}
  .usp-gal .frame{height:auto}
  .usp-ctas .btn{width:100%;justify-content:center}
  .cap-block{grid-template-columns:1fr}
  .q-plate{margin-top:var(--s2)}
  .cap-band .container{grid-template-columns:1fr}
  .lg-hero{aspect-ratio:16/10;max-height:none}
  /* three portraits at 110px each would be unreadable; wrap to a 2-up */
  .lg-foot{grid-template-columns:1fr 1fr}
  .lg-rail{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .lg-rail .btn{width:100%;justify-content:center}
  /* expanding gallery becomes a vertical stack */
  .xgal{flex-direction:column;height:auto}
  .xpanel{min-height:88px;flex:none;height:88px;transition:height .5s var(--ease-out-expo)}
  .xpanel.active{flex:none;height:400px}
  .xpanel h3{white-space:normal}
  /* the two paths stack; the junction collapses to a single stem */
  .tradeoff-paths{grid-template-columns:1fr}
  .tradeoff-join{height:26px}
  .tradeoff-join span:nth-child(1),.tradeoff-join span:nth-child(2),
  .tradeoff-join span:nth-child(3){display:none}
  .tradeoff-join::after{left:50%;top:0;height:26px}
  .tradeoff-answer{grid-template-columns:1fr;gap:var(--s2)}
  /* email + phone are the two things a buyer actually taps on a phone — give them
     a real 44px target instead of a 28px inline link. Padding, not min-height on a
     flex box: the latter drops any border-bottom 11px below the text. */
  .ct-direct a{display:inline-block;padding-block:11px;line-height:1.4;
    border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.34)}
  .ct-direct a:hover{text-decoration-color:var(--accent)}
  .ct-direct .ct-confirm{border-bottom:0!important;
    text-decoration-style:dashed;text-decoration-color:var(--steel-500)}
  .fg-col a{display:inline-flex;align-items:center;min-height:44px}
  .ct-form{grid-template-columns:1fr}
  .ct-submit{flex-direction:column;align-items:stretch}
  .ct-submit .btn{width:100%;justify-content:center}
}
@media (max-width:560px){
  .nav-cta{display:none}
  .line-tiles{grid-template-columns:1fr 1fr}
  .numbers-grid{grid-template-columns:1fr 1fr}
  /* scale the whole logo wall down together so the optical relationships survive */
  .marquee-track{--mq:.76}
  .hero-ctas .btn,.cl-ctas .btn,.sec-cta .btn{width:100%;justify-content:center}
  /* sheet at phone width: still 2 up — 1 up would make the drawings absurdly large */
  .sheet{padding-inline:0;border-left:0;border-right:0}
  .sheet-head,.titleblock{padding-inline:var(--s2)}
  .titleblock{margin-inline:0}
  .op{padding-inline:var(--s2)}
  .op-meta h3{font-size:1rem}
  .sheet-head{flex-direction:column;gap:4px}
  .glass{grid-template-columns:1fr}
  .glass-cell{border-left:0;padding-inline:0}
  .glass-cell+.glass-cell{border-top:1px solid rgba(0,22,79,.16)}
  /* §8 rail stacks: one credential per row, each hung off its own rule */
  .q-rail{grid-template-columns:1fr}
  .q-cert{border-left:0;padding-left:0!important;padding-right:0}
  .q-cert+.q-cert{border-top:1px solid rgba(255,255,255,.13);margin-top:var(--s3)}
  .q-plate{grid-template-columns:1fr}
  .q-ex-a{aspect-ratio:16/10}
  .q-ex-b{aspect-ratio:21/9}
  .fg-nav{grid-template-columns:1fr;row-gap:var(--s4)}
  .fg-col{border-left:0;padding-inline:0}
  .footer-base{flex-direction:column;gap:6px}
}


/* ════════════════════════════════════════════════════════════════════════════
   PAGE 2 — /capabilities/  (capabilities.html)
   Contract: ../DESIGN-capabilities.md. Floor = ui-ux-pro-max (Swiss Modernism 2.0:
   strict grid, 8px maths, asymmetric balance, single accent). Ceiling = impeccable.
   Tokens inherited verbatim from DESIGN.md — nothing re-derived here.

   TONAL ARC (deliberately NOT Home's 3-anchor cinematic arc):
   §1 paper · §2 paper · §3 mist · §4 MIDNIGHT (the page's ONE anchor) · §5 paper ·
   §6 mist · §7 paper. One dark beat, not three. Same brand, lower amplitude —
   which is what makes an internal page read as internal.

   RED BUDGET — exactly four spends: hero CTA, §4 CTA, close CTA, the one key
   credential cell. Everything else is ghost, text-link or steel-blue.
   ════════════════════════════════════════════════════════════════════════════ */

/* ---------- NAV — light variant (Home's nav assumes a midnight hero under it) ---------- */
.nav-light .nav-links a{color:var(--navy-900)}
.nav-light .nav-links a:hover{color:var(--navy-600)}
/* current-page marker is the underline ALONE. A weight bump made this one link heavier
   than every other item in the mono nav row, so the two pages' navs no longer matched. */
.nav-light .nav-links a[aria-current="page"]{color:var(--ink-heading);
  box-shadow:inset 0 -1px 0 var(--navy-900)}
.nav-light .nav-toggle{border-color:rgba(0,22,79,.28);color:var(--navy-900)}
.nav-light.scrolled{background:rgba(247,249,251,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(0,22,79,.14)}
/* the mobile sheet stays navy for brand consistency, so its links must flip back */
.nav-light.open .nav-links a{color:var(--ink-on-dark)}
.nav-light.open .nav-links a[aria-current="page"]{color:#fff;box-shadow:inset 0 -1px 0 rgba(255,255,255,.5)}

/* ---------- §1 HERO — light, type-led, subordinate to Home ----------
   H1 tops out at 4.5rem here vs Home's 6rem. That gap is intentional: the internal
   page announces itself at lower amplitude, and 4.5rem is DESIGN.md §3's own display
   ceiling. Weight stays 600 (the Loadex "large but light" move), never 800. */
.cap-hero{background:var(--bg);
  padding-top:calc(76px + clamp(2.75rem,6.5vw,6rem));padding-bottom:0}
.cap-hero h1{font-size:clamp(2.5rem,5.2vw,4.5rem);font-weight:600;
  letter-spacing:-.028em;line-height:1.04;max-width:16ch}
.cap-hero h1 .hl{color:var(--navy-500)}
.ch-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.88fr);
  column-gap:clamp(2rem,5vw,5rem);row-gap:clamp(1.75rem,3vw,2.5rem);align-items:end}
.ch-side{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(1.5rem,2.6vw,2.25rem);padding-bottom:6px}
.ch-side .lead{max-width:40ch}

/* Spec strip: ONE top hairline, no vertical dividers.
   The verticals were removed on purpose — a 4-cell ruled column row is the fingerprint
   of impeccable's reflex-reject "editorial-typographic" lane, and §6's credential rail
   is already the page's one licensed instance of that shape. Without verticals this
   reads as an instrument readout instead, which is a different object. */
.ch-spec{margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.1rem,2vw,1.5rem);
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4.5vw,4.5rem)}
.chs{display:grid;gap:7px;align-content:start}
.chs dt{color:var(--muted);font-size:.7rem;letter-spacing:.14em}
.chs dd{font-weight:600;font-size:clamp(1rem,1.35vw,1.1875rem);color:var(--ink-heading);
  letter-spacing:-.01em}

/* The band starts at the container's left CONTENT edge and bleeds only right.
   Not an edge-to-edge full bleed: copying the reference composition verbatim is its own
   kind of generic, and this way the container's own line becomes the structural edge.
   The calc resolves against the parent's width (not 100vw), so a scrollbar can never
   push it into horizontal overflow. On mobile it insets by the gutter and still bleeds. */
.ch-band{margin-top:clamp(2.75rem,5.5vw,4.5rem);
  margin-left:calc((100% - min(100%,var(--container)))/2 + var(--gutter))}
.ch-band .frame{aspect-ratio:21/9}

/* ---------- §2 THE RANGE — measured span bars ----------
   Three honest axes, four bars. See capabilities.html for why there is no shared scale. */
.rangesec{background:var(--bg)}
.rg-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:var(--s3);align-items:end}
.rg-head h2{max-width:18ch}
.rg-head .hl{color:var(--navy-500)}
.rg-head .lead{max-width:46ch;padding-bottom:4px}
.rg-axes{margin-top:clamp(2.75rem,5.5vw,4.5rem);display:grid;gap:clamp(2.25rem,4.5vw,3.5rem)}
.rg-axis-k{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  padding-bottom:10px;border-bottom:1px solid rgba(0,22,79,.22)}
.rg-axis-k .mono{color:var(--ink-heading);font-size:.7rem;letter-spacing:.14em}
.rg-unit{color:var(--muted)!important}
.rg-row{display:grid;
  grid-template-columns:minmax(0,clamp(200px,22vw,280px)) minmax(0,1fr);
  column-gap:clamp(1.5rem,3vw,2.5rem);
  padding-top:clamp(1.25rem,2.4vw,1.875rem);align-items:start}
.rg-name{grid-column:1;grid-row:1;font-weight:600;font-size:1.0625rem;
  color:var(--ink-heading);letter-spacing:-.005em}
.rg-desc{grid-column:1;grid-row:2;margin-top:5px;font-size:.9375rem;
  color:var(--muted);line-height:1.5;max-width:34ch}

/* ANTI-CEILING RENDERING: the track runs the full width and FADES OUT past the value,
   so a bar reads "reaches this far", never "stops here". No end-caps anywhere.
   --scale 0.78 is the fraction of the row the axis maximum occupies; the remaining 22%
   is the fade, which is also where the value label sits. */
.rg-bar{grid-column:2;grid-row:1/3;position:relative;min-height:46px;align-self:center;
  --scale:.78}
.rg-track{position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,
    rgba(0,22,79,.26) 0%,rgba(0,22,79,.26) calc(var(--scale)*100%),rgba(0,22,79,0) 100%)}
.rg-fill{position:absolute;top:calc(50% - 3px);height:6px;
  left:calc(var(--s,0%) * var(--scale));
  width:calc((var(--v,100%) - var(--s,0%)) * var(--scale));
  background:var(--navy-900);transform-origin:left}
/* start tick — carries information only on the press brake, whose bar is a true 35→300
   range rather than a reach-to value. Harmless at --s:0. */
.rg-fill::before{content:"";position:absolute;left:0;top:-6px;bottom:-6px;width:1px;
  background:var(--navy-900)}
.rg-val{position:absolute;top:50%;transform:translateY(-50%);
  left:calc(var(--v,100%) * var(--scale));margin-left:14px;
  font-family:var(--font-mono);font-size:.8125rem;font-weight:500;
  color:var(--ink-heading);white-space:nowrap;letter-spacing:.02em}

/* ---------- §3 THE SIX STATIONS — docked on a continuous spine ----------
   The page's one structural idea: the Single-Source Line rendered as layout rather than
   as a graphic. One unbroken navy rule; every station docks onto it with a tick. */
.stations{background:var(--steel-100);padding-block:var(--section-pad);
  --spine-gap:clamp(1.5rem,4.5vw,4.5rem)}
.st-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:var(--s3);align-items:end}
.st-head h2{max-width:19ch}
.st-head .hl{color:var(--navy-500)}
.st-head .lead{max-width:50ch;padding-bottom:4px}
.st-track{position:relative;margin-top:clamp(2.75rem,5.5vw,4.5rem);
  padding-left:var(--spine-gap)}
/* the spine fades toward the foot so it reads as continuing past the last station
   rather than terminating on it — the same "reaches" logic as the §2 tracks */
.st-spine{position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,var(--navy-900) 0%,var(--navy-900) 82%,rgba(0,22,79,.12) 100%)}

/* align-items:center, NOT start. Because every station's media is a different aspect and
   a different width, top-aligning left a 200–350px void under the shorter copy column on
   the portrait stations — which reads as a gap, not as whitespace. Centring the copy
   against its own image balances each row while the varied media keeps the rhythm
   irregular. The NAME stays align-self:start so its tick still docks at the row's top,
   which is what keeps the spine legible. */
.stn{position:relative;display:grid;
  grid-template-columns:clamp(112px,12.5vw,176px) minmax(0,1fr) minmax(0,var(--mw,1fr));
  column-gap:clamp(1.25rem,2.6vw,2.5rem);
  padding-block:clamp(2.25rem,4.5vw,4rem);align-items:center}
.stn:first-child{padding-top:0}
.stn+.stn{border-top:1px solid rgba(0,22,79,.14)}
/* the name centres WITH the copy rather than pinning to the row top: pinned, it floated
   ~170px above the copy it labels and the pair read as two unrelated elements. The tick
   simply docks at whatever height the name sits, which keeps the spine legible while the
   station reads as one block. The full-width station is the exception — its media is in
   row 2, so its name pins to the top of the copy. */
.stn-name{grid-column:1;grid-row:1;position:relative;align-self:center;
  font-size:clamp(1.1875rem,1.9vw,1.5rem);font-weight:600;line-height:1.2;
  color:var(--ink-heading);letter-spacing:-.012em}
.stn-wide .stn-name{grid-row:1/3;align-self:start}
/* the dock: a tick from the spine to the station name */
.stn-name::before{content:"";position:absolute;top:.66em;
  left:calc(-1 * var(--spine-gap));width:calc(var(--spine-gap) - 10px);
  height:1px;background:var(--navy-900)}
.stn-copy{grid-column:2;grid-row:1;display:grid;gap:clamp(1rem,1.8vw,1.375rem);
  align-content:start}
.stn-copy p{font-size:1.0625rem;line-height:1.55;color:var(--ink);max-width:44ch;
  text-wrap:pretty}
.stn-media{grid-column:3;grid-row:1}
.stn-media .frame{aspect-ratio:var(--ar,16/9)}
/* reversed: media takes the middle column, copy the outer. The NAME never moves —
   it stays docked to the spine in column 1, so the docking reading survives the flip. */
.stn-rev{grid-template-columns:clamp(112px,12.5vw,176px) minmax(0,var(--mw,1fr)) minmax(0,1fr)}
.stn-rev .stn-copy{grid-column:3}
.stn-rev .stn-media{grid-column:2}
/* the deliberate break in the alternation (Welding): copy full width, letterbox beneath */
.stn-wide{grid-template-columns:clamp(112px,12.5vw,176px) minmax(0,1fr)}
.stn-wide .stn-copy{grid-column:2}
.stn-wide .stn-media{grid-column:2;grid-row:2;margin-top:clamp(1.5rem,3vw,2.5rem)}
.stn-wide .stn-copy p{max-width:62ch}

/* ---------- §4 CAPACITY — the page's ONE dark anchor ----------
   NOT a 3-up figure row: that is the hero-metric template (an absolute ban) and would
   have been this page's third ruled-column repetition. One dominant figure, two
   subordinate, with the forward-looking figure keyed in steel-blue — coding "future"
   without spending another of the four red slots. No count-up: Home's numbers band
   owns that device. */
.capacity{position:relative;overflow:hidden;background:var(--bg-anchor);color:var(--ink-on-dark)}
.cap-bg{position:absolute;inset:0;z-index:0}
.cap-bg img{width:100%;height:100%;object-fit:cover;opacity:.32;
  filter:grayscale(.3) contrast(1.06)}
.cap-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(10,11,13,.95) 0%,rgba(10,11,13,.78) 48%,rgba(10,11,13,.9) 100%)}
.capacity .grain{z-index:2;opacity:.3}
.capacity .container{position:relative;z-index:4}
.capacity h2{color:#fff;max-width:15ch}
.capacity .hl{color:var(--navy-300)}
.capacity .lead{color:var(--muted-on-dark);max-width:46ch}
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  column-gap:clamp(2.5rem,6vw,5.5rem);row-gap:clamp(2.5rem,5vw,3.5rem);align-items:center}
.cp-copy{display:grid;gap:var(--s3);align-content:start}
.cp-figs{display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
.cp-lead-fig{display:grid;gap:10px;padding-top:clamp(1.1rem,2vw,1.5rem);
  border-top:1px solid rgba(255,255,255,.3)}
.cp-n{display:block;font-size:clamp(3.25rem,7vw,6rem);font-weight:700;line-height:.88;
  letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums}
.cp-plus{font-size:.44em;font-weight:600;vertical-align:super;letter-spacing:0;margin-left:.06em}
.cp-l{color:var(--steel-400);font-size:.7rem;letter-spacing:.14em;display:block}
.cp-sub{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,2.6vw,2rem)}
.cp-cell{display:grid;gap:8px;padding-top:clamp(.9rem,1.6vw,1.25rem);
  border-top:1px solid rgba(255,255,255,.18)}
.cp-n2{display:block;font-size:clamp(1.625rem,3vw,2.5rem);font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--ink-on-dark);font-variant-numeric:tabular-nums}
/* the forward figure, keyed steel-blue: this is the expansion argument, not a stat */
.cp-fwd{border-top-color:var(--navy-400)}
.cp-fwd .cp-n2{color:var(--navy-300)}
.cp-fwd .cp-l{color:var(--navy-300)}

/* ---------- §5 PROVEN PROGRAMMES — one image, five ruled rows ----------
   Compact by design: six photographed stations followed by five more photographed rows
   is this page's fatigue risk. Deliberately NOT sticky (Home §7 owns the sticky split). */
.prog{background:var(--bg)}
.pg-grid{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:clamp(2rem,4vw,3rem);align-items:start}
/* the media STRETCHES to the list's height rather than holding a fixed 4:5. At a fixed
   ratio the frame ended ~280px above the foot of the five rows and left the left column
   half empty. Stretching turns the photograph into the column, which is the stronger
   composition and the reason this section can stay compact. */
.pg-media{align-self:stretch}
.pg-media .frame{height:100%;min-height:clamp(400px,44vw,620px)}
.pg-body h2{max-width:17ch}
.pg-body .hl{color:var(--navy-500)}
.pg-body .lead{margin-top:var(--s2);max-width:44ch}
.pg-list{list-style:none;margin-top:clamp(1.75rem,3.5vw,2.75rem);
  border-top:1px solid rgba(0,22,79,.22)}
.pg-list li{padding-block:clamp(1rem,2vw,1.375rem);border-bottom:1px solid var(--rule)}
.pg-list h3{font-size:clamp(1.0625rem,1.5vw,1.25rem);font-weight:600;
  color:var(--ink-heading);letter-spacing:-.01em;line-height:1.25}
.pg-d{margin-top:5px;font-size:.9375rem;color:var(--muted);line-height:1.5}
.pg-for{margin-top:8px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.045em;
  color:var(--navy-700);line-height:1.5}

/* ---------- §6 CERTIFICATION SCOPE — the credential rail, inverted to LIGHT ----------
   Stays light on purpose: a second dark section would rebuild Home's three-anchor arc.
   Not a free reuse — the rail was authored for near-black, so every colour is remapped.
   Red-600 #B60127 on steel-100 measures ~7.2:1; full-strength red-500 would be ~5.3:1
   and is kept for the 1px key rule only, which is a mark, not text. */
.certscope{background:var(--steel-100)}
.cs-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:var(--s3);align-items:end}
.cs-head h2{max-width:20ch}
.cs-head .hl{color:var(--navy-500)}
.cs-head .lead{max-width:44ch;padding-bottom:4px}
.q-rail-light{border-top-color:rgba(0,22,79,.3)}
.q-rail-light .q-cert{border-left-color:rgba(0,22,79,.16)}
.q-rail-light .q-cert b{color:var(--ink-heading)}
.q-rail-light .q-scope{color:var(--muted)}
.q-rail-light .q-by{color:var(--muted)}
.q-rail-light .q-cert:hover::before{background:rgba(0,22,79,.55)}
.q-rail-light .q-cert-key::before,
.q-rail-light .q-cert-key:hover::before{background:var(--accent)}
.q-rail-light .q-cert-key .q-scope{color:var(--red-600)}
.q-rail-light .q-cert-key .q-by{color:var(--muted)}
.cs-cta{margin-top:clamp(2rem,4vw,3rem)}

/* ---------- §7 CLOSE — light and quiet ----------
   No forged gradient: Home owns hero + close as the forged pair, and repeating it here
   would turn this into a second homepage at the last moment. */
.capclose{background:var(--bg);border-top:1px solid var(--rule);
  padding-block:clamp(3.5rem,7vw,7rem)}
/* start-aligned, not end. Bottom-aligning made both columns finish together but opened a
   ~180px void above the headline, which read as a mistake rather than as air. */
.cc-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:clamp(1.75rem,3vw,2.5rem);align-items:start}
.capclose h2{max-width:15ch}
.capclose .hl{color:var(--navy-500)}
.cc-side{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.5rem,2.6vw,2rem);
  padding-bottom:4px}
.cc-side .lead{max-width:42ch}
/* padding + text-decoration, NOT border-bottom on a 44px flex box — that draws the rule
   at the box edge about 11px below the baseline and reads as a detached floating line
   (learned on Home v1.5, §11). */
.cc-alt{font-family:var(--font-mono);font-size:.78125rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:500;color:var(--ink);
  padding-block:12px;min-height:44px;display:inline-flex;align-items:center;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  text-decoration-color:rgba(0,22,79,.35);
  transition:text-decoration-color .25s var(--ease-out),color .25s var(--ease-out)}
.cc-alt:hover{color:var(--navy-900);text-decoration-color:var(--navy-900)}

/* ---------- MOTION — two orchestrated moments, both single-layer, transform-only ----------
   Held to the Home-measured constraint that ambient cost scales with the NUMBER of large
   animated layers. Both use the existing data-reveal to .pre to .in pipeline, so content
   is fully visible with JS off, under ?flat and under reduced-motion. */
/* 1. the spine draws itself: motion that animates the argument (the line is continuous) */
.st-spine.pre{opacity:1;transform:scaleY(0);transform-origin:top;
  transition:transform 1.15s var(--ease-out-expo)}
.st-spine.pre.in{transform:scaleY(1)}
/* 2. the span bars extend: one list, one property — staggering within a single list is
      legitimate; the tell is one identical entrance applied to every section */
.rg-fill.pre{opacity:1;transform:scaleX(0);transform-origin:left;
  transition:transform .85s var(--ease-out-expo);
  transition-delay:calc(var(--i,0)*110ms)}
.rg-fill.pre.in{transform:scaleX(1)}
.rg-val.pre{transform:translateY(-50%);opacity:0;
  transition:opacity .5s var(--ease-out);
  transition-delay:calc(var(--i,0)*110ms + 300ms)}
.rg-val.pre.in{opacity:1;transform:translateY(-50%)}

@media (prefers-reduced-motion:reduce){
  .st-spine.pre,.rg-fill.pre{transform:none;transition:none}
  .rg-val.pre{opacity:1;transform:translateY(-50%);transition:none}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  /* minmax(0,1fr), NOT a bare 1fr. A bare 1fr track takes its automatic minimum from
     min-content, and a replaced <img> contributes its INTRINSIC width there — so the
     §5 media column inflated to the photo's natural size and pushed the section past the
     viewport. The station grids were already guarded; these were not. */
  .ch-grid,.rg-head,.st-head,.cs-head,.cc-grid,.cp-grid,.pg-grid{grid-template-columns:minmax(0,1fr)}
  .ch-side,.cc-side{align-items:flex-start}
  .cap-hero h1{max-width:20ch}
  /* stations: the name rail collapses, the spine stays. Every station becomes
     name then copy then media in one column, still docked to the rule. */
  .stn,.stn-rev,.stn-wide{grid-template-columns:minmax(0,1fr)}
  .stn-name,.stn-copy,.stn-media,
  .stn-rev .stn-copy,.stn-rev .stn-media,
  .stn-wide .stn-copy,.stn-wide .stn-media{grid-column:1;grid-row:auto}
  .stn-copy{margin-top:clamp(.875rem,2vw,1.25rem)}
  .stn-media{margin-top:clamp(1.25rem,3vw,2rem)}
  .stn-wide .stn-media{margin-top:clamp(1.25rem,3vw,2rem)}
  /* portrait crops become unreasonably tall in one column — cap every station frame */
  .stn-media .frame{aspect-ratio:16/10!important}
  .stn-copy p,.stn-wide .stn-copy p{max-width:60ch}
  /* §5's stretch-to-the-list-height is a TWO-COLUMN idea. Once the grid collapses there is
     no list beside it to match, and height:100% against an indefinite parent let the frame
     size from the image instead of the column. Revert to a plain ratio here. */
  .pg-media{align-self:auto}
  .pg-media .frame{height:auto;min-height:0;width:100%;aspect-ratio:16/10}
}

@media (max-width:860px){
  .rg-row{grid-template-columns:minmax(0,1fr)}
  .rg-name{grid-row:auto}
  .rg-desc{grid-row:auto}
  .rg-bar{grid-column:1;grid-row:auto;margin-top:var(--s2)}
  .cp-grid{row-gap:clamp(2rem,5vw,3rem)}
  .ch-spec{gap:clamp(1.25rem,5vw,2.5rem) clamp(1.5rem,6vw,3rem)}
  /* light rail stacks — the inherited mobile rule recolours the divider for a dark
     field, so it has to be remapped here or it disappears on paper */
  .q-rail-light .q-cert+.q-cert{border-top:1px solid rgba(0,22,79,.16)}
}

@media (max-width:560px){
  .cap-hero{padding-top:calc(76px + 2.25rem)}
  .cap-hero h1{max-width:none}
  .ch-band .frame{aspect-ratio:16/10}
  .ch-spec{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s2)}
  .cp-sub{grid-template-columns:1fr;gap:var(--s3)}
  .stations{--spine-gap:20px}
  /* The value label sits at 78% of the track and then extends right. On a 331px content
     box that lands at ~362px and pushes the page into horizontal overflow. Below 560 the
     label moves ABOVE the bar, right-aligned, and the track reclaims the freed space
     (--scale .78 to .92) so the bar still reads as a measured extent. */
  .rg-bar{--scale:.92;min-height:32px}
  .rg-val,.rg-val.pre,.rg-val.pre.in{position:absolute;left:auto;right:0;
    top:auto;bottom:100%;margin-left:0;margin-bottom:7px;transform:none;font-size:.75rem}
}


/* ============================================================
   PAGE 3 — /what-we-make/  (whatwemake.html)
   Contract: ../DESIGN-whatwemake.md. Inherits DESIGN.md verbatim (Mode-B) and the
   internal-page grammar from DESIGN-capabilities.md. Zero new colour or type tokens,
   zero literal font names, zero border-radius.

   THE ONE STRUCTURAL IDEA: the ascent is drawn in area. Five families, a FIXED text
   column and a media block whose RIGHT EDGE ADVANCES until it leaves the viewport.
   ============================================================ */

/* ---------- §1 HERO — light, type-led (page-2 grammar, carried) ---------- */
.wm-hero{background:var(--bg);
  padding-top:calc(76px + clamp(2.75rem,6.5vw,6rem));padding-bottom:0}
.wm-hero h1{font-size:clamp(2.125rem,3.9vw,3.5rem);font-weight:600;
  letter-spacing:-.026em;line-height:1.08;max-width:21ch}
/* The trailing clause is its own span so the wrap is AUTHORED: "in production for
   global OEMs" breaks as a unit and can never orphan "OEMs" onto a line alone. */
.wm-hero h1 .hl{color:var(--navy-500);display:inline-block}
.wh-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,5rem);row-gap:clamp(1.75rem,3vw,2.5rem);align-items:end}
.wh-side{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(1.5rem,2.6vw,2.25rem);padding-bottom:6px}
.wh-side .lead{max-width:42ch}

/* Spec strip: ONE top hairline, no verticals — same reasoning as page 2's .ch-spec.
   A 4-cell ruled column row is the editorial-typographic fingerprint; §4 is this
   page's single licensed instance of that shape. */
.wh-spec{margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.1rem,2vw,1.5rem);
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4.5vw,4.5rem)}
.whs{display:grid;gap:7px;align-content:start}
.whs dt{color:var(--muted);font-size:.7rem;letter-spacing:.14em}
.whs dd{font-weight:600;font-size:clamp(1rem,1.35vw,1.1875rem);color:var(--ink-heading);
  letter-spacing:-.01em}

/* Right-bleeding band, from the container's left content edge. The calc resolves
   against the parent width (not 100vw) so a scrollbar can never cause overflow. */
.wh-band{margin-top:clamp(2.75rem,5.5vw,4.5rem);
  margin-left:calc((100% - min(100%,var(--container)))/2 + var(--gutter))}
.wh-band .frame{aspect-ratio:21/9}

/* ---------- §2 THE FIVE FAMILIES — uniform module, alternating side (v3) ----------
   v1 floated: rows were islands, type was vertically centred, one repeated structure.
   v2 fixed the structure but grew each image's width down the run. Sarthak: "why are
   these images of varying width? it looks poor." Correct — a varying module width reads
   as inconsistency, not as composition, however carefully the growth is measured. The
   ascent-drawn-in-area idea is retired; it was defensible on paper and did not survive
   the eye.

   ONE MODULE, ONE RHYTHM:
     · every media block is the SAME size, 7 of 12 columns by 480px. No exceptions.
     · rows stay CONTIGUOUS — one row's bottom hairline is the next one's top, and the
       hairlines span the full viewport while the module sits inside the container;
     · the type block stays BOTTOM-ANCHORED to its row's rule, so it shares an edge;
     · the SIDE alternates, and the media bleeds off whichever edge it sits against.
       A zig-zag at constant size reads as deliberate rhythm. The same zig-zag at
       varying size reads as a mistake. */
.families{background:var(--bg);padding-bottom:0}
.fam-head{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:var(--s3);align-items:end;
  margin-bottom:clamp(3rem,6vw,5rem)}
.fam-head h2{max-width:17ch}
.fam-head .hl{color:var(--navy-500)}

/* Full-width so the hairlines reach the viewport edges. No gap: one stacked structure. */
.fam-list{list-style:none;margin:0;padding:0;display:block}
.fam{position:relative;border-top:1px solid var(--rule)}
.fam:last-child{border-bottom:1px solid var(--rule)}

.fam-grid{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(1.5rem,2.5vw,2rem);
  align-items:end;min-height:480px}

/* Type sits ON the bottom rule. Never centred — that was v1's dead-air bug. */
.fam-txt{display:grid;gap:var(--s2);align-content:end;
  padding-block:clamp(2rem,3.5vw,2.75rem)}

/* The module: identical on every row, filling the row's full height so its top and
   bottom edges ARE the hairlines. ⚠ position:absolute, NOT height:100% — a percentage
   height resolves against an indefinite parent here and the frame would size itself from
   the image's INTRINSIC height instead of the row (a 480px row rendered at 1125px). */
.fam-media{align-self:stretch;position:relative}
.fam-media .frame{position:absolute;inset:0}
.fam-media .frame img{width:100%;height:100%;object-fit:cover}

/* ⚠ BOTH children are pinned to grid-row 1. On the mirrored rows the media's columns sit
   BEFORE the text's in the grid, and auto-placement never moves its cursor backwards — so
   the media was pushed onto a second implicit row and the mirrored rows collapsed to
   109px and 67px instead of 480. Source order cannot fix this without breaking the
   reading order for screen readers, so the row is declared explicitly. */
.fam-txt{grid-column:1 / 6;grid-row:1}
.fam-media{grid-column:6 / 13;grid-row:1;
  margin-right:calc(-1 * (var(--gutter) + (100vw - min(100vw,var(--container)))/2))}

/* EVEN rows — mirrored. The bleed follows the media to the left edge. */
.fam:nth-child(even) .fam-txt{grid-column:8 / 13}
.fam:nth-child(even) .fam-media{grid-column:1 / 8;
  margin-right:0;
  margin-left:calc(-1 * (var(--gutter) + (100vw - min(100vw,var(--container)))/2))}

/* One name size across the run: with the module fixed, hierarchy inside §2 comes from
   the rhythm, not from five different type sizes. */
.fam-txt h3{color:var(--ink-heading);font-weight:600;letter-spacing:-.022em;
  line-height:1.14;text-wrap:balance;font-size:clamp(1.375rem,2.1vw,1.75rem)}
.fam-txt p{color:var(--muted);font-size:1rem;line-height:1.6;max-width:44ch}
.fam-for{font-size:.9375rem;color:var(--muted)}
.fam-for b{color:var(--ink-heading);font-weight:600}

/* Motion: the rows rise as they enter. Staggering within ONE list is legitimate. Uses the
   existing data-reveal → .pre → .in pipeline, so content is fully visible with JS off,
   under ?flat and under reduced-motion. */
.fam.pre{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out-expo)}
.fam.pre.in{opacity:1;transform:none}

/* ---------- §3 THE ONE DARK ANCHOR — photo-led ---------- */
.wm-anchor{position:relative;isolation:isolate;background:var(--bg-anchor);
  padding-block:clamp(5rem,10vw,9rem);overflow:hidden}
.wm-anchor-media{position:absolute;inset:0;z-index:0}
.wm-anchor-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Scrim. ⚠ COMPUTED, NOT EYEBALLED. Text over photography cannot be contrast-checked
   from the DOM, so the ceiling was derived first and then verified against real pixels.
   The binding constraint is NOT the white headline (which tolerates a backdrop up to
   rgb(149) at 3:1) but the steel-400 mono labels, which need 4.5:1 and therefore a
   backdrop no lighter than rgb(54).

   The first attempt was a flat-heavy scrim that satisfied that everywhere and killed
   the photograph outright — the anchor rendered as a plain near-black panel, which
   fails the contract's own requirement that this anchor be PHOTO-led (that is the
   whole difference from page 2's type-led anchor). So the scrim is now a ramp keyed to
   where the type actually stops: type ends at x≈59% of the container, so the ramp holds
   ≥.88 alpha out to 58% (composite ≤rgb(35) even against the white canopy) and then
   opens hard, reaching .34 at the right edge where the genset is and no type ever goes. */
.wm-anchor-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(10,11,13,.94) 0%,rgba(10,11,13,.93) 40%,rgba(10,11,13,.87) 58%,
      rgba(10,11,13,.55) 74%,rgba(10,11,13,.2) 100%),
    linear-gradient(0deg,rgba(10,11,13,.55) 0%,rgba(10,11,13,0) 42%)}
/* Verified by compositing the real JPEG against these exact stops (object-fit:cover into
   1600x804) rather than by eye — the headless capture kept substituting the lazy-image
   fallback, which would have made any visual read of this section worthless.
   Worst backdrop anywhere under type: rgb(44). White 13.8:1 · navy-300 6.2:1 ·
   muted-on-dark 8.0:1 · steel-400 mono 5.2:1 (the binding one, needs 4.5) ·
   ink-on-dark 12.0:1. Photograph reads +25 mean luminance on the right third. */
.wm-anchor .grain{z-index:2}
.wm-anchor-inner{position:relative;z-index:3}
.wm-anchor h2{color:#fff;max-width:20ch;font-size:clamp(1.875rem,3.6vw,2.75rem);
  font-weight:600;letter-spacing:-.022em;line-height:1.1}
.wm-anchor h2 .hl{color:var(--navy-300)}
.wm-anchor .lead{color:var(--muted-on-dark);max-width:52ch;
  margin-top:clamp(1rem,1.8vw,1.5rem);line-height:1.66}

/* Dominant figure + subordinate pair. NOT a 3-up ruled row: that is the hero-metric
   template (absolute ban) and it is also page 2's §4 shape. */
.wa-figs{margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:var(--s4);align-items:end}
.wa-lead-fig{display:grid;gap:10px}
.wa-lead-fig b{font-size:clamp(3.25rem,8vw,6rem);font-weight:700;color:#fff;
  letter-spacing:-.04em;line-height:.9}
.wa-lead-fig .mono{color:var(--steel-400);font-size:.72rem}
.wa-sub{display:flex;flex-wrap:wrap;gap:clamp(1.75rem,4vw,3.25rem);
  padding-bottom:10px}
.wa-sub div{display:grid;gap:8px}
.wa-sub b{font-size:clamp(1.25rem,2vw,1.625rem);font-weight:600;
  color:var(--ink-on-dark);letter-spacing:-.015em;line-height:1}
.wa-sub .mono{color:var(--steel-400);font-size:.68rem}
.wa-cta{margin-top:clamp(2.5rem,5vw,3.5rem)}

/* Motion 2: the dominant figure settles. One element, one property. */
.wa-lead-fig.pre{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out-expo)}
.wa-lead-fig.pre.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .fam.pre,.wa-lead-fig.pre{opacity:1;transform:none;transition:none}
}

/* ---------- §4 DEPTH — the page's ONE licensed ruled row ---------- */
.depth{background:var(--bg)}
.dp-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:var(--s3);align-items:end}
.dp-head h2{max-width:20ch}
.dp-head .hl{color:var(--navy-500)}
.dp-rows{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--rule)}
.dp-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,.55fr) minmax(0,1.55fr);
  column-gap:clamp(1.5rem,4vw,3.5rem);row-gap:var(--s2);
  align-items:baseline;padding-block:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--rule)}
.dp-row h3{font-size:clamp(1.125rem,1.7vw,1.375rem);font-weight:600;
  color:var(--ink-heading);letter-spacing:-.015em;line-height:1.2}
.dp-count{color:var(--muted);font-size:.72rem;letter-spacing:.12em}
.dp-items{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 10px}
.dp-items li{font-size:.9375rem;color:var(--ink);line-height:1.4}
/* JCB and Cummins are counted in FAMILIES; each item is a discrete family, so each
   gets its own keyed cell. */
.dp-row:not(.dp-row-parts) .dp-items li{padding:6px 12px 6px 22px;position:relative;
  background:var(--steel-100);border:1px solid var(--rule)}
.dp-row:not(.dp-row-parts) .dp-items li::before{content:"";position:absolute;
  left:10px;top:50%;width:5px;height:1px;background:var(--navy-500)}
/* Hitachi is counted in PARTS, not families — styled to SHOW that difference rather
   than flatten a real distinction into a template. A run of names, not keyed cells. */
.dp-row-parts .dp-items{gap:0}
.dp-row-parts .dp-items li{color:var(--muted)}
.dp-row-parts .dp-items li:not(:last-child)::after{content:"·";
  color:var(--steel-400);padding:0 10px}

/* ---------- §5 CLOSE — light and quiet, no forged gradient ---------- */
.wmclose{background:var(--bg);padding-block:clamp(4rem,8vw,7rem) clamp(4rem,8vw,8rem)}
.wc-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(2rem,5vw,5rem);row-gap:clamp(2rem,4vw,3rem);align-items:start}
.wc-copy h2{font-size:clamp(1.75rem,3.4vw,2.625rem);font-weight:600;
  letter-spacing:-.022em;line-height:1.1;max-width:18ch}
.wc-copy .hl{color:var(--navy-500)}
.wc-copy .lead{margin-top:clamp(1rem,1.8vw,1.5rem);max-width:48ch}
.wc-media .frame{aspect-ratio:16/9}

/* ---------- Page 3 responsive ---------- */
@media (max-width:1080px){
  /* The module narrows with the grid; the alternating rhythm survives.
     ⚠ 520, not 420. The text column narrows faster than the row does in this band, so
     family 3's seven chips wrap to more lines: measured 462px of type against a 420px
     row at 920px wide, which pushed that ONE row taller than the other four and
     reintroduced the exact inconsistency this rebuild exists to remove. The row height
     has to clear the TALLEST type block at the NARROWEST width in the band, not the
     average one. */
  .fam-grid{min-height:520px}
}

@media (max-width:900px){
  .wh-grid,.fam-head,.dp-head,.wc-grid{grid-template-columns:minmax(0,1fr)}
  .wh-grid,.fam-head,.dp-head{align-items:start}
  .wm-hero h1,.fam-head h2,.dp-head h2,.wc-copy h2{max-width:24ch}

  /* THE ROW BECOMES A STACK. The alternating side is meaningless at this width, so every
     row runs image-then-type — but the contiguous hairlines survive, so the stack still
     reads as one structure rather than five floating blocks. The media bleeds to BOTH
     edges here, which is the mobile equivalent of the desktop side-bleed.
     minmax(0,1fr) — never a bare 1fr — because these tracks hold images. */
  .fam-grid{grid-template-columns:minmax(0,1fr);row-gap:0;min-height:0;align-items:start}
  .fam-txt,.fam-media,
  .fam:nth-child(even) .fam-txt,.fam:nth-child(even) .fam-media{grid-column:1 / -1;grid-row:auto}
  .fam-txt{padding-block:clamp(1.5rem,5vw,2rem)}
  .fam-media,.fam:nth-child(even) .fam-media{order:-1;position:static;
    margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .fam-media .frame{position:relative;inset:auto;height:260px}
  .fam-txt p{max-width:none}

  .dp-row{grid-template-columns:minmax(0,1fr);row-gap:var(--s2);align-items:start}
  .wa-figs{grid-template-columns:minmax(0,1fr);align-items:start}
  .wa-sub{padding-bottom:0}
  .wm-anchor-scrim{background:
    linear-gradient(180deg,rgba(10,11,13,.9) 0%,rgba(10,11,13,.86) 55%,rgba(10,11,13,.92) 100%)}
}

@media (max-width:560px){
  .wh-band .frame{aspect-ratio:16/10}
  .wh-band{margin-left:var(--gutter)}
  .wh-spec{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s2)}
  .wmclose .sec-cta .btn{width:100%;justify-content:center}
  .fam-media .frame{height:225px}
}


/* ============================================================================
   PAGE 4 - v4 · /quality/ — THE CREDENTIAL AS A DESIGNED OBJECT
   Rebuilt from scratch 2026-07-29. v1/v2/v3 CSS was deleted, not overridden.

   THE DATA PLATE is the page's recurring object: a precision-ruled block carrying a
   credential's real structure (designation / role / data rows / benefit). It is the
   nameplate riveted to a machine, which is literally this client's product, and it is
   neither Home's engineering drawing sheet nor Capabilities' measured span bars.

   ⚠ THE RULE v1-v3 BROKE, now load-bearing:
   RANK IS ENCODED BY TREATMENT, NEVER BY TYPE SIZE. No body-level noun may be set
   larger than the section's own heading. "Safety" at 120px against a 40px H2 read as a
   word shouting, not as a diagram, and it dismantled the site's type hierarchy.

   Everything is scoped under .qp so nothing can leak onto the three built pages.
   ============================================================================ */

/* ---------------- shared ---------------- */
.qp .nw{white-space:nowrap}
.qp .section{padding-block:clamp(3.5rem,6.5vw,6rem)}
.qp .sec-cta{margin-top:clamp(1.5rem,2.6vw,2.15rem)}
.qp .q-head{margin-bottom:clamp(2.25rem,4.5vw,3.25rem)}
.qp .q-head h2{max-width:39ch;font-size:clamp(1.65rem,3vw,2.5rem);font-weight:600;
  letter-spacing:-.022em;line-height:1.12;color:var(--ink-heading);text-wrap:balance}
.qp .q-head .lead{margin-top:clamp(.85rem,1.5vw,1.15rem);max-width:60ch}

.qp .q-link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:11px 2px;
  font-size:.9375rem;font-weight:600;color:var(--navy-700);
  border-bottom:1px solid rgba(0,22,79,.28);
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}
.qp .q-link:hover{color:var(--navy-900);border-bottom-color:var(--navy-900)}
.qp .q-link .arrow{display:inline-block;transition:transform .25s var(--ease-out)}
.qp .q-link:hover .arrow{transform:translateX(4px)}
.qp .q-link-dark{color:#fff;border-bottom-color:rgba(255,255,255,.42)}
.qp .q-link-dark:hover{color:#fff;border-bottom-color:#fff}

/* ---------------- §1 HERO ---------------- */
.qp .q-hero{background:var(--bg);
  padding-top:calc(76px + clamp(2.75rem,6.5vw,6rem));padding-bottom:0}
.qp .q-hero h1{font-size:clamp(2.125rem,3.9vw,3.5rem);font-weight:600;
  letter-spacing:-.026em;line-height:1.08;max-width:22ch;color:var(--ink-heading);
  text-wrap:balance}
.qp .qh-lead{margin-top:clamp(1rem,1.9vw,1.45rem);max-width:44ch}
.qp .qh-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,5rem);row-gap:clamp(2rem,4vw,3rem);align-items:end}
/* The standards get real presence: this is the string an SQE scans for. */
.qp .qh-rail{list-style:none;display:grid;gap:0;border-top:1px solid var(--rule)}
.qp .qh-rail li{padding-block:clamp(.6rem,1.1vw,.85rem);
  border-bottom:1px solid var(--rule);
  font-size:clamp(.95rem,1.35vw,1.1875rem);font-weight:600;letter-spacing:-.012em;
  color:var(--ink-heading)}
.qp .qh-rail li span{font-family:var(--font-mono);font-size:.72em;font-weight:400;
  letter-spacing:.04em;color:var(--muted);margin-left:.4em}
.qp .qh-band{margin-top:clamp(2.75rem,5.5vw,4.5rem);
  margin-left:calc((100% - min(100%,var(--container)))/2 + var(--gutter))}
.qp .qh-band .frame{aspect-ratio:21/9}

/* ---------------- THE DATA PLATE ---------------- */
.qp .plate{border:1px solid var(--rule);background:var(--surface);
  display:flex;flex-direction:column}
.qp .plate-h{padding:clamp(1.1rem,2vw,1.5rem) clamp(1.15rem,2.2vw,1.75rem);
  border-bottom:1px solid var(--rule);background:var(--steel-100)}
/* GRAVITAS: the designation is the largest thing in its own plate, and it stays
   comfortably under the section heading above it. */
.qp .plate-no{display:block;font-size:clamp(1.15rem,2vw,1.6rem);font-weight:700;
  letter-spacing:-.022em;line-height:1.05;color:var(--ink-heading)}
.qp .plate-no i{font-style:normal;font-weight:500;color:var(--navy-600)}
.qp .plate-role{display:block;margin-top:.45rem;font-size:.625rem;letter-spacing:.16em;
  color:var(--muted)}
.qp .plate-d{padding:clamp(1rem,1.9vw,1.4rem) clamp(1.15rem,2.2vw,1.75rem) 0;flex:1}
.qp .plate-d > div{padding-block:clamp(.6rem,1.1vw,.8rem)}
.qp .plate-d > div + div{border-top:1px solid var(--rule)}
.qp .plate-d dt{font-size:.5625rem;letter-spacing:.18em;color:var(--muted)}
.qp .plate-d dd{margin-top:.3rem;font-size:.9375rem;line-height:1.45;color:var(--ink)}
.qp .plate-d dd b{font-weight:700;color:var(--ink-heading)}
.qp .plate-b{margin:clamp(1rem,1.9vw,1.4rem) clamp(1.15rem,2.2vw,1.75rem) clamp(1.15rem,2.2vw,1.75rem);
  padding-top:clamp(.85rem,1.5vw,1.1rem);border-top:1px solid var(--rule);
  font-size:.875rem;line-height:1.5;color:var(--navy-700);font-weight:500}

/* dark plate (the lead certificate) */
.qp .plate-dark{border-color:var(--navy-900);background:var(--navy-900)}
.qp .plate-dark .plate-h{background:rgba(255,255,255,.06);border-bottom-color:var(--rule-on-dark)}
.qp .plate-dark .plate-no{color:#fff}
.qp .plate-dark .plate-no i{color:var(--navy-300)}
.qp .plate-dark .plate-role{color:var(--navy-300)}
.qp .plate-dark .plate-d > div + div,
.qp .plate-dark .plate-b{border-color:var(--rule-on-dark)}
.qp .plate-dark .plate-d dt{color:var(--steel-400)}
.qp .plate-dark .plate-d dd{color:#fff}
.qp .plate-dark .plate-b{color:var(--steel-300)}

/* §2 layout: one dominant plate + three supporting. Not an identical card grid —
   the lead plate is a different object (navy field, taller, three-noun scope). */
.qp .plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.5rem)}
.qp .plate-lead{grid-column:span 3}
.qp .plate-lead .plate-h{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.5rem 1.5rem}
/* ⚠ Capped at 2.25rem so the designation can never exceed the section H2 above it
   (2.5rem). At 2.6rem it measured 41.6px against a 40px heading — the exact rule this
   rebuild exists to enforce, broken by 1.6px. Verified by an automated sweep, not by eye. */
.qp .plate-lead .plate-no{font-size:clamp(1.6rem,2.9vw,2.25rem)}
.qp .plate-lead .plate-role{margin-top:0}
.qp .plate-lead .plate-d{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr)}
.qp .plate-lead .plate-d > div{padding-inline:0 clamp(1rem,2vw,2rem)}
.qp .plate-lead .plate-d > div + div{border-top:0;border-left:1px solid var(--rule-on-dark);
  padding-inline:clamp(1rem,2vw,2rem) 0}
.qp .plate-scope{display:flex;flex-wrap:wrap;gap:.2rem 1.5rem}
.qp .plate-scope span{font-size:clamp(1.05rem,1.9vw,1.375rem);font-weight:600;
  letter-spacing:-.018em;color:#fff}
.qp .plate-lead .plate-b{max-width:60ch}

/* ---------------- §3 WELDING — dark ---------------- */
.qp .q-weld{background:var(--bg-anchor);color:var(--ink-on-dark)}
.qp .qw-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:stretch}
.qp .qw-media{position:relative;min-height:520px}
.qp .qw-media .frame{position:absolute;inset:0;background:var(--steel-950)}
.qp .qw-body{display:flex;align-items:center;
  padding:clamp(3rem,6vw,6rem) var(--gutter) clamp(3rem,6vw,6rem) clamp(2rem,5vw,5rem)}
.qp .qw-in{max-width:min(560px,100%);
  margin-right:max(0px,calc((100vw - min(100vw,var(--container)))/2))}
.qp .qw-body h2{font-size:clamp(1.65rem,3vw,2.5rem);font-weight:600;color:#fff;
  letter-spacing:-.022em;line-height:1.12;text-wrap:balance;max-width:20ch}
.qp .qw-lead{margin-top:clamp(.85rem,1.5vw,1.15rem);color:var(--muted-on-dark);
  font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.6;max-width:40ch}
/* the apex credential, on the dark field: outline plate so the designation carries it */
.qp .plate-apex{margin-top:clamp(1.75rem,3vw,2.5rem);
  border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.qp .plate-apex .plate-h{background:rgba(255,255,255,.06);border-bottom-color:rgba(255,255,255,.2)}
.qp .plate-apex .plate-no{color:#fff;font-size:clamp(1.3rem,2.4vw,1.9rem)}
.qp .plate-apex .plate-no i{color:var(--navy-300)}
.qp .plate-apex .plate-role{color:var(--navy-300)}
.qp .plate-apex .plate-d{padding-bottom:clamp(.5rem,1vw,.75rem)}
.qp .plate-apex .plate-d > div + div{border-top-color:rgba(255,255,255,.16)}
.qp .plate-apex .plate-d dt{color:var(--steel-400)}
.qp .plate-apex .plate-d dd{color:#fff}
.qp .plate-apex .plate-d dd b{color:#fff}

/* ---------------- §4 PRIORITY ORDER — light, equal type size ---------------- */
.qp .qp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  column-gap:clamp(2.5rem,5vw,5rem);row-gap:clamp(2.25rem,4vw,3rem);align-items:center}
.qp .qp-head h2{font-size:clamp(1.65rem,3vw,2.5rem);font-weight:600;
  letter-spacing:-.022em;line-height:1.12;color:var(--ink-heading);text-wrap:balance;max-width:19ch}
.qp .qp-head .lead{margin-top:clamp(.85rem,1.5vw,1.15rem);max-width:40ch}
/* ⚠ EVERY BAND IS THE SAME TYPE SIZE. Rank is state, not scale. */
/* fixed: filled. Non-negotiable, and it looks it. */
/* flexible: outline. These are what move when a schedule moves. */
/* the threshold the headline claims, drawn between Quality and Delivery */

/* ---------------- §5 THE SYSTEM ---------------- */
.qp .qy-outside{max-width:56ch;border-top:1px solid var(--rule);
  padding-top:clamp(1rem,2vw,1.4rem);padding-left:clamp(1.9rem,3.4vw,3rem)}
.qp .qy-stage-out{padding-bottom:clamp(.9rem,1.8vw,1.25rem)}
.qp .qy-drop{display:block;width:1px;height:clamp(30px,4.5vw,48px);
  background:linear-gradient(var(--rule),rgba(0,22,79,.32))}
.qp .qy-encl{position:relative;border:1px solid var(--rule)}
.qp .qy-label{position:absolute;top:0;left:clamp(1.25rem,3vw,2.25rem);
  transform:translateY(-50%);background:var(--bg);padding-inline:.7em;
  font-size:.625rem;letter-spacing:.16em;color:var(--muted);white-space:nowrap}
.qp .qy-inner{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:stretch}
.qp .qy-stages{padding:clamp(1.9rem,3.4vw,3rem);display:grid;align-content:center}
.qp .qy-stage h3{font-size:clamp(1.05rem,1.75vw,1.25rem);font-weight:600;
  letter-spacing:-.016em;color:var(--ink-heading)}
.qp .qy-stage p{margin-top:.35rem;font-size:.9375rem;line-height:1.55;
  color:var(--muted);max-width:44ch}
.qp .qy-stages .qy-stage{padding-block:clamp(1rem,1.9vw,1.4rem)}
.qp .qy-stages .qy-stage + .qy-stage{border-top:1px solid var(--rule)}
.qp .qy-media{position:relative;min-height:360px}
.qp .qy-media .frame{position:absolute;inset:0}

/* ---------------- §6 CLOSE — dark, full-height image panel ---------------- */
/* ⚠ §6 was built DARK in the first v4 pass and flipped back to light here. A dark
   close sits directly above the site's dark footer, and the two merged into one
   unbroken dark run that swallowed the close entirely. The WordPress shape Sarthak
   named is fixed by the FULL-HEIGHT image panel, not by darkness — so the page keeps
   exactly one dark section (§3, moved there from §4 as authorised). */
.qp .q-close{background:var(--bg)}
.qp .qc-split{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  align-items:stretch}
.qp .qc-body{display:flex;align-items:center;
  padding:clamp(3.25rem,6.5vw,6.5rem) clamp(2rem,5vw,5rem) clamp(3.25rem,6.5vw,6.5rem) var(--gutter)}
.qp .qc-in{max-width:min(600px,100%);
  margin-left:max(0px,calc((100vw - min(100vw,var(--container)))/2))}
.qp .qc-body h2{font-size:clamp(1.7rem,3.1vw,2.625rem);font-weight:600;color:var(--ink-heading);
  letter-spacing:-.024em;line-height:1.12;text-wrap:balance;max-width:16ch}
.qp .qc-lead{margin-top:clamp(.85rem,1.5vw,1.15rem);color:var(--muted);
  font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.6;max-width:46ch}
.qp .qc-marks{list-style:none;margin-top:clamp(2rem,3.5vw,2.75rem);
  padding-top:clamp(1rem,1.8vw,1.35rem);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.5rem clamp(1.25rem,2.6vw,2.25rem)}
.qp .qc-marks li{font-size:clamp(.8125rem,1.05vw,.9375rem);font-weight:600;
  letter-spacing:-.01em;color:var(--ink-heading)}
.qp .qc-marks li span{font-family:var(--font-mono);font-size:.76em;font-weight:400;
  letter-spacing:.04em;color:var(--muted);margin-left:.35em}
.qp .qc-media{position:relative;min-height:480px}
.qp .qc-media .frame{position:absolute;inset:0;background:var(--steel-950)}

/* ---------------- motion: stagger within one list, transform/opacity only ---------------- */
.qp .plate.pre{transition-delay:calc(var(--i,0)*90ms)}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .qp .plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qp .plate-lead{grid-column:span 2}
  .qp .qw-split,.qp .qc-split{grid-template-columns:minmax(0,1fr)}
  .qp .qw-media,.qp .qc-media{min-height:0}
  .qp .qw-media .frame,.qp .qc-media .frame{position:relative;inset:auto;aspect-ratio:16/9}
  .qp .qw-body,.qp .qc-body{padding-inline:var(--gutter)}
  .qp .qw-in,.qp .qc-in{max-width:none;margin:0}
  .qp .qy-inner{grid-template-columns:minmax(0,1fr)}
  .qp .qy-media{min-height:0;order:-1}
  .qp .qy-media .frame{position:relative;inset:auto;aspect-ratio:16/9}
  .qp .qp-grid{grid-template-columns:minmax(0,1fr)}
  .qp .qp-head h2,.qp .qp-head .lead{max-width:34ch}
}
@media (max-width:900px){
  .qp .qh-grid{grid-template-columns:minmax(0,1fr);align-items:start}
  .qp .plate-lead .plate-d{grid-template-columns:minmax(0,1fr)}
  .qp .plate-lead .plate-d > div + div{border-left:0;border-top:1px solid var(--rule-on-dark);
    padding-inline:0}
  .qp .plate-lead .plate-d > div{padding-inline:0}
}
@media (max-width:680px){
  .qp .plates{grid-template-columns:minmax(0,1fr)}
  .qp .plate-lead{grid-column:span 1}
  .qp .qh-band{margin-left:var(--gutter)}
  .qp .qh-band .frame{aspect-ratio:16/10}
  .qp .qy-label{font-size:.5625rem;left:1rem}
  .qp .qy-stages{padding:clamp(1.4rem,5vw,1.9rem)}
  .qp .qy-media .frame,.qp .qw-media .frame,.qp .qc-media .frame{aspect-ratio:3/2}
  .qp .q-close .sec-cta .btn{width:100%;justify-content:center}
}

/* ============================================================================
   PAGE 5 · /industries/ — v2 · THE DOSSIER
   Every rule scoped under .ip. Inherits DESIGN.md verbatim (Mode-B).

   v1 was rejected for repeating the same roster across two sections and for never
   saying what an industry DEMANDS. v2 splits the labour: §2 owns names + countries,
   the four chapters own industries + demands, and no mark appears twice.

   Four industries, each its OWN <section> with its OWN <h2> — "pre-eminent" made
   literal, and a sub-heading can never outrank its parent. Each chapter is composed
   to its own argument; all four share the same three type ranks in the same order
   (industry name / claim / lead) and the same full-viewport hairline top edge.
   Composition varies. Grammar never does.

   ⚠ HIERARCHY, held by construction rather than by luck: the H2 ceiling is 2.75rem
   (44px, cap ~32px). Every subordinate rank is capped well beneath it — the claim at
   1.5rem, h3 at 1.5rem, run labels at 1.1875rem, and the marks at 30.4px stepping
   down with the heading's own clamp curve.
   ============================================================================ */

/* ---------------- the marks: PER-MARK OPTICAL heights ----------------
   ⚠ NOT a uniform height. A flat height makes Honeywell dominate and Force Motors
   vanish — the finding behind Home's marquee tuning, whose ratios are carried here.
   ⚠ Full opacity, unlike the marquee's .74: Home shipped a 2.67:1 AA failure at low
   opacity. Silhouetting was tested on Home and rejected (it kills JCB/Cummins/MTU). */
.ip .icb-m{width:auto;display:block;filter:grayscale(1) contrast(1.07)}
.ip .ix-jcb      {height:calc(38px * var(--mk,.8))}
.ip .ix-cummins  {height:calc(34px * var(--mk,.8))}
.ip .ix-hitachi  {height:calc(22px * var(--mk,.8))}
.ip .ix-wirtgen  {height:calc(22px * var(--mk,.8))}
.ip .ix-mahindra {height:calc(26px * var(--mk,.8))}
.ip .ix-mtu      {height:calc(28px * var(--mk,.8))}
.ip .ix-honeywell{height:calc(20px * var(--mk,.8))}
.ip .ix-force    {height:calc(34px * var(--mk,.8))}

/* ---------------- shared type ranks ---------------- */
.ip .i-head h2{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:700;
  letter-spacing:-.022em;line-height:1.1;color:var(--ink-heading);
  max-width:26ch;text-wrap:balance}
.ip .i-head .lead{margin-top:clamp(.85rem,1.6vw,1.15rem);max-width:52ch}
.ip .i-link{color:var(--link);font-weight:500;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid rgba(44,108,198,.4);
  transition:border-color .25s var(--ease-out),color .25s var(--ease-out)}
.ip .i-link:hover{color:var(--ink-heading);border-bottom-color:var(--ink-heading)}

/* ---------------- §1 HERO — single left column, right-bleeding band ---------------- */
.ip .i-hero{background:var(--bg);
  padding-top:calc(76px + clamp(2.75rem,6.5vw,6rem));padding-bottom:0}
.ip .i-hero h1{font-size:clamp(2.125rem,3.9vw,3.5rem);font-weight:600;
  letter-spacing:-.026em;line-height:1.08;max-width:20ch;color:var(--ink-heading);
  text-wrap:balance}
.ip .ih-lead{margin-top:clamp(1rem,1.9vw,1.45rem);max-width:44ch}
.ip .ih-band{margin-top:clamp(2.75rem,5.5vw,4.5rem);
  margin-left:calc((100% - min(100%,var(--container)))/2 + var(--gutter))}
.ip .ih-band .frame{aspect-ratio:21/9}

/* ---------------- §2 THE CUSTOMERS — names + COUNTRIES, no industry labels ----------
   The band's hairlines span the FULL viewport so nothing in it floats. The country
   caption turns the marks into a labelled SET — a register, not a logo wall. */
.ip .i-cust{background:var(--bg);padding-bottom:0}
.ip .icb{--mk:.80;margin-top:clamp(2.25rem,4.5vw,3.5rem);
  background:var(--surface);border-block:1px solid var(--rule);
  padding-block:clamp(1.9rem,3.4vw,2.75rem)}
.ip .icb-marks{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.6rem,3vw,2.4rem) clamp(1.25rem,2.5vw,2rem)}
.ip .icb-marks > li{display:flex;flex-direction:column;align-items:flex-start;
  gap:.6rem;min-height:calc(34px * var(--mk,.8))}
.ip .icb-geo{font-size:.75rem;line-height:1;color:var(--muted)}

/* ============ THE FOUR CHAPTERS — shared grammar ============ */
.ip .ich{background:var(--bg);border-top:1px solid var(--rule)}
.ip .ich-head h2{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:700;
  letter-spacing:-.024em;line-height:1.08;color:var(--ink-heading);
  text-wrap:balance}
/* the claim: prominent, and deliberately well under the H2 it sits below */
.ip .ich-claim{margin-top:clamp(.6rem,1.1vw,.85rem);
  font-size:clamp(1.125rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.014em;
  line-height:1.25;color:var(--ink);max-width:44ch;text-wrap:balance}
.ip .ich-lead{margin-top:clamp(.85rem,1.5vw,1.15rem);
  font-size:1.0625rem;line-height:1.62;color:var(--muted);max-width:58ch;
  text-wrap:pretty}
.ip .ich-who{margin-top:clamp(1.1rem,2vw,1.5rem);
  font-size:.9375rem;line-height:1.6;color:var(--muted);max-width:58ch}
.ip .ich-who b{font-weight:600;color:var(--ink-heading)}

/* ---- CHAPTER 1 · POWER GENERATION — one machine, four assemblies ----
   ⚠ .ich-run is the page's ONE licensed ruled multi-column row. Rule-separated
   columns with small metadata is a fingerprint this site bans elsewhere. Spent here. */
.ip .ich-run{list-style:none;margin:clamp(2rem,3.8vw,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--rule)}
.ip .ich-run > li{padding:clamp(1rem,1.8vw,1.35rem) clamp(1rem,1.8vw,1.5rem)
  clamp(1rem,1.8vw,1.35rem) 0;
  display:flex;flex-direction:column;gap:.4rem}
.ip .ich-run > li + li{border-left:1px solid var(--rule);
  padding-left:clamp(1rem,1.8vw,1.5rem)}
.ip .ich-run b{font-size:clamp(1rem,1.4vw,1.1875rem);font-weight:600;
  letter-spacing:-.012em;line-height:1.2;color:var(--ink-heading)}
.ip .ich-run span{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.05em;
  line-height:1.3;color:var(--muted)}
.ip .ich-band{margin-top:clamp(2.5rem,5vw,4rem);
  margin-left:calc((100% - min(100%,var(--container)))/2 + var(--gutter))}
.ip .ich-band .frame{aspect-ratio:21/9}
.ip .ich-pg{padding-bottom:0}

/* ---- CHAPTER 2 · CONSTRUCTION EQUIPMENT — two OEMs, two countries ----
   A genuine two-column split, then a shallow full-bleed export band. */
.ip .ich-ce{padding-bottom:0}
.ip .ich-pair{margin-top:clamp(2rem,3.8vw,3rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.75rem,4vw,4.5rem);row-gap:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid var(--rule);padding-top:clamp(1.5rem,2.6vw,2rem)}
.ip .ich-oem h3{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:700;
  letter-spacing:-.018em;line-height:1.15;color:var(--ink-heading)}
.ip .ich-oem-geo{margin-top:.4rem;font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ip .ich-oem-parts{margin-top:clamp(.7rem,1.2vw,.95rem);
  font-size:1.0625rem;line-height:1.55;color:var(--ink);max-width:34ch}
.ip .ich-wide{margin-top:clamp(2.5rem,5vw,4rem)}
.ip .ich-wide .frame{aspect-ratio:3/1}

/* ---- CHAPTER 3 · COMPRESSED AIR — one relationship, deep. THE ONE DARK SECTION ----
   ⚠ Type sits BESIDE the photograph on the midnight field, never over it, so there is
   no contrast-over-photography risk to measure. That fault cost page 3 four captures. */
.ip .ich-air{background:var(--bg-anchor);color:var(--ink-on-dark);border-top:0}
.ip .icha-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:stretch}
.ip .icha-copy{display:flex;align-items:center;
  padding-block:clamp(3.25rem,7vw,6.5rem);
  padding-left:calc((100vw - min(100vw,var(--container)))/2 + var(--gutter));
  padding-right:clamp(1.75rem,4vw,4rem)}
.ip .icha-copy-in{width:100%;max-width:34rem}
.ip .ich-head-dark h2{color:#fff}
.ip .ich-head-dark .ich-claim{color:#fff}
.ip .ich-head-dark .ich-lead{color:var(--muted-on-dark)}
.ip .ich-air .ich-who{color:var(--muted-on-dark)}
.ip .ich-air .ich-who b{color:#fff}
/* the four load-path parts as a ROW-stack with hairlines — rows, not the ruled
   multi-column fingerprint, which chapter 1 has already spent */
.ip .icha-parts{list-style:none;margin:clamp(1.75rem,3.2vw,2.5rem) 0 0;padding:0;
  border-top:1px solid rgba(255,255,255,.15);max-width:24rem}
.ip .icha-parts > li{padding-block:clamp(.7rem,1.3vw,.95rem);
  border-bottom:1px solid rgba(255,255,255,.15);
  font-size:clamp(1rem,1.4vw,1.1875rem);font-weight:600;letter-spacing:-.01em;
  color:#fff}
.ip .icha-media{position:relative;overflow:hidden;background:var(--steel-950);
  min-height:clamp(400px,46vw,620px)}
.ip .icha-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:54% 50%;
  filter:saturate(.9) contrast(1.05) brightness(.9)}
/* navy-graded into the midnight field per DESIGN.md §6, so the panel reads as part of
   the dark section rather than as a bright hole punched in it */
.ip .icha-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,11,13,.6),rgba(0,22,79,.24) 40%,rgba(0,12,51,.2))}

/* ---- CHAPTER 4 · INDUSTRIAL & AUTOMOTIVE — three OEMs, broad ----
   ⚠ Deliberately COMPACT and type-only, closing the run. NOT padded: no product, chip
   or symmetry photograph is invented for Honeywell or Force Motors. A short final
   chapter is normal in a document; a short card in a grid is a hole. */
.ip .ich-ia{padding-block:clamp(2.75rem,5vw,4.25rem)}
.ip .ichi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  column-gap:clamp(1.75rem,4.5vw,5rem);row-gap:clamp(1.25rem,2.4vw,1.75rem);
  align-items:start}
.ip .ichi-body .ich-lead{margin-top:0}

/* ---------------- §7 CLOSE — light, full-height panel on the LEFT ----------------
   ⚠ Chapter 3's panel bleeds right, this one bleeds left: they alternate, which is
   the answer to "picture right, text left is boring". The close stays LIGHT because a
   dark close merges with the dark footer into one unbroken run. */
.ip .i-close{background:var(--bg);border-top:1px solid var(--rule)}
.ip .icl-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:stretch}
.ip .icl-media{position:relative;overflow:hidden;background:var(--steel-900);
  min-height:clamp(360px,42vw,560px)}
.ip .icl-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;
  filter:saturate(1.06) contrast(1.06) brightness(1.03)}
.ip .icl-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,22,79,.04),rgba(0,12,51,.09))}
.ip .icl-copy{display:flex;align-items:center;
  padding-block:clamp(3rem,6vw,5.5rem);
  padding-left:clamp(1.75rem,4.5vw,4.5rem);
  padding-right:calc((100vw - min(100vw,var(--container)))/2 + var(--gutter))}
.ip .icl-copy-in{max-width:36ch}
.ip .icl-copy h2{font-size:clamp(1.75rem,3.3vw,2.5rem);font-weight:700;
  letter-spacing:-.022em;line-height:1.12;color:var(--ink-heading);
  text-wrap:balance}
.ip .icl-copy .lead{margin-top:clamp(.85rem,1.6vw,1.15rem);max-width:38ch}

/* ---------------- motion: stagger within one list, transform/opacity only ---------- */
.ip .icb-marks > li.pre{transition-delay:calc(var(--i,0)*70ms)}
.ip .ich-run > li.pre{transition-delay:calc(var(--i,0)*80ms)}

/* ---------------- responsive ----------------
   ⚠ The marks are fixed px while the H2 is clamp()ed, so below ~1260px the heading
   shrinks past the mark and the "no mark taller than its heading's cap-height" rule
   breaks. v1's sweep reported EIGHT violations at 375. --mk steps down the same curve;
   each band is checked against cap = 0.73 x the heading's clamped size. */
@media (max-width:1260px){ .ip .icb{--mk:.70} }
@media (max-width:1080px){ .ip .icb{--mk:.60} }
@media (max-width:900px){  .ip .icb{--mk:.52} }

@media (max-width:1080px){
  .ip .icb-marks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ip .ich-run{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ip .ich-run > li{padding-inline:0 clamp(1rem,2vw,1.5rem)}
  .ip .ich-run > li + li{border-left:0;padding-left:0}
  .ip .ich-run > li:nth-child(even){padding-left:clamp(1rem,2vw,1.5rem);
    border-left:1px solid var(--rule)}
  .ip .ich-run > li:nth-child(n+3){border-top:1px solid var(--rule)}
  .ip .icha-grid{grid-template-columns:minmax(0,1fr)}
  .ip .icha-copy{padding-inline:var(--gutter)}
  .ip .icha-media{min-height:0;aspect-ratio:16/9;order:-1}
  .ip .icl-grid{grid-template-columns:minmax(0,1fr)}
  .ip .icl-media{min-height:0;aspect-ratio:16/10}
  .ip .icl-copy{padding-inline:var(--gutter)}
  .ip .ichi-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ip .icb-marks{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1.25rem}
  .ip .ich-run{grid-template-columns:minmax(0,1fr)}
  .ip .ich-run > li,.ip .ich-run > li:nth-child(even){padding-inline:0;border-left:0}
  .ip .ich-run > li + li{border-top:1px solid var(--rule)}
  .ip .i-hero h1,.ip .ich-head h2,.ip .icl-copy h2,.ip .ich-claim{max-width:none}
  .ip .ih-band,.ip .ich-band{margin-left:var(--gutter)}
  .ip .ih-band .frame,.ip .ich-band .frame{aspect-ratio:16/10}
  .ip .ich-wide .frame{aspect-ratio:2/1}
  .ip .ich-pair{grid-template-columns:minmax(0,1fr)}
  .ip .icha-parts{max-width:none}
  .ip .i-close .sec-cta{flex-direction:column;align-items:stretch}
  .ip .i-close .sec-cta .btn{width:100%;justify-content:center}
  .ip .i-close .sec-cta .i-link{justify-content:center;margin-top:.35rem}
}
@media (prefers-reduced-motion:reduce){
  .ip .icb-marks > li.pre,.ip .ich-run > li.pre{transition-delay:0s}
}

/* ============================================================================
   PAGE 6 · /about/ — THE COLONNADE: the person is the column
   Every rule scoped under .ab (a second class on <main>, beside .ip), so nothing
   here can reach the five approved pages. Inherits DESIGN.md verbatim (Mode-B).

   THE ONE STRUCTURAL IDEA. No page on this site has let a photograph carry
   structure — a photo always sits inside a frame the type built. In §3 the two
   directors ARE the columns: full-height 2:3 figures at the outer edges, cut to a
   MEASURED shared eye-line (0.186 of frame in both derivatives), touching the
   section's top and bottom hairlines, with the type hanging in the span between
   them. That is "accountability sits with the directors who own the business"
   rendered as geometry rather than asserted as a line.

   ⚠ AND THE COUNTER-MOVE IS THE IDEA: §2 has NO figure at all, because no
   photograph of the founder exists. no-figure -> two-figures-at-full-height, so
   the missing portrait becomes the beat that makes §3 land.

   ⚠ HIERARCHY, held by construction: H2 ceiling 2.75rem (44px, cap ~32px) ->
   §5's statement lead 1.875rem -> h3 (director names) 1.5rem -> register rows
   1.5rem -> lead 1.25rem -> mono 0.75rem. NO figure on this page is set large;
   there is no numbers band and there will not be one. That is the scar page 4 was
   rebuilt four times to fix.

   TONAL ARC: paper · paper · paper · MIDNIGHT(§4) · mist · paper · paper.
   Exactly ONE dark section, with THREE light sections between it and the dark
   footer — the widest separation on any page so far.
   RED BUDGET: exactly TWO fills, the hero CTA and the close CTA.
   ============================================================================ */

/* generic utility, new to the stylesheet; nothing existing uses it */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* scoped so page 5's .nw spans are untouched */
.ab .nw{white-space:nowrap}

/* ---------------- shared type ranks ----------------
   Every section carries heading / subhead / body in the same order and the same
   sizes. Composition varies; grammar never does. */
.ab h2{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:700;
  letter-spacing:-.024em;line-height:1.08;color:var(--ink-heading);
  max-width:22ch;text-wrap:balance}
.ab .lead{margin-top:clamp(.85rem,1.6vw,1.15rem);max-width:52ch}
.ab p+p{margin-top:clamp(.85rem,1.4vw,1.1rem)}

/* ---------------- §1 HERO — single left column, right-bleeding band ----------------
   Grammar carried verbatim from pages 2-5. ⚠ ab-hero-band-01 is a REAL photograph
   from the client's own shoot: the first time that slot has held one. */
.ab .ab-hero{background:var(--bg);
  padding-top:calc(76px + clamp(2.75rem,6.5vw,6rem));padding-bottom:0}
.ab .ab-hero h1{font-size:clamp(2.125rem,3.9vw,3.5rem);font-weight:600;
  letter-spacing:-.026em;line-height:1.08;max-width:19ch;color:var(--ink-heading);
  text-wrap:balance}
.ab .abh-lead{margin-top:clamp(1rem,1.9vw,1.45rem);max-width:42ch}
/* ⚠ TWO-COLUMN HERO — a recorded deviation from the internal-page grammar, which
   specifies a single left column. Sarthak flagged the empty right side directly.
   The left column keeps H1 -> lead -> CTA in the locked order and relationship; the
   right carries ONLY the OEM roster as a ruled mono list, which is data rather than a
   competing type column. This is NOT page 5 v1's rejected split, which put a headline
   and its own subhead in different columns and broke the pair. */
.ab .abh-grid{display:grid;
  grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr);
  column-gap:clamp(2rem,5vw,5rem);row-gap:clamp(2rem,4vw,3rem);align-items:end}
.ab .abh-roster{padding-bottom:6px}
.ab .abh-rk{display:block;color:var(--muted);font-size:.7rem;letter-spacing:.14em;
  padding-bottom:clamp(.7rem,1.3vw,1rem);border-bottom:1px solid var(--rule)}
.ab .abh-roster ul{list-style:none;margin:0;padding:0}
.ab .abh-roster li{padding-block:clamp(.55rem,1.05vw,.8rem);
  border-bottom:1px solid var(--rule);
  font-size:clamp(1rem,1.35vw,1.1875rem);font-weight:600;letter-spacing:-.012em;
  line-height:1.25;color:var(--ink-heading)}
.ab .abh-band{margin-top:clamp(2.75rem,5.5vw,4.5rem);
  margin-left:calc((100% - min(100%,var(--container)))/2 + var(--gutter))}
.ab .abh-band .frame{aspect-ratio:21/9}

/* ---------------- §2 THE OWNERSHIP — TYPE-ONLY, and the record is a COLOPHON ----
   ⚠ No image, no stand-in face, no empty frame, no "1986" as a large numeral.
   The colophon sits BELOW the copy: small mono ABOVE a heading is structurally a
   kicker and this site ships zero. Middots only, never vertical rules — ruled mono
   columns is the editorial-typographic fingerprint, and a label/value stack on
   hairlines is Quality's data plate. The page's ONE licensed ruled multi-column row
   is deliberately left unspent. */
.ab .ab-own{background:var(--bg);border-top:1px solid var(--rule)}
 /* align-items:START, not end. The first build bottom-aligned the two columns, which
    dropped the two-line H2 to the foot of a six-line body column and left a void
    above it. Found on screen; no metric can see it. */
.ab .abo-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr);
  column-gap:clamp(2rem,5vw,5rem);row-gap:clamp(1.25rem,2.4vw,1.75rem);
  align-items:start}
.ab .abo-body .lead{margin-top:0}
.ab .abo-body p:not(.lead){margin-top:clamp(.9rem,1.6vw,1.25rem);
  color:var(--muted);max-width:58ch}
.ab .abo-record{margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1rem,1.8vw,1.4rem);
  border-top:1px solid var(--rule);max-width:none;
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.35rem clamp(1rem,2.4vw,2.25rem)}
.ab .abo-record span{font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.07em;line-height:1.5;color:var(--muted);
  font-variant-numeric:tabular-nums}
.ab .abo-record span+span{position:relative;padding-left:clamp(1rem,2.4vw,2.25rem)}
.ab .abo-record span+span::before{content:"·";position:absolute;
  left:calc(clamp(1rem,2.4vw,2.25rem) / -2);transform:translateX(-50%);
  color:var(--steel-400)}

/* ---------------- §3 THE COLONNADE — the page's one structural idea ----------------
   ⚠ THREE CONDITIONS ARE BINDING. Drop any one and this is the modal corporate
   "meet the team" bio pair, which is what every About page on earth ships:
     1. the figures run the FULL height of the section, touching both boundaries —
        hence padding-block:0 on the section and the hairlines as its own borders;
     2. the type HANGS in the span and shares their baseline (space-between puts the
        head at head height and the foot on the plinth line), never centred beneath
        a portrait;
     3. nothing on this page is taller than a director. */
.ab .ab-col{background:var(--bg);padding-block:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ab .abc-grid{display:grid;
  grid-template-columns:clamp(200px,24vw,355px) minmax(0,1fr) clamp(200px,24vw,355px);
  column-gap:clamp(1.5rem,4vw,3.5rem);align-items:stretch}
/* ⚠ ALL THREE CHILDREN ARE EXPLICITLY PLACED. The H2 is FIRST in the DOM (so the
   outline reads h2 -> h3 -> h3 and a director's name is never announced as a
   sub-heading of the section above), and the middle column is restored here — never
   with `order`, which fixes the picture and breaks the reading order, and never by
   auto-placement, whose cursor cannot move backwards. */
.ab .abc-span{grid-column:2;grid-row:1}
.ab .abc-fig-a{grid-column:1;grid-row:1}
.ab .abc-fig-b{grid-column:3;grid-row:1}
.ab .abc-fig{display:flex;flex-direction:column;min-width:0;margin:0}
/* aspect-ratio on the media means the SECTION's height is derived from the
   portrait, never imposed on it — so a head or a pair of feet can never be cropped */
.ab .abc-media{position:relative;aspect-ratio:2/3;overflow:hidden;
  background:var(--steel-900)}
.ab .abc-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  filter:saturate(1.04) contrast(1.04) brightness(1.02)}
.ab .abc-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,22,79,.03),rgba(0,12,51,.07))}
.ab .abc-name{padding-block:clamp(1rem,1.8vw,1.4rem) clamp(1.5rem,3vw,2.25rem)}
.ab .abc-name h3{font-size:clamp(1.125rem,1.9vw,1.5rem);font-weight:700;
  letter-spacing:-.018em;line-height:1.15;color:var(--ink-heading)}
.ab .abc-role{margin-top:.4rem;font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.06em;line-height:1.45;color:var(--muted);max-width:24ch}
 /* justify-content:FLEX-END, not space-between. space-between pushed the head to the
    top and the foot to the bottom of a 530px column and opened a void between them:
    the dead-paper fault the ceiling pass predicted for exactly this span. Bottom-
    aligned is also what the contract specified — the type HANGS in the span and
    shares the figures' baseline. */
.ab .abc-span{display:flex;flex-direction:column;justify-content:flex-end;
  gap:clamp(1.1rem,2.2vw,1.6rem);
  padding-block:clamp(2.5rem,5vw,4.25rem) clamp(1.5rem,3vw,2.25rem)}
.ab .abc-head h2{max-width:14ch}
.ab .abc-foot{font-size:1.0625rem;line-height:1.6;color:var(--muted);max-width:44ch}

/* ---------------- §4 CONDUCT — THE PAGE'S ONE DARK SECTION ----------------
   ⚠ The register rows must NOT collapse into Industries' .icha-parts (four short
   nouns in a narrow column beside a photo panel). These are full statements whose
   rules span the FULL VIEWPORT: three entries in a register, not a list inside a
   component. If a rule stops at the container, the section has become the same
   component twice. */
 /* the last register row carries its own bottom rule, so a full section pad below it
    just reads as a slab of empty midnight */
.ab .ab-cond{background:var(--bg-anchor);color:var(--ink-on-dark);
  padding-top:clamp(3.25rem,7vw,6.5rem);padding-bottom:clamp(1.25rem,2.4vw,2rem)}
/* single left column: the three full-viewport rows below carry the width, so there is
   no empty right side. Quality §4's approved dark-anchor composition. */
.ab .abd-top{padding-bottom:clamp(2.75rem,5.5vw,4.5rem)}
.ab .abd-head h2{color:#fff;max-width:18ch}
.ab .abd-head .lead{color:var(--muted-on-dark);max-width:42ch}
/* ---------------- §7's BRAND FILM — full-bleed, closing the page ----------------
   ⚠ Contrast over moving video was COMPUTED: every frame sampled in 12x12 tiles across
   the band the type occupies; the worst LOCAL patch on the brightest frame sits at
   luminance 0.107 behind this scrim, giving white type 6.67:1 (AA for normal text).
   The scrim is a gradient so the film stays legible on the right while the type side
   stays safely dark. */
.ab .abx-film{position:relative;overflow:hidden;background:var(--midnight);
  min-height:clamp(300px,34vw,500px);display:flex;align-items:flex-end}
.ab .abx-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab .abx-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,11,13,.78) 0%,rgba(10,11,13,.62) 46%,
    rgba(10,11,13,.34) 100%)}
.ab .abx-film > .container{position:relative;z-index:2;width:100%;
  padding-block:clamp(2rem,4vw,3.25rem)}
/* ≤ the close section's own H2, so the hierarchy sweep holds */
.ab .abx-tag{font-size:clamp(1.375rem,2.6vw,2.25rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.15;color:#fff;max-width:20ch;
  text-wrap:balance;margin:0}

.ab .abd-reg{list-style:none;margin:0;padding:0}
.ab .abd-reg > li{border-top:1px solid rgba(255,255,255,.17)}
.ab .abd-reg > li:last-child{border-bottom:1px solid rgba(255,255,255,.17)}
.ab .abd-reg > li > .container{padding-block:clamp(1.1rem,2.2vw,1.75rem)}
.ab .abd-reg span{display:block;
  font-size:clamp(1.125rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.014em;
  line-height:1.3;color:#fff;max-width:34ch;text-wrap:pretty}

/* ---------------- §5 STABILITY — the quiet beat, and the page's ONE statement lead
   Mist, so the tonal rhythm varies without a second dark section. The statement
   lead is the section's designed object: the only place on the page a subhead is
   set at this size, and still well beneath the H2 above it. */
.ab .ab-stab{border-top:0}
.ab .abs-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:clamp(2rem,5vw,5rem);row-gap:clamp(1.5rem,3vw,2.25rem);
  align-items:end}
/* the statement lead was competing with the H2 above it at 30px/500; pulled back so
   the rank reads as a subhead set large, not as a second headline */
.ab .abs-lead .lead{font-size:clamp(1.1875rem,1.9vw,1.625rem);font-weight:500;
  line-height:1.36;letter-spacing:-.01em;color:var(--ink);max-width:28ch}
.ab .abs-body{padding-bottom:clamp(.2rem,.6vw,.4rem)}
.ab .abs-body p{color:var(--muted);max-width:50ch}
.ab .abs-body .i-link{margin-top:clamp(1rem,2vw,1.5rem)}
/* the boardroom is where the diversification decision is actually taken — it is the
   section's designed object, and it stops a type-only section reading as unfinished */
/* the section's own bottom pad after the band left a slab of empty mist; the band
   closes the section instead */
.ab .ab-stab{padding-bottom:0}
.ab .abs-band{margin-top:clamp(2.5rem,5vw,4rem);
  padding-bottom:clamp(3rem,6vw,5rem)}
.ab .abs-band .frame{aspect-ratio:16/9}

/* ---------------- §6 THE PEOPLE — the asymmetric pair ----------------
   ⚠ Two photographs at different sizes is not automatically composition. These have
   a relationship: the mentor frame is the anchor and materially larger, the
   engineers frame is smaller and offset DOWN so their top edges never agree, with
   the type threading between them. Not a two-up grid. */
.ab .ab-ppl{background:var(--bg);border-top:1px solid var(--rule)}

/* ---------------- §4 THE TEAM — the page's largest section, new in v2 ----------------
   Sarthak: "you are completely underselling that we are a large team." On a page whose
   job is to make a supplier look substantial, 530+ people was the biggest asset
   available and v1 buried it. ⚠ This section counts PEOPLE, never tonnes: "scale" is
   one word from "capacity", and capacity is Facilities'. */
.ab .ab-team{background:var(--bg);border-top:1px solid var(--rule);padding-bottom:0}
.ab .abt-head h2{max-width:16ch}
.ab .abt-band{margin-top:clamp(2.25rem,4.5vw,3.5rem);
  margin-left:calc((100% - min(100%,var(--container)))/2 + var(--gutter))}
.ab .abt-band .frame{aspect-ratio:16/9}
.ab .abt-body{margin-top:clamp(2.25rem,4.5vw,3.5rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:clamp(1rem,2vw,1.5rem);align-items:start}
.ab .abt-body p{color:var(--muted);max-width:52ch;margin-top:0}

/* ⚠ THE TRADE ROW IS A SET, NOT A CARD GRID. Three different aspects (4:5, 3:2, 16:9)
   at three different widths, BOTTOM-ALIGNED to one shared hairline, each with a mono
   trade label beneath. Equal tiles at equal size with an icon and a heading would be
   the banned pattern; unequal frames on a common baseline read as a legend. */
.ab .abt-trades{list-style:none;margin:clamp(2.75rem,5.5vw,4.5rem) 0 0;padding:0;
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr) minmax(0,1.16fr);
  column-gap:clamp(1.25rem,2.6vw,2.25rem);align-items:end}
.ab .abt-trades > li{display:flex;flex-direction:column;justify-content:flex-end;
  min-width:0;gap:clamp(.7rem,1.3vw,1rem)}
.ab .abt-shot{position:relative;overflow:hidden;background:var(--steel-900)}
.ab .abt-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.04) contrast(1.05) brightness(1.02)}
.ab .abt-shot-a{aspect-ratio:4/5}
.ab .abt-shot-b{aspect-ratio:3/2}
.ab .abt-shot-c{aspect-ratio:16/9}
.ab .abt-trades .mono{color:var(--muted);font-size:.7rem;letter-spacing:.14em;
  padding-top:clamp(.6rem,1.1vw,.85rem);border-top:1px solid var(--rule)}
.ab .abp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(1.5rem,3.5vw,3rem);row-gap:clamp(2rem,4vw,3.25rem)}
.ab .abp-head{grid-column:1/8;grid-row:1}
.ab .abp-head h2{max-width:17ch}
.ab .abp-big{grid-column:1/6;grid-row:2/4;margin:0;align-self:start}
.ab .abp-big img{width:100%;height:auto;display:block;
  filter:saturate(1.04) contrast(1.05) brightness(1.02)}
.ab .abp-body{grid-column:7/13;grid-row:2;align-self:start}
.ab .abp-body p{color:var(--muted);max-width:46ch}
.ab .abp-small{grid-column:7/13;grid-row:3;margin:0;align-self:end}
.ab .abp-small img{width:100%;height:auto;display:block;
  filter:saturate(1.04) contrast(1.05) brightness(1.02)}

/* ---------------- §7 CLOSE — a full-bleed BAND, not a panel ----------------
   ⚠ A full-height panel bleeding right was REJECTED: Quality §6 and Industries §7
   both close on a full-height panel, so a third differing only by which side it
   bleeds off is a transposition — the exact fault page 5 was rebuilt for, one level
   up. This BOOKENDS the hero instead: §1's band bleeds right only from the
   container's left edge, §7's runs edge to edge. Same family, different reach.
   ⚠ The close stays LIGHT — a dark close merges with the dark footer below it. */
.ab .ab-close{background:var(--bg);border-top:1px solid var(--rule);
  padding-top:clamp(3.5rem,7vw,6rem)}
 /* The close first shipped as one left column with ~60% empty paper beside it — the
    bland fault, verbatim. This is Capabilities' APPROVED .ch-grid shape reused:
    heading left, lead + CTA in a right column bottom-aligned to its baseline. */
.ab .abx-copy{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(2rem,5vw,5rem);row-gap:clamp(1.25rem,2.4vw,1.75rem);
  align-items:end}
.ab .abx-copy h2{max-width:14ch}
.ab .abx-side .lead{max-width:38ch;margin-top:0}
.ab .abx-side .sec-cta{margin-top:clamp(1.5rem,2.8vw,2.25rem)}
/* ⚠ 3:1, not the 2.5:1 first built. At 2.5:1 a full-bleed band renders 640px tall
   against the directors' 570px figures, which breaks the colonnade's third binding
   condition — nothing on this page taller than a director. Caught by the sweep, not
   by eye. 3:1 lands at 533px and the figures keep the page's vertical maximum. */
.ab .abx-band{margin-top:clamp(2.75rem,5.5vw,4.5rem)}
.ab .abx-film{margin-top:clamp(2.75rem,5.5vw,4.5rem)}
.ab .abx-band .frame{aspect-ratio:3/1}

/* ---------------- motion: two orchestrated moments, transform/opacity only -------
   The colonnade RISES (two children, so the motion performs the standing-up the
   section argues) and the register RULES EXTEND (three children). Both wired onto
   the existing data-reveal -> .pre -> .in pipeline in script.js; the film is the
   third moment and it is the section's own. NO new JS. */
.ab .abc-fig.pre{transition-delay:calc(var(--i,0)*90ms)}
.ab .abd-reg > li.pre{transition-delay:calc(var(--i,0)*80ms)}
.ab .abt-trades > li.pre{transition-delay:calc(var(--i,0)*80ms)}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .ab .abh-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .ab .abt-body{grid-template-columns:minmax(0,1fr)}
  .ab .abt-trades{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
    row-gap:clamp(1.75rem,3.5vw,2.5rem)}
  .ab .abt-trades > li:last-child{grid-column:1/-1}
  .ab .abo-grid{grid-template-columns:minmax(0,1fr)}
  .ab .abs-grid{grid-template-columns:minmax(0,1fr)}
  .ab .abs-lead .lead{max-width:34ch}
  .ab .abp-head{grid-column:1/10}
  .ab .abp-big{grid-column:1/7}
  .ab .abp-body{grid-column:8/13}
  .ab .abp-small{grid-column:7/13}
}

/* ⚠ THE COLONNADE IS A DESKTOP COMPOSITION. Below 900 the two full-height figures
   would stack into two enormous portraits one after another, which reads as an
   obituary page. The honest fallback is a PAIRED half-height row with the head
   above it — the pair still reads as a pair, which is the part of the idea that
   survives the width. */
@media (max-width:900px){
  .ab .abc-grid{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(1rem,3vw,1.75rem)}
  /* still explicitly placed, so DOM order and visual order agree at every width */
  .ab .abc-span{grid-column:1/-1;grid-row:1;
    padding-block:clamp(2.5rem,6vw,3.5rem) 0;gap:clamp(1rem,2.5vw,1.5rem)}
  .ab .abc-fig-a{grid-column:1;grid-row:2}
  .ab .abc-fig-b{grid-column:2;grid-row:2}
  .ab .abc-head h2,.ab .abc-foot{max-width:none}
  .ab .abc-fig{padding-top:clamp(1.75rem,4vw,2.5rem)}
}

@media (max-width:760px){
  .ab .ab-hero h1,.ab h2,.ab .abc-head h2,.ab .abp-head h2,.ab .abx-copy h2,
  .ab .abt-head h2{max-width:none}
  .ab .abh-grid{grid-template-columns:minmax(0,1fr)}
  .ab .abt-trades{grid-template-columns:minmax(0,1fr)}
  .ab .abt-trades > li:last-child{grid-column:1}
  .ab .abt-band{margin-left:var(--gutter)}
  .ab .abt-band .frame{aspect-ratio:16/10}
  .ab .abh-band{margin-left:var(--gutter)}
  .ab .abh-band .frame{aspect-ratio:16/10}
  .ab .abx-band .frame{aspect-ratio:2/1}
  .ab .abp-grid{grid-template-columns:minmax(0,1fr)}
  .ab .abp-head,.ab .abp-big,.ab .abp-body,.ab .abp-small{grid-column:1/-1;grid-row:auto}
  .ab .abp-big{max-width:min(100%,420px)}
  /* keep the pair UNEQUAL when it stacks: at 375 both frames were clamping to the
     same 335px and the asymmetry that makes this a composition disappeared */
  .ab .abp-small{max-width:min(82%,520px);margin-left:auto}
  .ab .abo-record{gap:.3rem 1rem}
  .ab .abo-record span+span{padding-left:1rem}
  .ab .abo-record span+span::before{left:-.5rem}
  .ab .abx-copy{grid-template-columns:minmax(0,1fr)}
  .ab .ab-close .sec-cta{flex-direction:column;align-items:stretch}
  .ab .ab-close .sec-cta .btn{width:100%;justify-content:center}
  .ab .ab-close .sec-cta .i-link{justify-content:center;margin-top:.35rem}
}

@media (max-width:560px){
  /* two 2:3 figures still side by side, deliberately: the pair is the idea */
  .ab .abc-grid{column-gap:.75rem}
  .ab .abc-role{font-size:.6875rem;letter-spacing:.04em}
}

@media (prefers-reduced-motion:reduce){
  .ab .abc-fig.pre,.ab .abd-reg > li.pre,.ab .abt-trades > li.pre{transition-delay:0s}
}

/* ==========================================================================
   /quality/ §priority — THE LOAD PATH  (replaces the four-block .prio list)
   The order IS the argument: four members of equal weight, differing only in
   position. Cost sits on top because it is what the three beneath it produce.
   Equal width + equal weight is deliberate: all four matter equally.
   ========================================================================== */
.qp .lp{margin:0;display:grid;gap:0}
.qp .lp-body{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(.85rem,1.8vw,1.4rem);align-items:stretch}

/* the load-direction axis — the section's single use of red */
.qp .lp-axis{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:.6rem}
.qp .lp-axis svg{width:22px;height:100%;display:block}
.qp .lp-axis-line{stroke:var(--red-500,#D5012D);stroke-width:1.5;vector-effect:non-scaling-stroke}
.qp .lp-axis-head{fill:var(--red-500,#D5012D)}
.qp .lp-axis-label{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--red-500,#D5012D);
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}

/* the stack. DOM order is 01->04 for reading order; column-reverse puts the
   datum course (Safety) at the bottom so the drawing reads as a load path. */
.qp .lp-stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse}

.qp .lp-course{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(.9rem,2vw,1.6rem);row-gap:.2rem;align-items:baseline;
  padding:clamp(1.25rem,2.4vw,1.8rem) clamp(1.15rem,2.3vw,1.75rem);
  border-top:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(0,22,79,.035),rgba(0,22,79,0));}
.qp .lp-course:first-child{border-bottom:1px solid var(--rule)} /* visually the top member */

/* the member itself: a navy bearing edge, full width, identical on all four */
.qp .lp-course::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--navy-900);}

.qp .lp-rank{grid-row:1/3;align-self:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8125rem;font-weight:700;letter-spacing:.08em;color:var(--navy-600,#1D55AC);font-variant-numeric:tabular-nums}
.qp .lp-name{font-weight:600;letter-spacing:-.018em;line-height:1.1;
  font-size:clamp(1.15rem,2.1vw,1.5rem);color:var(--ink-heading)}
.qp .lp-note{grid-column:2;font-size:clamp(.9rem,1.15vw,1rem);line-height:1.45;color:var(--muted)}

/* Cost: the outcome. Marked by treatment, never by scale. */
.qp .lp-top .lp-name{color:var(--ink-heading)}
.qp .lp-top .lp-note{color:var(--ink)}
.qp .lp-top::before{height:4px}

/* the datum: engineering ground symbol under the first course */
.qp .lp-datum{position:relative;display:flex;align-items:flex-start;
  justify-content:space-between;gap:1rem;
  margin-left:calc(22px + clamp(.85rem,1.8vw,1.4rem))}
.qp .lp-datum svg{width:100%;height:13px;display:block;overflow:visible}
.qp .lp-datum-line{stroke:var(--navy-900);stroke-width:1.5;vector-effect:non-scaling-stroke}
.qp .lp-hatch path{stroke:var(--steel-400,#93A0AC);stroke-width:1;vector-effect:non-scaling-stroke}
.qp .lp-datum-label{position:absolute;right:0;top:1.05rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

.qp .lp-cap{margin-top:clamp(2rem,3.4vw,2.6rem);
  margin-left:calc(22px + clamp(.85rem,1.8vw,1.4rem));
  font-size:.875rem;line-height:1.5;color:var(--muted);max-width:46ch}

/* reveal: enhances an already-visible default, never gates it */
.qp .lp-course.pre{transition-delay:calc(var(--i,0)*80ms)}

@media (max-width:900px){
  .qp .lp-axis-label{font-size:.625rem}
  .qp .lp-course{padding-inline:clamp(.85rem,3vw,1.1rem)}
}
@media (prefers-reduced-motion:reduce){
  .qp .lp-course{transition:none!important;transition-delay:0ms!important}
}

/* Home §4 — the US warehouse is the one competitive edge in this band, so it is
   built as a marked panel rather than an eighth statistic. Red as a full-width
   bearing edge + a lifted surface: red still never becomes a background. */
.numbers .num-cell-accent{position:relative;isolation:isolate;
  padding-left:clamp(1rem,1.6vw,1.4rem)!important;padding-right:clamp(1rem,1.6vw,1.4rem);
  border-left:0!important}
.numbers .num-cell-accent::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(213,1,45,.10),rgba(213,1,45,.02) 55%,transparent);
  border:1px solid rgba(213,1,45,.34);border-top:0}
.numbers .num-cell-accent::after{content:"";position:absolute;left:0;right:0;top:0;
  height:3px;background:var(--red-500,#D5012D)}
.numbers .num-cell-accent .num-val{letter-spacing:-.01em}
.numbers .num-cell-accent .num-label{color:#fff;letter-spacing:.1em}
.numbers .num-cell-accent .num-flag{display:block;margin-top:.5rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--red-400,#E7405C)}
@media (max-width:640px){
  .numbers .num-cell-accent{padding-left:clamp(.8rem,3vw,1.1rem)!important}
}

/* ==========================================================================
   /contact/ — page 8. Thin by design: the buyer arriving here has decided.
   Internal-page grammar: light type-led hero, ONE dark anchor, no kicker,
   no forged gradient. Reuses .ct-form / .ct-field / .ct-nda from Home §12.
   ========================================================================== */
.ct-hero{padding-top:clamp(3.5rem,7vw,6rem);padding-bottom:clamp(2.5rem,4vw,3.5rem)}
.ct-hero .cth-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(2.5rem,6vw,6rem);row-gap:clamp(2rem,4vw,3rem);align-items:start}
.ct-hero h1{font-size:clamp(2rem,4.6vw,3.5rem);font-weight:600;letter-spacing:-.028em;
  line-height:1.06;color:var(--ink-heading);text-wrap:balance;max-width:15ch}
.ct-hero .lead{margin-top:clamp(1rem,1.8vw,1.35rem);max-width:42ch}

/* the direct details: a ruled data rail, mono label + value. No card. */
.ct-hero .cth-direct{display:grid;gap:0;border-top:1px solid var(--rule)}
.ct-hero .cd-row{display:grid;grid-template-columns:minmax(78px,auto) minmax(0,1fr);
  column-gap:clamp(1rem,2vw,1.75rem);align-items:start;
  padding:clamp(.85rem,1.5vw,1.1rem) 0;border-bottom:1px solid var(--rule)}
.ct-hero .cd-row .mono{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-top:.15em}
.ct-hero .cd-row a,.ct-hero .cd-row span:not(.mono){font-size:clamp(.95rem,1.1vw,1.0625rem);
  line-height:1.5;color:var(--ink)}
.ct-hero .cd-row a{text-decoration:none;border-bottom:1px solid var(--rule)}
.ct-hero .cd-row a:hover{border-bottom-color:var(--navy-600,#1D55AC)}

/* §2 form */
.ct-main{padding-top:clamp(2rem,3.5vw,3rem);padding-bottom:clamp(3.5rem,6vw,5.5rem)}
.ct-main .ctm-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  column-gap:clamp(2.5rem,5vw,5rem);row-gap:clamp(2.5rem,4vw,3.5rem);align-items:start}
.ct-main h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.022em;
  line-height:1.14;color:var(--ink-heading);text-wrap:balance;max-width:18ch}

.ct-steps{list-style:none;margin:clamp(1.35rem,2.4vw,1.85rem) 0 0;padding:0;display:grid}
.ct-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(.9rem,1.8vw,1.25rem);align-items:baseline;
  padding:clamp(.8rem,1.4vw,1rem) 0;border-top:1px solid var(--rule)}
.ct-steps li:last-child{border-bottom:1px solid var(--rule)}
.ct-steps .mono{font-size:.75rem;font-weight:700;letter-spacing:.08em;
  color:var(--navy-600,#1D55AC);font-variant-numeric:tabular-nums}
.ct-steps p{font-size:clamp(.9rem,1.1vw,1rem);line-height:1.5;color:var(--ink)}

.ct-main .ct-nda{margin-top:clamp(1.6rem,2.8vw,2.2rem)}

/* §3 dark anchor — the visit */
.ct-visit{position:relative;isolation:isolate;background:var(--bg-anchor,#0A0B0D);
  min-height:clamp(300px,42vw,460px);display:grid;align-items:end}
.ct-visit .ctv-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.ct-visit .ctv-media img{width:100%;height:100%;object-fit:cover;display:block}
.ct-visit .ctv-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,11,13,.92) 0%,rgba(10,11,13,.78) 42%,rgba(10,11,13,.3) 100%)}
.ct-visit .ctv-inner{padding-block:clamp(2.75rem,5vw,4.25rem)}
.ct-visit .ctv-card{max-width:44ch}
.ct-visit h2{font-size:clamp(1.5rem,2.8vw,2.15rem);font-weight:600;letter-spacing:-.024em;
  line-height:1.12;color:#fff;text-wrap:balance}
.ct-visit p{margin-top:clamp(.8rem,1.4vw,1.05rem);
  font-size:clamp(.95rem,1.15vw,1.0625rem);line-height:1.6;color:var(--steel-200,#DCE3E9)}

@media (max-width:900px){
  .ct-hero .cth-grid,.ct-main .ctm-grid{grid-template-columns:minmax(0,1fr)}
  .ct-hero h1{max-width:20ch}
  .ct-visit .ctv-veil{background:linear-gradient(180deg,rgba(10,11,13,.62) 0%,rgba(10,11,13,.9) 62%)}
  .ct-visit{align-items:end}
}
@media (max-width:520px){
  .ct-hero .cd-row{grid-template-columns:minmax(0,1fr);row-gap:.3rem}
}

/* /contact/ — the form inherits Home §12's DARK treatment, which would give this
   page a second dark region and break the one-dark-anchor rule (the visit band is
   the anchor). Page-scoped flip to a light surface. Home is untouched. */
.ct-main .ct-form{background:#fff;border:1px solid var(--rule);box-shadow:none;
  padding:clamp(1.5rem,3vw,2.25rem)}
.ct-main .ct-form label{color:var(--ink-heading)}
.ct-main .ct-form .ct-opt{color:var(--muted)}
.ct-main .ct-form input[type=text],.ct-main .ct-form input[type=email],
.ct-main .ct-form input[type=file],.ct-main .ct-form select,.ct-main .ct-form textarea{
  background:var(--steel-100,#EEF2F5);border:1px solid var(--rule);color:var(--ink)}
.ct-main .ct-form input::placeholder,.ct-main .ct-form textarea::placeholder{color:var(--muted)}
.ct-main .ct-form input:focus-visible,.ct-main .ct-form select:focus-visible,
.ct-main .ct-form textarea:focus-visible{outline:2px solid var(--navy-600,#1D55AC);outline-offset:1px;
  border-color:var(--navy-600,#1D55AC);background:#fff}
.ct-main .ct-form .ct-note{color:var(--muted)}

/* the inherited NDA block carries a coloured side-stripe. Full rule instead. */
.ct-main .ct-nda{border-left:0;border:1px solid var(--rule);background:var(--steel-100,#EEF2F5);
  padding:clamp(1rem,2vw,1.35rem)}
.ct-main .ct-nda .mono{color:var(--navy-600,#1D55AC)}
.ct-main .ct-nda p{color:var(--ink)}
.ct-main .ct-form input[type=file]::file-selector-button{
  background:var(--navy-900,#00164F);color:#fff;border:0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;padding:.7rem 1rem;margin-right:.9rem;
  cursor:pointer}
.ct-main .ct-form input[type=file]::file-selector-button:hover{background:var(--navy-800,#062A6E)}