/* ==========================================================================
   Fulcrums: one stylesheet for every page.
   Palette sampled from the brushed-steel mark: pure neutral metal, no hue.
   One cold signal cyan, spent only on the call to action, focus, and
   two moments of emphasis.
   ========================================================================== */

:root{
  /* Light theme, built from the mark's own tones. The mark is pure neutral
     brushed steel, and #1D1F20 is the brand's own theme colour, so it carries
     the type. Every value below is measured, not guessed. */
  --canvas:#F1F4F5;           /* light cool grey, never pure white */
  --canvas-deep:#E4E9EB;      /* the sections that sit lower */
  --panel:#FAFBFC;            /* cards and raised surfaces */
  --panel-hi:#FFFFFF;         /* hover and inner panels */
  --line:#D3DADD;             /* hairline dividers */
  --line-strong:#828C93;      /* interactive borders, measured 3.10:1 */
  --steel:#5F696F;            /* small labels, measured 5.08:1 */
  --steel-light:#8F979F;      /* the brand's own flat tone */
  --ink:#1D1F20;              /* the brand's own dark tone */
  --accent:#14627F;           /* cold light on steel, measured 6.16:1 */
  --accent-hover:#0E4E66;
  --accent-muted:rgba(20,98,127,.10);
  --accent-glow:rgba(20,98,127,.20);
  --text-primary:#1D1F20;     /* 14.97:1 */
  --text-secondary:#525C63;   /* 6.19:1 */

  --shadow-sm:0 1px 2px rgba(29,31,32,.05),0 2px 8px rgba(29,31,32,.045);
  --shadow-md:0 2px 6px rgba(29,31,32,.06),0 12px 30px rgba(29,31,32,.07);
  --shadow-lg:0 4px 12px rgba(29,31,32,.07),0 24px 60px rgba(29,31,32,.10);

  /* Newsreader is an editorial serif with optical sizing and true italics: it
     carries the classical side of the name and gives the Archimedes line a real
     italic rather than a slanted sans. Instrument Sans keeps the running text
     modern and quiet. JetBrains Mono handles figures and small labels. */
  --display:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* over the hero the type is dark, so it needs a light halo, not a shadow */
  --tshadow:0 1px 0 rgba(255,255,255,.75),0 2px 14px rgba(241,244,245,.9),0 8px 40px rgba(241,244,245,.85);

  --gut:clamp(20px,5vw,64px);
  --maxw:1240px;
  --nav-h:80px;
}

/* ---------- reset and base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-weight:400;font-size:clamp(16.5px,1.08vw,17.5px);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.012em;margin:0;font-optical-sizing:auto}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--accent);color:#FFFFFF}

:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--canvas);padding:12px 18px;
  font-family:var(--mono);font-size:13px;border-radius:0 0 6px 0;
}
.skip:focus{left:0}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- the one fixed environment layer ---------- */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 800px at 78% -10%,rgba(20,98,127,.045),transparent 62%),
    radial-gradient(900px 700px at 8% 108%,rgba(95,105,111,.07),transparent 60%),
    var(--canvas);
}
.env::before{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(680px 520px at 30% 30%,rgba(95,105,111,.06),transparent 65%);
  animation:envDrift 84s var(--ease) -22s infinite alternate;
}
.env::after{  /* fine grain, static, no cost */
  content:"";position:absolute;inset:0;opacity:.055;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@keyframes envDrift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.1)}}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
main{position:relative;z-index:1;display:block}
section{position:relative}

.kicker{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--steel);margin:0 0 20px;
  display:flex;align-items:center;gap:12px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--line-strong);flex:none}

.lede{color:var(--text-secondary);font-size:clamp(17.5px,1.4vw,21px);line-height:1.62;max-width:60ch}
h2 + .lede,h3 + .lede{margin-top:22px}

/* ---------- navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(241,244,245,.86);backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}

.lockup{display:flex;align-items:center;gap:.34em;font-size:42px;text-decoration:none;flex:none}
.lockup img{display:block;user-select:none}
.lockup .mark{width:1em}
.lockup .word{width:2.27em}
.lockup:hover .mark{transform:translateY(-1px)}
.lockup .mark{transition:transform .5s var(--ease-out)}

.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav-links a:not(.btn){
  text-decoration:none;font-size:14.5px;font-weight:500;color:var(--text-secondary);
  position:relative;padding:6px 0;transition:color .35s var(--ease);
}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out);
}
.nav-links a:not(.btn):hover,.nav-links a:not(.btn)[aria-current="page"]{color:var(--text-primary)}
.nav-links a:not(.btn):hover::after,.nav-links a:not(.btn)[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

.nav-links a.btn-primary{color:var(--canvas);font-weight:600;padding:13px 22px}
.nav-links a.btn-primary:hover{color:var(--canvas)}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line-strong);border-radius:8px;
  width:44px;height:40px;align-items:center;justify-content:center;cursor:pointer;
}
.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--text-primary);position:relative;transition:background .3s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--text-primary);
  transition:transform .45s var(--ease-out);
}
.nav-toggle span::before{transform:translateY(-5.5px)}
.nav-toggle span::after{transform:translateY(5.5px)}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  --bh:0;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:8px;border:1px solid transparent;
  font-family:var(--body);font-weight:600;font-size:14.5px;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .4s var(--ease-out),background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
  text-shadow:none;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--ink);color:var(--canvas);border-color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);box-shadow:var(--shadow-md)}
.btn-ghost{background:var(--panel);color:var(--text-primary);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:var(--panel-hi);box-shadow:var(--shadow-sm)}
.btn-lg{padding:16px 30px;font-size:15.5px}
.btn .arw{transition:transform .45s var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-links a:not(.btn){padding:10px 0}
}

/* ==========================================================================
   THE HERO: code-drawn geometry, scrubbed by scroll
   ========================================================================== */
.hero{position:relative;height:720vh;z-index:1}
.stage{
  position:sticky;top:0;height:100vh;width:100%;overflow:hidden;
  display:grid;place-items:center;
}
#geo{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translateZ(0)}

/* global base scrim: no frame is ever raw behind the page */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 92% at 50% 46%,rgba(241,244,245,0) 36%,rgba(241,244,245,.62) 100%);
}
.stage-vig{
  position:absolute;inset:0;pointer-events:none;isolation:isolate;
  background:linear-gradient(to bottom,
    rgba(241,244,245,.80) 0%,
    rgba(241,244,245,.70) 14%,
    rgba(241,244,245,.56) 26%,
    rgba(241,244,245,.40) 38%,
    rgba(241,244,245,.26) 48%,
    rgba(241,244,245,.15) 56%,
    rgba(241,244,245,.07) 62%,
    rgba(241,244,245,.02) 67%,
    rgba(241,244,245,0) 72%,
    rgba(241,244,245,0) 84%,
    rgba(241,244,245,.18) 92%,
    rgba(241,244,245,.42) 100%);
}

.bands{position:absolute;inset:0;display:grid;place-items:start center;pointer-events:none;padding-inline:var(--gut)}
.band{
  grid-area:1/1;width:100%;max-width:var(--maxw);margin:0 auto;
  opacity:0;text-shadow:var(--tshadow);position:relative;
  /* the band owns its own stacking context, so the scrim below sits behind the
     words but in front of the canvas. Without this the scrim paints behind the
     geometry and does nothing at all. */
  z-index:0;isolation:isolate;
  display:flex;flex-direction:column;align-items:flex-start;
  /* the action lane is the lower third, where the beam and pivot live, so
     every caption is held above it */
  padding-top:clamp(118px,15.5vh,178px);
}
.band::before{
  content:"";position:absolute;inset:-26% -14%;pointer-events:none;z-index:-1;
  opacity:calc(.3 + .7*var(--k,1));
  background:
    radial-gradient(ellipse 66% 54% at 32% 48%,rgba(246,248,249,.86) 0%,rgba(246,248,249,.56) 44%,rgba(246,248,249,0) 74%),
    radial-gradient(ellipse 96% 80% at 40% 50%,rgba(246,248,249,.52) 0%,rgba(246,248,249,.28) 52%,rgba(246,248,249,0) 82%);
}
.band-settle{align-items:center;text-align:center}
.band-settle::before{background:
    radial-gradient(ellipse 70% 58% at 50% 48%,rgba(246,248,249,.88) 0%,rgba(246,248,249,.58) 44%,rgba(246,248,249,0) 76%),
    radial-gradient(ellipse 98% 84% at 50% 50%,rgba(246,248,249,.54) 0%,rgba(246,248,249,.30) 52%,rgba(246,248,249,0) 84%)}

.band h1,.band h2,.band p.big{
  font-family:var(--display);font-weight:700;letter-spacing:-.014em;line-height:1.04;
  font-size:clamp(40px,6.9vw,96px);margin:0;max-width:17ch;font-optical-sizing:auto;
}
.band .sub{
  margin-top:22px;color:var(--text-secondary);font-size:clamp(16px,1.5vw,20px);
  line-height:1.55;max-width:48ch;
}
.band .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;pointer-events:auto}
.band .btn{text-shadow:none}

/* split text choreography */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) scatter */
.e-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
/* (b) grid snap-align */
.e-snap .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3.1,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}
/* (d) word punch with overshoot */
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (e) word rise into a staged settle */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px));
}
.e-rise .sub{--ks:clamp(0,(var(--k,0) - .58)*3.4,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px))}
.e-rise .cta-row{--kb:clamp(0,(var(--k,0) - .74)*4.2,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*14px))}


/* short windows: keep every caption clear of the action lane */
@media (max-height:800px){
  .band{padding-top:clamp(96px,11.5vh,128px)}
  .band h1,.band h2,.band p.big{font-size:clamp(34px,5.4vw,68px)}
  .band .sub{font-size:16px;margin-top:16px;max-width:52ch}
  .band .cta-row{margin-top:24px}
}
@media (max-height:640px){
  .band{padding-top:86px}
  .band h1,.band h2,.band p.big{font-size:clamp(30px,4.6vw,52px)}
  .band .sub{font-size:15px;margin-top:12px}
  .band .cta-row{margin-top:18px}
}

/* the hero HUD: small text over geometry gets a chip, never the big radial */
.hud{
  position:absolute;left:var(--gut);bottom:26px;z-index:3;
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);
  background:rgba(250,251,252,.78);border:1px solid var(--line);border-radius:10px;
  padding:8px 13px;backdrop-filter:blur(10px);text-shadow:none;box-shadow:var(--shadow-sm);
}
.hud .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;position:relative}
.hud .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--accent);opacity:.3;animation:pulseDot 3.4s var(--ease) -1.2s infinite}
@keyframes pulseDot{0%,100%{opacity:.12;transform:scale(.7)}50%{opacity:.42;transform:scale(1.25)}}
.hud .rd{color:var(--text-primary);font-variant-numeric:tabular-nums}

.cue{
  position:absolute;right:var(--gut);bottom:30px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
  transition:opacity .6s var(--ease);
}
.cue .line{width:1px;height:38px;background:linear-gradient(to bottom,var(--line-strong),transparent);overflow:hidden;position:relative}
.cue .line::after{content:"";position:absolute;top:0;left:0;width:1px;height:14px;background:var(--accent);animation:cueRun 2.6s var(--ease) -.4s infinite}
@keyframes cueRun{0%{transform:translateY(-16px);opacity:0}30%{opacity:1}100%{transform:translateY(40px);opacity:0}}
@media (max-height:560px){.cue,.hud{display:none}}

/* the static hero, a designed layout and not an apology */
.static-hero{display:none;position:relative;min-height:100svh;padding:calc(var(--nav-h) + 40px) 0 60px}
.static-hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-start;min-height:calc(100svh - var(--nav-h) - 100px)}
.static-hero .static-title{
  font-family:var(--display);font-weight:700;line-height:1.06;
  font-size:clamp(42px,11.4vw,72px);letter-spacing:-.014em;max-width:12ch;margin:0;font-optical-sizing:auto;
}
.static-hero .sub{margin-top:20px;color:var(--text-secondary);font-size:clamp(16px,4.2vw,19px);max-width:40ch}
.static-hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
#geo-static{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.static-hero .scrim{z-index:1}

/* the five gates, character for character identical to the JS list */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:block}
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{padding:clamp(84px,11vw,150px) 0;position:relative}
.page-head + .pivot-rule + .sec,.page-head + .sec{padding-top:clamp(44px,5vw,72px)}
.sec-line{border-top:1px solid var(--line)}

/* the pivot divider: the signature element, repeated */
.pivot-rule{position:relative;height:44px;display:flex;align-items:center;justify-content:center;margin:0 auto;max-width:var(--maxw)}
.pivot-rule svg{width:min(100%,520px);height:44px;overflow:visible}
.pivot-rule .beam{stroke:var(--line-strong);stroke-width:1.4;stroke-linecap:round}
.pivot-rule .wedge{fill:var(--steel);opacity:.8}
.pivot-rule .spark{fill:var(--accent);opacity:0;transition:opacity .8s var(--ease)}
.pivot-rule.in .spark{opacity:.9}

/* --- 1. what fulcrums is: asymmetric two column --- */
.premise{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,6vw,84px);align-items:start}
.premise h2{font-size:clamp(32px,4.4vw,56px);max-width:16ch;letter-spacing:-.014em}
.premise .say{margin-top:26px}
.premise .say .lede{max-width:46ch}
.triplet{display:flex;flex-direction:column;gap:0;margin-top:8px}
.triplet li{
  padding:22px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:baseline;
}
.triplet li:first-child{border-top:1px solid var(--line)}
.triplet .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.12em}
.triplet .t{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,25px);letter-spacing:-.008em;margin-bottom:7px}
.triplet .d{color:var(--text-secondary);font-size:15.5px;line-height:1.58;max-width:44ch}

/* --- 2. the instrument: three equal cards, a different skeleton --- */
.instrument-head{max-width:var(--maxw);margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.instrument-head .kicker{justify-content:center}
.instrument-head h2{font-size:clamp(32px,4.4vw,56px);max-width:20ch;letter-spacing:-.014em}
.instrument-head .lede{margin-top:22px;text-align:center;max-width:56ch}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,26px);margin-top:clamp(44px,6vw,72px)}
.step{
  background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:clamp(22px,2.6vw,32px);box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
  transition:border-color .55s var(--ease),transform .55s var(--ease-out),background-color .55s var(--ease);
}
.step:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.step::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px 200px at 50% -10%,rgba(20,98,127,.07),transparent 70%);
  transition:opacity .6s var(--ease);
}
.step:hover::after{opacity:1}
.step .dia{width:100%;height:132px;margin-bottom:22px;display:block;overflow:visible}
.step .dia .ln{stroke:var(--line-strong);stroke-width:1.25;fill:none;stroke-linecap:round}
.step .dia .hi{stroke:var(--accent);stroke-width:1.6;fill:none;stroke-linecap:round}
.step .dia .pl{fill:var(--steel);opacity:.24}
.step .dia .pl2{fill:var(--steel);opacity:.44}
.step .dia .dot{fill:var(--accent)}
.step .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);display:block;margin-bottom:12px}
.step h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.01em;font-weight:600}
.step p{margin-top:12px;color:var(--text-secondary);font-size:15.5px;line-height:1.58}

/* self-drawing strokes */
.draw{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset 1.5s var(--ease-out)}
.in .draw{stroke-dashoffset:0}

/* --- 3. where we hold the line: the interactive moment --- */
.hold-sec{background:var(--canvas-deep);border-block:1px solid var(--line)}
.hold-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(34px,6vw,80px);align-items:center}
.hold-stage{position:relative;aspect-ratio:1/.78;display:grid;place-items:center;min-height:320px;width:100%;max-width:560px}
.hold-stage svg{width:100%;height:100%;overflow:visible}
.hold-stage .base{stroke:var(--line-strong);stroke-width:1.3;fill:none}
.hold-stage .wedge{fill:var(--steel);opacity:.75;transition:opacity .6s var(--ease)}
.hold-stage .beam{stroke:var(--ink);stroke-width:5;stroke-linecap:round;fill:none}
.hold-stage .load{fill:var(--steel);opacity:.8}
.hold-stage .glow{fill:var(--accent);opacity:0}
.hold-stage.done .wedge{opacity:.9}
.hold-btn{
  margin-top:26px;display:inline-flex;align-items:center;gap:12px;
  background:transparent;border:1px solid var(--line-strong);border-radius:100px;
  padding:13px 24px;cursor:pointer;position:relative;overflow:hidden;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-primary);
  transition:border-color .45s var(--ease),color .45s var(--ease);
  touch-action:none;user-select:none;-webkit-user-select:none;min-height:44px;
}
.hold-btn:hover{border-color:var(--steel)}
.hold-btn .fill{
  position:absolute;inset:0;background:var(--accent);transform-origin:left;
  transform:scaleX(var(--hp,0));opacity:.13;pointer-events:none;
}
.hold-btn .txt{position:relative;z-index:1}
.hold-btn.done{border-color:var(--accent);color:var(--accent)}
.commits{margin-top:36px;display:flex;flex-direction:column;gap:2px}
.commits li{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:16px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--line);
  opacity:.78;transform:translateY(6px);
  transition:opacity .7s var(--ease),transform .7s var(--ease-out);
}
.commits li.lit{opacity:1;transform:none}
.commits .tick{width:20px;height:20px;margin-top:3px;flex:none}
.commits .tick circle{fill:none;stroke:var(--line-strong);stroke-width:1.3;transition:stroke .6s var(--ease)}
.commits .tick path{stroke:var(--accent);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .6s var(--ease-out)}
.commits li.lit .tick circle{stroke:var(--accent)}
.commits li.lit .tick path{stroke-dashoffset:0}
.commits .h{font-family:var(--display);font-weight:600;font-size:18.5px;letter-spacing:-.006em;
  color:var(--text-secondary);transition:color .6s var(--ease)}
.commits li.lit .h{color:var(--text-primary)}
.commits .b{color:var(--text-secondary);font-size:15px;line-height:1.55;margin-top:5px;max-width:52ch}

/* --- 4. plain facts: a data table skeleton --- */
.facts{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,70px);align-items:start}
.facts h2{font-size:clamp(32px,4.4vw,56px);max-width:13ch;letter-spacing:-.014em}
.facts dl{margin:0;display:flex;flex-direction:column}
.facts .row{
  display:grid;grid-template-columns:minmax(120px,.5fr) minmax(0,1fr);gap:20px;
  padding:19px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.facts .row:first-child{border-top:1px solid var(--line)}
.facts dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.facts dd{margin:0;font-size:16px;color:var(--text-primary);line-height:1.5}
.facts dd .q{color:var(--text-secondary);font-size:14.5px;display:block;margin-top:4px}

/* --- 5. FAQ --- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(30px,5vw,74px);align-items:start}
.faq-grid h2{font-size:clamp(32px,4.4vw,56px);max-width:13ch;letter-spacing:-.014em}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(18px,1.9vw,21.5px);letter-spacing:-.008em;
  transition:color .4s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after,.faq summary::before{
  content:"";position:absolute;right:6px;top:50%;background:var(--steel);
  transition:transform .5s var(--ease-out),background-color .4s var(--ease);
}
.faq summary::after{width:13px;height:1.5px;margin-top:-.75px}
.faq summary::before{width:1.5px;height:13px;right:11.75px;margin-top:-6.5px}
.faq details[open] summary::before{transform:rotate(90deg) scaleX(0)}
.faq details[open] summary{color:var(--accent)}
.faq details[open] summary::after{background:var(--accent)}
.faq .ans{padding:0 40px 26px 0;color:var(--text-secondary);font-size:15.5px;line-height:1.65;max-width:66ch}
.faq .ans p + p{margin-top:12px}

/* --- 6. the single call to action --- */
.cta-sec{position:relative;overflow:hidden;background:var(--canvas-deep);border-top:1px solid var(--line)}
.cta-sec .glowline{
  position:absolute;left:50%;top:0;width:min(760px,90%);height:1px;transform:translateX(-50%);
  background:linear-gradient(to right,transparent,var(--accent),transparent);opacity:.5;
}
.cta-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-inner h2{font-size:clamp(34px,5.4vw,72px);max-width:16ch;letter-spacing:-.014em}
.cta-inner .lede{margin-top:22px;text-align:center;max-width:52ch}
.cta-inner .cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px}
.cta-sec .side-doors{
  margin-top:30px;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.cta-sec .side-doors a{color:var(--steel);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .4s var(--ease),border-color .4s var(--ease)}
.cta-sec .side-doors a:hover{color:var(--text-primary);border-bottom-color:var(--accent)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--canvas);position:relative;z-index:1}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.9fr));gap:clamp(26px,4vw,56px);padding:clamp(50px,7vw,76px) 0 clamp(36px,4vw,52px)}
.foot .lockup{font-size:34px;margin-bottom:18px}
.foot .blurb{color:var(--text-secondary);font-size:14.5px;line-height:1.6;max-width:38ch}
.foot h4{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:16px}
.foot ul li{margin-bottom:11px}
.foot ul a{color:var(--text-secondary);text-decoration:none;font-size:14.5px;transition:color .35s var(--ease)}
.foot ul a:hover{color:var(--accent)}
.foot-bot{
  border-top:1px solid var(--line);padding:26px 0 40px;
  display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:flex-start;
}
.foot-bot p{font-family:var(--mono);font-size:11.5px;color:var(--steel);letter-spacing:.05em;line-height:1.7;max-width:74ch}
.legal{color:var(--steel);font-size:12.5px;line-height:1.65;max-width:88ch;padding-bottom:38px}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.page-head{padding:calc(var(--nav-h) + clamp(58px,9vw,110px)) 0 clamp(34px,5vw,60px);position:relative;overflow:hidden}
.page-head h1{font-size:clamp(38px,6.2vw,82px);max-width:16ch;letter-spacing:-.014em}
.page-head .lede{margin-top:24px}
.page-head .art{
  position:absolute;right:-8%;top:0;width:min(52%,660px);height:100%;
  object-fit:cover;opacity:.3;
  mask-image:linear-gradient(to left,#000 8%,transparent 88%);
  -webkit-mask-image:linear-gradient(to left,#000 8%,transparent 88%);
  pointer-events:none;
}
@media (max-height:620px){.page-head .art{display:none}}

.prose{max-width:70ch}
.prose h2{font-size:clamp(25px,3.1vw,36px);margin-top:clamp(38px,5vw,56px);letter-spacing:-.012em}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:16px;color:var(--text-secondary);font-size:16.5px;line-height:1.7}
.prose strong{color:var(--text-primary);font-weight:600}

/* contact cards */
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,26px)}
.card{
  background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
  transition:border-color .55s var(--ease),transform .55s var(--ease-out);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card .role{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.card h3{margin-top:14px;font-size:clamp(24px,2.7vw,31px);letter-spacing:-.01em;font-weight:600}
.card .mail{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  color:var(--accent);text-decoration:none;font-size:16px;word-break:break-all;
  border-bottom:1px solid transparent;transition:border-color .4s var(--ease)
}
.card .mail:hover{border-bottom-color:var(--accent)}
.card .note{margin-top:16px;color:var(--text-secondary);font-size:14.5px;line-height:1.6}
.card .plate{position:absolute;right:-30px;bottom:-30px;width:150px;height:150px;opacity:.05;pointer-events:none}

/* ---------- forms ---------- */
.form-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(30px,5vw,72px);align-items:start}
.form-aside{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.form-aside img{width:100%;height:100%;object-fit:cover;opacity:.62;min-height:340px}
.form-aside .cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px;
  background:linear-gradient(to top,rgba(20,23,25,.94) 20%,rgba(20,23,25,0));
}
.form-aside .cap p{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.008em;line-height:1.3}
.form-aside .cap span{display:block;margin-top:8px;color:var(--text-secondary);font-size:14px;line-height:1.55}

form.fx{max-width:none}
.fset{border:0;padding:0;margin:0 0 clamp(28px,3.6vw,40px)}
.fset legend{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);padding:0;margin-bottom:20px;
  display:flex;align-items:center;gap:11px;width:100%;
}
.fset legend::after{content:"";flex:1;height:1px;background:var(--line)}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.frow-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:flex;flex-direction:column;margin-bottom:18px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:600;margin-bottom:8px;color:var(--text-primary);display:flex;gap:6px;align-items:baseline}
.field label .req{color:var(--accent);font-family:var(--mono);font-size:11px}
.field .hint{font-family:var(--mono);font-size:11.5px;color:var(--steel);margin-top:8px;line-height:1.5}
.field input,.field select{
  background:var(--panel-hi);border:1px solid var(--line-strong);border-radius:9px;
  padding:13px 14px;font-size:15.5px;width:100%;min-height:46px;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease);
  appearance:none;-webkit-appearance:none;
}
.field input::placeholder{color:#8A939A}
.field input:hover,.field select:hover{border-color:var(--steel)}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--accent);background:var(--panel-hi);
  box-shadow:0 0 0 3px var(--accent-muted);
}
.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235F696F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer;
}
.field select option{background:var(--panel-hi);color:var(--text-primary)}
.field.bad input,.field.bad select{border-color:#B3261E}
.field .err{color:#B3261E;font-size:13px;margin-top:8px;display:none;line-height:1.5}
.field.bad .err{display:block}

/* radio row */
.radio-row{display:flex;flex-wrap:wrap;gap:10px}
.radio{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line-strong);border-radius:9px;padding:12px 20px;cursor:pointer;
  min-height:46px;font-size:15px;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}
.radio:hover{border-color:var(--steel)}
.radio input{position:absolute;opacity:0;width:1px;height:1px}
.radio .dotb{
  width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none;
  position:relative;transition:border-color .35s var(--ease);
}
.radio .dotb::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);
  transform:scale(0);transition:transform .4s var(--ease-out);
}
.radio input:checked ~ .dotb{border-color:var(--accent)}
.radio input:checked ~ .dotb::after{transform:scale(1)}
.radio:has(input:checked){border-color:var(--accent);background:var(--accent-muted)}
.radio input:focus-visible ~ .dotb{outline:2px solid var(--accent);outline-offset:3px}

.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px}
.form-note{font-family:var(--mono);font-size:11.5px;color:var(--steel);line-height:1.65;max-width:52ch;margin-top:20px}

/* the success state */
.done-panel{
  display:none;border:1px solid var(--accent);border-radius:14px;
  background:linear-gradient(168deg,rgba(20,98,127,.06),rgba(20,98,127,.02));
  padding:clamp(28px,3.6vw,44px);
}
.done-panel.on{display:block;animation:doneIn .8s var(--ease-out) both}
@keyframes doneIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.done-panel .mk{width:46px;height:46px;margin-bottom:20px}
.done-panel .mk circle{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:.5}
.done-panel .mk path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;animation:tick .7s var(--ease-out) .25s forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.done-panel h2{font-size:clamp(26px,3.3vw,38px);letter-spacing:-.012em}
.done-panel p{margin-top:14px;color:var(--text-secondary);font-size:16px;line-height:1.65;max-width:56ch}
.done-panel .summary{
  margin-top:24px;border-top:1px solid var(--line);padding-top:20px;
  font-family:var(--mono);font-size:12.5px;color:var(--steel);line-height:1.95;
}
.done-panel .summary b{color:var(--text-primary);font-weight:500}

/* ---------- sitemap page ---------- */
.map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,30px)}
.map-col{border-top:1px solid var(--line-strong);padding-top:22px}
.map-col h2{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.map-col li{margin-bottom:2px}
.map-col a{
  display:flex;align-items:baseline;gap:12px;text-decoration:none;padding:13px 0;
  border-bottom:1px solid var(--line);transition:padding-left .45s var(--ease-out);
}
.map-col a:hover{padding-left:9px}
.map-col a .t{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.008em;transition:color .4s var(--ease)}
.map-col a:hover .t{color:var(--accent)}
.map-col a .d{color:var(--text-secondary);font-size:13.5px;display:block;margin-top:4px;line-height:1.5}
.map-col a .arw{margin-left:auto;color:var(--steel);transition:transform .45s var(--ease-out),color .4s var(--ease)}
.map-col a:hover .arw{transform:translateX(4px);color:var(--accent)}

/* ---------- 404 ---------- */
.four{min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--nav-h) + 60px) 0 80px}
.four h1{font-size:clamp(68px,16vw,196px);letter-spacing:-.02em;line-height:.9}
.four .lede{margin:22px auto 0;text-align:center}
.four .cta-row{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}

/* ==========================================================================
   ENTRANCES: choreography, then the delays retire
   ========================================================================== */
.rv .part{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in .part{opacity:1;transform:none}
.rv.in .part:nth-child(1){transition-delay:0s}
.rv.in .part:nth-child(2){transition-delay:.075s}
.rv.in .part:nth-child(3){transition-delay:.15s}
.rv.in .part:nth-child(4){transition-delay:.225s}
.rv.in .part:nth-child(5){transition-delay:.3s}
.rv.in .part:nth-child(6){transition-delay:.375s}
/* retire the stagger so hovers on later siblings never lag; matches the
   specificity of the nth-child rules above */
.rv.in.settled .part:nth-child(1),.rv.in.settled .part:nth-child(2),
.rv.in.settled .part:nth-child(3),.rv.in.settled .part:nth-child(4),
.rv.in.settled .part:nth-child(5),.rv.in.settled .part:nth-child(6){transition-delay:0s}

.fade{opacity:0;transform:translateY(16px);transition:opacity .95s var(--ease-out),transform .95s var(--ease-out)}
.fade.in{opacity:1;transform:none}

/* one living element per section, paused off screen and on hidden tabs */
.live-glow{position:absolute;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.in > .live-glow,.in .live-glow{opacity:1}
.in .live-glow{animation:breathe 7.5s var(--ease) -2.4s infinite}
@keyframes breathe{0%,100%{opacity:.32;transform:scale(1)}50%{opacity:.72;transform:scale(1.06)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .premise,.hold-grid,.facts,.faq-grid,.form-layout{grid-template-columns:minmax(0,1fr)}
  .form-aside{order:-1}
  .form-aside img{min-height:220px}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .lockup{font-size:36px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .nav-links a.btn-primary{color:var(--canvas);font-weight:600;padding:13px 22px}
.nav-links a.btn-primary:hover{color:var(--canvas)}

.nav-toggle{display:inline-flex}
  .nav-links{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;
    background:rgba(241,244,245,.985);backdrop-filter:blur(20px);box-shadow:var(--shadow-md);
    border-bottom:1px solid var(--line);padding:14px var(--gut) 26px;gap:0;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .45s var(--ease),transform .45s var(--ease-out);
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a:not(.btn){padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav-links .btn{margin-top:18px;justify-content:center;width:100%}
}
@media (max-width:640px){
  .static-hero .cta-row,.band .cta-row,.cta-inner .cta-row,.four .cta-row{flex-direction:column;align-items:stretch;width:100%}
  .static-hero .cta-row .btn,.band .cta-row .btn,.cta-inner .cta-row .btn,.four .cta-row .btn{width:100%}
  .frow,.frow-3{grid-template-columns:minmax(0,1fr)}
  .facts .row{grid-template-columns:minmax(0,1fr);gap:6px}
  .map-grid{grid-template-columns:minmax(0,1fr)}
  .foot-top{grid-template-columns:minmax(0,1fr);gap:34px}
  .foot-bot{flex-direction:column}
  .triplet li{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* ==========================================================================
   REDUCED MOTION: honoured completely, and live in both directions
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  .rv .part,.fade{opacity:1;transform:none}
  .commits li{opacity:1;transform:none}
  .draw{stroke-dashoffset:0}
  .live-glow{opacity:.5}
  .pivot-rule .spark{opacity:.9}
  /* re-apply positional transforms rather than blanket-killing them */
  .hold-btn .fill{transform:scaleX(1)}
}

/* ==========================================================================
   THE BAND IMAGE: a wide cinematic plate, its own layout skeleton
   ========================================================================== */
.band-image{padding-block:clamp(20px,4vw,48px)}
.bi-frame{
  position:relative;width:100%;max-width:1560px;margin:0 auto;
  border-block:1px solid var(--line);overflow:hidden;
  aspect-ratio:24/9;min-height:260px;
}
.bi-frame img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.02)}
.bi-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(16,19,21,.86) 0%,rgba(16,19,21,.30) 46%,rgba(16,19,21,.62) 100%),
    linear-gradient(to bottom,rgba(16,19,21,.46),rgba(16,19,21,0) 34%,rgba(16,19,21,.56));
}
.bi-line{
  position:absolute;left:0;right:0;bottom:clamp(24px,4vw,54px);
  padding-inline:var(--gut);margin:0 auto;max-width:var(--maxw);
  font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.14;
  font-size:clamp(25px,3.7vw,52px);max-width:22ch;color:#F4F6F7;font-optical-sizing:auto;
  text-shadow:0 1px 2px rgba(5,5,10,.9),0 3px 14px rgba(5,5,10,.7);
}
.band-image.fade .bi-line{transition:opacity 1.1s var(--ease-out) .2s,transform 1.1s var(--ease-out) .2s}
@media (max-width:720px){
  .bi-frame{aspect-ratio:4/3}
  .bi-frame img{object-position:center 40%}
}

/* the hold visual column */
.hold-visual{display:flex;flex-direction:column;align-items:flex-start}
.hold-stage .beam-g{transform-box:fill-box;transform-origin:center;transition:transform .12s linear}
.hold-stage.done .beam-g{transition:transform .7s var(--ease-out)}

/* ---------- the eligibility gate note ---------- */
.gate-note[hidden]{display:none}
.note-block{
  border:1px solid rgba(179,38,30,.32);border-left-width:3px;border-radius:9px;
  background:rgba(179,38,30,.05);padding:16px 18px;
  color:#8C1D18;font-size:14.5px;line-height:1.6;
}
.note-block a{color:#8C1D18;text-decoration:underline;text-underline-offset:3px}
form.fx.blocked .form-actions button[type="submit"]{opacity:.4;pointer-events:none}

/* the sitemap rows wrap their text in one span so the arrow can sit right */
.map-col a > span:first-child{flex:1;min-width:0}
.map-col a .t{display:block}

.form-lead{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--steel);
  margin:-8px 0 20px;line-height:1.6;
}

/* ==========================================================================
   THE ARCHIMEDES QUOTE: the idea the firm is named for
   ========================================================================== */
.quote-sec{padding:clamp(64px,9vw,120px) 0;background:var(--canvas-deep);border-block:1px solid var(--line)}
.quote{margin:0;text-align:center;display:flex;flex-direction:column;align-items:center}
.quote .qmark{width:120px;height:44px;margin-bottom:clamp(22px,3vw,34px);overflow:visible}
.quote .qmark .beam{stroke:var(--line-strong);stroke-width:1.6;stroke-linecap:round}
.quote .qmark .wedge{fill:var(--steel);opacity:.85}
.quote .qmark .spark{fill:var(--accent);opacity:0;transition:opacity 1s var(--ease) .3s}
.quote-sec.in .qmark .spark,.fade.in .qmark .spark{opacity:1}
.quote blockquote{
  margin:0;font-family:var(--display);font-style:italic;font-weight:400;
  letter-spacing:-.004em;line-height:1.24;font-optical-sizing:auto;
  font-size:clamp(25px,3.7vw,50px);max-width:24ch;color:var(--ink);text-wrap:balance;
}
.quote blockquote::before{content:"\201C"}
.quote blockquote::after{content:"\201D"}
.quote figcaption{
  margin-top:clamp(18px,2.4vw,28px);font-family:var(--mono);font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
  display:flex;align-items:center;gap:12px;
}
.quote figcaption::before{content:"";width:26px;height:1px;background:var(--line-strong)}

/* ==========================================================================
   THE FEE TIERS
   ========================================================================== */
.tiers{margin-top:clamp(40px,5vw,64px);max-width:var(--maxw);margin-inline:auto}
.tiers table{
  width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);
}
.tiers thead th{
  font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);text-align:left;
  padding:16px 18px;border-bottom:1px solid var(--line);background:var(--canvas-deep);
}
.tiers tbody th{
  font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.004em;
  text-align:left;padding:16px 18px;color:var(--ink);white-space:nowrap;
}
.tiers tbody th span{
  display:inline-block;margin-left:8px;font-family:var(--mono);font-weight:400;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  border:1px solid var(--line-strong);border-radius:100px;padding:2px 8px;vertical-align:middle;
}
.tiers td{padding:16px 18px;font-size:15.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.tiers tbody tr{border-top:1px solid var(--line);transition:background-color .4s var(--ease)}
.tiers tbody tr:hover{background:var(--canvas-deep)}
.tiers .ours{color:var(--text-secondary)}
.tiers .yours{color:var(--ink);font-weight:600}
.tiers tr.hurdle{background:var(--accent-muted)}
.tiers tr.hurdle:hover{background:var(--accent-muted)}
.tiers tr.hurdle .yours{color:var(--accent);font-weight:700}
.tiers tr.cap td,.tiers tr.cap th{color:var(--text-secondary)}
.tier-note{
  margin-top:22px;font-family:var(--body);font-size:14.5px;line-height:1.66;
  color:var(--steel);max-width:74ch;
}
@media (max-width:720px){
  .tiers table,.tiers thead,.tiers tbody,.tiers tr,.tiers th,.tiers td{display:block}
  .tiers thead{display:none}
  .tiers tbody tr{padding:14px 16px;border-top:1px solid var(--line)}
  .tiers tbody th{padding:0 0 8px}
  .tiers td{padding:2px 0;font-size:15px}
  .tiers td::before{
    content:attr(data-l) " ";font-family:var(--mono);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--steel);
  }
}

/* A whisper of noise over the hero. The light theme's vignette is a very
   shallow ramp, and shallow ramps band on 8 bit displays; this dithers it. */
.stage-vig::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* the attribution wraps on a phone, so the rule moves above it rather than
   sitting centred against a two line block */
@media (max-width:640px){
  .quote figcaption{flex-direction:column;gap:12px;text-align:center;line-height:1.7}
  .quote blockquote{max-width:19ch}
}