/* Asymmetriq Labs — site styles. No external resources. */

@font-face{font-family:"Switzer";src:url(../fonts/switzer-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url(../fonts/switzer-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url(../fonts/apfel-grotezk-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Redaction 35";src:url(../fonts/redaction-35-latin-400-normal.woff2) format("woff2");font-display:block}
@font-face{font-family:"Redaction 70";src:url(../fonts/redaction-70-latin-400-normal.woff2) format("woff2");font-display:block}
@font-face{font-family:"Redaction 100";src:url(../fonts/redaction-100-latin-400-normal.woff2) format("woff2");font-display:block}
@font-face{font-family:"Departure Mono";src:url(../fonts/DepartureMono-Regular.woff2) format("woff2");font-display:swap}

:root{
  --paper:#F2F2EE; --stone:#E4E4DD; --ink:#0C0D10; --ink-2:#1A1C23;
  --graphite:#5E6270; --slate:#3A3D47; --mute:#9A9EAA; --mute-2:#B9BCC6; --dim:#6F7380; --line-dark:#3A3D47;
  --cobalt:#062182; --cobalt-l:#6E86E8;
  /* theme roles: light by default */
  --bg:var(--paper); --fg:var(--ink); --fg-2:var(--graphite); --fg-3:var(--slate); --accent:var(--cobalt); --band:var(--ink);
  color-scheme:light;
  --g:48px;
  --out:cubic-bezier(.2,.7,.1,1);
  --inout:cubic-bezier(.7,0,.2,1);
  --sans:"Switzer",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Apfel Grotezk","Switzer",system-ui,sans-serif;
  --mono:"Departure Mono",ui-monospace,Menlo,monospace;
}
@media (max-width:760px){:root{--g:20px}}

/* dark theme: only when the visitor switches to it (light is the default) */
html[data-theme="dark"]{--bg:#0E0F13;--fg:#ECECE7;--fg-2:#9A9EAA;--fg-3:#B9BCC6;--accent:#8A9EF0;--band:#17191F;color-scheme:dark}
html[data-theme="dark"] .lab,html[data-theme="dark"] .access{border-top:1px solid #2A2D36}
html[data-theme="dark"] ::selection{background:#8A9EF0;color:#0E0F13}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);transition:background-color .5s ease,color .5s ease;font-family:var(--sans);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
button{font:inherit;cursor:pointer}
::selection{background:var(--cobalt);color:var(--paper)}
:focus-visible{outline:2px solid var(--cobalt-l);outline-offset:3px}

.mono{font-family:var(--mono);font-size:13px;letter-spacing:0}
/* secondary voice: Apfel Grotezk */
.serif{font-family:var(--serif);font-style:normal;font-weight:400;letter-spacing:-.005em}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--g);top:-60px;z-index:10;background:var(--fg);color:var(--bg);padding:10px 16px;transition:top .3s var(--out)}
.skip:focus{top:12px}
.label{font-size:15px;font-weight:400;color:var(--fg-2)}
.rule-b{padding-bottom:20px;border-bottom:1px solid var(--fg)}
.rule-b-dark{padding-bottom:16px;border-bottom:1px solid var(--line-dark);color:var(--mute)}
.dim{color:#5A5E6A}

.u{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .5s var(--out)}
.u:hover,.u:focus-visible{background-size:100% 1px}

.fade-in{opacity:0;animation:fadein 1s var(--out) .2s forwards}
.fade-in-late{opacity:0;animation:fadein 1.2s var(--out) .5s forwards}
@keyframes fadein{to{opacity:1}}

/* scroll progress */
.scrollbar{position:fixed;left:0;top:0;right:0;height:2px;z-index:20;pointer-events:none}
.scrollbar span{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}

/* ---------- nav ---------- */
.nav{height:88px;padding:0 var(--g);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.brand{font-weight:500;letter-spacing:-.01em}
.nav ul{display:flex;gap:40px}
.nav-right{display:flex;align-items:center;gap:40px}
.nav-ctl{display:flex;align-items:center;gap:10px}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;height:32px;min-width:40px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--fg);border-radius:16px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;transition:background-color .3s ease,color .3s ease}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover,.lang[open] summary{background:var(--fg);color:var(--bg)}
.lang-menu{position:absolute;right:0;top:40px;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--bg);border:1px solid var(--fg);border-radius:18px;z-index:5}
.lang-menu a{display:flex;align-items:center;justify-content:center;height:28px;min-width:40px;border-radius:14px;font-family:var(--mono);font-size:12px}
.lang-menu a:hover,.lang-menu a:focus-visible{background:var(--fg);color:var(--bg)}
.theme-toggle{width:32px;height:32px;padding:0;border:1px solid var(--fg);border-radius:16px;background:transparent;color:var(--fg);display:inline-flex;align-items:center;justify-content:center;transition:background-color .3s ease,color .3s ease}
.theme-toggle:hover{background:var(--fg);color:var(--bg)}
.theme-toggle svg{width:14px;height:14px;transition:transform .6s var(--inout)}
html[data-theme="dark"] .theme-toggle svg{transform:rotate(180deg)}
@media (max-width:760px){.nav-right{gap:16px}.nav ul li.opt{display:none}}
@media (max-width:760px){.nav{height:68px}.nav ul{gap:22px}}

/* ---------- hero ---------- */
.hero{min-height:calc(100vh - 88px);min-height:calc(100svh - 88px);padding:clamp(56px,7vw,110px) var(--g) 40px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto auto;column-gap:24px;row-gap:40px}
.hero{position:relative}
.hero-grid{position:absolute;left:0;top:0;width:100%;height:0;z-index:0;pointer-events:none;display:block}
.hero>*{position:relative;z-index:1}
.hero-copy{grid-column:1 / span 8;grid-row:2;align-self:end;display:flex;flex-direction:column;gap:8px;padding-bottom:clamp(24px,4vw,64px)}
.hero h1{font-size:clamp(28px,3.1vw,44px);line-height:1.15;font-weight:400;letter-spacing:-.02em}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;transform:translateY(110%);animation:rise 1.1s var(--out) forwards}
.d1{animation-delay:.10s!important}.d2{animation-delay:.16s!important}.d3{animation-delay:.22s!important}
.d4{animation-delay:.28s!important}.d5{animation-delay:.34s!important}.d6{animation-delay:.40s!important}
.d7{animation-delay:.46s!important}.d8{animation-delay:.52s!important}.d9{animation-delay:.58s!important}.d10{animation-delay:.64s!important}.d11{animation-delay:.70s!important}
@keyframes rise{to{transform:translateY(0)}}

/* the reality line: redaction 100 → 70 → 35 → apfel grotezk */
.reality{font-size:clamp(28px,3.1vw,44px);line-height:1.15;color:var(--accent);letter-spacing:-.02em;opacity:0;animation:fadein .6s ease .75s forwards;cursor:default}
.h-0{font-family:"Redaction 100",Georgia,serif}
.h-1{font-family:"Redaction 70",Georgia,serif}
.h-2{font-family:"Redaction 35",Georgia,serif}
.h-3{font-family:var(--serif)}

.hero-fig{grid-column:7 / -1;grid-row:1 / span 2;position:relative;min-height:380px;align-self:stretch}
.hero-fig canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fig-cap{position:absolute;left:0;right:0;bottom:-4px;display:flex;justify-content:space-between;color:var(--graphite);pointer-events:none}
.hero-foot{grid-column:1 / -1;grid-row:3;display:flex;justify-content:space-between;color:var(--fg-2)}
@media (max-width:900px){
  .hero{min-height:calc(78vh - 68px);min-height:calc(78svh - 68px)}
  .hero-copy{grid-column:1 / -1}
  .hero-fig{grid-column:1 / -1;grid-row:2;min-height:0;height:62vw;max-height:360px}
}

/* ---------- ticker ---------- */
.ticker{position:relative;z-index:1;background:var(--bg);border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);transition:background-color .5s ease;overflow:hidden;white-space:nowrap;padding:18px 0}
.ticker-track{display:inline-flex;align-items:center;gap:36px;padding-right:36px;animation:tick 38s linear infinite;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em}
.ticker-track span:nth-of-type(odd){font-family:var(--serif);color:var(--accent)}
.ticker-track i{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- reveal on scroll (only when JS is on) ---------- */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--out),transform 1.2s var(--out)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- what we do ---------- */
.work{padding:72px var(--g) clamp(72px,9vw,120px);display:flex;flex-direction:column;gap:40px}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 24px}
.svc,.svc>a{display:flex;flex-direction:column;gap:14px}
.svc .num{color:var(--fg-2)}
.glyph{width:52px;height:52px;fill:none;stroke:var(--fg);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px;overflow:visible}
.glyph .fill{fill:var(--accent);stroke:none;opacity:0;transition:opacity .4s ease 1.1s}
.glyph path,.glyph circle:not(.fill){stroke-dasharray:160;stroke-dashoffset:160}
.js .reveal.in .glyph path,.js .reveal.in .glyph circle:not(.fill){animation:draw 1.6s var(--out) forwards}
.js .reveal.in .svc:nth-child(2) .glyph *{animation-delay:.12s}
.js .reveal.in .svc:nth-child(3) .glyph *{animation-delay:.24s}
.js .reveal.in .svc:nth-child(4) .glyph *{animation-delay:.36s}
.reveal.in .glyph .fill{opacity:1}
html:not(.js) .glyph path,html:not(.js) .glyph circle{stroke-dashoffset:0}
html:not(.js) .glyph .fill{opacity:1}
@keyframes draw{to{stroke-dashoffset:0}}
.svc:hover .glyph{stroke:var(--accent)}
.svc:hover .glyph path,.svc:hover .glyph circle:not(.fill){animation:redraw 1.1s var(--out) both}
@keyframes redraw{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
.glyph{transition:stroke .4s ease}
.svc-name{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.02em;line-height:1.15}
.flip{display:block;height:1.2em;overflow:hidden}
.flip>span{display:flex;flex-direction:column;transition:transform .7s var(--inout)}
.flip>span>span{height:1.2em;line-height:1.2em;white-space:nowrap}
.flip .serif{color:var(--accent)}
.svc:hover .flip>span,.svc a:focus-visible .flip>span{transform:translateY(-1.2em)}
.svc-rule{height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--inout)}
.svc:hover .svc-rule,.svc a:focus-visible .svc-rule{transform:scaleX(1)}
@media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- lab ---------- */
.lab{background:var(--band);color:var(--paper);padding:40px 0 96px;display:flex;flex-direction:column;gap:32px}
.lab .label{color:var(--mute)}
.lab-head{padding:0 var(--g);display:flex;justify-content:space-between;align-items:baseline;gap:24px}
.counter{font-size:14px;white-space:nowrap}
.cnt{display:inline-block}
.cnt.tick{animation:cnt .6s var(--out)}
@keyframes cnt{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.viewport{overflow:hidden}
.track{--panel-w:min(1040px,86vw);display:flex;gap:24px;padding-left:var(--g);transition:transform 1.1s var(--inout);will-change:transform}
.panel{flex:0 0 var(--panel-w);height:clamp(440px,44vw,640px);position:relative;overflow:hidden;padding:clamp(22px,2.5vw,36px) clamp(22px,2.8vw,40px);display:flex;flex-direction:column;justify-content:space-between}
.p-pitch{background:var(--cobalt);color:var(--paper)}
.p-sketch{background:var(--stone);color:var(--ink)}
.p-os{background:var(--ink-2);color:var(--paper)}
.panel .meta{position:relative;opacity:.35;transition:opacity .8s ease .5s}
.panel.on .meta{opacity:1}
.panel>.meta{display:flex;justify-content:space-between;font-size:14px}
.panel-body{position:relative;display:flex;flex-direction:column;gap:18px}
.pname{position:relative;height:calc(var(--name) * .9);--name:clamp(60px,11vw,160px)}
.pname span{position:absolute;left:0;bottom:0;font-size:var(--name);line-height:.82;white-space:nowrap}
.name-red{font-family:"Redaction 100",Georgia,serif;letter-spacing:-.03em;transition:opacity .6s ease .45s}
.name-clear{font-weight:500;letter-spacing:-.05em;clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--inout) .35s}
.panel.on .name-clear{clip-path:inset(0 0 0 0)}
.panel.on .name-red{opacity:0}
.tagline{font-family:var(--serif);font-size:clamp(19px,1.8vw,26px);line-height:1.25;max-width:640px}
.panel-hit{position:absolute;inset:0;z-index:2;background:transparent;border:0;padding:0}
.panel.on .panel-hit{display:none}
.panel-hit:focus-visible{outline-offset:-6px}

.shape{position:absolute;opacity:.2;transform:scale(.9);transition:opacity 1s ease .3s,transform 1.4s var(--out) .3s}
.panel.on .shape{opacity:1;transform:none}
/* pitch: a deck of twelve slides, tested one by one; the weak ones get flagged and fixed */
.deck{right:4%;top:15%;width:44%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.deck i{aspect-ratio:16/10;border:1px solid rgba(242,242,238,.55);transform:scale(.6);opacity:0;transition:transform .9s var(--out),opacity .6s ease}
.panel.on .deck i{transform:none;opacity:1}
.deck i:nth-child(1){transition-delay:.30s}.deck i:nth-child(2){transition-delay:.36s}.deck i:nth-child(3){transition-delay:.42s}.deck i:nth-child(4){transition-delay:.48s}
.deck i:nth-child(5){transition-delay:.54s}.deck i:nth-child(6){transition-delay:.60s}.deck i:nth-child(7){transition-delay:.66s}.deck i:nth-child(8){transition-delay:.72s}
.deck i:nth-child(9){transition-delay:.78s}.deck i:nth-child(10){transition-delay:.84s}.deck i:nth-child(11){transition-delay:.90s}.deck i:nth-child(12){transition-delay:.96s}
/* test pass: a highlight runs across the deck; flagged slides fill, then settle as fixed */
.panel.on .deck i{animation:scan 7.2s linear infinite}
.panel.on .deck i.f{animation:flag 7.2s linear infinite}
.deck i:nth-child(1){animation-delay:1.2s!important}.deck i:nth-child(2){animation-delay:1.5s!important}.deck i:nth-child(3){animation-delay:1.8s!important}.deck i:nth-child(4){animation-delay:2.1s!important}
.deck i:nth-child(5){animation-delay:2.4s!important}.deck i:nth-child(6){animation-delay:2.7s!important}.deck i:nth-child(7){animation-delay:3.0s!important}.deck i:nth-child(8){animation-delay:3.3s!important}
.deck i:nth-child(9){animation-delay:3.6s!important}.deck i:nth-child(10){animation-delay:3.9s!important}.deck i:nth-child(11){animation-delay:4.2s!important}.deck i:nth-child(12){animation-delay:4.5s!important}
@keyframes scan{0%,5%{background:rgba(242,242,238,.28)}8%,100%{background:transparent}}
@keyframes flag{0%{background:transparent;border-color:rgba(242,242,238,.55)}4%,40%{background:#E8836E;border-color:#E8836E}55%,90%{background:var(--paper);border-color:var(--paper)}100%{background:transparent;border-color:rgba(242,242,238,.55)}}
.deck-cap{grid-column:1 / -1;display:flex;justify-content:space-between;margin-top:8px;color:rgba(242,242,238,.7)}
.panel.on @keyframes spin{to{transform:rotate(360deg)}}
/* sketch: eight weeks, the build keeps going */
.bars{right:4%;top:15%;width:40%;height:50%;display:flex;align-items:flex-end;gap:10px}
.bars i{flex:1;height:var(--h);border:1px solid var(--ink);transform:scaleY(.12);transform-origin:bottom;transition:transform 1.1s var(--out),background-color .4s ease}
.bars i.f{background:var(--cobalt);border-color:var(--cobalt)}
.b1{--h:30%;transition-delay:.30s!important}.b2{--h:42%;transition-delay:.38s!important}.b3{--h:55%;transition-delay:.46s!important}.b4{--h:50%;transition-delay:.54s!important}
.b5{--h:64%;transition-delay:.62s!important}.b6{--h:72%;transition-delay:.70s!important}.b7{--h:86%;transition-delay:.78s!important}.b8{--h:100%;transition-delay:.86s!important}
.panel.on .bars i{transform:scaleY(1)}
.panel.on .bars i.b4{animation:fillin 8s steps(1) 1.6s infinite}
.panel.on .bars i.b5{animation:fillin 8s steps(1) 2.6s infinite}
.panel.on .bars i.b6{animation:fillin 8s steps(1) 3.6s infinite}
.panel.on .bars i.b7{animation:fillin 8s steps(1) 4.6s infinite}
.panel.on .bars i.b8{animation:fillin 8s steps(1) 5.6s infinite}
@keyframes fillin{0%{background:var(--cobalt);border-color:var(--cobalt)}60%,100%{background:transparent;border-color:var(--ink)}}
.weeks{position:absolute;left:0;right:0;bottom:-26px;display:flex;justify-content:space-between;color:var(--graphite)}
/* founderOS: a grid that keeps working */
.dots{right:5%;top:17%;display:grid;grid-template-columns:repeat(8,10px);gap:clamp(16px,2.1vw,30px)}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--line-dark);transition:background-color .5s ease,transform .6s var(--out)}
.panel.on .dots i.a{background:var(--cobalt-l);transform:scale(1.8)}
.panel.on .dots i:not(.a){animation:blink 5s ease-in-out infinite}
.dots i:nth-child(7n+1){animation-delay:.4s!important}.dots i:nth-child(5n+2){animation-delay:1.3s!important}.dots i:nth-child(3n){animation-delay:2.2s!important}.dots i:nth-child(11n){animation-delay:3.1s!important}
@keyframes blink{0%,70%,100%{background:var(--line-dark)}80%{background:var(--paper)}}

.controls{padding:0 var(--g);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.progress{display:flex;align-items:center;gap:20px;color:var(--mute)}
.bar-bg{width:240px;height:1px;background:var(--line-dark);display:flex}
.prog{height:1px;width:33.33%;background:var(--paper);transition:width 1.1s var(--inout)}
.ctl-btns{display:flex;gap:12px;align-items:center}
.circ{width:52px;height:52px;border-radius:26px;border:1px solid #5A5E6A;background:transparent;color:var(--paper);font-size:20px;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.circ-on{border-color:var(--paper)}
.circ:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.pill{height:52px;padding:0 26px;display:inline-flex;align-items:center;border-radius:26px;border:0;font-size:17px;font-weight:500;transition:transform .3s var(--out),background-color .3s ease}
.pill:hover{transform:translateY(-2px)}
.pill-light{margin-left:16px;background:var(--paper);color:var(--ink)}
.pill-accent{height:48px;background:var(--cobalt-l);color:var(--ink)}
@media (max-width:760px){.hint{display:none}.bar-bg{width:120px}.pill-light{margin-left:4px}}

/* ---------- audience ---------- */
.audience{padding:96px var(--g);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px}
.audience .label{grid-column:span 3}
.aud{grid-column:span 3;display:flex;flex-direction:column;gap:14px}
.aud h3{font-size:26px;font-weight:500;letter-spacing:-.01em}
.aud p{font-size:20px;line-height:1.35;color:var(--fg-3)}
.aud-mark{display:flex;gap:6px;height:14px;margin-bottom:10px}
.aud-mark i{width:14px;height:14px;border-radius:50%;border:1px solid var(--fg)}
.aud-mark i:last-child{background:var(--accent);border-color:var(--accent)}
.js .audience .aud-mark i{transform:scale(0);transition:transform .7s var(--out)}
.js .audience.in .aud-mark i{transform:none}
.js .audience.in .aud-mark i:nth-child(2){transition-delay:.12s}.js .audience.in .aud-mark i:nth-child(3){transition-delay:.24s}
@media (max-width:900px){.audience .label,.aud{grid-column:1 / -1}}

/* ---------- access ---------- */
.access{position:relative;overflow:hidden;background:var(--band);color:var(--paper);padding:96px var(--g) 120px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px;--mx:70%;--my:30%}
.access>*{position:relative}
.field-dots{position:absolute!important;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--cobalt-l) 1.2px,transparent 1.6px);background-size:22px 22px;opacity:.9;
  -webkit-mask-image:radial-gradient(360px circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,.06) 100%);
  mask-image:radial-gradient(360px circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,.06) 100%)}
.access h2{grid-column:span 7;font-size:clamp(40px,4.5vw,64px);line-height:1.04;font-weight:400;letter-spacing:-.03em}
.access h2 .serif{letter-spacing:-.03em;color:var(--cobalt-l)}
.access-lede{grid-column:9 / span 4;align-self:end;font-size:18px;color:var(--mute-2)}
.access-form{grid-column:1 / -1;display:flex;align-items:flex-end;flex-wrap:wrap;gap:32px;border-top:1px solid var(--line-dark);padding-top:40px}
.roles{margin:0;padding:0;border:0}
.roles legend{color:var(--mute-2);padding:0;margin-bottom:12px}
.role-row{display:flex;gap:8px}
.role-row input{position:absolute;opacity:0;width:1px;height:1px}
.role{height:48px;padding:0 22px;display:inline-flex;align-items:center;border-radius:24px;border:1px solid #5A5E6A;font-size:17px;cursor:pointer;background:var(--band);color:var(--paper);transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.role:hover{border-color:var(--paper)}
.role-row input:checked+.role{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.role-row input:focus-visible+.role{outline:2px solid var(--cobalt-l);outline-offset:3px}
.email-field{flex:1 1 280px;display:flex;flex-direction:column;gap:12px}
.email-field label{color:var(--mute-2)}
.field{height:48px;background:transparent;border:0;border-bottom:1px solid var(--paper);border-radius:0;color:var(--paper);font-family:var(--sans);font-size:20px;padding:0;transition:border-color .3s ease}
.field::placeholder{color:#6F7380}
.field:focus{outline:none;border-color:var(--cobalt-l)}
.field[aria-invalid="true"]{border-color:#E8836E}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{flex-basis:100%;min-height:1.2em;color:var(--mute-2)}
.form-status.err{color:#E8836E}
.form-note{flex-basis:100%;margin-top:-20px;font-size:14px;color:var(--mute)}
@media (max-width:900px){.access h2,.access-lede{grid-column:1 / -1}}

/* ---------- footer ---------- */
.foot{padding:40px var(--g);display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;color:var(--fg-2)}
.foot a{color:var(--fg)}
.c{font-family:var(--sans)}

/* ---------- simple pages ---------- */
.page{max-width:760px;padding:40px var(--g) 120px;display:flex;flex-direction:column;gap:28px}
.page h1{font-size:clamp(32px,3.6vw,48px);font-weight:400;letter-spacing:-.02em}
.page h2{font-size:22px;font-weight:500;margin-top:16px}
.page p,.page li{color:var(--fg-3)}
.page ul{list-style:disc;padding-left:20px}


/* consistent section rhythm: what we do and who it is for match the lab section's presence */
@media (min-width:901px){
  .work{min-height:clamp(600px,82vh,880px);justify-content:space-between;padding-top:72px;padding-bottom:96px}
  .audience{min-height:clamp(600px,82vh,880px);grid-template-rows:1fr auto;align-items:start;padding-top:72px;padding-bottom:96px}
  .audience .label{grid-row:1}
  .audience .aud{grid-row:2}
  .audience .aud:nth-of-type(1){grid-column:4 / span 3}
  .audience .aud:nth-of-type(2){grid-column:7 / span 3}
  .audience .aud:nth-of-type(3){grid-column:10 / span 3}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .w>span{transform:none}.fade-in,.fade-in-late,.reality{opacity:1}
  .js .reveal{opacity:1;transform:none}
  .glyph path,.glyph circle{stroke-dashoffset:0!important}.glyph .fill{opacity:1!important}
  .js .audience .aud-mark i{transform:none}
}