/* ============================================================================
   VECREAL — FIELD SYSTEM
   One design system for the public site (home, pi, fi, about).

   Spatial grammar: the site alternates between NIGHT (the era, the thesis, the
   close) and DAY (the work, the proof). Components are authored once against
   semantic tokens; `.night` / `.day` remap those tokens, so a plate, a claim, a
   figure or a rule renders correctly on either ground without a variant.

   Identity is binding: clay, ink, Inter / JetBrains Mono, the V. mark.
   Clay is TWO-TIER, one hue family (2026-08-13 relock):
   - brand tier   = the wordmark's own clay pair (--bk-vec #9C4A33 light,
     --bk-vec-dark #C68070 dark). Everything at UI/label scale: kickers,
     chips, pills, cites, status dots, thin rules, hover borders, nav.
   - display tier = a deeper, higher-chroma cut of the wordmark hue,
     oklch(55% 0.148 33.5) = #B84932. Display-scale clay only: H1/claim
     clay words, big figure fills (FI plate, radial event, CTA primary,
     scene bars/flags), the night hero node. The wordmark clay washes out
     at display scale on night; this cut carries the old family's punch.
   ========================================================================== */

:root{
  /* ---- ground: day (cool paper — V6 ground system, 2026-08-13) ---- */
  --day-0:#F6F7F9;      /* page */
  --day-1:#FBFCFE;      /* raised */
  --day-2:#ECEEF1;      /* recess */
  --day-ink:#191817;
  --day-mute:#65635F;
  /* Raised 2026-08-16 to satisfy the constitution FLOOR rule: a tier landing
     below ~4.2:1 on its actual ground steps up. --day-faint measured 3.21:1
     on the page and 3.35:1 on a raised plate; --night-faint 3.69:1 on base.
     These are the mark tier, but the system uses them on text, so they have
     to clear 4.5:1. Kept on the same hue, stepped in luminance only. */
  --day-faint:#73716D;
  --day-line:rgba(25,24,23,.11);
  --day-line-2:rgba(25,24,23,.06);

  /* ---- ground: night (cool, deeper — V6 ground system) ---- */
  --night-0:#08090B;
  --night-1:#0D0F12;
  --night-2:#13151A;
  --night-ink:#F2F1ED;
  --night-mute:#9A9892;
  --night-faint:#807E79;
  --night-line:rgba(255,255,255,.12);
  --night-line-2:rgba(255,255,255,.06);

  /* ---- brand: two-tier clay (see header) ---- */
  --clay-brand:#9C4A33;         /* wordmark light-context clay (--bk-vec) */
  --clay-brand-dark:#C68070;    /* wordmark dark-context clay (--bk-vec-dark) */
  --clay-display:#B84932;       /* display cut: oklch(55% .148 33.5), rgb(184,73,50) */
  --clay-display-hover:#C85136; /* display hover lift (replaces #AB5238) */
  --clay:var(--clay-brand);     /* brand tier, light contexts */
  --clay-lit:var(--clay-brand-dark); /* brand tier, night text/stroke */
  --clay-soft:rgba(156,74,51,.07);
  --clay-line:rgba(156,74,51,.34);
  --warn:#A87A2E;
  --good:#4E8F6B;

  /* ---- semantic (defaults = day; .night overrides) ---- */
  --bg:var(--day-0);
  --bg-1:var(--day-1);
  --bg-2:var(--day-2);
  --ink:var(--day-ink);
  --mute:var(--day-mute);
  --faint:var(--day-faint);
  --line:var(--day-line);
  --line-2:var(--day-line-2);
  --accent:var(--clay);
  --grid:rgba(28,28,30,.05);
  --grid-2:rgba(28,28,30,.082);
  --lift:0 1px 0 rgba(255,255,255,.95) inset,0 1px 2px rgba(25,24,23,.06),0 8px 14px -12px rgba(25,24,23,.30);
  --plate-face:linear-gradient(180deg,#FFFFFF,var(--bg-1));
  --lift-sm:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(25,24,23,.05),0 5px 10px -9px rgba(25,24,23,.26);
  --inner:inset 0 1px 0 rgba(255,255,255,.7);

  /* ---- type ---- */
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Sans','Inter',system-ui,sans-serif; /* the label ROLE; Plex per the product's D-11 lock -- JetBrains Mono retired 2026-08-21 */

  --t-hero:clamp(46px,6.4vw,90px);
  --t-stage:clamp(33px,4.1vw,56px);
  --t-sub:clamp(24px,2.5vw,34px);
  --t-lead:clamp(18.5px,1.45vw,23px);
  --t-body:16px;
  --t-ui:14px;
  --t-cap:13px;
  --t-mono:11px;
  --t-micro:12px;

  /* ---- MONO CONSTITUTION (2026-08-13 lock) ----------------------------------
     Every JetBrains Mono use in page chrome resolves to exactly ONE of three
     tiers. No fourth mono size, weight or tracking may be introduced.

     M1 LABEL  — 11px / .15em / 700 / uppercase.
       Section kickers + index lines ("01 · SCHEDULE ·"), panel kickers
       (SOURCE SYSTEMS / VECREAL / PROJECT MANAGER), ledger + figure header
       titles (THE FIRM LEDGER), trust card headers, stack row keys,
       stat/astat chips (LIVE / EMERGENT DIRECTION), hero bucket headers
       (EMAIL / SCHEDULE / …), composed-stack slabels, the FI register line
       (PATTERNS · EXPOSURE · LESSONS · POLICY), the hero spine label.

     M2 MICRO  — 9.5px / .12em / 600 / uppercase.
       Provenance stamps ("EASTGATE · 03-22" src lines), small chips + tags
       (ledger row tags, TRACED BELOW), the products wire label, footer
       title-block keys, the nav sheet stamp, band/beat micro-labels.

     M3 DATA   — 12px / .01em / weight per context (400–700) / NO uppercase /
       tabular-nums (inherited from body).
       Record ids, dates and amounts in exhibits (RFI 154, CO-014, $84,300,
       2026-06-12), meta value rows (chain panel .cm lines, radial .m lines,
       ledger row values, footer title-block values, axis + week figures).

     CLAUSE RULE — uppercase mono may not exceed 4 words. Middot-separated
       lists may stay uppercase at ≤4 words per segment. Anything longer is
       demoted: sentence-case mono at M2 size for meta/spec, Inter for prose.

     FLOOR — no mono below 9.5px in page chrome; where a tier lands on a
       faint color below ~4.2:1 on its actual ground, the color steps up one
       (faint→mute on day; rgba .4→.55 on night). Rendered scene assets
       (assets/scenes|loops|walkthrough) and depicted-record internals keep
       their own data styling. ------------------------------------------------ */
  --mono-m1-size:11px;  --mono-m1-track:.15em; --mono-m1-weight:700;
  --mono-m2-size:9.5px; --mono-m2-track:.12em; --mono-m2-weight:600;
  --mono-m3-size:12px;  --mono-m3-track:.01em;
  /* Two roles the build was already using without naming them, which is why
     they read as drift in an audit. M2-DATA: M2 size with M3 tracking and
     sentence case -- meta that reads as data, not as a label (the "demoted
     meta" clause). M3-STRONG / M3-INDEX: M3 size and tracking at 600 and 700 --
     a value that must hold against its grey key, and an index digit that must
     hold against display type beside it. Weight here carries meaning; it was
     not drift and is deliberately kept. */
  --mono-m2d-track: var(--mono-m3-track);
  --mono-m3-strong: 600;
  --mono-m3-index: 700;

  --w-display:480;
  --w-mid:520;
  --w-strong:600;

  --ls-hero:-.034em;
  --ls-stage:-.028em;
  --ls-sub:-.022em;
  --ls-lead:-.014em;
  --ls-body:-.009em;
  --ls-label:var(--mono-m1-track);

  --lh-hero:1.0;
  --lh-stage:1.055;
  --lh-lead:1.36;
  --lh-body:1.6;

  /* ---- space ---- */
  --u:4px;
  --gut:clamp(20px,4vw,40px);
  --frame:1240px;
  --frame-tight:1080px;
  --stage-y:clamp(88px,10.5vw,168px);
  --stage-y-sm:clamp(64px,7vw,104px);

  /* ---- radius / line ---- */
  --r-1:4px; --r-2:8px; --r-3:14px; --r-4:20px;
  --hair:.8px;

  /* ---- motion ---- */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.45,.05,.55,.95);
  --e-fast:cubic-bezier(.25,.46,.45,.94);
  --m-1:120ms;
  --m-2:200ms;
  --m-3:340ms;
  --m-4:620ms;
  --m-5:900ms;
}

.night{
  --bg:var(--night-0); --bg-1:var(--night-1); --bg-2:var(--night-2);
  --ink:var(--night-ink); --mute:var(--night-mute); --faint:var(--night-faint);
  --line:var(--night-line); --line-2:var(--night-line-2);
  --accent:var(--clay-lit);
  --grid:rgba(255,255,255,.045); --grid-2:rgba(255,255,255,.07);
  --lift:0 1px 0 rgba(255,255,255,.04) inset,0 20px 50px -24px rgba(0,0,0,.8),0 60px 120px -60px rgba(0,0,0,.9);
  --lift-sm:0 1px 0 rgba(255,255,255,.04) inset,0 12px 30px -18px rgba(0,0,0,.75);
  --inner:inset 0 1px 0 rgba(255,255,255,.05);
  color-scheme:dark;
}
.day{
  --bg:var(--day-0); --bg-1:var(--day-1); --bg-2:var(--day-2);
  --ink:var(--day-ink); --mute:var(--day-mute); --faint:var(--day-faint);
  --line:var(--day-line); --line-2:var(--day-line-2);
  --accent:var(--clay);
  --grid:rgba(28,28,30,.05); --grid-2:rgba(28,28,30,.082);
  --lift:0 1px 0 rgba(255,255,255,.95) inset,0 1px 2px rgba(25,24,23,.06),0 8px 14px -12px rgba(25,24,23,.30);
  --lift-sm:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(25,24,23,.05),0 5px 10px -9px rgba(25,24,23,.26);
  --inner:inset 0 1px 0 rgba(255,255,255,.7);
  color-scheme:light;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
/* The label voice sat in a monospace face until 2026-08-21, and every aligned
   number -- datum ticks, week axes, ages, percentages -- got its alignment from
   the face for free. Plex is proportional, so the alignment is stated instead:
   tabular numerals site-wide, which is also exactly what the app does. */
body{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip}
body{
  background:var(--night-0);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(156,74,51,.24);color:#fff}
html{scroll-padding-top:96px}
body{overflow-x:clip}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-1)}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

.skiplink{position:absolute;left:14px;top:-56px;z-index:400;background:var(--clay);color:#fff;
  font-family:var(--mono);font-size:var(--mono-m3-size);letter-spacing:var(--mono-m3-track);padding:11px 16px;border-radius:var(--r-2);
  transition:top var(--m-2) var(--e-out)}
.skiplink:focus{top:14px}

/* ==========================================================================
   GROUND — drafting field, edge rulers, grain
   Each ground paints its own field so the night/day seam is a real material
   change, not a background-color swap.
   ========================================================================== */
.ground{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* V6 ground system (2026-08-13, ground workshop lock): the retired drafting
   grid + rulers pseudos are repurposed. ::before is the night light pool —
   a ~4% white radial anchored behind the content zone; ::after is fine
   turbulence grain on BOTH grounds (night lifts via screen, day settles via
   multiply), painted above the pool so the noise dithers the 4% ramp. No
   hairlines, rulers, stamps or clay markers on any ground. */
.ground::before,.ground::after{content:"";position:absolute;inset:0;display:none}
.band.night .ground::before{display:block;
  background:radial-gradient(ellipse 60% 42% at 50% 48%,rgba(255,255,255,.028),rgba(255,255,255,.011) 52%,transparent 76%)}
.band.night.hero .ground::before{
  background:radial-gradient(ellipse 70% 46% at 50% 42%,rgba(255,255,255,.032),rgba(255,255,255,.013) 52%,transparent 76%)}
.band .ground::after{display:block;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='fn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fn)'/%3E%3C/svg%3E")}
.band.night .ground::after{mix-blend-mode:screen;opacity:.06}
.band.day .ground::after{mix-blend-mode:multiply;opacity:.06}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background: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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ==========================================================================
   BAND / STAGE / FRAME
   A band owns a ground. A stage is one idea. Nothing else sets vertical rhythm.
   ========================================================================== */
.band{position:relative;background:var(--bg);color:var(--ink);isolation:isolate}
.band>*{position:relative;z-index:2}
.band>.ground{z-index:0;position:absolute}

/* V6 joint grammar: ground transitions are HARD CUTS with sheet-edge shadows —
   no gradient seams anywhere. The joint renders on the LOWER band via ::before
   (a wide strip hung above the cut whose box-shadow casts past its bottom
   edge), clipped so only the cast below the cut — plus the day sheet's 1px
   hairline — ever paints. Asymmetric by design, per the workshop verdict:
   night sheet over day = shadow only; day sheet over night = faint shadow
   plus a neutral cool-gray hairline at the cut. Night+night, day+day, the
   page top and the footer take no joint. */
.band.night+.band.day::before,
.band.day+.band.night::before{content:"";position:absolute;left:-240px;right:-240px;top:-200px;height:200px;
  pointer-events:none;z-index:1}
.band.night+.band.day::before{
  box-shadow:0 6px 12px -2px rgba(13,16,20,.28),0 22px 40px -4px rgba(13,16,20,.38);
  clip-path:inset(200px 0 -120px 0)}
.band.day+.band.night::before{
  border-bottom:1px solid #464C56;
  box-shadow:0 6px 12px -2px rgba(0,0,0,.9),0 26px 46px -4px rgba(0,0,0,.7);
  clip-path:inset(199px 0 -120px 0)}

.stage{padding:var(--stage-y) 0}
.stage.tight{padding:var(--stage-y-sm) 0}
.stage.flush-top{padding-top:0}
.stage.flush-bottom{padding-bottom:0}
.frame{width:100%;max-width:var(--frame);margin:0 auto;padding:0 var(--gut)}
.frame.tight{max-width:var(--frame-tight)}

/* ==========================================================================
   TYPE INSTRUMENTS
   `.claim` is the core: one element, one size. The claim runs in ink; the
   proof continues inline in mute. Confirmed pattern across Linear, Attio,
   Ramp and Superhuman — it replaces the head + tiny-gloss split.
   ========================================================================== */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--mono-m1-size); /* M1 */
  font-weight:var(--mono-m1-weight);letter-spacing:var(--mono-m1-track);text-transform:uppercase;color:var(--accent);line-height:1}
.eyebrow::before{content:"";width:16px;height:var(--hair);background:currentColor;opacity:.7;flex:none}
.eyebrow.plain::before{display:none}
.eyebrow.quiet{color:var(--mute)}

h1,.h1{font-size:var(--t-hero);font-weight:var(--w-display);line-height:var(--lh-hero);letter-spacing:var(--ls-hero);
  color:var(--ink);text-wrap:balance;font-variation-settings:'opsz' 32}
.claim{font-size:var(--t-stage);font-weight:var(--w-display);line-height:var(--lh-stage);letter-spacing:var(--ls-stage);
  color:var(--mute);max-width:19ch;text-wrap:pretty;font-variation-settings:'opsz' 32}
.claim b,.claim strong{font-weight:inherit;color:var(--ink)}
.claim.wide{max-width:26ch}
.claim.full{max-width:none}
.claim em{font-style:normal;color:var(--clay-display)}
.lead{font-size:var(--t-lead);font-weight:450;line-height:var(--lh-lead);letter-spacing:var(--ls-lead);
  color:var(--mute);max-width:56ch;text-wrap:pretty}
.lead b,.lead strong{font-weight:520;color:var(--ink)}
.lead em{font-style:normal;color:var(--accent)}
.sub{font-size:var(--t-sub);font-weight:var(--w-display);line-height:1.18;letter-spacing:var(--ls-sub);color:var(--ink)}
.body{font-size:var(--t-body);line-height:var(--lh-body);color:var(--mute);max-width:62ch}
.body b{color:var(--ink);font-weight:560}
.cap{font-size:var(--t-cap);line-height:1.5;color:var(--mute)}
.cap b{color:var(--ink);font-weight:560}
.mono{font-family:var(--mono)}
.tag{font-family:var(--mono);font-size:var(--mono-m2-size);font-weight:var(--mono-m2-weight); /* M2 */
  letter-spacing:var(--mono-m2-track);text-transform:uppercase;color:var(--mute)}
.num{font-family:var(--sans);font-weight:var(--w-display);letter-spacing:-.04em;line-height:1;
  font-size:clamp(40px,4.6vw,68px);color:var(--ink);font-variant-numeric:tabular-nums}

.stage-head{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(40px,5vw,72px)}
.stage-head .eyebrow{margin-bottom:2px}
.stage-head.centered{align-items:center;text-align:center}
.stage-head.centered .claim{max-width:22ch}
.stage-head.centered .lead{max-width:60ch}
.stage-head.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:end}
@media(max-width:880px){.stage-head.split{grid-template-columns:1fr;gap:20px;align-items:start}}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:560;
  letter-spacing:-.008em;-webkit-user-select:none;user-select:none;
  padding:9.5px 17px;border-radius:var(--r-2);border:var(--hair) solid transparent;
  transition:transform var(--m-1) var(--e-fast),background var(--m-1) var(--e-fast),
             border-color var(--m-1) var(--e-fast),box-shadow var(--m-2) var(--e-fast),color var(--m-1) var(--e-fast)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;
  transition:transform var(--m-2) var(--e-out)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0) scale(.985)}

.btn.primary{background:var(--clay-display);color:#FBFCFE;border-color:var(--clay-display);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 6px 16px -10px rgba(184,73,50,.45)}
.btn.primary:hover{background:var(--clay-display-hover);border-color:var(--clay-display-hover);transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 22px -10px rgba(184,73,50,.5)}
.btn.ghost{color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
/* the signal sweep -- locked 2026-08-25. The control answers a hover the
   way the field answers the page: one pass of warm light, entering at the
   edge immediately, crossing unhurried. Styling only; geometry untouched.
   Bare links carry no sweep. */
.btn{position:relative}
.btn.primary,.btn.ghost{overflow:hidden}
.btn.primary::before,.btn.ghost::before{content:"";position:absolute;top:-40%;bottom:-40%;
  left:-45%;width:38%;transform:translateX(-105%) rotate(14deg);pointer-events:none}
.btn.primary::before{background:linear-gradient(90deg,transparent,rgba(255,223,206,.4),transparent)}
.btn.ghost::before{background:linear-gradient(90deg,transparent,rgba(198,128,112,.32),transparent)}
@keyframes btnsweep{to{transform:translateX(520%) rotate(14deg)}}
.btn.primary:hover::before,.btn.ghost:hover::before,.nav .cta:hover::before{animation:btnsweep 1.05s cubic-bezier(.3,.12,.25,1) 1}
@media (prefers-reduced-motion:reduce){
  .btn.primary:hover::before,.btn.ghost:hover::before,.nav .cta:hover::before{animation:none}
}

.btn.bare{padding:0;color:var(--accent);font-weight:580}
.btn.bare:hover{color:var(--accent)}
.night .btn.bare:hover{color:#D29B8F}
.day .btn.bare:hover{color:#8A4130}

/* ==========================================================================
   PLATE / RECESS / RULE — surface vocabulary
   ========================================================================== */
.plate{position:relative;background:var(--bg-1);border:var(--hair) solid var(--line);border-radius:var(--r-3);
  box-shadow:var(--inner),var(--lift-sm)}
.plate.deep{box-shadow:var(--inner),var(--lift)}
.recess{background:var(--bg-2);box-shadow:inset 0 2px 6px -3px rgba(25,24,23,.14),inset 0 0 0 var(--hair) rgba(25,24,23,.04)}
.night .recess{background:#0C0E11;box-shadow:inset 0 2px 8px -3px rgba(0,0,0,.8),inset 0 0 0 var(--hair) rgba(255,255,255,.04)}
.rule{height:var(--hair);background:var(--line);border:0}
.rule.marked{background:linear-gradient(90deg,var(--accent) 0 14px,var(--line) 14px calc(100% - 14px),var(--accent) calc(100% - 14px))}

/* registration corners — the drafting mark, used on figures only */
.reg{position:relative}
.reg::before,.reg::after{content:"";position:absolute;width:10px;height:10px;border:1.2px solid var(--accent);
  pointer-events:none;z-index:6;opacity:.8}
.reg::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.reg::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ==========================================================================
   FIGURE SYSTEM — product appears as a composed plate, never in browser chrome
   ========================================================================== */
.figure{position:relative;border-radius:var(--r-3);overflow:hidden;background:var(--bg-2);
  border:var(--hair) solid var(--line);box-shadow:var(--lift)}
.figure .port{position:relative;width:100%;overflow:hidden;background:#F6F7F9}
.figure .port>video,.figure .port>img,.figure .port>iframe{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);border:0;transform:scale(var(--fk,1));
  transform-origin:var(--fx,50%) var(--fy,50%);transition:transform var(--m-5) var(--e-out)}
.figure.feather::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg) 92%)}
.figure .stamp{position:absolute;left:14px;top:14px;z-index:4;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:var(--mono-m2-size);font-weight:var(--mono-m2-weight); /* M2 */
  letter-spacing:var(--mono-m2-track);text-transform:uppercase;color:var(--day-mute);
  background:rgba(251,252,254,.9);border:var(--hair) solid var(--day-line);border-radius:100px;padding:5px 11px;
  backdrop-filter:blur(8px)}
.figure .stamp i{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none}

/* callout label anchored over a figure, with a computed leader line */
.callouts{position:absolute;inset:0;z-index:5;pointer-events:none}
.callouts svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.callouts svg path{fill:none;stroke:var(--clay);stroke-width:1;stroke-linecap:round;opacity:.85}
.callouts svg circle{fill:var(--clay)}
.callout{position:absolute;pointer-events:auto;max-width:250px;background:rgba(251,252,254,.94);
  border:var(--hair) solid var(--day-line);border-radius:var(--r-2);padding:10px 13px;
  box-shadow:0 1px 2px rgba(25,24,23,.05),0 14px 30px -16px rgba(25,24,23,.3);backdrop-filter:blur(10px)}
.callout .k{display:block;font-family:var(--mono);font-size:var(--mono-m1-size);font-weight:var(--mono-m1-weight); /* M1 */
  letter-spacing:var(--mono-m1-track);text-transform:uppercase;color:var(--clay);margin-bottom:4px}
.callout .v{display:block;font-size:var(--t-cap);line-height:1.45;color:var(--day-ink)}

/* ==========================================================================
   REVEAL — initial states apply only once the runtime is installed, so a page
   with JS disabled or stalled renders fully composed.
   ========================================================================== */
html.field-ready .rv{opacity:0;transform:translateY(18px);
  transition:opacity var(--m-4) var(--e-out),transform var(--m-4) var(--e-out)}
html.field-ready .rv.in{opacity:1;transform:none}
html.field-ready .rv-st>*{opacity:0;transform:translateY(14px);
  transition:opacity var(--m-4) var(--e-out),transform var(--m-4) var(--e-out);
  transition-delay:calc(var(--i,0)*90ms)}
html.field-ready .rv-st.in>*{opacity:1;transform:none}
html.field-ready .rv-d1{transition-delay:100ms}
html.field-ready .rv-d2{transition-delay:200ms}
html.field-ready .rv-d3{transition-delay:300ms}
@media (prefers-reduced-motion:reduce){
  html.field-ready .rv,html.field-ready .rv-st>*{opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.top{position:fixed;top:0;left:0;right:0;z-index:60;
  transition:transform var(--m-3) var(--e-out),background var(--m-3) var(--e-fast),
             border-color var(--m-3) var(--e-fast),backdrop-filter var(--m-3) var(--e-fast)}
.top{border-bottom:var(--hair) solid transparent}
.top.stuck{background:rgba(8,9,11,.72);backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:rgba(255,255,255,.1)}
.top.on-day.stuck{background:rgba(246,247,249,.82);border-bottom-color:rgba(25,24,23,.1)}
.top.hidden{transform:translateY(-102%)}
.top .frame{height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.top .mark{display:flex;align-items:center;gap:13px;color:var(--night-ink);transition:color var(--m-3) var(--e-fast)}
.top.on-day .mark{color:var(--day-ink)}

.nav{display:flex;align-items:center;gap:28px;font-size:13.5px;color:var(--night-mute);letter-spacing:normal;
  transition:color var(--m-3) var(--e-fast)}
.top.on-day .nav{color:var(--day-mute)}
.nav>a,.nav .pdrop>a{position:relative;transition:color var(--m-1) var(--e-fast);white-space:nowrap}
/* the active page carries weight, and reserves that weight's width whether or
   not it is active, so the row never reflows as pages change */
.nav>a:not(.cta):not(.mobile-only){display:inline-grid;justify-items:center;align-items:center}
.nav>a:not(.cta):not(.mobile-only)>.t{grid-area:1/1;position:relative}
.nav>a:not(.cta):not(.mobile-only)::before{content:attr(data-t);grid-area:1/1;font-weight:600;
  visibility:hidden;pointer-events:none}
.nav>a:not(.cta):not(.mobile-only)>.t::after,.nav .pdrop>a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:1.5px;background:var(--clay-lit);transform:scaleX(0);transform-origin:right center;
  transition:transform var(--m-1) var(--e-fast)}
.top.on-day .nav>a:not(.cta):not(.mobile-only)>.t::after,.top.on-day .nav .pdrop>a::after{background:var(--clay)}
.nav>a:hover,.nav .pdrop>a:hover{color:var(--night-ink)}
.top.on-day .nav>a:hover,.top.on-day .nav .pdrop>a:hover{color:var(--day-ink)}
/* matched to the base rule's specificity: a shorter selector here lost to it
   and the active page rendered with no rule at all */
.nav>a:not(.cta):not(.mobile-only):hover>.t::after,
.nav>a:not(.cta):not(.mobile-only).here>.t::after{transform:scaleX(1);transform-origin:left center;
  transition-duration:var(--m-2)}
.nav a.here{color:var(--clay-lit);font-weight:600}
.top.on-day .nav a.here{color:var(--clay)}
.nav .cta{padding:8px 16px;border-radius:var(--r-2);border:var(--hair) solid var(--night-line);
  color:var(--night-ink);font-weight:560;font-size:13px}
.nav .cta::after{display:none}
.nav .cta:hover{border-color:var(--clay-lit);color:var(--clay-lit)}
.top.on-day .nav .cta{border-color:var(--day-line);color:var(--day-ink)}
.top.on-day .nav .cta:hover{border-color:var(--clay);color:var(--clay)}
/* the header CTA speaks the same sweep as the body buttons -- hairline
   weight, so it carries the ghost's clay light on both grounds */
.nav .cta{position:relative;overflow:hidden}
.nav .cta::before{content:"";position:absolute;top:-40%;bottom:-40%;left:-45%;width:38%;
  transform:translateX(-105%) rotate(14deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(198,128,112,.32),transparent)}


.pdrop{position:relative}
/* the product slot holds one constant width on every page, so the per-page
   trigger label ("Project Intelligence" / "Firm Intelligence") can never
   shift the nav row; the underline rides .tg so it stays text-width */
.pdrop>a{display:inline-flex;align-items:center;justify-content:center;
  width:174px;cursor:pointer}
.pdrop>a .tg{position:relative;display:inline-flex;align-items:center;gap:6px}
.nav .pdrop>a::after{content:none}
.nav .pdrop>a .tg::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:var(--clay-lit);transform:scaleX(0);transform-origin:right center;
  transition:transform var(--m-1) var(--e-fast)}
.top.on-day .nav .pdrop>a .tg::after{background:var(--clay)}
.nav .pdrop>a:hover .tg::after,.nav .pdrop>a.here .tg::after{transform:scaleX(1);
  transform-origin:left center;transition-duration:var(--m-2)}
.pdrop>a .cv{width:9px;height:9px;transition:transform var(--m-1) var(--e-out)}
.pdrop:hover>a .cv,.pdrop.open>a .cv{transform:rotate(180deg)}
.ppanel{position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,6px);width:352px;
  background:var(--day-1);border:var(--hair) solid var(--day-line);border-radius:var(--r-3);padding:7px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 26px 60px -22px rgba(20,22,28,.45);
  opacity:0;visibility:hidden;z-index:70;
  transition:opacity var(--m-2) var(--e-out),transform var(--m-2) var(--e-out),visibility 0s linear var(--m-2)}
.ppanel::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.pdrop:hover .ppanel,.pdrop.open .ppanel,.pdrop:focus-within .ppanel{opacity:1;visibility:visible;
  transform:translate(-50%,0);transition-delay:0s}
.pcard{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:var(--r-2);
  transition:background var(--m-1) var(--e-fast)}
.pcard:hover{background:var(--day-2)}
.pcard+.pcard{border-top:var(--hair) solid var(--day-line-2)}
.pcard .pmk{width:30px;height:30px;border-radius:7px;background:var(--clay);color:#fff;display:flex;
  align-items:center;justify-content:center;flex:none}
/* the copy takes the slack so both arrows sit on the panel's right edge */
.pcard>span:nth-child(2){flex:1;min-width:0}
.pcard .pmk svg{width:62%;height:62%}
.pcard[data-fi] .pmk{background:var(--day-ink)}
.pcard .pn{display:block;font-size:13.5px;font-weight:600;color:var(--day-ink);letter-spacing:-.012em}
.pcard:hover .pn{color:var(--clay)}
.pcard .pd{display:block;font-size:11.5px;line-height:1.45;color:var(--day-mute);margin-top:3px}
.pcard .go{flex:none;color:var(--day-faint);
  transition:color var(--m-1) var(--e-fast),transform var(--m-1) var(--e-out)}
.pcard:hover .go{color:var(--clay);transform:translateX(2px)}
.pcard .go svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}

.navtoggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;
  color:var(--night-ink);-webkit-tap-highlight-color:transparent}
.top.on-day .navtoggle{color:var(--day-ink)}
.navtoggle svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}
.navtoggle .ic-x{display:none}
body.nav-open .navtoggle .ic-m{display:none}
body.nav-open .navtoggle .ic-x{display:block}
.navscrim{display:none}
.mobile-only{display:none}

/* ==========================================================================
   RAIL — section index
   ========================================================================== */
/* ONE consumer: the research article.
   This section rail answers "which part am I in", which is a question a long
   document raises and a marketing page does not. It came off index/home, pi,
   fi, about and research when those pages were judged arguments rather than
   documents, and off trust.html in a later pass -- a reference page people
   arrive at for one clause turned out not to need it either once the headings
   were navigable.

   Kept, not retired: the article is a genuine long read and the rail earns its
   place there. If that ever changes, delete the styles and the spy with the
   markup rather than leaving them as a dormant second navigation system. */
.rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;
  gap:1px;transition:opacity var(--m-3) var(--e-fast)}
.rail a{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--night-faint)}
.rail.on-day a{color:var(--day-faint)}
.rail .tk{width:9px;height:var(--hair);background:currentColor;flex:none;
  transition:width var(--m-2) var(--e-out),background var(--m-2) var(--e-fast)}
.rail .lb{font-family:var(--mono);font-size:var(--mono-m1-size);font-weight:var(--mono-m1-weight); /* M1 */
  letter-spacing:var(--mono-m1-track);text-transform:uppercase;white-space:nowrap;color:var(--night-mute);
  opacity:0;transform:translateX(-4px);transition:opacity var(--m-2) var(--e-fast),transform var(--m-2) var(--e-out)}
.rail.on-day .lb{color:var(--day-mute)}
.rail a:hover .lb{opacity:1;transform:none}
.rail a.on{color:var(--clay-lit)}
.rail.on-day a.on{color:var(--clay)}
.rail a.on .lb{color:inherit}
.rail a.on .tk{width:20px}
.rail a.on .lb{opacity:1;transform:none}
@media(max-width:1500px){.rail{display:none}}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{position:relative;background:var(--night-0);color:var(--night-mute);border-top:var(--hair) solid var(--night-line)}
.foot .frame{padding-top:56px;padding-bottom:26px}
.foot .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px}
.foot .brand{max-width:34ch}
.foot .brand p{font-size:var(--t-cap);line-height:1.6;color:var(--night-mute);margin-top:16px}
/* column heads read as heads: a step brighter than the links under them */
.foot h3{font-family:var(--mono);font-size:var(--mono-m1-size);font-weight:var(--mono-m1-weight); /* M1 */
  letter-spacing:var(--mono-m1-track);text-transform:uppercase;
  color:rgba(242,241,237,.88);margin-bottom:14px}
.foot .cols a{display:block;font-size:var(--t-cap);color:var(--night-mute);margin-bottom:10px;
  transition:color var(--m-1) var(--e-fast)}
.foot .cols a:last-child{margin-bottom:0}
.foot .cols a:hover{color:var(--clay-lit)}
/* title block: cells are child divs only — the k/v internals must never pick
   up cell padding or borders, or the block doubles in height */
.foot .block{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;
  border:var(--hair) solid var(--night-line);border-radius:var(--r-2);overflow:hidden}
.foot .block>div{padding:10px 14px 11px;border-left:var(--hair) solid var(--night-line-2)}
.foot .block>div:first-child{border-left:0}
.foot .block .k{font-family:var(--mono);font-size:var(--mono-m2-size);font-weight:var(--mono-m2-weight); /* M2 */
  letter-spacing:var(--mono-m2-track);text-transform:uppercase;color:var(--night-mute);line-height:1.35}
.foot .block .v{font-family:var(--mono);font-size:var(--mono-m3-size);letter-spacing:var(--mono-m3-track); /* M3 */
  font-weight:600;color:var(--night-ink);margin-top:4px;line-height:1.35;white-space:nowrap}
.foot .block .v.clay{color:var(--clay-lit)}
.foot .block a:hover{color:var(--clay-lit)}

/* ==========================================================================
   SHARED COMPOSITIONS
   ========================================================================== */
/* metric row */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;
  border-top:var(--hair) solid var(--line)}
.metrics>div{padding:26px 26px 26px 0;border-left:var(--hair) solid var(--line);padding-left:26px}
.metrics>div:first-child{border-left:0;padding-left:0}
.metrics .num{margin-bottom:10px}
.metrics p{font-size:var(--t-cap);line-height:1.5;color:var(--mute);max-width:26ch}
.metrics p b{color:var(--ink);font-weight:560}

/* card grid */
.cards{display:grid;gap:clamp(14px,1.4vw,20px)}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;padding:24px 24px 26px;border-radius:var(--r-3);background:var(--plate-face);
  border:var(--hair) solid var(--line);box-shadow:var(--inner),var(--lift-sm);
  transition:transform var(--m-2) var(--e-out),border-color var(--m-2) var(--e-fast),box-shadow var(--m-3) var(--e-fast)}
a.card:hover,.card.hover:hover{transform:translateY(-3px);border-color:var(--clay-line);box-shadow:var(--inner),var(--lift)}
.card h3{font-size:17px;font-weight:580;letter-spacing:-.018em;line-height:1.28;color:var(--ink);margin-bottom:9px}
.card p{font-size:var(--t-cap);line-height:1.55;color:var(--mute)}
.card .ico{width:26px;height:26px;color:var(--accent);margin-bottom:16px}
.card .ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}

/* checklist item */
.checks .ck{display:flex;gap:10px;margin-bottom:15px}
.checks .ck:last-child{margin-bottom:0}
.checks .ck svg{width:13px;height:13px;stroke:var(--accent);fill:none;stroke-width:2.4;flex:none;margin-top:4px}
.checks .ck.prog svg{stroke:var(--warn)}
.checks .ck b{display:block;font-size:13.5px;font-weight:580;color:var(--ink);letter-spacing:-.008em;line-height:1.35}
.checks .ck span{display:block;font-size:var(--t-micro);line-height:1.5;color:var(--mute);margin-top:3px}

/* status pill */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--mono-m2-size); /* M2 */
  font-weight:var(--mono-m2-weight);letter-spacing:var(--mono-m2-track);text-transform:uppercase;
  border-radius:100px;padding:4px 10px;border:var(--hair) solid}
.pill.live{color:var(--accent);border-color:var(--clay-line);background:var(--clay-soft)}


/* founder note — the one place a second voice is allowed */
.note{position:relative;border-radius:var(--r-3);border:var(--hair) solid var(--line);background:var(--bg-1);
  box-shadow:var(--inner),var(--lift-sm);padding:clamp(28px,3.4vw,44px)}
.note::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px;background:var(--accent);
  border-radius:2px}
.note blockquote{font-size:clamp(20px,2vw,27px);font-weight:480;letter-spacing:-.018em;line-height:1.46;
  letter-spacing:-.014em;color:var(--ink);max-width:44ch}
.note .sig{display:flex;align-items:center;gap:13px;margin-top:26px}
.note .sig b{font-size:var(--t-ui);font-weight:600;color:var(--ink)}
.note .sig span{font-family:var(--mono);font-size:var(--mono-m2-size);font-weight:var(--mono-m2-weight); /* M2 */
  letter-spacing:var(--mono-m2-track);text-transform:uppercase;color:var(--mute);
  padding-left:13px;border-left:var(--hair) solid var(--line)}

/* logo strip */
.logos{display:flex;align-items:center;gap:clamp(22px,3vw,44px);flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:10px}
.logo .lm{width:25px;height:22px;flex:none;background-color:currentColor;-webkit-mask-position:center;
  mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.logo .ln{font-size:14.5px;font-weight:560;letter-spacing:-.014em;white-space:nowrap}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1080px){
  .cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .top .sheet{display:none}
  .nav{gap:18px}
  .foot .cols{grid-template-columns:1fr 1fr}
  .foot .block{grid-template-columns:repeat(3,1fr)}
  .metrics>div{padding-left:20px;padding-right:20px}
}
@media(max-width:720px){
  .cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr}
  .metrics>div{border-left:0;border-top:var(--hair) solid var(--line);padding:20px 0}
  .metrics>div:first-child{border-top:0}
}
@media(max-width:640px){
  .navtoggle{display:inline-flex;position:relative;z-index:215}
  .mobile-only{display:block}
  .desktop-only{display:none!important}
  /* The drawer carries no surface of its own across the top 70px. The header
     bar is fixed, spans the full width and paints above the drawer, so leaving
     that strip empty lets the real bar run straight across: same ground, same
     translucency, same hairline, no seam and nothing to keep in sync. The panel
     surface starts where the bar ends. */
  .nav{position:fixed;top:0;right:0;height:100dvh;width:min(84vw,340px);flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:0;padding:84px 24px 32px;background:transparent;border-left:0;
    transform:translateX(100%);visibility:hidden;z-index:210;overflow-y:auto;font-size:16px;color:var(--day-mute);
    transition:transform var(--m-3) cubic-bezier(.4,0,.1,1),visibility 0s linear var(--m-3)}
  body.nav-open .nav{transform:none;visibility:visible;transition-delay:0s}
  body.nav-open{overflow:hidden}
  /* the panel surface, below the bar: fixed so the scroll container cannot
     clip it, and it carries the left edge and the lift the drawer used to */
  .nav::before{content:"";position:fixed;top:70px;right:0;bottom:0;
    width:min(84vw,340px);background:var(--day-1);
    border-left:var(--hair) solid var(--day-line);
    box-shadow:-28px 0 64px -32px rgba(20,22,28,.5);z-index:-1;pointer-events:none}
  .nav>a,.nav .pdrop>a{padding:15px 2px;color:var(--day-mute);border-bottom:var(--hair) solid var(--day-line-2);
    font-size:16px;display:flex;align-items:center;width:100%}
  .nav>a::after,.nav .pdrop>a::after,.nav .pdrop>a .tg::after{display:none}
  .nav a.here{color:var(--clay);font-weight:600}
  .pdrop{display:block;position:static}
  .nav .pdrop>a{min-width:0;justify-content:flex-start}
  .nav .pdrop>a .tg{display:flex;align-items:center;width:100%}
  .pdrop>a .cv{margin-left:auto;width:12px;height:12px}
  /* display:block is load-bearing: .ppanel is a span, and static positioning
     leaves it inline, where max-height cannot clamp it closed */
  .ppanel{display:block;position:static;opacity:1;visibility:visible;transform:none;width:auto;background:transparent;border:0;
    box-shadow:none;padding:0 0 0 12px;border-radius:0;max-height:0;overflow:hidden;
    transition:max-height var(--m-3) var(--e-out)}
  .pdrop.open .ppanel{max-height:220px}
  .ppanel .pcard{padding:12px 2px;border-radius:0;border-bottom:var(--hair) solid var(--day-line-2);align-items:center}
  .ppanel .pcard+.pcard{border-top:0}
  .ppanel .pcard .pd,.ppanel .pcard .go{display:none}
  .ppanel .pcard .pmk{width:24px;height:24px;border-radius:6px}
  .nav .cta{margin-top:18px;padding:15px;text-align:center;justify-content:center;border-radius:var(--r-2);
    font-size:15px;background:var(--clay);color:#fff;border-color:var(--clay)}
  /* the CTA sat heavier than the links it closes; a step down settles it */
  .nav .cta{margin-top:22px;padding:12px 15px;font-size:14px}

  /* ── The drawer as a page ─────────────────────────────────────────────
     The site is night bands over day bands; the drawer was day only, which
     made it read as a browser affordance rather than part of the system. It
     now opens on a night plate carrying the mark, with the list on day ground
     under it: the same rhythm as every page, at the scale of a menu. */

  /* ── Drawer corrections ───────────────────────────────────────────────
     1. The desktop bold-on-hover trick reserves width with a ::before carrying
        data-t in the same grid cell. In the drawer that pseudo becomes a flex
        sibling and pushes the label to the middle, which is why Home and About
        read centred while Research and the product link read left.
     2. The drawer has no horizontal constraint, so the product dropdown is
        pointless here: show both products as their own lines.
     3. The clay CTA needs white text; the drawer's inherited link colour was
        winning over the button. */
  .nav>a:not(.cta):not(.mobile-only)::before{display:none}
  .nav>a:not(.cta):not(.mobile-only)>.t{grid-area:auto}
  .nav>a,.nav .pdrop>a,.nav .ppanel .pcard{justify-content:flex-start;text-align:left}

  .nav .pdrop>a{display:none}
  /* the accordion is gone in the drawer, so the panel is always open. Stated
     on .nav .ppanel so a later collapsed-state rule cannot re-clamp it. */
  .nav .ppanel,.nav .pdrop .ppanel{max-height:none;padding:0;overflow:visible}
  /* the product mark indents these past every other line; drop it so all
     labels share one left edge */
  .ppanel .pcard .pmk{display:none}
  .ppanel .pcard{padding:15px 2px;gap:0}
  .ppanel .pcard .pn{font-size:16px;font-weight:400;color:var(--day-mute)}
  .nav .pdrop .pcard[aria-current="page"] .pn{color:var(--clay);font-weight:600}

  .nav .cta,.nav .cta:hover{color:#FFFFFF}
  .navscrim{display:block;position:fixed;inset:0;background:rgba(8,9,11,.5);opacity:0;pointer-events:none;
    z-index:200;transition:opacity var(--m-3) var(--e-fast)}
  body.nav-open .navscrim{opacity:1;pointer-events:auto}
  body.nav-open .top{transform:none!important;backdrop-filter:none!important;z-index:220}
  .foot .cols{grid-template-columns:1fr;gap:26px}
  .foot .brand{grid-column:1/-1}
  /* three items left, so one row of three rather than two rows of two */
  .foot .block{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* three narrow columns: the copyright string is longer than its track,
     so let the value wrap instead of clipping at the plate edge */
  .foot .block .v{white-space:normal;overflow-wrap:anywhere;line-height:1.45}
  .foot .block>div{padding:9px 11px 10px}
  .foot .block>div{border-top:0;border-left:var(--hair) solid var(--night-line-2)}
  .foot .block>div:first-child{border-left:0}
  .actions{gap:14px}
  .actions .btn{flex:1 1 auto;justify-content:center}
  .actions .btn.bare{flex:0 0 auto}
}

/* consecutive night bands read as one ground: the second band drops its own
   pool, and night grain is viewport-fixed so the tile never seams at a joint */
.band.night + .band.night .ground::before{display:none}
.band.night .ground::after{background-attachment:fixed}

/* ── Footer, phone: the three link columns read across, not down. Stacked,
      they pushed the title block most of a screen below the last content. ── */
@media(max-width:640px){
  .foot .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px}
  .foot .brand{grid-column:1/-1}
  .foot .cols h3{margin-bottom:9px}
  .foot .cols a{font-size:12.5px;margin-bottom:7px}
  .foot .block{margin-top:26px}
}

/* ── Phone hit areas. Footer links measured 107x20; WCAG 2.5.8 wants 24px and
      a thumb wants more. Padding grows the target without moving the text. ── */
@media(max-width:640px){
  .foot .cols a{padding-block:6px;margin-bottom:1px}
  .foot .cols h3{margin-bottom:4px}
}