/* ============================================================
   EAS — "Clinical instrument" direction, prototype v2
   Revision notes:
   - Removed the fake status bar, marquee ticker, pulsing dot.
     Decoration pretending to be data is the exact AI tell we're
     avoiding. Nothing here animates unless a user drives it —
     including scroll: reveals fire once in response to the reader
     arriving, never on a loop, never idle.
   - No composite weights, no max scores, no severity bands, no
     instrument enumeration. Evidence of rigor, not the recipe.
   - Framing moved from clinical/diagnostic to readiness.
   ============================================================ */

/* Palette derived from the logo (#0679AF), not copied from it.
   The brand blue is 4.27:1 on cream, which fails WCAG AA for body text (4.5).
   It stays the identity colour for the mark and large fills; text-bearing blue
   steps down to --blue on cream and up to --blue-2 on ink. Ratios verified. */
:root{
  --brand:#0679AF;    /* the logo. identity only: marks, fills, large shapes */
  --brand-rgb:6,121,175;  /* same value, for rgba(). keep in sync with --brand */
  --blue:#05618C;     /* text on cream — 6.02:1 AA. labels, links, kickers    */
  --blue-2:#089BE0;   /* text on ink   — 5.23:1 AA. accents on dark bands     */
  --ink:#0E2233;
  --ink-2:#153650;
  --cream:#F5F1E8;
  --cream-2:#FBF9F3;
  --sand:#ECE5D6;
  --slate:#586773;    /* body text on cream — 5.17:1 */
  /* Was #8A97A1, which measured 2.65:1 on cream and failed WCAG everywhere it
     was used: the headline em on all six pages, section labels, the demo note,
     episode and roster numbers, chip captions, the compliance fine print. Most
     of those are small text needing 4.5, not the 3.0 large-text floor.
     #616E79 clears 4.5 on both cream and cream-2 and is still a visible step
     lighter than --slate. Don't lighten it without re-measuring. */
  --slate-2:#616E79;  /* dim text on cream — 4.64:1 */
  --gold:#B8923F;
  --rule:rgba(14,34,51,.14);
  --rule-2:rgba(14,34,51,.24);
  --rule-3:rgba(14,34,51,.42);
  --sans:"Archivo",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box}
/* The closed mobile menu is parked off-screen at translateX(100%). Nothing
   clips it, so it extends the document's scroll width and the page scrolls
   sideways on a phone (measured: 675px wide in a 390px viewport).
   `clip` not `hidden`: hidden creates a scroll container, which breaks the
   position:sticky header. clip just clips. */
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);
  line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 100,"wght" 400}
/* No display serif anywhere. Archivo carries a width axis, so headlines run
   wide and heavy against normal-width body: one family, two extremes. This is
   what instrument design actually does — grotesque and mono, nothing else. */
h1,h2,h3,h4{font-family:var(--sans);line-height:1.06;margin:0;letter-spacing:-.028em;
  font-variation-settings:"wdth" 112,"wght" 600}
h1{letter-spacing:-.036em;font-variation-settings:"wdth" 116,"wght" 600}
h3,h4{letter-spacing:-.022em;font-variation-settings:"wdth" 108,"wght" 600}
/* Martian Mono runs wide; pull it in so small labels stay compact. */
.m,.m-lo,.nav-links a,.btn,.sec-lbl{letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,40px)}

/* mono data layer */
.m{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500}
.m-lo{font-family:var(--mono);font-size:.78rem}
.dim{color:var(--slate-2)}

/* --- header: static, no theatre --- */
header{position:sticky;top:0;z-index:50;background:rgba(245,241,232,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;height:58px}
/* The mark carries the brand blue at full strength: it's a logo, not text,
   so the 4.27:1 on cream is fine and correct. */
/* Mark is 2.189:1 after the viewBox crop, so height drives width. 26px tall
   renders ~57px wide, which sits properly against the 58px nav bar. */
.brand{display:inline-flex;align-items:center;color:var(--brand)}
.brand .mark{height:26px;width:auto;display:block}
footer .brand{color:#fff}
footer .brand .mark{height:24px}
@media (max-width:560px){ .brand .mark{height:22px} }
.nav-links{display:flex;align-items:center;gap:1.75rem}
.nav-links a{font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate);transition:color .16s;position:relative;padding:2px 0}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink)}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-weight:500;
  font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;padding:.7em 1.1em;
  border:1px solid var(--rule-3);cursor:pointer;transition:.16s;border-radius:2px;background:none;color:var(--ink)}
.btn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-solid:hover{background:var(--ink-2);border-color:var(--ink-2)}

/* --- mobile menu: real navigation, not hidden links --- */
.burger{display:none;background:none;border:0;width:26px;height:18px;position:relative;
  cursor:pointer;padding:0;z-index:70}
.burger span{position:absolute;left:0;height:1.5px;width:100%;background:var(--ink);transition:.28s}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:8px}
.burger span:nth-child(3){top:16px}
body.menu .burger span{background:var(--cream)}
body.menu .burger span:nth-child(1){top:8px;transform:rotate(45deg)}
body.menu .burger span:nth-child(2){opacity:0}
body.menu .burger span:nth-child(3){top:8px;transform:rotate(-45deg)}
body.menu{overflow:hidden}
/* header is sticky with z-index:50, which makes it a stacking context — the
   panel's z-index:65 and burger's 70 only rank INSIDE it, so the scrim (60,
   outside the header) painted over the open panel. Invisible over an ink
   panel, but it ate every tap: links never received a touch, and the scrim
   handler just closed the menu. Lift the whole header above the scrim while
   the menu is open. Found by a real finger; synthetic .click() bypasses
   hit-testing and sailed straight through it. */
body.menu header{z-index:66}

/* --- hero --- */
.hero{padding:clamp(56px,8vw,96px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--rule)}

/* Home hero: the mountain at strength, white text over it.
   The image is dark-shot but contains pure-WHITE pixels (snow, sky), so white
   text needs a real overlay or it lands on 1:1. Every alpha below is measured
   against the brightest pixel in the crop, not chosen: ink at .74 is the floor
   that clears white (6.97:1), the dimmed em (3.07:1) and the sub (5.05:1)
   simultaneously. It also leaves the photo 26% visible at its brightest, which
   is what makes the ridge read at all. Do not lighten past .74 — re-measure. */
.hero-photo{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);color:#fff;border-bottom:0;
  padding:clamp(72px,10vw,124px) 0 clamp(64px,9vw,104px);
}
.hero-photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(180deg,
      rgba(14,34,51,.74)  0%,
      rgba(14,34,51,.78) 52%,
      rgba(14,34,51,.90) 100%),
    var(--hero-img, url("/assets/img/mountain.jpg"));
  background-size:cover, cover;
  background-position:center, center 55%;
  background-repeat:no-repeat, no-repeat;
}
/* No cream fade at the bottom: the CTA sits there, and fading a dark hero into
   cream under white outline buttons is exactly the invisible-Contact-button bug
   from the first version of this site. The hero ends on a clean edge instead. */
/* The ghost mark. Opacity is the whole design: ~7% reads as an etched
   watermark, 12%+ reads as a corporate slide. It never sits under the text
   column, and the wrap stacks above it regardless. */
.hero-mark{position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  z-index:0;pointer-events:none;color:#fff;opacity:.07}
.hero-mark .mark{height:min(52vw,480px);width:auto}
.hero-photo .wrap{position:relative;z-index:1}
@media (max-width:900px){.hero-mark{display:none}}

.hero-photo .eyebrow{color:#DDE2E5}
.hero-photo h1{color:#fff}
/* .hero h1 em is defined later at equal specificity (0,1,2) and would win on
   source order, so this doubles up on .hero to take it. */
.hero.hero-photo h1 em{color:#AEB8C0}
.hero-photo .hero-sub{color:#DDE2E5}

/* The brand line, set as a stamp rather than a second headline: mono and
   letterspaced so it reads in a different register than the proposition above
   it, with a rule to anchor it. #DDE2E5 not #AEB8C0 — this is small text, so it
   needs 4.5:1 against the photo's brightest pixel, and AEB8C0 only makes 3.61. */
.hero-tag{
  margin-top:1.3rem;display:flex;align-items:center;gap:.9rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:#DDE2E5;
}
.hero-tag::before{
  content:"";width:clamp(24px,4vw,52px);height:1px;background:rgba(255,255,255,.45);flex:none;
}
.hero-tag .words span{display:inline}
/* On phones the tagline stops mid-wrapping across two lines; stack the rule
   above and give each word its own line so it reads as three declarations. */
@media (max-width:560px){
  .hero-tag{flex-direction:column;align-items:flex-start;gap:.5rem}
  .hero-tag .words span{display:block;line-height:1.95}
}
.hero-photo .btn{border-color:rgba(255,255,255,.42);color:#fff;background:none}
.hero-photo .btn:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero-photo .btn-solid{background:#fff;color:var(--ink);border-color:#fff}
.hero-photo .btn-solid:hover{background:rgba(255,255,255,.86);color:var(--ink)}

.demo-band{padding-top:clamp(34px,4.5vw,54px)}
.demo-band .demo{margin-top:0}
.hero .eyebrow{color:var(--slate);margin-bottom:1.4rem}
.hero h1{font-size:clamp(2.3rem,5.1vw,3.9rem);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--slate-2);font-variation-settings:"wdth" 116,"wght" 400}
.hero-sub{margin-top:1.4rem;max-width:52ch;font-size:1.08rem;color:var(--slate)}
.hero-cta{margin-top:1.9rem;display:flex;gap:.65rem;flex-wrap:wrap}

/* --- the working radar: a real component, not a picture --- */
.demo{display:grid;grid-template-columns:1fr .92fr;gap:clamp(26px,4vw,52px);align-items:center;
  border:1px solid var(--rule-2);background:var(--cream-2);border-radius:2px;
  padding:clamp(20px,3vw,34px);margin-top:clamp(34px,4vw,52px)}
.demo-copy .k{color:var(--blue)}
.demo-copy h3{font-size:clamp(1.3rem,2.3vw,1.75rem);margin-top:.7rem;max-width:18ch}
.demo-copy p{margin-top:.9rem;color:var(--slate);font-size:.95rem;max-width:44ch}
.demo-out{margin-top:1.4rem;border-top:1px solid var(--rule)}
.demo-out .r{display:flex;justify-content:space-between;align-items:baseline;padding:.55rem 0;
  border-bottom:1px solid var(--rule)}
.demo-out .k2{font-size:.76rem;color:var(--slate)}
.demo-out .v{font-family:var(--mono);font-size:.84rem;font-weight:500}
/* Interactive rows in the readout: the check-in slider and the reflex test. */
.demo-out .v-live{display:flex;align-items:center;gap:.6rem}
.demo-out .v-live b{min-width:3.4em;text-align:right;font-weight:500}
.demo-out input[type=range]{width:120px;accent-color:var(--brand);margin:0}
.rx{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.35em .9em;border:1px solid var(--rule-3);border-radius:2px;background:none;
  color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.rx:hover{border-color:var(--ink)}
.rx.go{background:var(--brand);border-color:var(--brand);color:#fff}
.demo-note{margin-top:1rem;font-size:.74rem;color:var(--slate-2);max-width:42ch}
.radar-wrap{display:grid;place-items:center;width:100%}
/* Results readout sits under the radar; the copy column keeps the inputs. */
.radar-wrap .demo-out{width:100%;margin-top:1rem}
.radar-wrap .demo-note{width:100%}
.radar{width:100%;max-width:380px;touch-action:none;cursor:grab;user-select:none}
.radar:active{cursor:grabbing}
.radar .grid-l{stroke:var(--rule);fill:none}
.radar .axis{stroke:var(--rule-2)}
/* The radar is a graphic, not text, so it carries the real brand blue.
   4.57:1 on cream-2 clears the 3:1 WCAG floor for non-text objects. */
.radar .shape{fill:rgba(var(--brand-rgb),.14);stroke:var(--brand);stroke-width:1.5}
.radar .hnd{fill:var(--cream-2);stroke:var(--brand);stroke-width:1.5;cursor:grab}
.radar .hnd:hover,.radar .hnd.drag{fill:var(--brand)}
.radar .lbl{font-family:var(--mono);font-size:8px;letter-spacing:.06em;fill:var(--slate);text-transform:uppercase}

/* --- sections --- */
.band{padding:clamp(52px,6.5vw,84px) 0;border-bottom:1px solid var(--rule)}
.band.dark{background:var(--ink);color:#fff;border-bottom-color:rgba(255,255,255,.14)}
/* Section heads stack. No index column, no 01/ numbering: that grid was a tic,
   not information, and it made every section look machine-generated. */
.sec-head{margin-bottom:clamp(26px,3.5vw,40px);max-width:78ch}
.sec-lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate-2);display:block;margin-bottom:.7rem}
.dark .sec-lbl{color:rgba(255,255,255,.42)}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.35rem);max-width:22ch}
.sec-head .lead{margin-top:.85rem;max-width:62ch;color:var(--slate);font-size:1.02rem}
.dark .sec-head .lead{color:rgba(255,255,255,.7)}

/* --- three inputs --- */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14)}
.tri > div{background:var(--ink);padding:1.4rem 1.3rem 1.6rem}
.tri .n{font-family:var(--mono);font-size:.68rem;color:var(--gold);letter-spacing:.1em}
.tri h4{margin-top:.8rem;font-size:1.1rem;color:#fff}
.tri p{margin-top:.55rem;color:rgba(255,255,255,.62);font-size:.86rem}

/* --- trust --- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule-2)}
.trust > div{padding:1.3rem 1.3rem 1.5rem;border-right:1px solid var(--rule)}
.trust > div:last-child{border-right:0}
.trust .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
/* Supporting facts under a section. Stated, not sold. */
.fine{margin-top:1.2rem;color:var(--slate-2);font-size:.64rem;line-height:1.9;
  letter-spacing:.04em;text-transform:none;max-width:none}
.dark .fine{color:rgba(255,255,255,.42)}
.trust h4{font-size:1.05rem;margin-top:.65rem}
.trust p{font-size:.85rem;color:var(--slate);margin-top:.4rem}

/* --- product shot slot --- */
/* Real product shot, once the file lands in assets/img/shots/ */
.shot{margin:0;border:1px solid var(--rule-2);background:var(--cream-2);border-radius:2px;
  overflow:hidden}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{padding:.7rem .9rem;border-top:1px solid var(--rule);color:var(--slate);
  font-size:.66rem;letter-spacing:.05em}

/* Placeholder until it does. Names the exact file it wants. */
.shot-slot{border:1px dashed var(--rule-3);background:var(--cream-2);aspect-ratio:16/9;
  display:grid;place-items:center;text-align:center;padding:24px;border-radius:2px}
.shot-slot .m{color:var(--slate-2)}
.shot-slot code{font-family:var(--mono);font-size:.94em;color:var(--blue);
  background:rgba(var(--brand-rgb),.09);padding:.15em .4em;border-radius:2px}
.shot-slot b{display:block;font-family:var(--sans);font-size:1.1rem;color:var(--slate);
  font-variation-settings:"wdth" 110,"wght" 600;letter-spacing:-.02em;margin-bottom:.5rem}

.cta{text-align:center}
.cta h2{font-size:clamp(1.7rem,3.2vw,2.4rem);max-width:20ch;margin:0 auto}
.cta p{margin:.9rem auto 0;max-width:46ch;color:var(--slate)}
.cta .btn{margin-top:1.5rem}

.flag{border-left:2px solid var(--gold);padding:.6rem 0 .6rem .9rem;margin-top:2rem;
  font-size:.8rem;color:var(--slate);max-width:72ch}
.flag b{color:var(--gold);font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;display:block;margin-bottom:.25rem}

/* --- team: a masthead, not a grid of squares --- */
.lede{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,54px);align-items:center;
  border:1px solid var(--rule-2);background:var(--cream-2);border-radius:2px;overflow:hidden}
.lede .lt{padding:clamp(24px,3.4vw,42px)}
.lede .k{color:var(--blue)}
.lede h3{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-top:.7rem;max-width:16ch}
.lede .cred{font-family:var(--mono);font-size:.74rem;letter-spacing:.01em;
  color:var(--slate-2);margin-top:.9rem}
.lede p{margin-top:1rem;color:var(--slate);font-size:.95rem;max-width:46ch}
.lede .li{align-self:stretch;min-height:280px;background:var(--sand)}
.lede .li img{width:100%;height:100%;object-fit:cover;object-position:center top}

.roster{border-top:1px solid var(--rule-2);margin-top:clamp(30px,4vw,48px)}
.rrow{display:grid;grid-template-columns:64px 1fr;gap:.15rem 1.4rem;align-items:center;
  padding:1rem 0;border-bottom:1px solid var(--rule);transition:background .16s}
.rrow:hover{background:var(--cream-2)}
.rrow .av{grid-row:1/-1;width:64px;height:64px;overflow:hidden;background:var(--sand);border:1px solid var(--rule)}
.rrow .av img{width:100%;height:100%;object-fit:cover}
.rrow h4{font-size:1.14rem}
.rrow .role{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.rrow .cred{grid-column:2;font-size:.84rem;color:var(--slate)}

/* --- partner lockup ---
   Both marks go white on the ink band. --nhlaa-ko is the colour the NHLAA
   mark's knockouts show through to: it MUST match the band behind it, or the
   punched detail inside the mark fills in solid and the logo turns to mush. */
.lockup{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);
  padding:clamp(18px,2.4vw,26px) 0 clamp(22px,3vw,32px);
  border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
  margin-bottom:clamp(26px,3.5vw,40px);--nhlaa-ko:var(--ink)}
.lockup .eas{color:#fff;display:flex}
.lockup .eas .mark{height:44px;width:auto}
.lockup .x{color:rgba(255,255,255,.3);font-size:1.2rem;line-height:1}
.lockup .partner{color:#fff;display:flex}
/* Taller than the EAS wordmark on purpose. A circular badge carries less
   visual weight than a wordmark at equal height, so matching the numbers
   makes the partner look subordinate. Checked in the browser, not computed. */
.lockup .partner .nhlaa-mark{height:68px;width:auto}

/* --- partnerships --- */
.pfeat{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,50px);align-items:start}
.banner{border:1px solid rgba(184,146,63,.4);aspect-ratio:16/9;display:grid;place-items:center;
  text-align:center;background:linear-gradient(140deg,#12283b,#173b56);overflow:hidden;border-radius:2px}
.banner img{width:100%;height:100%;object-fit:cover}
/* A real photo keeps its own proportions. Cover-cropping a group shot into
   16:9 cut people off at the ankles; the frame yields to the image instead. */
.banner.is-photo{aspect-ratio:auto}
.banner.is-photo img{height:auto;object-fit:unset}
.banner .ph{padding:22px;color:rgba(255,255,255,.55)}
.banner .ph b{display:block;font-family:var(--sans);color:var(--gold);font-size:1.25rem;
  font-variation-settings:"wdth" 116,"wght" 700;letter-spacing:-.02em;
  font-weight:500;margin-bottom:.35rem}
/* Click-to-play video facade (reusable). Dark-band ready. */
.video-embed{position:relative;display:block;margin-top:clamp(26px,3.5vw,40px);
  aspect-ratio:16/9;border:1px solid rgba(255,255,255,.16);border-radius:2px;
  overflow:hidden;background:#000;cursor:pointer}
.video-embed img{width:100%;height:100%;object-fit:cover;opacity:.7;transition:opacity .25s}
.video-embed:hover img{opacity:.85}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;background:rgba(6,121,175,.92);
  display:grid;place-items:center;transition:transform .2s,background .2s;pointer-events:none}
.video-embed:hover .video-play{transform:translate(-50%,-50%) scale(1.08);background:var(--brand)}
.video-play svg{width:24px;height:24px;fill:#fff;margin-left:3px}
.video-cap{position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff;pointer-events:none;
  background:linear-gradient(0deg,rgba(14,34,51,.9),transparent)}
.video-frame{width:100%;height:100%;border:0;display:block}

.facts{border-top:1px solid rgba(255,255,255,.16)}
.facts .fr{padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.16)}
.facts .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.facts .v{font-size:1rem;margin-top:.25rem;color:rgba(255,255,255,.92)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.chip{border:1px solid var(--rule-2);padding:.6em 1em;border-radius:2px;font-size:.88rem;font-weight:500}
.chip small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate-2);font-weight:400;margin-top:.2rem}

/* --- podcast --- */
.host{display:flex;align-items:center;gap:.9rem}
.host .ha{width:56px;height:56px;border-radius:50%;overflow:hidden;border:1px solid var(--rule);flex:none}
.host .ha img{width:100%;height:100%;object-fit:cover}
.host .hn{font-family:var(--sans);font-size:1.08rem;letter-spacing:-.022em;
  font-variation-settings:"wdth" 108,"wght" 600}
.eps{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--rule-2)}
.ep{display:grid;grid-template-columns:180px 1fr;gap:1.1rem;padding:1.1rem;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:background .16s;align-items:start}
.ep:nth-child(even){border-right:0}
.ep:nth-last-child(-n+2){border-bottom:0}
.ep:hover{background:var(--cream-2)}
.ep .th{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);border:1px solid var(--rule)}
.ep .th img{width:100%;height:100%;object-fit:cover}
.ep .pl{position:absolute;left:9px;bottom:9px;width:28px;height:28px;border-radius:50%;
  background:rgba(14,34,51,.78);display:grid;place-items:center}
.ep .pl svg{width:10px;height:10px;fill:#fff;margin-left:1.5px}
.ep .no{font-family:var(--mono);font-size:.66rem;color:var(--slate-2);letter-spacing:.08em}
.ep h4{font-size:1.04rem;margin-top:.35rem;line-height:1.24}
.ep .g{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--blue);margin-top:.5rem}

/* --- contact --- */
.contact{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(28px,4vw,58px);align-items:start}
.cdl{border-top:1px solid var(--rule-2);margin-top:1.6rem}
.cdl .r{padding:.85rem 0;border-bottom:1px solid var(--rule)}
.cdl .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-2)}
.cdl .v{margin-top:.25rem;font-size:1rem}
.cdl a:hover{color:var(--blue)}
form{border:1px solid var(--rule-2);background:var(--cream-2);padding:clamp(22px,3vw,34px);border-radius:2px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate);margin-bottom:.4rem}
.field label .req{color:var(--blue)}
.field input,.field textarea{width:100%;border:1px solid var(--rule-2);border-radius:2px;
  padding:.72em .85em;font-family:inherit;font-size:.94rem;color:var(--ink);background:#fff;
  transition:border-color .16s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.14)}
.field textarea{resize:vertical;min-height:112px}
form .btn{width:100%;justify-content:center;margin-top:2px}
.fn{font-family:var(--mono);font-size:.7rem;color:var(--slate-2);margin-top:12px;text-align:center}
.fn a{color:var(--blue)}
.hp{position:absolute;left:-9999px}

/* --- home fork: two audiences, one click --- */
.fork{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule-2)}
.fk{display:block;padding:clamp(22px,2.8vw,34px);border-right:1px solid var(--rule);
  transition:background .16s}
.fk:last-child{border-right:0}
.fk:hover{background:var(--cream-2)}
.fk > .m{color:var(--blue)}
.fk h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-top:.8rem;max-width:15ch}
.fk h3 em{font-style:normal;color:var(--slate-2);font-variation-settings:"wdth" 108,"wght" 400}
.fk p{margin-top:.8rem;color:var(--slate);font-size:.92rem;max-width:40ch}
.fk .go{display:inline-block;margin-top:1.1rem;color:var(--ink);
  border-bottom:1px solid var(--rule-3);padding-bottom:2px}
.fk:hover .go{border-bottom-color:var(--ink)}

/* --- figures (business proof) --- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.16)}
.fig{padding:1.5rem 1.3rem 1.5rem 0;border-bottom:1px solid rgba(255,255,255,.16)}
.fig + .fig{padding-left:1.5rem;border-left:1px solid rgba(255,255,255,.16)}
.fig .n{font-size:clamp(2.2rem,4.4vw,3rem);line-height:1;letter-spacing:-.04em;
  font-variation-settings:"wdth" 112,"wght" 600}
.fig .n .u{color:var(--gold);font-size:.5em;letter-spacing:0}
.fig .m2{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-top:.7rem}
.fig .l{color:rgba(255,255,255,.9);margin-top:.4rem;font-size:.96rem}
.figs-note{margin-top:1.3rem;color:rgba(255,255,255,.5);font-size:.8rem;max-width:64ch}

.chip-d{border-color:rgba(255,255,255,.22);color:#fff}
.chip-d small{color:rgba(255,255,255,.5)}

/* --- footer --- */
footer{background:#0A1B29;color:rgba(255,255,255,.6);padding:clamp(44px,6vw,64px) 0 26px;
  font-size:.9rem}
footer .brand{color:#fff;display:inline-block;margin-bottom:.8rem}
.ftop{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;align-items:start}
.fb p{max-width:34ch;font-size:.88rem}
.fcol h5{color:#fff;font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 .9rem;font-weight:500}
.fcol a{display:block;font-size:.88rem;padding:.26em 0;transition:color .16s}
.fcol a:hover{color:#fff}
.faddr{display:block;font-size:.88rem;padding:.26em 0;color:rgba(255,255,255,.45)}
.socials{display:flex;gap:.55rem;margin-top:1.1rem}
.socials a{width:34px;height:34px;border:1px solid rgba(255,255,255,.18);display:grid;
  place-items:center;transition:.16s;border-radius:2px}
.socials a:hover{border-color:var(--blue-2);color:#fff}
.socials svg{width:15px;height:15px;fill:currentColor}
.fbot{margin-top:clamp(32px,4vw,48px);padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.78rem;
  color:rgba(255,255,255,.42)}

@media (max-width:900px){
  .demo,.tri,.trust,.lede,.pfeat,.eps,.contact,.frow,.fork{grid-template-columns:1fr}
  .fk{border-right:0;border-bottom:1px solid var(--rule)}
  .fk:last-child{border-bottom:0}
  .figs{grid-template-columns:1fr 1fr}
  .fig + .fig{padding-left:0}
  .fig:nth-child(even){padding-left:1.3rem;border-left:1px solid rgba(255,255,255,.16)}
  .ftop{grid-template-columns:1fr 1fr}
  .lede .li{min-height:220px;order:-1}
  .rrow{grid-template-columns:52px 1fr;column-gap:.9rem}
  .rrow .av{width:52px;height:52px}
  .rrow .cred{font-size:.78rem}
  .ep{border-right:0;grid-template-columns:120px 1fr}
  .ep:nth-last-child(2){border-bottom:1px solid var(--rule)}
  .trust > div{border-right:0;border-bottom:1px solid var(--rule)}
  .trust > div:last-child{border-bottom:0}

  /* backdrop-filter establishes a containing block for position:fixed
     descendants. The slide-out panel lives inside <header>, so with the blur on
     it was positioned against the 59px header instead of the 844px viewport:
     the panel rendered 72px tall and its links spilled out above it. The blur is
     decoration on a bar that is already 94% opaque — drop it at this breakpoint
     and the panel anchors to the viewport as intended.
     Same applies to transform/filter/will-change/contain: never put any of them
     on an ancestor of this panel. */
  header{backdrop-filter:none;background:var(--cream)}
  .burger{display:block}
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(300px,80vw);background:var(--ink);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:1.5rem;padding:36px;
    transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:65}
  body.menu .nav-links{transform:none}
  .nav-links a{color:rgba(255,255,255,.72);font-size:.92rem;letter-spacing:.04em}
  .nav-links a:hover,.nav-links a.on{color:#fff}
  .nav-links a.on::after{background:#fff}
  .nav-links .btn{border-color:rgba(255,255,255,.34);color:#fff;margin-top:.4rem}
  .nav-links .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
  .scrim{position:fixed;inset:0;background:rgba(14,34,51,.5);opacity:0;pointer-events:none;
    transition:opacity .3s;z-index:60}
  body.menu .scrim{opacity:1;pointer-events:auto}
}
@media (max-width:560px){
  body{font-size:16px}
  .figs,.ftop{grid-template-columns:1fr}
  .fig:nth-child(even){padding-left:0;border-left:0}
  .ep{grid-template-columns:1fr;gap:.8rem}
  .rrow{grid-template-columns:44px 1fr}
  .rrow .av{width:44px;height:44px}
  .radar{max-width:none}
  .demo{padding:16px}
  .hero h1{letter-spacing:-.02em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important}
}


/* --- motion: response, never decoration ---------------------------------
   .rv is added by JS (progressive enhancement: no JS, nothing is hidden).
   Reveals run once, 14px and 500ms, staggered ≤240ms within a group.
   Everything here sits inside no-preference; reduced-motion gets a static
   site, full stop. */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(14px);
    transition:opacity .5s ease-out,transform .5s ease-out;
    transition-delay:var(--rvd,0ms)}
  .rv.in{opacity:1;transform:none}
  .fk,.ep{transition:background .16s,border-color .16s,transform .22s ease-out}
  .fk:hover,.ep:hover{transform:translateY(-2px)}
  /* Photos settle inside their frames: start 5.5% oversized, ease to rest
     over .9s — deliberately slower than the .5s container fade, so the image
     is still landing after the card has arrived. Every photo container on
     the site clips overflow, so the oversize never spills. */
  .rv .th img,.rv .li img,.rv .av img,.shot.rv img,.banner img,.rv .banner img{
    transform:scale(1.055);transition:transform .9s ease-out;
    transition-delay:var(--rvd,0ms)}
  .rv.in .th img,.rv.in .li img,.rv.in .av img,.shot.rv.in img,.rv.in .banner img{
    transform:none}
  /* hover lift on episode cards composes with the settled image */
}