/* ============================================================================
   GCALIT.ORG — SYSTEM STYLESHEET
   The only stylesheet apart from fonts.css. Four token layers in the shape
   Lamborghini publishes (tokens.css v1.5.0): primitive → semantic role →
   interactive state → scale. The dark (carbon) and paper ramps are MIRRORED,
   so one component token set serves both themes; `[data-theme="paper"]`
   redefines ONLY tokens — no component below the token block forks.

   Contrast ratios in comments are COMPUTED (WCAG relative luminance), not
   estimated. Every readable-text token ≥ 4.5:1 on every ground it may sit on.
   ============================================================================ */

:root{
  /* ---- LAYER 1 · PRIMITIVES ------------------------------------------------
     carbon ramp (dark theme grounds), monotonically lighter                   */
  --carbon-0:#07080A;  --carbon-1:#0C0E11;  --carbon-2:#12151A;  --carbon-3:#1A1E25;
  /* paper ramp (print theme grounds), warm — beige, not grey — mirrored       */
  --paper-0:#F4F2ED;   --paper-1:#ECE9E2;   --paper-2:#E4E0D7;   --paper-3:#D9D4C9;
  /* ink on carbon */
  --white-1:#F2F3F5;   /* 18.05:1 carbon-0 · 17.41 c-1 · 16.48 c-2 · 15.05 c-3 */
  --white-2:#BAC0C9;   /* 10.94:1 carbon-0 · 10.56 c-1 ·  9.99 c-2 ·  9.13 c-3 */
  --white-3:#8B93A0;   /*  6.47:1 carbon-0 ·  6.24 c-1 ·  5.91 c-2 ·  5.40 c-3 */
  --white-4:#6E7683;   /*  4.37:1 carbon-0 — DECORATIVE ONLY, never running text */
  /* ink on paper */
  --black-1:#17181B;   /* 15.87:1 paper-0 · 14.64 p-1 · 13.48 p-2 · 12.01 p-3  */
  --black-2:#41454C;   /*  8.61:1 paper-0 ·  7.94 p-1 ·  7.31 p-2 ·  6.52 p-3  */
  --black-3:#565B64;   /*  6.10:1 paper-0 ·  5.63 p-1 ·  5.18 p-2 ·  4.62 p-3  */
  --black-4:#8A8F98;   /*  2.90:1 paper-0 — DECORATIVE ONLY, never running text */
  /* the one accent — race red, two temperatures of one hue.
     Chosen over gold: the site being replaced already ships dark-plus-gold.   */
  --race-red:#DA291C;      /* surface red — white on it 4.87:1                 */
  --race-red-press:#B91F13;/* pressed fill — white on it 6.43:1                */
  --race-red-hot:#FF5A4E;  /* telemetry red on carbon — 6.51:1 c-0 · 5.95 c-2  */
  --race-red-print:#AD1A10;/* telemetry red ON PAPER — 6.40:1 p-0 · 5.91 p-1 ·
                              5.44 p-2 · 4.85 p-3. Measured BEFORE the paper
                              chapter is allowed to use red at all (spec §2.11) */

  /* ---- LAYER 2 · SEMANTIC ROLES (dark values; paper block re-points them) --*/
  --ground-0:var(--carbon-0);            /* page ground                        */
  --ground-1:var(--carbon-1);            /* bands, rails                       */
  --ground-2:var(--carbon-2);            /* panels, plates, cards              */
  --ground-3:var(--carbon-3);            /* raised / hover                     */
  --ink-1:var(--white-1);                /* headings, figures                  */
  --ink-2:var(--white-2);               /* body                                */
  --ink-3:var(--white-3);               /* labels, eyebrows, captions          */
  --ink-ghost:rgba(242,243,245,.09);     /* engraved chapter numerals — decorative */
  --ink-ghost-2:rgba(242,243,245,.14);   /* engraved index numerals — decorative   */
  /* hairlines — alpha of the ink, never a grey hex                            */
  --line-1:rgba(242,243,245,.09);
  --line-2:rgba(242,243,245,.17);
  --line-3:rgba(242,243,245,.30);
  /* the drafting surface — mirrored token so the grid exists on paper too;
     paper alpha is ~2x because dark ink over warm paper quantises away        */
  --grid-ink:rgba(242,243,245,.03);
  /* accent roles */
  --accent:var(--race-red);              /* CTA surface                        */
  --accent-press:var(--race-red-press);  /* CTA pressed                        */
  --accent-hot:var(--race-red-hot);      /* the four counted marks on carbon   */
  --accent-ink:#FFFFFF;                  /* text ON the accent — 4.87:1        */
  /* field surfaces (the form) */
  --field-bg:var(--carbon-1);
  --field-line:rgba(242,243,245,.22);

  /* ---- LAYER 3 · INTERACTIVE STATE -----------------------------------------
     one focus ring, visible on every ground: ground-coloured gap + hot accent */
  --ring:0 0 0 2px var(--ground-0),0 0 0 4px var(--accent-hot);
  --hover-wash:rgba(242,243,245,.06);
  --disabled-op:.45;
  /* elevation — mostly off; planes separate by rule, space and tone           */
  --edge:inset 0 1px 0 rgba(255,255,255,.05);
  --el-1:0 1px 2px rgba(0,0,0,.5);

  /* ---- LAYER 4 · SCALE ---------------------------------------------------- */
  /* type — two registers and nothing between them:
     display 200/0.85/−0.008em vs micro-label 11px caps +0.18em mono           */
  --font-d:"Archivo","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --font-t:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-s:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --fs-cap:max(11px,.6875rem);             /* 11px micro-label — floored: the
                                              fluid root bottoms out at 15px on
                                              phones, which put .6875rem at 10.3px */
  --fs-0:.875rem;                          /* 14px small body / nav            */
  --fs-1:1.0625rem;                        /* 16–17px body                     */
  --fs-lead:clamp(1.05rem,1rem + .3vw,1.45rem);
  --fs-h3:clamp(1.4rem,1rem + 1.1vw,2.5rem);
  --fs-h4:clamp(1.15rem,1rem + .5vw,1.7rem);
  --fs-stat:clamp(2rem,1.2rem + 1.6vw,3.8rem);
  --fs-serif:clamp(1.7rem,1.15rem + 1.5vw,3.6rem);
  --track-cap:.18em;
  --track-display:-.008em;
  --lh-display:.85;
  --lh-body:1.5;
  /* space — 4px base, extended to macro rhythm */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --sec-pad:clamp(64px,12px + 3.6vw,136px);
  /* full-bleed rails (.chrule, .ft__legal) keep an optical gutter so type
     never touches the physical screen edge; sized so the reach gate holds     */
  --bleed-pad:clamp(16px,1.2vw,44px);
  /* layout — NO pixel max-width anywhere. The margin is a growing track
     (20px → 160px at 3440); only the prose MEASURE is capped (~76ch).         */
  --mx:clamp(20px,5.35vw - 24px,168px);
  --gut:clamp(16px,1vw,32px);
  --measure:76ch;
  --header-h:72px;
  --tower-w:0px;                           /* becomes real at ≥1025px below    */
  /* radius — machined */
  --r-0:0; --r-1:2px;
  /* motion — one curve, three durations, all guarded by reduced-motion        */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-ui:160ms; --dur-move:420ms; --dur-arrive:900ms;
}
/* the timing tower claims the left edge ONLY on the page that renders it
   (body.pg-home = index). Seven of eight pages have no tower; scoping the
   width to the page class means no page can inherit a rail it doesn't draw.
   64px vernier rail from 1025px; full tower with chapter names from 2600px.   */
@media (min-width:1025px){ .pg-home{ --tower-w:64px } }
@media (min-width:2600px){ .pg-home{ --tower-w:clamp(216px,7vw,260px) } }

/* ---- THE PAPER THEME -------------------------------------------------------
   Chapter 04 and the record pages (results, the three legal documents) invert
   to print. ONLY tokens are redefined here — that is the whole point of the
   mirrored ramps. Apply data-theme="paper" to <body> or to one section.      */
[data-theme="paper"]{
  --ground-0:var(--paper-0);
  --ground-1:var(--paper-1);
  --ground-2:var(--paper-2);
  --ground-3:var(--paper-3);
  --ink-1:var(--black-1);
  --ink-2:var(--black-2);
  --ink-3:var(--black-3);
  --ink-ghost:rgba(23,24,27,.10);
  --ink-ghost-2:rgba(23,24,27,.16);
  --line-1:rgba(23,24,27,.13);
  --line-2:rgba(23,24,27,.24);
  --line-3:rgba(23,24,27,.38);
  --grid-ink:rgba(23,24,27,.055);
  --accent-hot:var(--race-red-print);    /* the measured red-on-paper token    */
  --ring:0 0 0 2px var(--ground-0),0 0 0 4px var(--accent-hot);
  --hover-wash:rgba(23,24,27,.05);
  --edge:inset 0 1px 0 rgba(255,255,255,.55);
  --el-1:0 1px 2px rgba(23,24,27,.18);
  --field-bg:#FFFFFF;
  --field-line:rgba(23,24,27,.30);
}
/* inherited `color` resolves at the point it was declared (body, dark), so a
   themed scope must restart inheritance or its body text keeps the dark ink   */
[data-theme="paper"]{color:var(--ink-2)}

/* ============================================================================
   BASE
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  /* fluid root — the whole system grows on an ultrawide, caps near 3440 */
  font-size:clamp(15px,13.4px + .22vw,21px);
}
body{
  font-family:var(--font-d);
  font-size:var(--fs-1);
  font-weight:300;
  line-height:var(--lh-body);
  color:var(--ink-2);
  background:var(--ground-0);
  -webkit-font-smoothing:antialiased;
}
/* the drafting surface — a 96px engineering grid. Token-inked so it mirrors
   onto paper pages; chapters are transparent so it actually reads everywhere,
   and only the themed/toned sections and plates print over it.               */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 95px,var(--grid-ink) 95px,var(--grid-ink) 96px),
    repeating-linear-gradient(90deg,transparent,transparent 95px,var(--grid-ink) 95px,var(--grid-ink) 96px);
}
::selection{background:var(--ink-1);color:var(--ground-0)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:none;box-shadow:var(--ring);border-radius:var(--r-1);
}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;top:-100%;left:var(--sp-4);z-index:400;background:var(--ground-3);
  color:var(--ink-1);padding:var(--sp-3) var(--sp-5);border:1px solid var(--line-2);
  border-radius:var(--r-1)}
.skip:focus-visible{top:var(--sp-4)}

/* ---- type utilities -------------------------------------------------------- */
/* micro-label register: 11px · uppercase · +0.18em · mono */
.cap{
  font-family:var(--font-t);font-size:var(--fs-cap);font-weight:400;
  letter-spacing:var(--track-cap);text-transform:uppercase;
  color:var(--ink-3);line-height:1.3;
}
.cap--tick{display:inline-flex;align-items:center;gap:var(--sp-3)}
.cap--tick::before{content:"";width:16px;height:1px;background:var(--line-3);flex:none}
/* the two counted headline full stops */
.dot{color:var(--accent-hot)}
/* display register */
.display{
  font-weight:200;line-height:var(--lh-display);
  letter-spacing:var(--track-display);color:var(--ink-1);
}
/* prose measure — the only width cap that exists anywhere */
.measure{max-width:var(--measure)}
/* one hairline icon language: 24×24 grid, 1px stroke, currentColor, no fill */
.ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:butt;stroke-linejoin:miter;flex:none}

/* ============================================================================
   SHELL — header · timing tower · main
   ============================================================================ */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:300;height:var(--header-h);
  display:flex;align-items:center;gap:var(--sp-6);
  padding-inline:var(--sp-6);
  background:var(--carbon-0);border-bottom:1px solid rgba(242,243,245,.09);
  color:var(--white-2);
}
/* the wordmark renders as ONE word — no flex gap inside the client's name */
.hd__logo{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;
  font-weight:600;font-size:1.02rem;letter-spacing:.09em;color:var(--white-1)}
.hd__logo b{font-weight:600}
.hd__logo b i{font-style:normal;font-weight:300;color:var(--white-3)}
.hd__logo::after{content:"";width:6px;height:6px;background:var(--white-3);
  transform:rotate(45deg)}
.hd__nav{display:flex;gap:var(--sp-1);margin-left:auto;min-width:0}
.hd__nav a{
  display:inline-flex;align-items:center;height:44px;padding-inline:var(--sp-4);
  font-family:var(--font-t);font-size:var(--fs-cap);font-weight:400;
  letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--white-3);
  border-bottom:1px solid transparent;white-space:nowrap;
  transition:color var(--dur-ui) var(--ease);
}
.hd__nav a:hover{color:var(--white-1)}
.hd__nav a[aria-current="page"]{color:var(--white-1);border-bottom-color:var(--white-1)}
/* the mobile menu — a real button; Contact never scrolls off the right edge */
.hd__menu{display:none;align-items:center;justify-content:center;gap:var(--sp-3);
  height:44px;padding-inline:var(--sp-4);margin-left:auto;
  font-family:var(--font-t);font-size:var(--fs-cap);letter-spacing:var(--track-cap);
  text-transform:uppercase;color:var(--white-1);
  border:1px solid rgba(242,243,245,.17);border-radius:var(--r-1)}
.hd__menu .bars{display:inline-block;width:16px;height:10px;
  border-top:1px solid currentColor;border-bottom:1px solid currentColor;
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat}
.menu{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:290;
  display:none;flex-direction:column;
  background:var(--carbon-1);border-bottom:1px solid rgba(242,243,245,.17);
  padding:var(--sp-4) var(--sp-6) var(--sp-6);
}
.menu.is-open{display:flex}
.menu a{
  display:flex;align-items:center;min-height:44px;
  font-family:var(--font-t);font-size:var(--fs-0);letter-spacing:.12em;
  text-transform:uppercase;color:var(--white-2);
  border-bottom:1px solid rgba(242,243,245,.09);
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--white-1)}
/* the drawer carries the primary CTA too — on a phone the header button is
   folded away, and the site chrome must never lose its conversion action     */
.menu .btn{margin-top:var(--sp-5);justify-content:center;border-bottom-color:transparent}
/* scrim below the open drawer (header stays above it at z 300) */
.menu.is-open::after{content:"";position:fixed;inset:0;z-index:-1;
  background:rgba(7,8,10,.62)}
html.menu-open{overflow:hidden}

/* ---- the timing tower ------------------------------------------------------
   Fixed left rail: seven chapters as a calibrated scale, red marker riding
   scroll. Ornament, wayfinding and anchor navigation at once. 64px vernier
   rail 1025–2599px; full tower with names ≥2600px; below 1025px it degrades
   to the 2px progress line (.lap).                                            */
.tower{
  position:fixed;left:0;top:var(--header-h);bottom:0;z-index:200;
  width:var(--tower-w);display:none;flex-direction:column;gap:var(--sp-6);
  padding:var(--sp-7) 0 var(--sp-6);
  background:var(--carbon-0);border-right:1px solid rgba(242,243,245,.09);
  color:var(--white-3);
}
@media (min-width:1025px){ .tower{display:flex} }
/* vernier tick engraving — minor 8px pitch, major 48px pitch */
.tower::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:10px;
  background:repeating-linear-gradient(to bottom,rgba(242,243,245,.17) 0 1px,transparent 1px 8px);
}
.tower::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:18px;
  background:repeating-linear-gradient(to bottom,rgba(242,243,245,.30) 0 1px,transparent 1px 48px);
}
.tower__scale{position:absolute;top:0;bottom:0;right:0;width:2px;
  background:rgba(242,243,245,.09)}
/* the marker is placed by site.js in tower coordinates, interpolated between
   the chapter entries it sits between — so the needle always agrees with the
   highlighted name. transform only: no layout property animates.             */
.tower__marker{position:absolute;right:-2px;top:0;width:6px;height:2px;
  background:var(--race-red-hot)}
.tower__head{padding-left:var(--sp-6)}
.tower nav{overflow:hidden}
.tower ol{list-style:none;display:flex;flex-direction:column;gap:var(--sp-1)}
.tower a{
  display:flex;align-items:center;gap:var(--sp-4);min-height:44px;
  padding-left:calc(var(--sp-6) - 3px);border-left:3px solid transparent;
  transition:color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease);
}
.tower a .n{font-family:var(--font-t);font-size:var(--fs-cap);font-weight:400;
  letter-spacing:.1em;color:var(--white-3)}
.tower a .t{font-family:var(--font-t);font-size:var(--fs-cap);font-weight:400;
  letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--white-3);
  white-space:nowrap}
.tower a:hover .t,.tower a:hover .n{color:var(--white-1)}
.tower a.is-now{border-left-color:var(--race-red-hot)}
.tower a.is-now .t{color:var(--white-1)}
.tower a.is-now .n{color:var(--race-red-hot)}
.tower__note{margin-top:auto;padding-left:var(--sp-6);padding-right:var(--sp-4)}
/* the narrow vernier rail: numerals only, names folded away */
@media (max-width:2599px){
  .tower{gap:var(--sp-5)}
  .tower__head,.tower__note,.tower a .t{display:none}
  .tower a{padding-left:calc(var(--sp-5) - 3px);justify-content:flex-start}
}
/* below the rail: the lap line — 2px of progress under the header */
.lap{position:fixed;top:var(--header-h);left:0;right:0;height:2px;z-index:290;
  background:rgba(242,243,245,.09);display:none}
.lap::before{content:"";position:absolute;inset:0;background:var(--race-red-hot);
  transform:scaleX(var(--scroll-p,0));transform-origin:left}
@media (max-width:1024px){ .lap{display:block} }

main{position:relative;z-index:1;margin-left:var(--tower-w);padding-top:var(--header-h)}
/* the footer is a sibling of <main> (a real contentinfo landmark), so it
   carries the tower offset itself                                             */
.ft{margin-left:var(--tower-w)}
.wrap{padding-inline:var(--mx)}
/* full-bleed inside a .wrap — spans the main column edge to edge */
.bleed{margin-inline:calc(-1 * var(--mx))}

/* ============================================================================
   BUTTONS — default · hover · active · focus · disabled
   ============================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);
  min-height:52px;padding:0 var(--sp-6);border:1px solid transparent;
  border-radius:var(--r-1);
  font-family:var(--font-t);font-size:var(--fs-0);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:background var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease),
             color var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:var(--disabled-op);cursor:not-allowed;transform:none}
/* the one accent CTA ramp: default → hover/press. The focus rule below exists
   because .btn--red's box-shadow ties the (0,1,0) focus-visible ring and,
   coming later, wins — leaving the primary CTA with NO focus indicator.       */
.btn--red{background:var(--accent);color:var(--accent-ink);box-shadow:var(--edge)}
.btn--red:hover{background:var(--accent-press)}
.btn--red:focus-visible{box-shadow:var(--edge),var(--ring)}
.btn--ghost{border-color:var(--line-2);color:var(--ink-1)}
.btn--ghost:hover{background:var(--hover-wash);border-color:var(--line-3)}
.hd .btn{min-height:44px;padding:0 var(--sp-5)}

/* ============================================================================
   CHAPTERS
   ============================================================================ */
/* chapters are transparent so the drafting grid reads through them; only a
   section that CHANGES material (paper inversion, toned band) paints over it */
.chapter{position:relative;padding-block:var(--sec-pad)}
.chapter[data-theme]{background:var(--ground-0)}
.chapter--flush{padding-top:0}
/* the engraved chapter rule — spans the full main column; the labels keep an
   optical gutter so the engraving never touches the physical screen edge:
   CH 04 ·|||||||||||· THE TIMING SHEET                                        */
.chrule{display:flex;align-items:center;gap:var(--sp-5);
  padding-inline:var(--bleed-pad)}
.chrule__no{font-family:var(--font-t);font-size:var(--fs-cap);font-weight:400;
  letter-spacing:var(--track-cap);color:var(--ink-3);white-space:nowrap;flex:none}
.chrule__ticks{flex:1;min-width:0;height:9px;position:relative;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 12px)}
.chrule__ticks::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line-1)}
.chrule__name{font-family:var(--font-t);font-size:var(--fs-cap);font-weight:400;
  letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;flex:none}
/* The giant ghost chapter ordinal was retired: the engraved rule already
   names the chapter ("CH 03 ·|||· FOUR STAGES"), the tower carries the
   numerals, and the two-part head band now owns the right end of the frame
   the ordinal used to float in. The small data-n numerals engraved into
   tiles/steps/sheets remain.                                                  */
.chapter h2{
  margin-top:var(--sp-7);position:relative;z-index:1;
  font-size:clamp(2.2rem,calc((100vw - var(--tower-w) - 2 * var(--mx)) / 11.8),9rem);
  font-weight:200;line-height:var(--lh-display);letter-spacing:var(--track-display);
  color:var(--ink-1);
}
.chapter__desc{margin-top:var(--sp-6);max-width:70ch;font-size:var(--fs-1);
  position:relative;z-index:1}

/* ============================================================================
   CH 00 — HERO
   ============================================================================ */
.hero{position:relative;
  min-height:calc(100vh - var(--header-h));
  display:flex;flex-direction:column}
/* svh only where it exists — an unsupported unit would drop the whole
   declaration and collapse the arrival to content height (spec §2.17 rule)    */
@supports (height:100svh){
  .hero{min-height:calc(100svh - var(--header-h))}
}
.hero__body{position:relative;margin-top:auto;
  padding-top:var(--sp-9);padding-bottom:var(--sp-9);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:var(--sp-8);align-items:start}
.hero__head{grid-column:1 / -1;position:relative;z-index:1}
.hero__main{grid-column:1;position:relative;z-index:1}
.hero h1{
  margin-top:var(--sp-6);
  font-size:clamp(2.7rem,calc((100vw - var(--tower-w) - 2 * var(--mx)) / 12.6),14.6rem);
  font-weight:200;line-height:var(--lh-display);letter-spacing:var(--track-display);
  color:var(--ink-1);text-wrap:balance;
}
.hero__sub{margin-top:var(--sp-7);max-width:62ch;
  font-size:var(--fs-lead);line-height:1.55}
.plate{margin-top:var(--sp-7)}
.hero__cta{margin-top:var(--sp-7);display:flex;flex-wrap:wrap;gap:var(--sp-4)}
/* the telemetry trace — one measured line, plotted from the site's own
   $180K → $1.2M figures, running the full width behind the hero               */
.hero__trace{position:absolute;left:calc(-1 * var(--mx));right:calc(-1 * var(--mx));
  bottom:calc(-1 * var(--sp-9));height:min(36vh,420px);z-index:0;
  pointer-events:none;overflow:clip}
.hero__trace svg{width:100%;height:100%}

/* ---- the engraved data plate ---- */
/* in the hero the plate grows into the band's right half and its top rule
   aligns with the lede's first line — it is in a measured relationship with
   the text column, not marooned past a dead middle                            */
.hero__body .plate{align-self:start;width:clamp(320px,34vw,1180px)}
.plate{
  grid-column:2;position:relative;z-index:1;align-self:end;
  width:clamp(300px,26vw,460px);max-width:100%;
  background:var(--ground-1);border:1px solid var(--line-2);border-radius:var(--r-1);
  box-shadow:var(--edge),var(--el-1);
  padding:var(--sp-5) var(--sp-6) var(--sp-6);
}
.plate::before,.plate::after{content:"";position:absolute;width:4px;height:4px;
  border-radius:50%;background:var(--line-3)}
.plate::before{top:8px;left:8px}
.plate::after{bottom:8px;right:8px}
.plate__hd{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.plate__hd::before,.plate__hd::after{content:"";height:1px;background:var(--line-2);flex:1}
.plate dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3) var(--sp-5)}
.plate dt{font-family:var(--font-t);font-size:var(--fs-cap);letter-spacing:var(--track-cap);
  text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.plate dd{font-family:var(--font-t);font-size:.8125rem;letter-spacing:.04em;
  color:var(--ink-1);text-align:right}

/* ---- the instrument strip (hero + record stats) ---- */
.strip{
  border-top:1px solid var(--line-1);border-bottom:1px solid var(--line-1);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding-inline:var(--mx);
}
.strip__cell{padding:var(--sp-6);border-left:1px solid var(--line-1);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.strip__cell:first-child{border-left:0;padding-left:0}
.odo{font-family:var(--font-t);font-size:var(--fs-stat);font-weight:300;line-height:1;
  color:var(--ink-1);font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:baseline;white-space:nowrap}
/* the guard: without it a browser lacking 1lh loses the clip and stacks digits.
   JS also refuses to build the roll unless CSS.supports('height','1lh').       */
@supports (height:1lh){
  .odo .od{display:inline-block;overflow:clip;height:1lh}
  .odo .od__t{display:flex;flex-direction:column}
  .odo .od__t span{display:block;height:1lh}
}
@media (prefers-reduced-motion:no-preference){
  .js .odo .od__t{transform:translateY(0);
    transition:transform var(--dur-arrive) var(--ease);transition-delay:var(--dl,0ms)}
  .js .odo.is-run .od__t{transform:translateY(calc(-1 * var(--n) * 1lh))}
}

/* ---- the industries index — static ruled type, not a marquee (WCAG 2.2.2) -- */
.index{border-bottom:1px solid var(--line-1);display:flex;align-items:stretch;
  padding-inline:var(--mx)}
.index__label{flex:none;display:flex;align-items:center;
  padding:var(--sp-5) var(--sp-6) var(--sp-5) 0;border-right:1px solid var(--line-1);
  white-space:nowrap}
.index ul{flex:1;min-width:0;list-style:none;display:flex;flex-wrap:wrap;
  align-items:center;column-gap:var(--sp-6);row-gap:var(--sp-2);
  padding:var(--sp-5) 0 var(--sp-5) var(--sp-6)}
.index li{display:inline-flex;align-items:center;gap:var(--sp-6);
  font-size:var(--fs-0);letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}
.index li::after{content:"";width:4px;height:4px;background:var(--line-3);
  transform:rotate(45deg)}
.index li:last-child::after{display:none}

/* ============================================================================
   CH 01 — THE STANDARD (the turn, then the oath)
   The hinge of the whole page. The turn is set at 2–3x body scale across the
   full band; the oath below it is the largest non-hero setting on the site
   and runs the full width — one viewport, one frame, the one a reader
   remembers.
   ============================================================================ */
.turn{margin-top:var(--sp-8);position:relative;z-index:1;
  font-size:clamp(1.25rem,1rem + 1.15vw,3rem);line-height:1.42;
  font-weight:250;letter-spacing:-.004em;color:var(--ink-2);
  text-wrap:pretty}
/* the oath — the only serif on the site, and the only time this voice speaks */
.oath{margin-top:var(--sp-9);position:relative;z-index:1}
.oath::before{content:"";display:block;width:var(--sp-9);height:1px;
  background:var(--line-3);margin-bottom:var(--sp-7)}
.oath p{font-family:var(--font-s);font-style:italic;font-weight:300;
  font-size:clamp(2.4rem,calc((100vw - var(--tower-w) - 2 * var(--mx)) / 15),10.4rem);
  line-height:1.14;letter-spacing:.005em;
  color:var(--ink-1);text-wrap:balance}

/* ============================================================================
   CH 02 — SERVICE CARDS (instrument tiles)
   ============================================================================ */
.tiles{margin-top:var(--sp-9);position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gut)}
.tile{position:relative;display:flex;flex-direction:column;
  background:var(--ground-2);border:1px solid var(--line-1);border-radius:var(--r-1);
  box-shadow:var(--edge);
  padding:var(--sp-6) var(--sp-6) var(--sp-5);
  transition:border-color var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease)}
.tile:hover{border-color:var(--line-2);background:var(--ground-3)}
/* registration-mark corners */
.tile::before,.tile::after{content:"";position:absolute;width:14px;height:14px;
  pointer-events:none}
.tile::before{top:-1px;left:-1px;border-top:1px solid var(--line-3);
  border-left:1px solid var(--line-3)}
.tile::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--line-3);
  border-right:1px solid var(--line-3)}
/* engraved index numeral — decorative, drawn from data-n (ink-ghost is not a
   readable-text token, so it must never be a text node) */
.tile__no::before{content:attr(data-n);
  font-family:var(--font-t);font-weight:200;line-height:1;
  font-size:clamp(2.2rem,1.6rem + 1.2vw,3.6rem);color:var(--ink-ghost-2)}
.tile h3{margin-top:var(--sp-5);font-size:var(--fs-h4);font-weight:350;
  line-height:1.2;letter-spacing:-.006em;color:var(--ink-1)}
.tile p{margin-top:var(--sp-4);font-size:var(--fs-0);line-height:1.65;color:var(--ink-2)}
.tile__cta{margin-top:auto;padding-top:var(--sp-5);
  display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;
  font-family:var(--font-t);font-size:var(--fs-cap);letter-spacing:var(--track-cap);
  text-transform:uppercase;color:var(--ink-3);
  transition:color var(--dur-ui) var(--ease)}
.tile__cta .ic{transition:transform var(--dur-ui) var(--ease)}
.tile:hover .tile__cta{color:var(--ink-1)}
.tile:hover .tile__cta .ic{transform:translateX(4px)}

/* ============================================================================
   CH 03 — PROCESS STEPS (the drive shaft)
   ============================================================================ */
.mech{margin-top:var(--sp-9);position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 var(--gut);padding-top:var(--sp-6)}
.mech::before{content:"";position:absolute;top:3px;left:0;right:0;height:1px;
  background:var(--line-2)}
.step{position:relative;padding:var(--sp-7) var(--sp-2) 0 0}
.step::before{content:"";position:absolute;top:0;left:0;width:7px;height:7px;
  background:var(--ground-0);border:1px solid var(--line-3);transform:rotate(45deg);
  transition:border-color var(--dur-ui) var(--ease)}
.step:hover::before{border-color:var(--ink-3)}
.step__no::before{content:attr(data-n);
  font-family:var(--font-t);font-weight:200;line-height:1;
  font-size:clamp(2.6rem,2rem + 1.6vw,4.8rem);color:var(--ink-ghost-2)}
.step h3{margin-top:var(--sp-5);font-size:var(--fs-h4);font-weight:350;
  line-height:1.15;letter-spacing:-.006em;color:var(--ink-1)}
.step p{margin-top:var(--sp-4);font-size:var(--fs-0);line-height:1.65;
  color:var(--ink-2);max-width:40ch}

/* ============================================================================
   CH 04 — THE TIMING SHEET (case studies · charts · benchmarks)
   ============================================================================ */
.case{margin-top:var(--sp-10);position:relative;z-index:1;
  border-top:1px solid var(--line-2);padding-top:var(--sp-7)}
.case__tag{display:inline-block;padding:var(--sp-2) var(--sp-4);
  border:1px solid var(--line-2);border-radius:var(--r-1);
  font-family:var(--font-t);font-size:var(--fs-cap);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.case h3{margin-top:var(--sp-5);max-width:38ch;
  font-size:var(--fs-h3);font-weight:300;line-height:1.2;letter-spacing:-.01em;
  color:var(--ink-1)}
/* the three-up — one of the two layouts that justify the width */
.case__cols{margin-top:var(--sp-8);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.case__col h4{padding-bottom:var(--sp-3);border-bottom:1px solid var(--line-1);
  display:flex;align-items:baseline;gap:var(--sp-3);
  font-family:var(--font-t);font-size:var(--fs-cap);font-weight:400;
  letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3)}
.case__col p{margin-top:var(--sp-4);font-size:var(--fs-0);line-height:1.7;
  max-width:66ch;color:var(--ink-2)}
/* case metrics — figures simply ARE their values; nothing here animates */
.case__deltas{margin-top:var(--sp-8);border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.delta{padding:var(--sp-6) var(--sp-6) 0;border-left:1px solid var(--line-1);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.delta:first-child{border-left:0;padding-left:0}
.delta__v{font-family:var(--font-t);font-size:var(--fs-stat);font-weight:300;
  line-height:1;color:var(--ink-1);font-variant-numeric:tabular-nums}

/* ---- the measured chart — drawn true, labelled axes, stated scale ----
   Geometry lives in the SVG; every label and data point is HTML positioned
   over the plot, so type renders at real size at every viewport instead of
   scaling down with the viewBox (an 11px SVG label painted at 3px on a
   phone). The plot can therefore change aspect on a phone without the
   lettering stretching; strokes are non-scaling.                              */
.chart{margin-top:var(--sp-8);border:1px solid var(--line-1);border-radius:var(--r-1);
  background:var(--ground-1);padding:var(--sp-5) var(--sp-6) var(--sp-5)}
.chart figcaption{display:flex;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-5)}
.chart{color:var(--ink-3)}
.chart__plot{position:relative;aspect-ratio:1200/320}
.chart__plot svg{position:absolute;inset:0;width:100%;height:100%}
.chart__lbl{position:absolute;left:var(--x);top:var(--y);transform:translateY(-50%);
  font-family:var(--font-t);font-size:var(--fs-cap);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;line-height:1}
.chart__lbl--end{transform:translate(-100%,-50%)}
.chart__pt{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;
  border-radius:50%;background:var(--ink-1);transform:translate(-50%,-50%)}
.chart .axis{stroke:var(--line-2)}
.chart .gridline{stroke:var(--line-1)}
.chart .series{stroke:var(--ink-2);stroke-width:2;fill:none}
@media (max-width:719px){ .chart__plot{aspect-ratio:6/5} }

/* ---- benchmarks — a ruled table with dotted leaders. Three different units,
   so NO bars: no bar is drawn unless it is proportional within a stated scale */
.bench{margin-top:calc(var(--sec-pad) * .6);
  padding:var(--sp-9) var(--mx);
  background:var(--ground-1);
  border-top:1px solid var(--line-1);border-bottom:1px solid var(--line-1)}
.bench :is(h2,h3){margin-top:var(--sp-5);font-size:clamp(1.7rem,1rem + 1.9vw,4.2rem);
  font-weight:200;line-height:1.05;letter-spacing:-.01em;color:var(--ink-1)}
.bench__desc{margin-top:var(--sp-5);max-width:70ch;font-size:var(--fs-0);
  color:var(--ink-2)}
.bench__rows{margin-top:var(--sp-8);list-style:none}
.bench__rows li{display:flex;align-items:baseline;gap:var(--sp-6);
  padding-block:var(--sp-5);border-bottom:1px solid var(--line-2)}
.bench__rows li:first-child{border-top:1px solid var(--line-3)}
/* on very wide screens the six benchmarks fold into two ledger columns, so a
   dotted leader never has to bridge 2,400px to reach a two-character figure  */
@media (min-width:1441px){
  .bench__rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(64px,7vw,220px)}
  .bench__rows li:nth-child(-n+2){border-top:1px solid var(--line-3)}
  .bench__rows li:first-child{border-top:1px solid var(--line-3)}
}
.bench__label{flex:none;font-size:var(--fs-1);color:var(--ink-2)}
.bench__lead{flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-.35em)}
.bench__val{flex:none;font-family:var(--font-t);font-weight:400;
  font-size:clamp(1.4rem,1rem + .9vw,2.6rem);line-height:1;
  color:var(--ink-1);font-variant-numeric:tabular-nums}

/* ============================================================================
   CH 05 — TESTIMONIAL LETTERS
   ============================================================================ */
/* the witnesses speak in the ruled-column idiom, not in bordered cards — the
   quotes carry a real voice (1.5x body, ink-1) instead of body-copy scale     */
.letters{margin-top:var(--sp-9);position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-7) clamp(32px,3vw,96px)}
.letter{display:flex;flex-direction:column;
  border-top:1px solid var(--line-2);padding-top:var(--sp-6)}
.letter blockquote{font-size:var(--fs-h4);font-weight:300;line-height:1.5;
  letter-spacing:-.004em;color:var(--ink-1);text-wrap:pretty}
.letter footer{margin-top:auto;padding-top:var(--sp-6);
  display:flex;align-items:center;gap:var(--sp-4)}
.letter__mark{flex:none;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:var(--r-1);
  font-family:var(--font-t);font-size:var(--fs-cap);letter-spacing:.1em;
  color:var(--ink-3)}
.letter__who b{display:block;font-weight:500;font-size:var(--fs-0);color:var(--ink-1)}
.letter__who span{display:block;margin-top:2px;
  font-family:var(--font-t);font-size:var(--fs-cap);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}

/* ============================================================================
   CH 06 — THE INVITATION (closing CTA + hallmark)
   ============================================================================ */
/* the eyebrow travels with its headline (the h2's own --sp-7 is the same
   49px every other chapter uses); the hallmark bottom-aligns so the seal
   stamps the action, not the headline                                         */
.invite{position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-8);align-items:end}
.invite__cta{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.seal{width:clamp(200px,19vw,400px);color:var(--ink-3);opacity:.9}
.seal img,.seal svg{width:100%;height:auto}

/* ============================================================================
   THE FORM (contact page) — the FormSubmit contract is preserved verbatim
   ============================================================================ */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-6) var(--gut)}
.form__row{display:flex;flex-direction:column;gap:var(--sp-3)}
.form__row--full{grid-column:1 / -1}
.form label{font-family:var(--font-t);font-size:var(--fs-cap);
  letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3)}
.form input,.form select,.form textarea{
  min-height:52px;padding:var(--sp-3) var(--sp-4);
  font-family:var(--font-d);font-size:var(--fs-1);font-weight:300;color:var(--ink-1);
  background:var(--field-bg);border:1px solid var(--field-line);
  border-radius:var(--r-1);
  transition:border-color var(--dur-ui) var(--ease)}
.form textarea{min-height:10em;resize:vertical;line-height:1.6}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--line-3)}
.form select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5' fill='none' stroke='%238B93A0' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--sp-4) center;
  background-size:16px;padding-right:var(--sp-8)}
.form ::placeholder{color:var(--ink-3);opacity:1}
/* the honeypot must exist and must never be seen */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================================
   FAQ DISCLOSURE — finished and open without JS; JS folds it into an accordion
   ============================================================================ */
.faq{border-top:1px solid var(--line-2)}
.faq__item{border-bottom:1px solid var(--line-1)}
.faq__q{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-5);width:100%;min-height:64px;padding-block:var(--sp-4);
  text-align:left;font-size:var(--fs-h4);font-weight:350;color:var(--ink-1);
  transition:color var(--dur-ui) var(--ease)}
.faq__q:hover{color:var(--ink-2)}
.faq__q .x{flex:none;position:relative;width:16px;height:16px}
.faq__q .x::before,.faq__q .x::after{content:"";position:absolute;background:var(--ink-3)}
.faq__q .x::before{left:0;right:0;top:7px;height:1px}
.faq__q .x::after{top:0;bottom:0;left:7px;width:1px;
  transition:transform var(--dur-ui) var(--ease)}
.faq__q[aria-expanded="true"] .x::after{transform:scaleY(0)}
.faq__a{padding:0 0 var(--sp-6);max-width:var(--measure);
  font-size:var(--fs-1);line-height:1.65;color:var(--ink-2)}
.faq__a[hidden]{display:none}

/* ============================================================================
   LEGAL-DOCUMENT TYPOGRAPHY (privacy · terms · cookies — on paper)
   ============================================================================ */
.doc{max-width:var(--measure);padding-block:var(--sp-8) var(--sec-pad)}
.doc h1{font-size:clamp(2.2rem,1.6rem + 2.4vw,5.4rem);font-weight:200;
  line-height:.95;letter-spacing:var(--track-display);color:var(--ink-1)}
.doc h2{margin-top:var(--sp-8);padding-top:var(--sp-6);
  border-top:1px solid var(--line-2);
  font-size:var(--fs-h3);font-weight:300;line-height:1.15;color:var(--ink-1)}
.doc h3{margin-top:var(--sp-6);font-size:var(--fs-h4);font-weight:400;
  color:var(--ink-1)}
.doc p{margin-top:var(--sp-4);line-height:1.7}
.doc ul,.doc ol{margin-top:var(--sp-4);padding-left:1.4em}
.doc li{margin-top:var(--sp-2);line-height:1.65}
.doc li::marker{color:var(--ink-3)}
.doc a{color:var(--ink-1);border-bottom:1px solid var(--line-3)}
.doc a:hover{border-bottom-color:var(--ink-1)}
.doc__meta{margin-top:var(--sp-5)}

/* ============================================================================
   FOOTER — the colophon
   ============================================================================ */
.ft{position:relative;z-index:1;border-top:1px solid var(--line-1);
  padding-top:var(--sp-9)}
.ft__grid{display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:var(--sp-8) var(--gut)}
.ft__brand p{margin-top:var(--sp-5);max-width:52ch;font-size:var(--fs-0);
  color:var(--ink-3)}
.ft__col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.ft__col .cap{margin-bottom:var(--sp-3)}
.ft__col a{display:inline-flex;align-items:center;gap:var(--sp-3);
  min-height:44px;min-width:44px;
  font-size:var(--fs-0);color:var(--ink-2);
  border-bottom:1px solid transparent;
  transition:color var(--dur-ui) var(--ease)}
.ft__col a:hover{color:var(--ink-1);border-bottom-color:var(--line-3)}
.ft__legal{margin-top:var(--sp-9);border-top:1px solid var(--line-1);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3) var(--sp-6);flex-wrap:wrap;
  padding-block:var(--sp-5);padding-inline:var(--bleed-pad)}
.ft__legal p,.ft__legal a{font-family:var(--font-t);font-size:var(--fs-cap);
  letter-spacing:.1em;color:var(--ink-3)}
.ft__legal nav{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.ft__legal a{display:inline-flex;align-items:center;min-height:44px}
.ft__legal a:hover{color:var(--ink-1)}

/* ============================================================================
   MOTION — opt-in only; the resting state is fully visible.
   One curve. Three durations. Opacity + ≤72px translate. Nothing loops.
   ============================================================================ */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:.001;transform:translate3d(0,24px,0);
    transition:opacity var(--dur-move) var(--ease),transform var(--dur-move) var(--ease);
    transition-delay:calc(min(var(--i,0),5) * 70ms)}
  .js .reveal.is-in{opacity:1;transform:none}
  /* masked line-rise — the mask exists only where the motion does;
     .12em of descender room is folded inside the clip box. The clip and the
     translate live or die together: without the @supports guard, a browser
     lacking overflow:clip would drop the mask but keep the 118% offset and
     stack every masked headline on its neighbour until the observer fires.   */
  @supports (overflow:clip){
    .js .rise .rise__l{overflow:clip;padding-bottom:.12em;margin-bottom:-.12em}
    .js .rise .rise__i{transform:translate3d(0,118%,0)}
    .js .rise.is-in .rise__i{transform:none;
      transition:transform var(--dur-arrive) var(--ease);
      transition-delay:calc(var(--i,0) * 90ms)}
  }
  /* NO global scroll-behavior:smooth — it would also animate every
     programmatic scrollTo (breaking measurement and restore-scroll).
     Anchor clicks get smooth scrolling in site.js, reduced-motion guarded. */
}
.rise__l{display:block}
.rise__i{display:block}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================================
   BREAKPOINTS — designed at 3440, reflowed down
   ============================================================================ */
@media (max-width:1440px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .letters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__body{grid-template-columns:minmax(0,1fr)}
  .plate{grid-column:1;justify-self:start;margin-top:var(--sp-8)}
}
@media (max-width:1024px){
  .hd__nav,.hd .btn--red{display:none}
  .js .hd__menu{display:inline-flex}
  /* no-JS fallback: the nav stays visible, wrapped to a second row */
  html:not(.js) .hd{height:auto;flex-wrap:wrap;padding-block:var(--sp-3);
    position:sticky}
  /* wrap, never scroll: an overflow strip pushed Contact off the right edge
     at ≤460px — the exact failure spec §2.20 forbids by name                  */
  html:not(.js) .hd__nav{display:flex;order:3;width:100%;margin-left:0;
    flex-wrap:wrap;padding-bottom:var(--sp-1)}
  html:not(.js) main{padding-top:0}
  .mech{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-8);
    padding-top:0;padding-left:var(--sp-5)}
  .mech::before{top:0;bottom:0;left:3px;right:auto;width:1px;height:auto}
  .step{padding:0 0 0 var(--sp-5)}
  .step::before{top:6px;left:calc(-1 * var(--sp-5) - 3px)}
  .case__cols{grid-template-columns:minmax(0,1fr)}
  .case__deltas{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-6)}
  .delta:nth-child(3){border-left:0;padding-left:0}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip__cell{border-top:1px solid var(--line-1)}
  .strip__cell:nth-child(-n+2){border-top:0}
  .strip__cell:nth-child(3){border-left:0;padding-left:0}
  .invite{grid-template-columns:minmax(0,1fr)}
  .ft__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:719px){
  .tiles,.letters{grid-template-columns:minmax(0,1fr)}
  /* every CTA goes full width on a phone — a long label inside a nowrap
     button (services' "Book a Free Consultation") overflowed a 320px screen  */
  .hero__cta .btn,.invite__cta .btn,.form .btn{width:100%}
  .index{flex-direction:column;align-items:stretch}
  .index__label{border-right:0;border-bottom:1px solid var(--line-1);
    padding:var(--sp-4) 0}
  .index ul{padding-left:0}
  /* a long engraved label ("Search Engine Optimization") must wrap on the
     narrowest screens rather than push the page wider                        */
  .chrule__name{white-space:normal;flex:0 1 auto;min-width:0;text-align:right}
  .bench__rows li{flex-wrap:wrap;gap:var(--sp-3)}
  .bench__lead{display:none}
  .bench__val{margin-left:auto}
  .ft__grid{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================================
   ABOUT PAGE (about.html) — page-scoped additions only.
   Everything below is gated on body.pg-about, so no other page can be
   affected; no rule above this line is modified. Tokens and component idiom
   are reused from the system — nothing here invents a second design language.
   ============================================================================ */
/* interior pages carry no timing tower — the rail width is opted IN by
   body.pg-home at the token layer, so nothing needs zeroing here             */

/* hero — the provenance arrival; the homepage H1 recipe with a divisor that
   fits this page's longer line ("The People and Principles", 25 characters)  */
.pg-about .abt-hero h1{
  margin-top:var(--sp-6);
  font-size:clamp(2.6rem,calc((100vw - var(--tower-w) - 2 * var(--mx)) / 13.8),13.4rem);
  font-weight:200;line-height:var(--lh-display);letter-spacing:var(--track-display);
  color:var(--ink-1);
}
.pg-about .abt-lede{margin-top:var(--sp-7);max-width:62ch;
  font-size:var(--fs-lead);line-height:1.55;position:relative;z-index:1}

/* a toned chapter — the about page keeps the original's band alternation     */
.pg-about .chapter--tone{background:var(--ground-1)}

/* CH 01 · the origin — four ruled columns, one per paragraph of the story;
   the paragraphs are chronological, so the engraved ordinals are honest      */
.pg-about .abt-story{margin-top:var(--sp-9);position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-7) var(--gut)}
.pg-about .abt-story > div{border-top:1px solid var(--line-2);padding-top:var(--sp-5)}
.pg-about .abt-story p{margin-top:var(--sp-4);font-size:var(--fs-0);
  line-height:1.7;max-width:56ch;color:var(--ink-2)}
@media (max-width:1440px){
  .pg-about .abt-story{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:719px){
  .pg-about .abt-story{grid-template-columns:minmax(0,1fr)}
}

/* CH 02 · the mission — the truth as the lead voice, the answer beside it    */
.pg-about .abt-mission{margin-top:var(--sp-9);position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-7) var(--sp-9);align-items:start}
.pg-about .abt-mission__lead{font-size:var(--fs-lead);line-height:1.6;
  max-width:52ch;color:var(--ink-2)}
.pg-about .abt-mission__rest p{max-width:66ch;line-height:1.7;color:var(--ink-2)}
.pg-about .abt-mission__rest p + p{margin-top:var(--sp-5)}
@media (max-width:1024px){
  .pg-about .abt-mission{grid-template-columns:minmax(0,1fr)}
}

/* CH 03 · the chronology — the page's structural spine. Five stations on one
   calibrated rail (the .mech drive-shaft idiom, extended to five years);
   below 1681px the rail turns vertical and the years read as a ledger        */
.pg-about .tl{margin-top:var(--sp-9);position:relative;z-index:1;list-style:none;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0 var(--gut);padding-top:var(--sp-6)}
.pg-about .tl::before{content:"";position:absolute;top:3px;left:0;right:0;
  height:1px;background:var(--line-2)}
.pg-about .tl__item{position:relative;padding:var(--sp-7) var(--sp-2) 0 0}
.pg-about .tl__item::before{content:"";position:absolute;top:0;left:0;
  width:7px;height:7px;background:var(--ground-0);border:1px solid var(--line-3);
  transform:rotate(45deg);transition:border-color var(--dur-ui) var(--ease)}
.pg-about .tl__item:hover::before{border-color:var(--ink-3)}
.pg-about .tl__year{font-family:var(--font-t);font-weight:300;line-height:1;
  font-size:clamp(1.4rem,1rem + .9vw,2.6rem);color:var(--ink-1);
  font-variant-numeric:tabular-nums}
.pg-about .tl__item h3{margin-top:var(--sp-5);font-size:var(--fs-h4);
  font-weight:350;line-height:1.15;letter-spacing:-.006em;color:var(--ink-1)}
.pg-about .tl__item p{margin-top:var(--sp-4);font-size:var(--fs-0);
  line-height:1.65;max-width:44ch;color:var(--ink-2)}
@media (max-width:1680px){
  .pg-about .tl{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-8);
    padding-top:0;padding-left:var(--sp-5)}
  .pg-about .tl::before{top:0;bottom:0;left:3px;right:auto;width:1px;height:auto}
  .pg-about .tl__item{padding:0 0 0 var(--sp-5);
    display:grid;grid-template-columns:minmax(150px,260px) minmax(0,1fr);
    column-gap:var(--sp-8)}
  .pg-about .tl__item::before{top:6px;left:calc(-1 * var(--sp-5) - 3px)}
  .pg-about .tl__year{grid-column:1;grid-row:1 / span 2}
  .pg-about .tl__item h3{grid-column:2;grid-row:1;margin-top:0}
  .pg-about .tl__item p{grid-column:2;grid-row:2;max-width:66ch}
}
@media (max-width:719px){
  .pg-about .tl__item{grid-template-columns:minmax(0,1fr)}
  .pg-about .tl__year{grid-row:1}
  .pg-about .tl__item h3{grid-column:1;grid-row:2;margin-top:var(--sp-5)}
  .pg-about .tl__item p{grid-column:1;grid-row:3}
}
/* the invitation headline balances its wrap inside the grid column */
.pg-about .invite h2{text-wrap:balance}

/* CH 04 · the principles — the six values ride the instrument tiles; the
   emoji of the original are replaced by the one hairline icon language       */
.pg-about .tile__mark{width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:var(--r-1);color:var(--ink-3);
  transition:color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease)}
.pg-about .tile__mark .ic{width:22px;height:22px}
.pg-about .tile:hover .tile__mark{color:var(--ink-1);border-color:var(--line-3)}

/* CH 05 · the difference — three ruled columns, the claim set as the lead    */
.pg-about .abt-diff{margin-top:var(--sp-8);position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-7) var(--gut)}
.pg-about .abt-diff > div{border-top:1px solid var(--line-2);padding-top:var(--sp-5)}
.pg-about .abt-diff p{font-size:var(--fs-0);line-height:1.7;max-width:60ch;
  color:var(--ink-2)}
.pg-about .abt-diff strong{display:block;margin-bottom:var(--sp-4);
  font-size:var(--fs-h4);font-weight:350;line-height:1.25;
  letter-spacing:-.006em;color:var(--ink-1)}
@media (max-width:1024px){
  .pg-about .abt-diff{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================================
   CONTACT PAGE ONLY (contact.html) — every rule scoped to a .cx-* class so
   nothing here can reach another page. Tokens and components above are used
   as-is; this block only arranges them for the invitation page.
   ============================================================================ */
/* the page h1 — same available-width formula the hero uses */
.cx-hero h1{
  margin-top:var(--sp-6);
  font-size:clamp(2.7rem,calc((100vw - var(--tower-w) - 2 * var(--mx)) / 12.6),14.6rem);
  font-weight:200;line-height:var(--lh-display);letter-spacing:var(--track-display);
  color:var(--ink-1);text-wrap:balance;
}
/* the headline spans the full band; the plate sits beside the lede only —
   sharing the H1's row is the wrap trap index already hit at 1920 */
.cx-hero__body{display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:var(--sp-8);align-items:start}
.cx-hero__head{grid-column:1 / -1}
.cx-hero__main{grid-column:1}
.cx-hero__body .plate{margin-top:var(--sp-7)}
@media (max-width:1440px){
  .cx-hero__body{grid-template-columns:minmax(0,1fr)}
  .cx-hero__body .plate{grid-column:1;justify-self:start}
}
/* the exchange — info rail beside the form, the layout that earns the width */
.cx-grid{margin-top:var(--sp-9);position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:var(--sp-8) clamp(48px,4vw,136px);align-items:start}
.cx-side{position:sticky;top:calc(var(--header-h) + var(--sp-6));
  display:flex;flex-direction:column;gap:var(--gut)}
/* a pinned rail taller than the viewport could never show its tail —
   short laptop viewports scroll it instead                                    */
@media (min-width:1441px){
  .cx-side{max-height:calc(100vh - var(--header-h) - var(--sp-6));overflow:auto}
}
.cx-side .cap--tick{margin-bottom:var(--sp-3)}
/* the two info plates — same material as the instrument tiles */
.cx-card{position:relative;background:var(--ground-2);
  border:1px solid var(--line-1);border-radius:var(--r-1);box-shadow:var(--edge);
  padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}
.cx-card::before,.cx-card::after{content:"";position:absolute;width:14px;height:14px;
  pointer-events:none}
.cx-card::before{top:-1px;left:-1px;border-top:1px solid var(--line-3);
  border-left:1px solid var(--line-3)}
.cx-card::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--line-3);
  border-right:1px solid var(--line-3)}
.cx-card__ic{width:24px;height:24px;color:var(--ink-3)}
.cx-card__v{font-size:var(--fs-h4);font-weight:300;line-height:1.4;
  color:var(--ink-1)}
.cx-card__v a{border-bottom:1px solid var(--line-3);
  transition:border-color var(--dur-ui) var(--ease)}
.cx-card__v a:hover{border-bottom-color:var(--ink-1)}
/* the hallmark, small, closing the rail */
.cx-seal{margin-top:var(--sp-5);width:clamp(140px,11vw,220px);
  color:var(--ink-3);opacity:.9;align-self:flex-start}
.cx-seal img{width:100%;height:auto}
/* the form panel — one instrument plate carrying the whole contract */
.cx-panel{position:relative;background:var(--ground-1);
  border:1px solid var(--line-1);border-radius:var(--r-1);box-shadow:var(--edge);
  padding:clamp(24px,2.4vw,72px)}
.cx-panel::before,.cx-panel::after{content:"";position:absolute;width:14px;height:14px;
  pointer-events:none}
.cx-panel::before{top:-1px;left:-1px;border-top:1px solid var(--line-3);
  border-left:1px solid var(--line-3)}
.cx-panel::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--line-3);
  border-right:1px solid var(--line-3)}
.cx-panel h2{margin-top:0;
  font-size:clamp(1.9rem,1.3rem + 1.5vw,3.9rem);
  font-weight:200;line-height:1.02;letter-spacing:var(--track-display);
  color:var(--ink-1)}
.cx-panel__note{margin-top:var(--sp-4);margin-bottom:var(--sp-7);max-width:64ch;
  font-size:var(--fs-0);color:var(--ink-2)}
.cx-panel .form .btn{align-self:flex-start}
/* the briefing — sticky head beside the six disclosures */
.cx-faq{margin-top:var(--sp-9);position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:var(--sp-8) clamp(48px,4vw,136px);align-items:start}
.cx-faq__head{position:sticky;top:calc(var(--header-h) + var(--sp-6))}
@media (max-width:1440px){
  .cx-grid,.cx-faq{grid-template-columns:minmax(0,1fr)}
  .cx-faq__head{position:static}
  .cx-side{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-side .cap--tick,.cx-seal{grid-column:1 / -1}
}
@media (max-width:719px){
  .cx-side{grid-template-columns:minmax(0,1fr)}
  .cx-panel .form .btn{align-self:stretch}
}

/* ============================================================================
   RESULTS PAGE APPENDIX — scoped to .pg-results (results.html build).
   Sole addition: the interior page hero is an <h1>, which the tag-scoped
   `.chapter h2` display rule cannot reach. Same formula shape as the
   homepage hero (BUILD-SPEC §2.4, shipped divisor /12.6). Nothing global.
   ============================================================================ */
.pg-results h1{
  margin-top:var(--sp-6);position:relative;z-index:1;
  font-size:clamp(2.7rem,calc((100vw - var(--tower-w) - 2 * var(--mx)) / 12.6),14.6rem);
  font-weight:200;line-height:var(--lh-display);letter-spacing:var(--track-display);
  color:var(--ink-1);text-wrap:balance;
}
/* The footer reuses the header's wordmark markup, but the footer sits on the
   page ground — on a paper page its --white-* primitives land on paper
   (1.01:1 / 2.77:1, caught by qa/contrast.py). Re-ink it with semantic tokens,
   page-scoped. NOTE for the legal-page builds: any <body data-theme="paper">
   page has this same footer-wordmark failure — add your own page scope.      */
.pg-results .ft .hd__logo{color:var(--ink-1)}
.pg-results .ft .hd__logo b i{color:var(--ink-3)}
.pg-results .ft .hd__logo::after{background:var(--ink-3)}

/* ============================================================================
   SERVICES PAGE APPENDIX — scoped to .pg-services (services.html build).
   The seven units of the machine: a text column and, where the seven stock
   photographs used to sit, the engraved spec sheet — the service's numeral
   plus its eight deliverables on ruled lines. Nothing here reaches any other
   page: every rule is fenced behind body.pg-services.
   ============================================================================ */
/* interior page hero — an <h1>, same formula shape as the homepage hero
   (BUILD-SPEC §2.4, shipped divisor /12.6)                                    */
.pg-services .svcs-hero h1{
  margin-top:var(--sp-6);position:relative;z-index:1;
  font-size:clamp(2.7rem,calc((100vw - var(--tower-w) - 2 * var(--mx)) / 12.6),14.6rem);
  font-weight:200;line-height:var(--lh-display);letter-spacing:var(--track-display);
  color:var(--ink-1);text-wrap:balance;
}
.pg-services .svcs-hero__sub{margin-top:var(--sp-7);max-width:62ch;
  font-size:var(--fs-lead);line-height:1.55}
/* the unit index — the industries-index band carrying anchor links; each
   target is a full-height ≥44px hit area                                      */
.pg-services .svcindex{margin-top:var(--sp-9)}
.pg-services .svcindex a{display:inline-flex;align-items:center;gap:var(--sp-3);
  min-height:44px;color:var(--ink-3);
  border-bottom:1px solid transparent;
  transition:color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease)}
.pg-services .svcindex a:hover{color:var(--ink-1);border-bottom-color:var(--line-3)}
.pg-services .svcindex a .n{font-family:var(--font-t);font-size:var(--fs-cap);
  letter-spacing:.1em;color:inherit}
/* the unit grid — text column against the spec sheet; even units mirror so
   the page alternates like facing spreads on an ultrawide                     */
.pg-services .svc__grid{margin-top:var(--sp-8);position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:var(--sp-8) clamp(var(--sp-8),3.2vw + 16px,160px);align-items:start}
.pg-services .svc h2{margin-top:0;
  font-size:clamp(2rem,calc((100vw - var(--tower-w) - 2 * var(--mx)) / 20),7rem);
  text-wrap:balance}
.pg-services .svc__text p{margin-top:var(--sp-5);max-width:70ch;
  font-size:var(--fs-1);line-height:1.7;color:var(--ink-2)}
.pg-services .svc__text h2 + p{margin-top:var(--sp-6)}
/* the page's scale system is two-tier by intent: the seven service titles are
   the second tier, and the closing CTA joins them so services reads as one
   system rather than setting its own subject smaller than its footer         */
.pg-services .invite h2{
  font-size:clamp(2rem,calc((100vw - var(--tower-w) - 2 * var(--mx)) / 20),7rem)}
@media (min-width:1025px){
  .pg-services .svc--flip .svc__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .pg-services .svc--flip .svc__text{order:2}
  .pg-services .svc--flip .sheet{order:1}
}
/* the engraved spec sheet — the data plate's material at instrument scale:
   corner rivets, flanked header, ghost numeral, eight ruled deliverable rows  */
.pg-services .sheet{position:relative;
  background:var(--ground-1);border:1px solid var(--line-2);border-radius:var(--r-1);
  box-shadow:var(--edge),var(--el-1);
  padding:var(--sp-6) var(--sp-7) var(--sp-7)}
.pg-services .sheet::before,.pg-services .sheet::after{content:"";position:absolute;
  width:4px;height:4px;border-radius:50%;background:var(--line-3)}
.pg-services .sheet::before{top:8px;left:8px}
.pg-services .sheet::after{bottom:8px;right:8px}
.pg-services .sheet__hd{display:flex;align-items:center;gap:var(--sp-3)}
.pg-services .sheet__hd::before,.pg-services .sheet__hd::after{content:"";height:1px;
  background:var(--line-2);flex:1}
/* the service numeral, engraved into the plate — decorative, drawn from
   data-n (ink-ghost-2 is not a readable-text token, so never a text node)     */
.pg-services .sheet__no{display:block;margin-top:var(--sp-5);line-height:1}
.pg-services .sheet__no::before{content:attr(data-n);
  font-family:var(--font-t);font-weight:200;line-height:.8;
  font-size:clamp(4rem,2.6rem + 3.4vw,9.5rem);color:var(--ink-ghost-2);
  letter-spacing:-.04em}
.pg-services .sheet__rows{list-style:none;margin-top:var(--sp-6)}
.pg-services .sheet__rows li{display:flex;align-items:baseline;gap:var(--sp-5);
  padding-block:var(--sp-4);border-bottom:1px solid var(--line-1);
  font-family:var(--font-t);font-size:var(--fs-0);font-weight:400;
  letter-spacing:.04em;color:var(--ink-1)}
.pg-services .sheet__rows li:first-child{border-top:1px solid var(--line-2)}
.pg-services .sheet__lead{flex:1;border-bottom:1px dotted var(--line-2);
  transform:translateY(-.35em)}
.pg-services .sheet__tick{flex:none;width:7px;height:7px;align-self:center;
  border:1px solid var(--line-3);transform:rotate(45deg)}
@media (max-width:1024px){
  .pg-services .svc__grid{grid-template-columns:minmax(0,1fr)}
  .pg-services .sheet{padding:var(--sp-6) var(--sp-6) var(--sp-7)}
}

/* ============================================================================
   LEGAL RECORD PAGES APPENDIX — scoped to .pg-doc (privacy-policy.html,
   terms-of-service.html, cookie-policy.html — all <body data-theme="paper">).
   The three policies are set as a printed ledger: document head (title left,
   preamble right), a ruled full-width contents index, then one ruled row per
   numbered clause — display-scale heading left, measure-capped prose right,
   hairline rules edge to edge. No marketing furniture, no accent use.
   Nothing here reaches any other page: every rule is fenced behind body.pg-doc.
   ============================================================================ */
/* document head — identity left, preamble right; the row spans the band       */
.pg-doc .dochead{margin-top:var(--sp-8);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--measure));
  column-gap:clamp(48px,6vw,220px);row-gap:var(--sp-7);align-items:end}
/* document title — a real document type scale, not the marketing hero        */
.pg-doc h1{margin-top:var(--sp-5);
  font-size:clamp(2.4rem,1.6rem + 2.6vw,6.4rem);font-weight:200;
  line-height:.95;letter-spacing:var(--track-display);color:var(--ink-1);
  text-wrap:balance}
.pg-doc .dochead__meta{margin-top:var(--sp-5)}
/* the sheet supplies its own rhythm — the shared .doc block-padding is not
   wanted inside a ledger row (additive page-scoped override, no shared rule
   is edited)                                                                  */
.pg-doc .doc{padding-block:0}
.pg-doc .doc > :first-child{margin-top:0}
/* contents — the index of clauses, ruled, spanning the full band              */
.pg-doc .toc{margin-top:var(--sp-8);padding:var(--sp-6) var(--mx) var(--sp-7);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-1)}
.pg-doc .toc ol{list-style:none;margin-top:var(--sp-4);padding-left:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  column-gap:var(--sp-8)}
.pg-doc .toc a{display:flex;align-items:center;min-height:44px;
  font-family:var(--font-t);font-size:var(--fs-0);font-weight:400;
  letter-spacing:.04em;color:var(--ink-2);
  border-bottom:1px solid var(--line-1);
  transition:color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease)}
.pg-doc .toc a:hover{color:var(--ink-1);border-bottom-color:var(--line-3)}
/* the ledger — one ruled row per clause                                       */
.pg-doc .ledger{margin-top:var(--sp-9)}
/* the heading column is sized to the widest heading plus air, not to half the
   band — so the prose sits close under its clause instead of 700px away      */
.pg-doc .lsec{position:relative;scroll-margin-top:calc(var(--header-h) + var(--sp-5));
  display:grid;grid-template-columns:clamp(280px,26vw,900px) minmax(0,var(--measure));
  column-gap:clamp(40px,3.5vw,120px);row-gap:var(--sp-6);
  padding-block:var(--sp-8)}
.pg-doc .lsec::before{content:"";position:absolute;top:0;height:1px;
  left:calc(-1 * var(--mx));right:calc(-1 * var(--mx));background:var(--line-1)}
.pg-doc .lsec__head{align-self:start;min-width:0}
.pg-doc .lsec h2{font-size:clamp(1.6rem,1.1rem + 1.5vw,3.6rem);font-weight:200;
  line-height:1.05;letter-spacing:var(--track-display);color:var(--ink-1);
  text-wrap:balance}
@media (min-width:1025px){
  .pg-doc .lsec__head{position:sticky;top:calc(var(--header-h) + var(--sp-6))}
}
@media (max-width:1024px){
  .pg-doc .dochead,.pg-doc .lsec{grid-template-columns:minmax(0,1fr)}
  .pg-doc .lsec{padding-block:var(--sp-7)}
}
/* the footer reuses the header's wordmark markup; on a paper body its
   --white-* primitives fail contrast (1.01:1) — re-ink, page-scoped
   (same fix .pg-results carries)                                              */
.pg-doc .ft .hd__logo{color:var(--ink-1)}
.pg-doc .ft .hd__logo b i{color:var(--ink-3)}
.pg-doc .ft .hd__logo::after{background:var(--ink-3)}
/* the contents index already rules the ledger's opening edge — a second rule
   on the first clause would draw an empty ruled band between them             */
.pg-doc .ledger > .lsec:first-child::before{display:none}

/* ============================================================================
   THE CHAPTER HEAD BAND — the two-part composition every chapter opens with
   (Direction A's CH 02): eyebrow + display heading anchored LEFT, the lede
   set against the RIGHT end of the same band, bottom-aligned with the
   heading. The head occupies the full working width; below 1400px it
   collapses back to the stacked column. Markup: a .chead wrapper around
   eyebrow / heading / .chead__aside. Heroes use .chead--hero: the H1 keeps
   the full band and the lede rides the eyebrow row instead.
   ============================================================================ */
.chead{position:relative;z-index:1;margin-top:var(--sp-8)}
.chead > :is(h1,h2,h3){margin-top:var(--sp-7)}
.chead .chead__aside{margin:var(--sp-6) 0 0;max-width:56ch}
@media (min-width:1400px){
  .chead{display:grid;align-items:end;
    grid-template-columns:minmax(0,1fr) minmax(0,34rem);
    column-gap:clamp(64px,6vw,220px)}
  .chead > .cap{grid-column:1;grid-row:1;align-self:end}
  .chead > :is(h1,h2,h3){grid-column:1;grid-row:2}
  .chead .chead__aside{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0}
  /* a chapter h2 now lives in the band's left part — sized off that cell so a
     fixed rise line never overflows it */
  .chead > h2{font-size:clamp(2.2rem,calc((100vw - var(--tower-w) - 2 * var(--mx)) / 14.6),7.5rem)}
  /* a head with no lede has nothing to hold the right cell — let the heading
     take the whole band */
  .chead > :is(h1,h2,h3):last-child{grid-column:1 / -1}
  /* hero variant: the H1 spans the full band; the lede sits at the right end
     of the eyebrow row */
  .chead--hero > :is(h1,h2){grid-column:1 / -1;grid-row:2}
  .chead--hero .chead__aside{grid-row:1}
}
/* the benchmarks band keeps its own (smaller) heading scale inside the chead */
.bench .chead > :is(h2,h3){font-size:clamp(1.7rem,1rem + 1.9vw,4.2rem)}

/* ============================================================================
   THE CASE INDEX (homepage chapter 04) — the four case files as a ruled
   ledger of links into the record, so the homepage carries the proof without
   duplicating the entire results page.
   ============================================================================ */
.caselist{margin-top:var(--sp-8);position:relative;z-index:1;
  border-top:1px solid var(--line-2)}
.caselist__row{display:grid;align-items:center;
  grid-template-columns:clamp(160px,14vw,300px) minmax(0,1fr) auto;
  gap:var(--sp-3) var(--sp-6);
  padding-block:var(--sp-5);border-bottom:1px solid var(--line-1);
  color:var(--ink-1);
  transition:background var(--dur-ui) var(--ease)}
.caselist__row:hover{background:var(--hover-wash)}
.caselist__t{font-size:var(--fs-h4);font-weight:300;line-height:1.3;
  letter-spacing:-.004em}
.caselist__row .ic{width:24px;height:24px;color:var(--ink-3);
  transition:transform var(--dur-ui) var(--ease)}
.caselist__row:hover .ic{transform:translateX(4px)}
@media (max-width:719px){
  .caselist__row{grid-template-columns:minmax(0,1fr) auto}
  .caselist__tag{grid-column:1 / -1}
}