/* ============================================================
   9io.ai — shared stylesheet for the public marketing pages
   (/, /how-we-work, /services/*).

   Served from /site.css with a one-day cache, so pages link it as
   /site.css?v=3 — bump that version when this file changes.

   Light, plain and short. The amber and the black 9IO mark carry the
   brand; everything else stays out of the way.
   ============================================================ */

:root{
  --bg:#FDFCF9; --panel:#F5F2EA; --line:#E7E2D6;
  --ink:#171512; --body:#45413A; --muted:#6E6960;
  /* gold taken from the <9io/> logo artwork */
  --amber:#E1A801; --amber-hi:#F2BC2A; --amber-ink:#7A5500;
  --dark:#0b0b0c; --dark-panel:#141416; --dark-line:#26262a;
  --dark-text:#ECEAE4; --dark-dim:#A19D95;
  --green:#00C853;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;
  --mono:"SF Mono","Menlo","Cascadia Mono","Consolas",monospace;
  --gutter:clamp(20px,5vw,40px);
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--amber);color:#000}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--amber);color:#000;
  font-weight:700;padding:12px 20px;text-decoration:none;border-radius:0 0 8px 0}
.skip:focus{left:0}

.wrap{max-width:1040px;margin:0 auto;padding:0 var(--gutter);width:100%}

/* ---------- type ---------- */
h1,h2,h3{text-wrap:balance;letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(38px,6.2vw,70px);font-weight:700;letter-spacing:-.035em;line-height:1.04;max-width:16ch}
h2{font-size:clamp(30px,4.2vw,46px);font-weight:700;max-width:22ch}
h3{font-size:22px;font-weight:650;line-height:1.25}
p{color:var(--body);max-width:60ch;text-wrap:pretty}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--body);max-width:56ch}
.kicker{display:block;font-weight:600;color:var(--amber-ink);margin-bottom:14px;font-size:16px}
.small{font-size:14.5px;color:var(--muted);line-height:1.55}
.em{color:var(--amber-ink)}

section{padding:88px 0}
section + section{border-top:1px solid var(--line)}
.head{margin-bottom:40px}
.head p{margin-top:16px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(253,252,249,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand .logo{display:block;height:30px;width:auto}
nav.top{display:flex;align-items:center;gap:26px}
nav.top a{color:var(--body);text-decoration:none;font-size:15.5px;font-weight:500}
nav.top a:hover{color:var(--ink)}
nav.top a[aria-current="page"]{color:var(--ink);font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:650;font-size:16px;
  text-decoration:none;padding:13px 22px;border-radius:10px;border:1.5px solid transparent;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-amber{background:var(--amber);color:#000}
.btn-amber:hover{background:var(--amber-hi)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--muted)}
.btn-lg{padding:16px 28px;font-size:17px}
.btn-sm{padding:10px 16px;font-size:14.5px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* ---------- hero ---------- */
.hero{padding:96px 0 80px;border-top:0}
.hero .lede{margin-top:28px}
.hero .lede + .lede{margin-top:16px}
.crumb{font-size:14.5px;color:var(--muted);margin-bottom:22px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--ink)}
.team{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;
  align-items:center;gap:10px 12px}
.team .k{font-size:15px;font-weight:600;color:var(--muted);margin-right:6px}
.chip{font-size:15px;font-weight:500;color:var(--ink);background:var(--panel);padding:8px 14px;border-radius:999px}
.team .small{flex-basis:100%;margin-top:4px}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{display:flex;flex-direction:column;gap:12px;background:var(--panel);border-radius:var(--radius);
  padding:30px 30px 28px;text-decoration:none;transition:background .15s}
a.card:hover{background:#EFEBE0}
.card p{font-size:16.5px}
.card .go{margin-top:auto;padding-top:14px;font-weight:650;color:var(--amber-ink);font-size:15.5px}

/* ---------- roster: one role per row, said once ---------- */
.roster{border-top:1px solid var(--line)}
.roster div{display:grid;grid-template-columns:230px minmax(0,1fr);gap:8px 28px;padding:20px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.roster h3{font-size:19px}
.roster p{font-size:16.5px}
.roster .opt{font-size:14px;color:var(--muted);font-weight:500}

/* ---------- steps (a real sequence, so the numbers earn their place) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px;counter-reset:step}
.step{position:relative;padding-top:58px}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:0;width:40px;height:40px;
  border-radius:50%;background:var(--amber);color:#000;font-weight:800;font-size:17px;display:grid;place-items:center}
.step h3{margin-bottom:10px}
.step p{font-size:16.5px}
.after{margin-top:44px;padding:22px 26px;background:var(--panel);border-radius:var(--radius);
  display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center}
.after span{font-size:15.5px;color:var(--body);display:inline-flex;align-items:center;gap:9px}
.after span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--amber);flex:none}
.after a{font-weight:650;color:var(--amber-ink);text-decoration:none;font-size:15.5px;margin-left:auto}
.after a:hover{text-decoration:underline}

/* ---------- compare ---------- */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cmp{border-radius:var(--radius);padding:32px 30px 30px;border:1px solid var(--line);background:var(--bg)}
.cmp.us{background:var(--dark);color:var(--dark-text);border-color:var(--dark)}
.cmp .t{font-size:15px;font-weight:600;color:var(--muted);margin-bottom:22px}
.cmp.us .t{color:var(--amber)}
.cmp .big{font-size:clamp(28px,3.4vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:16px;
  text-wrap:balance}
.cmp p{font-size:16px}
.cmp.us p{color:var(--dark-dim)}
.foot-note{margin-top:20px}

/* ---------- dark band: the thing we built ---------- */
.band{background:var(--dark);color:var(--dark-text);border-top:0}
.band .kicker{color:var(--amber)}
.band h2,.band .lede{color:var(--dark-text)}
.band p{color:var(--dark-dim)}
.built{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.facts{list-style:none;border:1px solid var(--dark-line);border-radius:var(--radius);overflow:hidden;
  background:var(--dark-panel)}
.facts li{display:flex;gap:18px;padding:18px 22px;border-top:1px solid var(--dark-line);font-size:16px;color:var(--dark-dim)}
.facts li:first-child{border-top:0}
.facts li b{color:var(--dark-text);font-weight:600;flex:none;width:112px}
.live{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:var(--green);font-weight:600;margin-top:18px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(0,200,83,.18)}
.band .arrow{display:inline-block;margin-top:28px;color:var(--amber);font-weight:650;text-decoration:none;
  border-bottom:1.5px solid rgba(255,158,0,.4);padding-bottom:3px}
.band .arrow:hover{border-bottom-color:var(--amber)}
.band .small{color:var(--dark-dim);margin-top:26px}

/* ---------- questions ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;font-size:19px;font-weight:650;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--panel);
  display:grid;place-items:center;font-weight:500;color:var(--body);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 24px;max-width:66ch}
.faq details p + p{margin-top:-10px}

/* ---------- terms list (/how-we-work) ---------- */
.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.term{background:var(--panel);border-radius:var(--radius);padding:26px 28px 28px}
.term h3{font-size:19px;margin-bottom:10px}
.term p{font-size:16px}
.plain{list-style:none;display:grid;gap:14px;margin-top:8px}
/* padding + an absolute marker, so a <b> lead-in and its trailing text stay one flow
   (as grid items they would each land in their own cell). */
.plain li{position:relative;padding-left:26px;font-size:16.5px;color:var(--body);max-width:72ch}
.plain li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--amber)}
.plain li b{color:var(--ink);font-weight:650}

/* ---------- contact ---------- */
.contact{background:var(--panel);border-top:0}
.contact .lede{margin-top:20px}
.mailrow{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.mail{font-family:var(--mono);font-size:clamp(18px,2.4vw,24px);text-decoration:none;color:var(--ink);
  border-bottom:2px solid var(--amber);padding-bottom:3px}
.contact .small{margin-top:26px;display:flex;align-items:center;gap:10px}

/* ---------- footer ---------- */
footer{padding:36px 0 48px;border-top:1px solid var(--line)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 32px;font-size:14.5px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{color:var(--body);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .brand .logo{height:23px}
.foot .brand span:last-child{color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .built{grid-template-columns:1fr;gap:32px}
  .steps,.cards.three{grid-template-columns:1fr}
  .roster div{grid-template-columns:1fr;gap:4px;padding:18px 0}
}
@media (max-width:720px){
  section{padding:64px 0}
  .hero{padding:64px 0 56px}
  nav.top{display:none}
  .cards,.compare,.terms{grid-template-columns:1fr}
  .cta-row .btn{flex:1 1 100%}
  .facts li b{width:96px}
  .faq summary{font-size:17.5px}
  .after a{margin-left:0;flex-basis:100%}
}

/* ============================================================
   Motion (see /site.js). Hidden states only ever apply to elements
   site.js has marked, so nothing is hidden when JavaScript is off.
   ============================================================ */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
.r-pending{opacity:0;transform:translateY(22px)}
.r-in{transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}

/* a soft gold light that follows the pointer across cards */
.card{position:relative;overflow:hidden;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(225,168,1,.2),transparent 62%)}
.card:hover::before{opacity:1}
a.card{transition:background .15s,transform .35s var(--ease),box-shadow .35s var(--ease)}
a.card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(23,21,18,.4)}

/* the stack we build with, drifting past */
.marquee-wrap{margin-top:56px}
.marquee-k{display:block;font-size:15px;font-weight:600;color:var(--muted);margin-bottom:14px}
.marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;gap:10px;padding-right:10px}
.marquee-group span{font:500 14.5px/1 var(--mono);color:var(--ink);background:var(--panel);border:1px solid var(--line);
  padding:11px 16px;border-radius:999px;white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   Homepage: the dark "cinema" at the top — hero, the stack story,
   and the statement. The header floats over it and turns light-on-dark.
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.home header{position:fixed;top:0;left:0;right:0;transition:background-color .35s,border-color .35s}
.brand .logo-light{display:none}
header.on-dark{background:rgba(11,11,12,.55);border-bottom-color:rgba(236,234,228,.06)}
header.on-dark .brand .logo-dark{display:none}
header.on-dark .brand .logo-light{display:block}
header.on-dark nav.top a{color:rgba(236,234,228,.72)}
header.on-dark nav.top a:hover{color:#fff}

.cinema{position:relative;color:var(--dark-text);overflow-x:clip;background:
  radial-gradient(900px 520px at 80% 26%,rgba(225,168,1,.11),transparent 62%),
  radial-gradient(760px 520px at 8% 92%,rgba(225,168,1,.05),transparent 60%),
  var(--dark)}
.cinema-in{max-width:1280px;margin:0 auto;padding:0 var(--gutter);display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:32px}
.cinema section{border:0;padding:0}
.stage{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:0;height:100vh;height:100svh;
  opacity:var(--fade,1)}
.stage canvas{display:block;width:100%;height:100%}

.cinema .hero{grid-column:1;grid-row:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding:128px 0 96px}
.cinema .kicker{color:var(--amber)}
.cinema h1{color:var(--dark-text);font-size:clamp(40px,5.3vw,74px);max-width:15ch}
.cycle{display:block;color:var(--amber)}
.cycle.cycling{position:relative;height:1.14em}
.cycle.cycling span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(60%);filter:blur(10px);
  transition:opacity .6s var(--ease),transform .8s var(--ease),filter .7s var(--ease)}
.cycle.cycling span.on{opacity:1;transform:none;filter:none}
.cycle.cycling span.out{transform:translateY(-60%)}
.cinema .lede{color:var(--dark-dim)}
.cinema .btn-ghost{border-color:rgba(236,234,228,.22);color:var(--dark-text)}
.cinema .btn-ghost:hover{border-color:rgba(236,234,228,.55)}
.scroll-cue{margin-top:56px;display:flex;align-items:center;gap:12px;font:600 11px/1 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dark-dim)}
.scroll-cue i{position:relative;width:1px;height:34px;overflow:hidden;background:rgba(236,234,228,.18)}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-10px;width:1px;height:10px;background:var(--amber);
  animation:cue 1.9s var(--ease) infinite}
@keyframes cue{to{transform:translateY(46px)}}

.cinema .story{grid-column:1;grid-row:2;padding:4vh 0 14vh}
.story-intro{min-height:54vh;display:flex;flex-direction:column;justify-content:center}
.story-intro h2{color:var(--dark-text);font-size:clamp(34px,4.6vw,60px)}
.story-intro p{color:var(--dark-dim);margin-top:18px;font-size:18px}
.panel{min-height:72vh;display:flex;flex-direction:column;justify-content:center;max-width:34rem;
  transition:opacity .55s var(--ease),transform .6s var(--ease)}
.motion-ready .panel{opacity:.2;transform:translateX(-8px)}
.motion-ready .panel.active{opacity:1;transform:none}
.layer{display:flex;align-items:center;gap:12px;font:600 12px/1.2 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);margin-bottom:18px}
.layer::before{content:"";width:28px;height:1px;background:var(--amber)}
.panel h3{color:var(--dark-text);font-size:clamp(28px,3.3vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.08}
.panel p{color:var(--dark-dim);margin-top:16px;font-size:18px;line-height:1.55}
.panel a{margin-top:24px;align-self:flex-start;color:var(--amber);font-weight:650;text-decoration:none;
  border-bottom:1.5px solid rgba(225,168,1,.35);padding-bottom:3px}
.panel a:hover{border-bottom-color:var(--amber)}

.cinema .statement{grid-column:1 / -1;grid-row:3;padding:12vh 0 22vh}
.statement p{max-width:21ch;font-size:clamp(32px,5vw,68px);line-height:1.1;letter-spacing:-.035em;font-weight:700;
  color:var(--dark-text)}
.statement em{font-style:normal;color:var(--amber)}
.statement .w{color:rgba(236,234,228,.14);transition:color .35s var(--ease)}
.statement .w.lit{color:var(--dark-text)}
.statement .w.gold.lit{color:var(--amber)}

/* phones: the stack sits behind the words instead of beside them */
@media (max-width:860px){
  .cinema-in{grid-template-columns:minmax(0,1fr)}
  .stage{grid-column:1;opacity:calc(.36 * var(--fade,1));pointer-events:none}
  .cinema .hero,.cinema .story,.cinema .statement{position:relative;z-index:1}
  .cinema .hero{padding:112px 0 72px}
  .panel{min-height:64vh}
  .cinema h1,.story-intro h2,.panel h3{text-shadow:0 2px 24px rgba(11,11,12,.85)}
}
@media (prefers-reduced-motion:reduce){
  .scroll-cue i::after,.marquee-track{animation:none}
  .marquee-track{flex-wrap:wrap;width:auto}
  .marquee-group[aria-hidden]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .motion-ready .panel{opacity:1;transform:none}
}