/* Minimal edition: half-white canvas, near-black ink, one accent (the hoodie's cobalt). */
:root{
  --bg:#f7f6f2;--paper:#fffffd;--ink:#111110;--ink-2:#2b2b28;--muted:#6f6e68;--faint:#6b6b66;
  --line:#e6e4dc;--line-2:#d8d6cc;--accent:#3355ff;--accent-soft:#e9edff;--good:#0d7d51;--warn:#9e620e;
  --sans:'Geist',system-ui,-apple-system,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);--gutter:clamp(20px,5vw,72px);--max:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:#fff}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.05}
p{margin:0}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.01em}
.muted{color:var(--muted)}
.dim{color:var(--faint)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:fixed;top:-60px;left:16px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:8px;box-shadow:0 0 0 0 rgba(18,163,106,.5);animation:live 2.2s infinite;vertical-align:1px}
@keyframes live{70%{box-shadow:0 0 0 7px rgba(18,163,106,0)}100%{box-shadow:0 0 0 0 rgba(18,163,106,0)}}

/* ---------- progress + nav ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60}
.progress i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px var(--gutter);transition:background .4s,border-color .4s,padding .4s}
.nav.scrolled{background:rgba(247,246,242,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line);padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em}
.avatar{display:grid;place-items:center;width:0;height:32px;border-radius:50%;overflow:hidden;background:var(--accent-soft);transition:width .5s var(--ease),margin .5s var(--ease);margin-right:-10px}
.avatar img{width:32px;height:32px;max-width:none;object-fit:cover;object-position:center}
.nav.show-avatar .avatar{width:32px;margin-right:0}
.nav nav{display:flex;align-items:center;gap:4px}
.nav nav a{padding:8px 12px;border-radius:999px;font-size:14px;color:var(--muted);transition:color .3s,background .3s}
.nav nav a:hover,.nav nav a.active{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;font-size:15px;font-weight:500;transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .5s var(--ease)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:var(--accent);box-shadow:0 12px 30px -12px rgba(51,85,255,.6)}
.btn.dark .muted{color:rgba(255,255,255,.55);font-family:var(--mono);font-size:12px}
.btn.line{border:1px solid var(--line-2);background:var(--paper)}
.btn.line:hover{border-color:var(--ink)}
.btn.small{padding:10px 16px;font-size:14px}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--accent)}
.btn.ghost{border:1px solid var(--line-2);background:var(--paper)}
.btn.ghost:hover{border-color:var(--ink)}
.link{color:var(--accent);font-size:14px;border-bottom:1px solid currentColor;padding-bottom:1px}
.link:hover{color:var(--ink)}

/* ---------- headline mask reveal ---------- */
.reveal-lines .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.reveal-lines .w>span{display:inline-block}
.js .reveal-lines .w>span{transform:translateY(108%);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*40ms)}
.js .reveal-lines.in .w>span{transform:none}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.three .reveal:nth-child(2),.timeline .reveal:nth-child(2){transition-delay:.1s}
.three .reveal:nth-child(3),.timeline .reveal:nth-child(3){transition-delay:.2s}

/* ---------- hero ---------- */
.hero{min-height:100svh;max-width:var(--max);margin:0 auto;padding:120px var(--gutter) 60px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.status{color:var(--ink-2);padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--paper)}
.eyebrow{color:var(--accent)}
.hero h1{font-size:clamp(42px,5.6vw,80px)}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:30ch}
.logos{color:var(--muted)}
.logos b{color:var(--ink);font-weight:500}
.logos span{color:var(--faint)}
@keyframes turn{to{transform:rotate(360deg)}}

/* ---------- blocks ---------- */
.block{max-width:var(--max);margin:0 auto;padding:clamp(80px,12vh,140px) var(--gutter) 0}
.label{color:var(--accent);margin-bottom:22px}
.block h2{font-size:clamp(32px,4.2vw,58px);max-width:20ch}
.work-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.work-head p{max-width:40ch}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:1px solid var(--line)}
.three article{display:grid;align-content:start;gap:10px;padding:28px 28px 28px 0}
.three article+article{padding-left:28px;border-left:1px solid var(--line)}
.num{color:var(--faint)}
.three h3{font-size:22px}
.three p{color:var(--muted)}
.proof{justify-self:start;color:var(--accent);margin-top:6px}
.proof:hover{text-decoration:underline}
.bar{height:10px;border-radius:10px;background:#eceae3;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,#8ea2ff,var(--accent));transition:width 1.4s var(--ease);transition-delay:calc(var(--k,0)*70ms + .1s)}
.bar.down i{background:linear-gradient(90deg,#8fe0bf,var(--good))}
.code{justify-self:end;padding:5px 9px;border:1px solid var(--line-2);border-radius:8px;color:var(--ink-2);transition:.3s}
.code:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- case list (rendered by fit.js as .mini-case) ---------- */
.case-list{margin-top:40px;border-top:1px solid var(--line);display:grid}
.mini-case{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr) 250px 24px;gap:20px;align-items:center;text-align:left;padding:22px 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease),background .4s}
.mini-case::after{content:"→";font-size:18px;color:var(--faint);transition:transform .5s var(--ease),color .3s}
.mini-case>.mono{color:var(--muted);font-size:11.5px;line-height:1.5}
.mini-case>.mono b{display:block;font-weight:500;color:var(--ink-2)}
.mini-case strong{font-size:clamp(18px,1.7vw,22px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.mini-metric{color:var(--muted);font-size:14px}
.mini-metric b{color:var(--ink);font-weight:600;margin-right:4px}
.mini-case::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--hue);transition:width .6s var(--ease)}
.mini-case:hover{padding-left:12px;background:linear-gradient(90deg,rgba(51,85,255,.04),transparent 60%)}
.mini-case:hover::before{width:100%}
.mini-case:hover::after{transform:translateX(4px);color:var(--ink)}
.mini-case.is-spec strong::after{content:" · spec";color:var(--faint);font-size:.75em}
.fit-report{padding:18px;border-top:1px solid var(--line)}
.matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.matrix-cell{display:grid;gap:6px;align-content:start;padding:14px;border-radius:14px;background:var(--bg)}
.matrix-cell strong{font-size:14.5px;font-weight:500}
.case-link{justify-self:start;font-family:var(--mono);font-size:11px;color:var(--accent)}
.case-link:hover{text-decoration:underline}
.matrix-note{margin-top:14px;font-size:12px}
.fit-score{display:flex;gap:18px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}
.fit-score h3{font-size:22px;margin:4px 0}
.fit-score p{color:var(--muted);font-size:12px}
.ring{--p:0;flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p)*1%),#ecebe4 0)}
.ring strong{display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:var(--paper);font-size:22px;font-weight:600}
.ring small{font-size:12px;color:var(--muted)}
.fit-rows{list-style:none;margin:0;padding:0}
.fit-rows>li{padding:14px 0;border-bottom:1px solid var(--line)}
.fit-row-head{display:grid;grid-template-columns:minmax(180px,1fr) 140px auto;gap:14px;align-items:center}
.fit-row-head strong{font-weight:500}
.emph{height:6px;border-radius:6px;background:#ecebe4;overflow:hidden}
.emph i{display:block;height:100%;background:var(--accent);border-radius:6px}
.ok{color:var(--good)}
.fit-rows ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2);font-size:14px;line-height:1.7}
.fit-rows .case-link{margin-left:6px}
.fit-plan{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fit-plan>.mono{grid-column:1/-1;color:var(--muted)}
.fit-plan>div{padding:14px;border-radius:14px;background:var(--bg)}
.fit-plan strong{font-size:14px}
.fit-plan p{color:var(--muted);font-size:13.5px;margin-top:6px}
.fit-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.fit-empty p{color:var(--muted);margin-top:6px}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:40px 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line-2);transform-origin:top;transform:scaleY(0);transition:transform 1.4s var(--ease)}
.timeline.in::before{transform:none}
.timeline li{position:relative;display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:22px 0 22px 28px;border-bottom:1px solid var(--line)}
.timeline li::before{content:"";position:absolute;left:-4px;top:30px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--accent)}
.timeline li:first-child::before{background:var(--accent)}
.when{color:var(--muted)}
.timeline strong{display:block;font-size:19px;letter-spacing:-.02em;font-weight:600}
.timeline li>div>span{color:var(--muted);font-size:14.5px}
.timeline b{color:var(--good);font-weight:500}

/* ---------- contact ---------- */
.contact{padding-bottom:120px}
.steps{list-style:none;margin:32px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap;color:var(--ink-2)}
.steps li{display:flex;gap:8px;align-items:center;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper)}
.steps b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-weight:500;font-size:11px}
.foot{max-width:var(--max);margin:0 auto;padding:28px var(--gutter);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);color:var(--muted)}
.foot a:hover{color:var(--accent)}

/* ---------- case study drawer ---------- */
.drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(760px,100vw);padding:0;border:0;border-left:1px solid var(--line);background:var(--paper);color:var(--ink);overflow:auto}
.drawer[open]{animation:slide .55s var(--ease)}
@keyframes slide{from{transform:translateX(40px);opacity:0}}
.drawer::backdrop{background:rgba(17,17,16,.28);backdrop-filter:blur(3px)}
.drawer-close{position:sticky;top:0;display:block;margin-left:auto;padding:14px 20px;background:var(--paper);color:var(--muted);z-index:2}
.drawer-close:hover{color:var(--ink)}
#case-content{padding:0 clamp(22px,5vw,48px) 48px}
.cs-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--muted)}
.cs-bar .code{padding:0;border:0;color:var(--accent)}
.badge{padding:4px 10px;border-radius:999px;background:#e5f6ee;color:var(--good)}
.badge.spec{background:#fdeff4;color:#bc3f6b}
.cs h2{font-size:clamp(28px,3.4vw,40px);margin:14px 0 8px}
.cs-org{color:var(--muted)}
.cs-role{color:var(--ink-2);margin-top:8px}
.cs h3{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--accent);margin:30px 0 8px;text-transform:uppercase}
.cs p,.cs li{color:var(--ink-2);line-height:1.65}
.cs ul{padding-left:18px;margin:0}
.cs-tldr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}
.cs-tldr>div{padding:14px;border-radius:14px;background:var(--bg)}
.cs-tldr .mono{color:var(--accent)}
.cs-tldr p{margin-top:6px;font-size:14.5px}
.cs-metrics{display:flex;flex-wrap:wrap;gap:8px}
.cs-metrics>div{display:grid;gap:2px;padding:12px 16px;border:1px solid var(--line-2);border-radius:14px;min-width:150px}
.cs-metrics strong{font-size:24px;letter-spacing:-.03em;color:var(--accent)}
.cs-metrics span{font-size:13px;color:var(--muted)}
.cs-decisions{padding-left:20px;display:grid;gap:14px}
.cs-decisions strong{font-weight:500}
.cs-decisions dl{display:grid;grid-template-columns:130px 1fr;gap:4px 12px;margin:8px 0 0}
.cs-decisions dt{color:var(--faint);font-size:11.5px}
.cs-decisions dd{margin:0;color:var(--ink-2);font-size:14.5px}
.cs-split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cs-split>div{padding:14px;border-radius:14px;background:var(--bg)}
.cs-split .mono{color:var(--accent)}
.cs-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}
.cs-skills span{padding:5px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);font-size:11px}
.cs-nav{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:36px;padding-top:100px}
  .three{grid-template-columns:1fr}
  .three article,.three article+article{padding:22px 0;border-left:0;border-bottom:1px solid var(--line)}
  .mini-case{grid-template-columns:1fr 24px;row-gap:6px}
  .mini-case>.mono{grid-column:1/-1}
  .mini-metric{grid-column:1/2}
  .mini-case::after{grid-column:2;grid-row:2}
  .matrix,.fit-plan{grid-template-columns:1fr 1fr}
  .timeline li{grid-template-columns:1fr;gap:4px}
}
@media (max-width:640px){
  .nav nav a:not(.nav-cta){display:none}
  .brand span:last-child{font-size:15px}
  .stats{grid-template-columns:repeat(3,1fr);gap:8px 14px}
  .stats dd{font-size:12px}
  .stats dt{font-size:20px;white-space:nowrap}
  .matrix,.fit-plan,.cs-tldr,.cs-split{grid-template-columns:1fr}
  .fit-row-head{grid-template-columns:1fr;gap:6px}
  .cs-decisions dl{grid-template-columns:1fr}
  .fit-tabs{flex-wrap:wrap}
  }

/* ================= centred hero: portrait on white, proof orbit, signal rings ================= */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;min-height:100svh;max-width:none;margin:0;padding:104px var(--gutter) 0;overflow:hidden;text-align:center}
.hero-head{display:grid;justify-items:center;gap:16px;position:relative;z-index:5}
.hero h1{font-size:clamp(40px,5.2vw,76px);max-width:15ch}
.hero .lede{max-width:44ch;margin:0 auto}
.hero .ctas{justify-content:center;margin-top:4px}
/* aurora: slow cobalt / lavender light drifting on white */
.aurora{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:46vw;height:46vw;left:27vw;top:38%;background:radial-gradient(circle,#c9d4ff,transparent 65%)}
.aurora i:nth-child(2){width:32vw;height:32vw;left:10vw;top:20%;background:radial-gradient(circle,#e5dcff,transparent 65%);animation-duration:28s;animation-delay:-6s}
.aurora i:nth-child(3){width:30vw;height:30vw;right:8vw;top:30%;background:radial-gradient(circle,#d6f3ec,transparent 65%);animation-duration:26s;animation-delay:-12s}
@keyframes drift{50%{transform:translate(3vw,-2vh) scale(1.08)}100%{transform:translate(-2vw,2vh) scale(.95)}}
/* soft light that follows the cursor */
.spot{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),rgba(51,85,255,.08),transparent 70%);transition:opacity .6s}
/* stage: rings behind, portrait centre, chips orbiting through depth */
.stage{position:relative;isolation:isolate;width:min(680px,94vw);height:min(58vh,620px);min-height:340px;margin-top:22px;display:flex;justify-content:center;align-items:flex-end}
.me{position:relative;z-index:2;height:100%;width:auto;max-width:none;-webkit-mask-image:linear-gradient(#000 72%,transparent 99%);mask-image:linear-gradient(#000 72%,transparent 99%);filter:drop-shadow(0 30px 40px rgba(30,40,110,.14))}
.js .me{opacity:0;transform:translateY(30px) scale(.98);transition:opacity 1.2s var(--ease) .25s,transform 1.4s var(--ease) .25s}
.loaded .me{opacity:1;transform:none}
.rings{position:absolute;z-index:0;left:50%;top:44%;width:min(900px,120vw);height:auto;transform:translate(-50%,-50%);fill:none;stroke:var(--accent);stroke-width:.8;overflow:visible}
.rings circle{transform-box:fill-box;transform-origin:center;opacity:0;animation:ring 7.5s cubic-bezier(.2,.6,.3,1) infinite}
.rings circle:nth-child(2){animation-delay:2.5s}
.rings circle:nth-child(3){animation-delay:5s}
@keyframes ring{0%{transform:scale(.6);opacity:0}15%{opacity:.35}100%{transform:scale(2.4);opacity:0}}
.orbit{position:absolute;left:50%;top:60%;width:0;height:0}
.o-chip{position:absolute;left:0;top:0;display:grid;gap:1px;padding:10px 16px;border-radius:16px;text-align:left;white-space:nowrap;background:rgba(255,255,255,.78);border:1px solid rgba(17,17,16,.08);box-shadow:0 14px 34px -18px rgba(20,30,90,.35),0 1px 0 #fff inset;backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);will-change:transform,opacity;transition:box-shadow .3s,border-color .3s}
.o-chip b{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.o-chip span{font-size:12px;color:var(--muted)}
.o-chip:hover{border-color:var(--accent);box-shadow:0 18px 40px -16px rgba(51,85,255,.5)}
.o-chip:hover b{color:var(--accent)}
.hero .logos{position:absolute;z-index:5;left:0;right:0;bottom:22px;text-align:center}
@media (max-width:760px){
  .hero{padding-top:92px}
  .hero h1{font-size:34px}
  .stage{height:46vh;min-height:300px;margin-top:10px}
  .o-chip{padding:7px 11px;border-radius:12px}
  .o-chip b{font-size:13.5px}
  .o-chip span{font-size:10.5px}
  .o-chip:nth-child(n+5){display:none}
  .hero .logos{font-size:10.5px;bottom:14px;padding:0 16px}
}
/* hero is exactly one screen: the portrait takes whatever height the copy leaves */
.hero{height:100svh;min-height:680px}
.stage{flex:1 1 auto;height:auto;min-height:0}
.me{height:100%}
.orbit{top:74%}
@media (max-width:760px){.hero{min-height:640px}.stage{height:auto;min-height:0}}

/* ================= space hero: big centred portrait, planets, rocket, ship on white ================= */
.hero.space{display:block;height:100svh;min-height:720px;padding:84px var(--gutter) 0;text-align:center;
  background:radial-gradient(ellipse 55% 45% at 50% 72%,#e9edff 0%,transparent 70%),radial-gradient(ellipse 30% 25% at 18% 30%,#f1ecff,transparent 70%),var(--bg)}
.space .hero-top{position:relative;z-index:6;display:grid;justify-items:center;gap:8px}
.space h1{font-size:clamp(30px,3.5vw,54px);max-width:none}
@media (min-width:1000px){.space h1{white-space:nowrap}}
/* twinkling stars and sparkles */
.stars{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,#9aa3c7 50%,transparent 51%),radial-gradient(1px 1px at 22% 64%,#b5bbd6 50%,transparent 51%),
    radial-gradient(2px 2px at 31% 38%,#c3c9e6 50%,transparent 51%),radial-gradient(1px 1px at 44% 14%,#9aa3c7 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 30%,#b5bbd6 50%,transparent 51%),radial-gradient(1px 1px at 72% 56%,#9aa3c7 50%,transparent 51%),
    radial-gradient(2px 2px at 83% 18%,#c3c9e6 50%,transparent 51%),radial-gradient(1px 1px at 90% 44%,#9aa3c7 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 52%,#b5bbd6 50%,transparent 51%),radial-gradient(1px 1px at 55% 8%,#9aa3c7 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 80%,#c3c9e6 50%,transparent 51%),radial-gradient(1px 1px at 94% 74%,#9aa3c7 50%,transparent 51%);
  animation:twinkle 5s ease-in-out infinite alternate}
.stars::before,.stars::after{content:"✦";position:absolute;color:#b9c3f5;font-size:14px;animation:twinkle 3.2s ease-in-out infinite alternate}
.stars::before{left:19%;top:44%}
.stars::after{left:78%;top:36%;font-size:10px;animation-delay:-1.6s}
@keyframes twinkle{0%{opacity:.45}100%{opacity:1}}
/* stage: portrait fills the height left under the headline */
.space .stage{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(1180px,100vw);height:calc(100% - 172px);margin:0;flex:none;min-height:0;isolation:isolate;display:flex;justify-content:center;align-items:flex-end}
.space .me{height:100%;position:relative;z-index:2;-webkit-mask-image:linear-gradient(#000 78%,transparent 100%);mask-image:linear-gradient(#000 78%,transparent 100%)}
.paths{position:absolute;left:4%;right:4%;top:50%;height:38%;width:92%;z-index:0;fill:none;stroke:#c5ccec;stroke-width:1;stroke-dasharray:3 7;vector-effect:non-scaling-stroke}
.space .orbit{position:absolute;left:50%;top:69%;width:0;height:0}
/* planets: soft pastel spheres, each one a result */
.planet{position:absolute;left:0;top:0;width:var(--s);height:var(--s);border-radius:50%;will-change:transform,opacity}
.planet>i{position:absolute;inset:0;border-radius:50%;background:var(--g);box-shadow:inset -6px -8px 14px rgba(20,30,80,.18),0 12px 24px -12px rgba(20,30,90,.35)}
.p-ring{--s:62px;--g:radial-gradient(circle at 32% 28%,#dfe6ff,#6f86ff 55%,#3148d8)}
.p-ring::before{content:"";position:absolute;left:-42%;right:-42%;top:38%;height:24%;border-radius:50%;border:3px solid rgba(120,140,255,.7);transform:rotate(-16deg);z-index:1;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.6) inset}
.p-mint{--s:46px;--g:radial-gradient(circle at 32% 28%,#e6fff5,#6fd9ae 55%,#1f9e71)}
.p-lav{--s:36px;--g:radial-gradient(circle at 32% 28%,#f3eeff,#b39cff 55%,#7a5ce0)}
.p-lav>i::after{content:"";position:absolute;width:22%;height:22%;left:55%;top:52%;border-radius:50%;background:rgba(70,40,160,.18)}
.p-amber{--s:42px;--g:radial-gradient(circle at 32% 28%,#fff4e2,#ffc47a 55%,#e98f2a)}
.p-moon{--s:24px;--g:radial-gradient(circle at 32% 28%,#ffffff,#cfd3e2 60%,#9aa1bb)}
.planet .tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);white-space:nowrap;padding:7px 11px;border-radius:10px;background:#fff;border:1px solid var(--line-2);box-shadow:0 10px 24px -14px rgba(20,30,90,.4);color:var(--muted);font-size:11.5px;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.planet .tip b{color:var(--ink);font-weight:600;margin-right:4px}
.planet:hover .tip,.planet:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
.planet:hover>i{box-shadow:inset -6px -8px 14px rgba(20,30,80,.18),0 0 0 4px rgba(51,85,255,.18),0 12px 24px -12px rgba(20,30,90,.35)}
/* rocket: launches behind the portrait along a curved path */
.rocket{position:absolute;left:0;top:0;width:26px;z-index:1;offset-path:path('M -80 640 C 220 520, 420 160, 1260 -60');offset-rotate:auto 90deg;offset-distance:0%;opacity:0;animation:launch 12s cubic-bezier(.45,.05,.55,.95) infinite 1.5s}
.rocket svg{display:block;width:100%;overflow:visible}
.rocket .body{fill:#fff;stroke:#1d1f2b;stroke-width:2}
.rocket .win{fill:#9fb0ff;stroke:#1d1f2b;stroke-width:2}
.rocket .fin{fill:var(--accent)}
.rocket .flame{fill:#ffb45e;transform-origin:50% 0;transform-box:fill-box;animation:flame .18s ease-in-out infinite alternate}
@keyframes flame{to{transform:scaleY(.6)}}
@keyframes launch{0%{offset-distance:0%;opacity:0}6%{opacity:1}52%{opacity:1}60%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
/* spaceship: drifts and bobs in the corner */
.ship{position:absolute;right:7%;top:8%;width:78px;z-index:1;animation:bob 6s ease-in-out infinite alternate}
.ship svg{display:block;width:100%}
.ship .hull{fill:#eef0f8;stroke:#1d1f2b;stroke-width:1.6}
.ship .dome{fill:#dde4ff;stroke:#1d1f2b;stroke-width:1.6}
.ship .light{fill:#ffb45e;animation:blink 1.4s steps(2) infinite}
.ship .light:nth-of-type(2){animation-delay:.45s}.ship .light:nth-of-type(3){animation-delay:.9s}
@keyframes bob{0%{transform:translate(0,0) rotate(-4deg)}100%{transform:translate(-26px,14px) rotate(5deg)}}
@keyframes blink{50%{opacity:.25}}
/* copy framing the portrait */
.space .side{position:absolute;z-index:6;bottom:12vh;max-width:290px;display:grid;gap:14px;text-align:left}
.space .side.left{left:var(--gutter)}
.space .side.right{right:var(--gutter);text-align:right;justify-items:end;gap:8px}
.space .side .ctas{flex-direction:column;align-items:flex-start;justify-content:flex-start}
.space .lede{font-size:16px;max-width:30ch;margin:0}
.space .logos{position:static;line-height:1.7;margin-top:6px;text-align:inherit;padding:0}
.space .hint{color:var(--accent);margin-top:8px}
@media (max-width:1100px){.space .side{bottom:6vh;max-width:230px}.space .lede{font-size:14.5px}}
@media (max-width:900px){
  .hero.space{height:auto;min-height:0;padding-bottom:40px}
  .space .stage{position:relative;left:auto;transform:none;margin:14px auto 0;height:56vh;min-height:340px;width:100%}
  .space .side{position:static;max-width:none;margin-top:18px;text-align:center;justify-items:center}
  .space .side.right{text-align:center;justify-items:center}
  .space .side .ctas{align-items:center}
  .paths{top:48%}
  .ship{width:54px;right:4%}
}
@media (prefers-reduced-motion:reduce){.rocket{display:none}}
/* ================= focused hero: message first (F-pattern), portrait supports, one dominant CTA ================= */
.hero.focus{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:56px;height:auto;min-height:100svh;max-width:var(--max);margin:0 auto;padding:96px var(--gutter) 40px;text-align:left;background:none;overflow:visible}
.focus-copy{display:grid;gap:16px;justify-items:start}
.focus .status{background:var(--paper)}
.focus h1{font-size:clamp(40px,4.3vw,64px);max-width:15ch;white-space:normal;line-height:1.02}
.focus .lede{font-size:clamp(17px,1.45vw,20px);color:var(--muted);max-width:34ch;margin:0}
.proofs{display:grid;grid-template-columns:repeat(3,auto);gap:0;margin:6px 0 2px;border-top:1px solid var(--line)}
.proofs div{padding:14px 28px 0 0}
.proofs div+div{padding-left:28px;border-left:1px solid var(--line)}
.proofs dt{font-size:clamp(22px,2.1vw,28px);font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.proofs dd{margin:4px 0 0;font-size:13px;color:var(--muted);max-width:17ch;line-height:1.4}
.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
/* the one high-contrast element on the page (isolation effect) */
.btn.cta{padding:18px 26px;border-radius:14px;background:var(--ink);color:#fff;font-size:17px;font-weight:600;gap:14px;box-shadow:0 14px 30px -14px rgba(17,17,16,.5)}
.btn.cta span{font-weight:400;font-size:14px;color:rgba(255,255,255,.62)}
.btn.cta:hover{background:var(--accent);box-shadow:0 16px 34px -14px rgba(51,85,255,.6)}
.btn.cta:hover span{color:#fff}
.text-link{color:var(--muted);font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2)}
.text-link:hover{color:var(--ink);text-decoration-color:var(--ink)}
.focus .logos{color:var(--muted);margin-top:6px}
/* portrait: static, framed by a calm disc; no motion competing with the message */
.focus-art{position:relative;align-self:end;display:grid;place-items:end center}
.focus-art::before{content:"";position:absolute;left:8%;right:8%;bottom:6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#eef1ff,#dfe5ff 70%);z-index:0}
.focus .me{position:relative;z-index:1;width:100%;height:auto;max-width:560px;opacity:1;transform:none;transition:none;-webkit-mask-image:linear-gradient(#000 80%,transparent 100%);mask-image:linear-gradient(#000 80%,transparent 100%);filter:none}
/* calmer motion across the page: a single short fade, no word-by-word reveals */
.js .block .reveal-lines{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .block .reveal-lines.in{opacity:1;transform:none}
.js .reveal{transition-duration:.6s}
.bar i{transition-duration:1s}
@media (max-width:900px){
  .hero.focus{grid-template-columns:1fr;gap:28px;padding-top:96px;min-height:0}
  .focus-art{max-width:360px;justify-self:center}
  .focus h1{font-size:clamp(36px,9vw,48px)}
}
@media (max-width:560px){
  .proofs{grid-template-columns:1fr 1fr 1fr}
  .proofs div,.proofs div+div{padding:12px 10px 0 0;border-left:0}
  .proofs dt{font-size:18px;white-space:normal}
  .proofs dd{font-size:11.5px}
  .btn.cta{width:100%;justify-content:space-between}
}
/* desktop: anchored portrait, big and bottom-right, face level with the headline; text keeps the top-left */
@media (min-width:901px){
  .hero.focus{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding-bottom:0;align-items:stretch;max-width:1320px;overflow-x:clip}
  /* nav aligns with the same container instead of hugging the window edges on wide screens */
  .nav{padding-left:max(var(--gutter),calc((100vw - 1320px)/2 + var(--gutter)));padding-right:max(var(--gutter),calc((100vw - 1320px)/2 + var(--gutter)))}
  .focus-copy{align-self:center;position:relative;z-index:2;padding-bottom:40px;max-width:540px}
  .proofs dd{max-width:22ch}
  /* text and portrait share one centred container, so they stay a single composition at every width */
  .focus-art{position:relative;align-self:end;height:calc(100svh - 96px);max-height:900px;display:flex;align-items:flex-end;justify-content:center}
  .focus-art .me{position:relative;width:min(126%,calc(100svh - 110px),860px);height:auto;max-width:none;margin:0 -13% 0 0}
  .focus-art::before{left:50%;right:auto;width:84%;bottom:5%;transform:translateX(-45%)}
  .focus-art::before{background:radial-gradient(circle at 50% 42%,#eef1ff,#dde4ff 72%)}
}
/* alignment pass: one left edge, equal proof columns, CTA + link as one row, 8px spacing rhythm */
.focus .logos{position:static;left:auto;right:auto;bottom:auto;text-align:left;padding:0;margin:8px 0 0;font-size:12px}
.focus-copy>*{margin:0}
.focus .eyebrow{margin-top:-4px}
.proofs{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:8px}
.proofs dd{max-width:none}
.actions{flex-wrap:nowrap;gap:24px;margin-top:16px}
.text-link{white-space:nowrap}
@media (min-width:901px){
  .focus-copy{max-width:640px}
}
@media (max-width:1100px) and (min-width:901px){.actions{flex-wrap:wrap}}
/* larger planets on desktop so the scene reads at a glance */
@media (min-width:901px){
  .p-ring{--s:84px}.p-mint{--s:62px}.p-lav{--s:48px}.p-amber{--s:56px}.p-moon{--s:32px}
  .rocket{width:34px}.ship{width:96px}
}

/* one shared container for nav, hero, sections and footer: full gutter up to 1560px, then centred */
:root{--max:1560px}
@media (min-width:901px){
  .hero.focus{max-width:var(--max)}
  .nav{padding-left:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));padding-right:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)))}
}

/* no backdrop circle behind the portrait, on any screen */
.focus-art::before{display:none}

/* the one-row button + link rule is desktop only; phones stack them */
@media (max-width:900px){
  .actions{flex-wrap:wrap;gap:16px}
  .text-link{white-space:normal}
  .btn.cta{white-space:nowrap}
}
@media (max-width:900px){.proofs{grid-template-columns:auto auto auto}.proofs dt{white-space:nowrap}}

.contact 
.cs{--fl-bg:var(--bg);--fl-line:var(--line-2);--fl-muted:var(--muted);--fl-dot:var(--accent);--fl-ai:#6d4dff;--fl-gate:var(--warn);--fl-human:var(--good);--fl-ok-bg:rgba(18,163,106,.1);--fl-no-bg:rgba(196,122,18,.1)}

/* ---------- case diagrams ("How it works") and the SPEC-01 gate check ---------- */
.flow{display:grid;gap:18px}
.fl-row{display:grid;gap:8px}
.fl-label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--fl-muted)}
.fl-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative}
.fl-steps>li{position:relative;padding-left:22px}
.fl-steps>li::before{content:"";position:absolute;left:5px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--fl-dot);box-shadow:0 0 0 3px var(--fl-bg)}
.fl-steps>li:not(:last-child)::after{content:"";position:absolute;left:9px;top:30px;bottom:-16px;width:1px;background:var(--fl-line)}
.fl-node{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 14px;border-radius:12px;border:1px solid var(--fl-line);background:var(--fl-bg);border-left:3px solid var(--fl-line)}
.fl-node strong{font-size:14.5px;font-weight:600}
.fl-node span{font-size:13px;color:var(--fl-muted)}
.fl-node.ai{border-left-color:var(--fl-ai)}
.fl-node.gate{border-left-color:var(--fl-gate)}
.fl-node.human{border-left-color:var(--fl-human)}
.fl-branch{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fl-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;font-size:11px;color:var(--fl-muted)}
.fl-key i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.fl-key .ai{background:var(--fl-ai)}.fl-key .gate{background:var(--fl-gate)}.fl-key .human{background:var(--fl-human)}
.gate-sim{display:grid;gap:10px;padding:16px;border-radius:14px;border:1px solid var(--fl-line);background:var(--fl-bg)}
.gate-note{margin:0;font-size:13.5px;color:var(--fl-muted)}
.gate-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(100px,1fr) 44px;gap:4px 14px;align-items:center}
.gate-row label{font-size:14px}
.gate-row input{width:100%;accent-color:var(--fl-ai)}
.gate-row output{text-align:right;font-size:13px}
.gate-verdict{grid-column:1/-1;font-size:11.5px;color:var(--fl-muted)}
.gate-verdict.ok{color:var(--fl-human)}.gate-verdict.no{color:var(--fl-gate)}
.gate-summary{margin:4px 0 0;padding:10px 12px;border-radius:10px;font-weight:600;font-size:14px}
.gate-summary.ok{color:var(--fl-human);background:var(--fl-ok-bg)}
.gate-summary.no{color:var(--fl-gate);background:var(--fl-no-bg)}
@media (max-width:560px){.fl-branch{grid-template-columns:1fr}.gate-row{grid-template-columns:1fr 44px}.gate-row label{grid-column:1/-1}}

/* ---------- tailoring: role fields, brief bar, relevance tags ---------- */
.fit-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 4px}
.fit-meta label{display:grid;gap:6px}
.fit-meta .mono{font-size:11px;color:var(--muted)}
.fit-meta input{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:15px var(--sans)}
.fit-meta input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.mini-case .match{display:block;margin-top:6px;font-size:11.5px;font-weight:400;letter-spacing:0;color:var(--muted)}
.mini-case.is-match .match{color:var(--accent)}
.mini-case.is-match::before{width:100%;background:var(--accent);opacity:.35}
.brief-bar{position:fixed;left:50%;bottom:16px;z-index:60;transform:translateX(-50%);width:min(820px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 10px 10px 20px;border-radius:18px;background:#111110;color:#fff;box-shadow:0 24px 60px -24px rgba(17,17,16,.55)}
.brief-bar[hidden]{display:none}
.bb-ctx{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:0 10px;min-width:0}
.bb-kicker{font-size:11px;color:rgba(255,255,255,.55)}
.bb-ctx b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-sub{grid-column:1/-1;font-size:11.5px;color:rgba(255,255,255,.65)}
.bb-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.bb-btn{padding:10px 14px;border-radius:12px;font-size:14px;color:#fff;background:rgba(255,255,255,.08);white-space:nowrap;transition:background .3s}
.bb-btn:hover{background:rgba(255,255,255,.16)}
.bb-btn.primary{background:var(--accent)}
.bb-btn.primary:hover{background:#2443e6}
.bb-x{width:36px;height:36px;border-radius:10px;font-size:20px;line-height:1;color:rgba(255,255,255,.6)}
.bb-x:hover{color:#fff;background:rgba(255,255,255,.08)}
body.tailored{padding-bottom:96px}
@media (max-width:700px){
  .fit-meta{grid-template-columns:1fr}
  .bb-share-hide,#bb-share,#bb-pdf{display:none}
  .brief-bar{padding:8px 8px 8px 14px;border-radius:16px}
  .bb-ctx b{font-size:14px}
}
.mini-case.is-spec:has(.match) strong::after{content:none}



/* ---------- Ask: chat with memory ---------- */
.chat{margin-top:40px;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:20px;background:var(--paper);overflow:hidden;box-shadow:0 20px 50px -35px rgba(17,17,16,.35)}
.chat-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.chat-id{display:flex;align-items:center;gap:10px;min-width:0}
.chat-id b{display:block;font-size:15px}
.chat-id .mono{display:block;font-size:11px;color:var(--muted)}
.chat-avatar{flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--accent-soft);display:grid;place-items:end center}
.chat-avatar img{width:100%;height:auto}
.chat-meta{display:flex;align-items:center;gap:10px;flex:none}
.chat-meta .mono{font-size:11px;color:var(--muted)}
.chat-new{padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:13px;transition:border-color .3s}
.chat-new:hover{border-color:var(--ink)}
.chat-log{display:flex;flex-direction:column;gap:12px;height:min(520px,62vh);padding:18px 16px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.msg{max-width:min(78%,660px);padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.6}
.msg p{margin:0}
.msg.user{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.msg.bot{align-self:flex-start;display:grid;gap:10px;background:var(--bg);color:var(--ink-2);border-bottom-left-radius:6px}
.msg.bot.error p{color:var(--warn)}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-q{padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);font-size:13.5px;color:var(--ink-2);text-align:left;transition:border-color .3s}
.chip-q:hover{border-color:var(--ink)}
.msg .cites{display:flex;flex-wrap:wrap;gap:6px}
.msg .cites .case-link{padding:5px 9px;border-radius:8px;border:1px solid var(--line-2);background:var(--paper);font-size:11px;color:var(--accent);text-align:left}
.msg .cites .case-link:hover{border-color:var(--accent)}
.ask-book{justify-self:start;font-size:14px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.dots{display:inline-flex;gap:4px;padding:6px 0}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dot 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-form textarea{flex:1;min-width:0;padding:13px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:15px var(--sans)}
.chat-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.chat-form textarea:disabled{opacity:.6}
.chat-send{flex:none;width:48px;border-radius:14px;background:var(--ink);color:#fff;font-size:20px;transition:background .3s}
.chat-send:hover{background:var(--accent)}
.chat-send:disabled{opacity:.4;cursor:not-allowed}
.ask-foot{display:grid;gap:8px;margin-top:16px}
.ask-foot>p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.6}
.ask-card summary{cursor:pointer;font-size:13.5px;list-style:none}
.ask-card summary::-webkit-details-marker{display:none}
.ask-card summary b{color:var(--good)}
.ask-card summary .mono{display:block;margin-top:2px;font-size:11px;color:var(--muted)}
.ask-card ol{margin:10px 0 0;padding-left:18px;display:grid;gap:4px;font-size:13px}
.ask-card li{color:var(--ink-2)}
.ask-card li .mono{font-size:10.5px;margin-right:6px}
.ask-card li.ok .mono{color:var(--good)}.ask-card li.no .mono{color:var(--warn)}
@media (max-width:560px){.msg{max-width:90%}.chat-log{height:min(480px,64vh)}.chat-id .mono{display:none}}
@media (prefers-reduced-motion:reduce){.dots i{animation:none}.chat-log{scroll-behavior:auto}}

/* ---------- one box: job descriptions and questions ---------- */
.studio .chat{margin-top:32px}
.chat-form{align-items:flex-end}
.chat-form textarea{resize:none;line-height:1.5;max-height:180px;overflow-y:auto}
.chat-send{height:48px}
.studio-note{margin:12px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6}
.studio-note kbd{display:inline-block;min-width:18px;padding:1px 5px;border:1px solid var(--line-2);border-radius:5px;background:var(--paper);font:inherit;text-align:center}
.msg.user.jd p{display:grid;gap:2px}
.msg.user.jd .mono{font-size:11px;color:rgba(255,255,255,.65)}
.msg.brief-msg{max-width:100%;width:100%;background:var(--paper);border:1px solid var(--line-2);gap:14px}
.brief-kicker{margin:0;font-size:11px;color:var(--accent);letter-spacing:.02em}
.brief-msg .fit-score{padding-bottom:12px}
.brief-top{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.brief-top li{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:10px 12px;border-radius:12px;background:var(--bg)}
.brief-top strong{font-size:14px;font-weight:600;color:var(--ink)}
.brief-top span{font-size:14px;color:var(--ink-2)}
.brief-top .case-link{font-size:11px;color:var(--accent)}
.brief-more summary,.how summary,.ai-label summary{cursor:pointer;list-style:none;font-size:13px;color:var(--accent)}
.brief-more summary::-webkit-details-marker,.how summary::-webkit-details-marker,.ai-label summary::-webkit-details-marker{display:none}
.brief-more summary::before,.how summary::before{content:"+ ";font-family:var(--mono)}
.brief-more[open] summary::before,.how[open] summary::before{content:"− "}
.brief-more[open]>*:not(summary){margin-top:12px}
.brief-note{margin:0;font-size:13px;color:var(--muted)}
.brief-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.brief-co input{width:200px;padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:13.5px var(--sans)}
.brief-co input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chip-a{padding:9px 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--paper);font-size:13.5px;color:var(--ink);transition:border-color .3s,background .3s}
.chip-a:hover{border-color:var(--ink)}
.chip-a.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.chip-a.primary:hover{background:var(--accent);border-color:var(--accent)}
.how{font-size:13px}
.how ul{margin:8px 0 0;padding-left:18px;display:grid;gap:3px;color:var(--muted)}
.msg.fallback{border:1px dashed var(--line-2)}
.fallback{margin:0;padding-left:18px;display:grid;gap:4px}

/* ---------- judgment ---------- */
.judgment .three .num{color:var(--accent)}

/* ---------- one more thing ---------- */
.omt{text-align:left}
.omt-kicker{margin:0;font-size:clamp(15px,1.4vw,18px);color:var(--accent)}
.omt h2{margin-top:10px}
.omt-facts article b{display:block;font-size:clamp(34px,3.6vw,52px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.omt-facts article p{margin-top:10px}
.omt-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px}
.omt-detail{display:grid;gap:14px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.ai-label summary b{color:var(--ink)}
.ai-label summary .mono{margin-left:8px;font-size:11px;color:var(--muted)}
.ai-label dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:14px 0 0}
.ai-label dl>div{padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.ai-label dt{font-size:11px;color:var(--accent)}
.ai-label dd{margin:4px 0 0;font-size:14px;color:var(--ink-2);line-height:1.55}
.contact .read-me{margin-top:28px}
@media (max-width:700px){
  .brief-top li{grid-template-columns:1fr}
  .brief-co input{width:100%}
  .brief-co{flex:1 1 100%}
}
.nowrap{white-space:nowrap}
.chat-log{position:relative}

/* ---------- console: a professional AI workspace, not chat bubbles ---------- */
.console{position:relative;margin-top:32px;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:16px;background:var(--paper);box-shadow:0 1px 2px rgba(17,17,16,.04),0 24px 60px -40px rgba(17,17,16,.35);overflow:hidden}
.console-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.console-id{display:flex;align-items:center;gap:10px;min-width:0}
.console-id b{font-size:14px;font-weight:600}
.console-id .mono{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.console-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(18,163,106,.15)}
.console .chat-log{display:flex;flex-direction:column;gap:20px;height:min(580px,66vh);padding:24px 24px 18px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;position:relative}
.console .msg{max-width:none;padding:0;border:0;border-radius:0;background:none;font-size:15px;line-height:1.65}
.console .msg.user{align-self:flex-end;max-width:min(72%,620px);padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
.console .msg.bot{align-self:stretch;display:grid;gap:10px;color:var(--ink-2)}
.console .msg.bot:not(.intro):not(.brief-msg):not(.typing)::before{content:"Semmal’s AI";font:500 11px var(--mono);letter-spacing:.02em;color:var(--muted)}
.console .msg.bot p{max-width:68ch}
.console .msg.typing{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.console .msg.brief-msg{padding:18px 20px;border:1px solid var(--line-2);border-radius:14px;background:var(--paper)}
.console .msg.fallback{padding:14px 16px;border:1px dashed var(--line-2);border-radius:12px}

.intro-title{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.intro-sub{margin:-4px 0 6px;color:var(--muted)}
.starts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.start{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:center;padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper);text-align:left;transition:border-color .25s,box-shadow .25s}
.start svg{grid-row:1/3;width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.start b{font-size:14.5px;font-weight:600;color:var(--ink)}
.start span{font-size:12.5px;line-height:1.4;color:var(--muted)}
.start:hover{border-color:var(--ink);box-shadow:0 10px 26px -18px rgba(17,17,16,.4)}
.asks-label{margin:10px 0 0;font-size:11px;color:var(--muted)}
.asks{display:grid;border-top:1px solid var(--line)}
.ask-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;font-size:14.5px;color:var(--ink-2);text-align:left}
.ask-row svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.45;transition:transform .25s,opacity .25s}
.ask-row:hover{color:var(--ink);border-color:var(--line)}
.ask-row:hover svg{opacity:1;transform:translateX(3px)}

.att{display:flex;align-items:center;gap:10px;margin:0}
.att svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.att>span{display:grid;line-height:1.35;min-width:0}
.att b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att .mono{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.console .cites{display:flex;flex-wrap:wrap;gap:6px}
.console .cites::before{content:"Sources";flex-basis:100%;font:500 11px var(--mono);color:var(--muted)}
.console .cites .case-link{padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);font-size:11.5px;color:var(--ink-2)}
.console .cites .case-link:hover{border-color:var(--accent);color:var(--accent)}
.console .follow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.console .follow::before{content:"Follow up";margin-right:4px;font:500 11px var(--mono);color:var(--muted)}
.console .follow .chip-q{padding:6px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:13px}
.console .follow .chip-q:hover{border-color:var(--ink)}

.composer{display:flex;align-items:flex-end;gap:6px;margin:0 14px 14px;padding:6px;border:1px solid var(--line-2);border-radius:14px;background:var(--paper);transition:border-color .25s,box-shadow .25s}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.composer textarea{flex:1;min-width:0;max-height:200px;padding:10px 6px;border:0;background:none;color:var(--ink);font:15px/1.5 var(--sans);resize:none;outline:none;box-shadow:none}
.composer textarea:focus{box-shadow:none;border:0}
.attach,.console .chat-send{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;font-size:0;transition:background .25s,color .25s}
.attach{color:var(--muted)}
.attach:hover{background:var(--bg);color:var(--ink)}
.attach svg,.console .chat-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.console .chat-send{background:var(--ink);color:#fff}
.console .chat-send:hover{background:var(--accent)}
.console .chat-send:disabled{opacity:.35}

.drop-veil{position:absolute;inset:0;z-index:5;display:none;place-content:center;justify-items:center;gap:6px;border:2px dashed var(--accent);border-radius:16px;background:rgba(247,246,242,.94);text-align:center}
.drop-veil svg{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.drop-veil b{font-size:18px;color:var(--ink)}
.drop-veil span{font-size:13px;color:var(--muted)}
.console.dropping .drop-veil{display:grid}
@media (max-width:700px){
  .starts{grid-template-columns:1fr}
  .console .chat-log{height:min(600px,72vh);padding:18px 14px}
  .console .msg.user{max-width:88%}
  .console-id .mono{display:none}
  .composer{margin:0 10px 10px}
  .console .msg.brief-msg{padding:14px}
}
.brief-bar{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.brief-bar.away{opacity:0;transform:translate(-50%,16px);pointer-events:none}
.brief-msg .fit-score .mono.dim{display:none}
.mode-badge{justify-self:start;padding:3px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:10.5px;letter-spacing:.02em}

/* =========================================================
   Work-first redesign (2 Oct 2026): calmer nav, panels for Ask and the hiring check, work filters, Lab.
   ========================================================= */
.nav nav{gap:2px}
.nav-ask,.nav-hire{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;font-size:14px;transition:background .3s,color .3s,border-color .3s}
.nav-ask{margin-left:8px;border:1px solid var(--line-2);color:var(--ink)}
.nav-ask svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.nav-ask:hover{border-color:var(--ink)}
.nav-hire{color:var(--muted)}
.nav-hire:hover{color:var(--ink);background:rgba(17,17,16,.05)}

/* hero actions: one plain primary, one quiet secondary */
.focus .actions .text-link{background:none;border:0;padding:0;font:inherit;font-size:15px;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;cursor:pointer}
.focus .actions .text-link:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* work: filters and the note shown when ordered for a role */
.work-filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.wf{padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:13.5px;color:var(--ink-2);transition:background .25s,color .25s,border-color .25s}
.wf:hover{border-color:var(--ink)}
.wf[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mini-case[hidden]{display:none}
.work-filters+.case-list{margin-top:16px}
.tailor-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:22px;padding:12px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper);font-size:14px;color:var(--ink-2)}
.tailor-note[hidden]{display:none}
.tailor-note b{color:var(--ink)}
.link.quiet{color:var(--muted)}
.mini-case .match{color:var(--muted)}
.mini-case.is-match .match{color:var(--accent)}

/* contact */
.contact .foot .foot-links a{color:inherit}
.foot .foot-links a:hover{color:var(--accent)}

/* panels: Ask and the hiring check slide in from the right, like the case drawer */
.panel{margin:0 0 0 auto;width:min(620px,100vw);height:100dvh;max-height:100dvh;padding:0;border:0;border-left:1px solid var(--line);background:var(--paper);color:var(--ink);overflow:hidden}
.panel[open]{display:flex;flex-direction:column;animation:slide .45s var(--ease)}
.panel::backdrop{background:rgba(17,17,16,.28);backdrop-filter:blur(3px)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.panel-head h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.panel-meta{display:flex;align-items:center;gap:10px}
.panel-meta .mono{font-size:11px;color:var(--muted)}
.panel-close{color:var(--muted);font-size:12px}
.panel-close:hover{color:var(--ink)}
.panel .chat-log{flex:1;display:flex;flex-direction:column;gap:18px;height:auto;padding:22px;overflow-y:auto;overscroll-behavior:contain}
.panel .msg{max-width:none;padding:0;border:0;border-radius:0;background:none;font-size:15px;line-height:1.65}
.panel .msg.user{align-self:flex-end;max-width:85%;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
.panel .msg.bot{display:grid;gap:10px;color:var(--ink-2)}
.panel .msg.typing{display:flex;align-items:center;gap:10px;color:var(--muted)}
.panel .msg.fallback{padding:12px 14px;border:1px dashed var(--line-2);border-radius:12px}
.panel .intro-sub{margin:0;color:var(--muted);font-size:14px}
.panel .cites{display:flex;flex-wrap:wrap;gap:6px}
.panel .cites .case-link{padding:5px 9px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);font-size:11px;color:var(--ink-2);text-align:left}
.panel .cites .case-link:hover{border-color:var(--accent);color:var(--accent)}
.panel .ask-book{font-size:13.5px}
.panel .composer{margin:0 16px 10px}
.panel .chat-send,.panel .attach{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;font-size:0;transition:background .25s,color .25s}
.panel .chat-send{background:var(--ink);color:#fff}
.panel .chat-send:hover{background:var(--accent)}
.panel .chat-send:disabled{opacity:.35}
.panel .attach{color:var(--muted)}
.panel .attach:hover{background:var(--bg);color:var(--ink)}
.panel .chat-send svg,.panel .attach svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.panel-foot{margin:0;padding:0 22px 16px;font-size:11px;line-height:1.6;color:var(--muted)}
.panel-foot .link{font-size:11px}

.hire-body{position:relative;flex:1;overflow-y:auto;padding:22px}
.hire-intake{display:grid;gap:14px}
.hire-intake[hidden]{display:none}
.hire-intake .muted{margin:0;font-size:14px}
.hire-intake .composer{margin:0}
.hire-intake .composer textarea{min-height:88px}
.hire-intake .link{justify-self:start;font-size:13.5px}
.hire-alt{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:0;color:var(--muted);font-size:13.5px}
.hire-msg{display:flex;align-items:center;gap:10px;margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--bg);color:var(--ink-2);font-size:14.5px;line-height:1.55}
.hire-msg.error{background:none;border:1px dashed var(--line-2)}
.hire-body.dropping .drop-veil{display:grid}
.brief{display:grid;gap:14px}
.brief .fit-score .mono.dim{display:none}
.brief-more-actions{margin:0;font-size:13.5px;color:var(--muted)}

/* Lab: Stranger Test */
.lab-app{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;margin-top:24px;align-items:start}
.lab-in{display:grid;gap:14px;padding:20px;border:1px solid var(--line-2);border-radius:16px;background:var(--paper)}
.lab-field{display:grid;gap:8px}
.lab-label{font-size:14px;font-weight:600;color:var(--ink)}
.lab-label .mono{margin-left:6px;font-size:10.5px;font-weight:400;color:var(--muted)}
.lab-in textarea,.lab-in input{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);resize:vertical}
.lab-in textarea:focus,.lab-in input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.lab-jargon{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:20px;margin:-4px 0 0;font-size:12.5px}
.lab-jargon .mono{font-size:11px;color:var(--muted);margin-right:2px}
.lab-jargon .ok{color:var(--good)}
.jw{padding:1px 7px;border-radius:6px;font-size:12.5px}
.jw.buzz{background:#fdecec;color:#a8341f}
.jw.vague{background:#fff4e0;color:#8a5a00}
.lab-actions{display:flex;align-items:center;gap:16px}
.lab-actions .btn:disabled{opacity:.5;cursor:progress}
.lab-note{margin:0;font-size:11px;color:var(--muted)}
.lab-out{min-height:100%;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.st-score{display:flex;align-items:center;gap:18px}
.st-score .ring{flex:none}
.st-score h3{margin:2px 0 4px;font-size:20px}
.st-score p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.55}
.st-bars{display:grid;gap:8px;margin:16px 0 4px}
.st-bar{display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr) 46px;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.st-bar i{position:relative;height:6px;border-radius:6px;background:var(--line)}
.st-bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:6px;background:var(--accent)}
.st-bar b{font-size:11.5px;font-weight:400;color:var(--muted);text-align:right}
.lab-out h4{margin:22px 0 8px;font:500 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.st-read{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.st-read>div{padding:12px 14px;border-radius:12px;background:var(--bg)}
.st-read dt{font-size:12px;color:var(--muted)}
.st-read dd{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.st-mark{margin-left:4px;font-weight:600}
.st-mark.match{color:var(--good)}.st-mark.near{color:var(--warn)}.st-mark.miss{color:#c0392b}
.st-copy{margin:0;padding:12px 14px;border-radius:12px;background:var(--bg);font-size:15px;line-height:1.7}
.st-copy mark{padding:1px 3px;border-radius:4px}
.st-copy mark.confuse{background:#e8ecff;color:var(--ink);text-decoration:underline dotted var(--accent);text-underline-offset:3px}
.st-copy mark.jw.buzz{background:#fdecec;color:#a8341f}
.st-copy mark.jw.vague{background:#fff4e0;color:#8a5a00}
.st-why{margin:8px 0 0;padding-left:18px;display:grid;gap:4px;font-size:13.5px;color:var(--ink-2)}
.st-rewrite{margin:0;padding:14px 16px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:var(--bg);font-size:17px;line-height:1.5;color:var(--ink)}
.st-why-line{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.st-actions{display:flex;gap:8px;margin:12px 0 0}
.st-hint,.st-loading{margin:0;color:var(--muted);font-size:14.5px}
.st-loading{display:flex;align-items:center;gap:10px}
@media (max-width:900px){
  .lab-app{grid-template-columns:1fr}
  .st-read{grid-template-columns:1fr}
  .st-bar{grid-template-columns:120px minmax(0,1fr) 42px}
  .nav-ask span{display:none}
  .nav-ask{margin-left:0;padding:8px 10px}
}
.panel,.drawer{max-width:100vw}

/* contact: the same hairline rows as the work list; one primary action */
.contact-rows{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.c-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.c-row>.mono{color:var(--muted);font-size:11.5px}
.c-row strong,.c-mail{display:block;font-size:clamp(18px,1.7vw,22px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.c-mail{width:max-content;max-width:100%;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease),color .3s}
.c-mail:hover{color:var(--accent);background-size:100% 1px}
.c-row div>span{display:block;margin-top:4px;color:var(--muted);font-size:14.5px}
.c-row .btn{justify-self:end;white-space:nowrap}
.c-links{display:flex;gap:8px;justify-self:end;flex-wrap:wrap}
.c-links .btn{justify-self:auto}
@media (max-width:700px){
  .c-row{grid-template-columns:1fr;gap:10px;padding:20px 0}
  .c-row .btn,.c-links{justify-self:start}
}

.cs h3[id]{scroll-margin-top:64px}
.brief-title{margin:6px 0 2px;font-size:clamp(20px,2.2vw,24px);font-weight:600;letter-spacing:-.02em}

/* Lab: plain steps, hints and a worked example */
.lab-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lab-steps li{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);font-size:14px;color:var(--ink-2)}
.lab-steps b{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:600}
.lab-hint{margin-top:-4px;font-size:13px;color:var(--muted)}
.lab-eg{display:block;margin-bottom:12px;color:var(--accent)}
.eg-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.eg-row .mono{color:var(--muted);font-size:11px;padding-top:3px}
.eg-row p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.eg-row.good p{color:var(--ink);font-weight:500}
.eg-row.good .mono{color:var(--good)}
@media (max-width:700px){.lab-steps{grid-template-columns:1fr}.eg-row{grid-template-columns:1fr;gap:2px}}

/* Motion: role tags arrive after the rows settle */
@keyframes match-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mini-case .match{animation:match-in .5s cubic-bezier(.16,1,.3,1) .45s both}
@media (prefers-reduced-motion:reduce){.mini-case .match{animation:none}}

/* Motion: a row's title travels into the case heading, above the panel sliding in */
::view-transition-group(case-title){animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(case-title),::view-transition-new(case-title){height:100%;object-fit:contain;object-position:left top}
::view-transition-old(case-title){animation-duration:.16s}
::view-transition-new(case-title){animation-duration:.32s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}

/* Motion: one nav highlight that slides between sections */
.nav nav{position:relative}
.nav nav a{position:relative;z-index:1}
.nav-pill{position:absolute;left:0;top:50%;height:34px;margin-top:-17px;width:0;border-radius:999px;background:rgba(17,17,16,.06);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.16,1,.3,1),width .5s cubic-bezier(.16,1,.3,1),opacity .3s}
/* Motion: buttons answer a press; copy buttons confirm */
.btn:active,.chip-a:active,.wf:active,.nav-ask:active,.nav-hire:active,.lab-actions .btn:active{transform:scale(.97);transition-duration:.08s}
@keyframes ok-pop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
.ok{animation:ok-pop .35s cubic-bezier(.16,1,.3,1);color:var(--good)!important;border-color:currentColor!important}
@media (max-width:900px){.nav-pill{display:none}}

/* Motion: an answer's sentences and their sources light each other up */
.src-s{border-radius:4px;transition:background .25s,box-shadow .25s}
.src-s.lit{background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}
.cites .case-link{transition:background .25s,color .25s,border-color .25s,transform .25s cubic-bezier(.16,1,.3,1)}
.cites .case-link.lit{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)}

/* Motion: the Stranger Test result unfolds in reading order */
.st-before{margin:0 0 8px;font-size:14.5px;color:var(--muted)}
.st-before span{background:linear-gradient(currentColor,currentColor) 0 55%/100% 1px no-repeat}
@keyframes st-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes st-strike{from{background-size:0 1px}}
@keyframes st-bar{from{width:0}}
@keyframes st-mark{from{background-size:0 100%}}
.st-anim>*{animation:st-in .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 85ms)}
.st-anim .st-bar i::after{animation:st-bar .9s cubic-bezier(.16,1,.3,1) .2s both}
.st-anim .st-before span{animation:st-strike .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 85ms + 250ms)}
.st-copy mark{background-repeat:no-repeat;background-size:100% 100%}
.st-copy mark.confuse{background-color:transparent;background-image:linear-gradient(#e8ecff,#e8ecff)}
.st-copy mark.jw.buzz{background-color:transparent;background-image:linear-gradient(#fdecec,#fdecec)}
.st-copy mark.jw.vague{background-color:transparent;background-image:linear-gradient(#fff4e0,#fff4e0)}
.st-anim .st-copy mark{animation:st-mark .45s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(600ms + var(--m,0) * 90ms)}

/* Motion: the hiring check shows what it read before the brief arrives */
.reading{display:grid;gap:14px;padding:6px 0;cursor:pointer}
.reading-k{margin:0;color:var(--accent)}
.reading-chips{display:flex;flex-wrap:wrap;gap:6px}
.reading-chips span{padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:500 12.5px var(--mono);animation:st-in .4s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 55ms)}
.reading-comps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.reading-comps li{display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:var(--bg);animation:st-in .45s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(550ms + var(--i) * 110ms)}
.reading-comps strong{font-size:14.5px;font-weight:600}
.reading-comps span{font:12px var(--mono);color:var(--muted)}
.brief{animation:st-in .45s cubic-bezier(.16,1,.3,1) both}