:root{
  --void:#000000;
  --bone:#ffffff;
  --ash:#9a9a9a;
  --silver:#bdbdbd;
  --ember:#D4694B;
  --cobalt:#4E79F2;
  --crimson:#E0484F;
  --saffron:#ffb829;
  --verdant:#15846e;
  --logo:#D4694B;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --max:1280px;
}
body[data-theme="light"]{
  --void:#F7F6F2;
  --bone:#0E1320;
  --ash:#6B7280;
  --silver:#4B5563;
  --ember:#2F5BEA;
  --cobalt:#2F5BEA;
  --crimson:#C43D4B;
  --saffron:#C43D4B;
  --logo:#C43D4B;
}
body{transition:background .5s ease,color .5s ease}
body[data-theme="light"] ::selection{background:rgba(47,91,234,.18)}
body[data-theme="light"] #grain{opacity:.10;mix-blend-mode:multiply}
.theme-toggle{
  background:none;border:1px solid var(--ash);color:var(--ash);
  font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  border-radius:20px;padding:9px 14px;cursor:pointer;transition:color .25s,border-color .25s;
}
.theme-toggle:hover{color:var(--bone);border-color:var(--bone)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:200;
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(212,105,75,.4)}
a{color:inherit;text-decoration:none}

/* ---------- fixed particle canvas ---------- */
#gl{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
}

/* ---------- grain ---------- */
#grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  z-index:40;pointer-events:none;opacity:.07;
  background-repeat:repeat;
}

/* ---------- preloader ---------- */
#loader{
  position:fixed;inset:0;z-index:100;background:var(--void);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;transition:opacity .7s ease;
}
#loader.done{opacity:0;pointer-events:none}
#loader .ld-label{
  font-size:14px;font-weight:600;letter-spacing:.25em;color:var(--ash);
  text-transform:uppercase;
}
#loader .ld-count{
  font-size:78px;font-weight:400;letter-spacing:-3.12px;line-height:1;
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 40px;
}
.logo{display:flex;align-items:center;gap:14px;font-weight:400;font-size:26px;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.logo b{font-weight:600}
.logo svg{width:78px;height:78px}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a.link{
  font-size:14px;font-weight:600;letter-spacing:.025em;text-transform:uppercase;
  color:var(--ash);transition:color .25s;
}
.nav-links a.link:hover{color:var(--bone)}
.pill{
  display:inline-block;background:var(--ember);color:#ffffff;
  font-size:14px;font-weight:600;letter-spacing:.025em;text-transform:uppercase;
  border-radius:24px;padding:14px 22px;line-height:1;
  transition:transform .25s ease, filter .25s ease;
}
.pill:hover{transform:scale(1.05);filter:brightness(1.1)}
@media(max-width:720px){
  .nav{padding:20px 22px}
  .nav-links a.link{display:none}
  .logo{font-size:28px;gap:12px}
  .logo svg{width:52px;height:52px}
}

/* ---------- content ---------- */
main{position:relative;z-index:1}
.row{
  min-height:100vh;display:flex;align-items:center;
  max-width:var(--max);margin:0 auto;padding:0 40px;
}
.col{width:min(600px, 100%)}
.col.right{margin-left:auto}
.eyebrow{
  font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--saffron);margin-bottom:24px;
}
h1{
  font-size:clamp(56px, 8.2vw, 113px);
  font-weight:400;line-height:1.05;letter-spacing:-.04em;
  margin-bottom:30px;
}
h2{
  font-size:clamp(42px, 5.6vw, 78px);
  font-weight:400;line-height:1.1;letter-spacing:-.04em;
  margin-bottom:26px;
}
.body{
  font-size:18px;font-weight:200;color:var(--bone);
  max-width:520px;margin-bottom:36px;
}
.body.dim{color:var(--silver)}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* manifesto */
.manifesto{
  min-height:130vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6vh;text-align:center;
  padding:0 24px;
}
.manifesto p{
  font-size:clamp(36px, 4.6vw, 64px);
  font-weight:400;letter-spacing:-.03em;line-height:1.15;
  max-width:16em;opacity:.08;transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity,transform;
}
.manifesto p.lit{opacity:1;transform:none}
.manifesto p em{font-style:normal;color:var(--saffron)}

/* stages: pinned panel */
.stages{position:relative;height:620vh}
.stages-sticky{position:sticky;top:0;height:100vh}
.beat{
  position:absolute;left:40px;top:50%;transform:translateY(-50%);
  width:min(520px, 80vw);opacity:0;pointer-events:none;
  will-change:opacity,transform;
}
.beat h2{font-size:clamp(36px, 4.6vw, 64px)}
.beat .body{margin-bottom:0}
@media(max-width:720px){.beat{left:22px}}

/* true north */
.north{
  min-height:100vh;display:flex;align-items:flex-start;justify-content:center;
  text-align:center;padding:14vh 24px 0;
}
.north .body{max-width:30em;margin-left:auto;margin-right:auto}

/* footer */
.footer{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:34px;padding:0 24px;
}
.footer h2{max-width:12em;margin-bottom:0}
.foot-meta{
  position:absolute;bottom:34px;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  max-width:var(--max);margin:0 auto;padding:0 40px;
  font-size:12px;font-weight:400;color:var(--ash);
}
.footer{position:relative}
.foot-meta a:hover{color:var(--bone)}
.foot-meta .badge img{height:48px;width:auto;display:block;opacity:.85;transition:opacity .25s}
.foot-meta .badge:hover img{opacity:1}
@media(max-width:720px){
  .foot-meta{flex-wrap:wrap;gap:12px 20px;justify-content:center;padding:0 22px}
}

@media (prefers-reduced-motion: reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .manifesto p{transition:none;opacity:1;transform:none}
}
.no-gl #gl{display:none}

/* ---------- products: premise cards, solid backing over the scene ---------- */
.products{
  position:relative;padding:14vh 40px 18vh;
  /* Solid ground for the whole section: the scene morphs behind this stretch
     and would otherwise cut through the heading. Fades keep the hand-off soft. */
  background:linear-gradient(to bottom, transparent 0, var(--void) 12vh, var(--void) calc(100% - 12vh), transparent 100%);
}
.products-inner{max-width:var(--max);margin:0 auto}
.products-head{max-width:640px;margin-bottom:64px}
.products-head .body{margin-bottom:0}
.premises{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));gap:20px;
}
.premise{
  position:relative;padding:34px 30px 38px;
  background:var(--void);
  border:1px solid rgba(255,255,255,.10);border-radius:6px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 30px 60px -30px rgba(0,0,0,.8);
}
.premise::before{
  content:"";position:absolute;left:30px;top:0;width:44px;height:1px;
  background:var(--hue, var(--ember));
}
.premise[data-hue="market"]{--hue:var(--cobalt)}
.premise[data-hue="earth"]{--hue:var(--verdant)}
.premise[data-hue="enterprise"]{--hue:var(--ember)}
.premise[data-hue="bias"]{--hue:var(--saffron)}
.premise h3{
  font-size:22px;font-weight:400;letter-spacing:-.02em;margin:0 0 16px;
}
.premise p{font-size:16px;line-height:1.55;color:var(--silver)}
/* cards are links: light up in their own hue and get a little agitated on hover */
a.premise{
  display:block;color:inherit;cursor:pointer;
  /* keeps the .reveal fade (opacity/transform) and adds the hover transitions */
  transition:opacity .9s ease, transform .9s ease, border-color .25s ease, box-shadow .25s ease;
}
a.premise::after{
  content:"\2192";position:absolute;right:26px;top:30px;
  font-size:18px;color:var(--hue, var(--ember));opacity:0;transform:translateX(-6px);
  transition:opacity .25s ease, transform .25s ease;
}
a.premise:hover,a.premise:focus-visible{
  border-color:var(--hue, var(--ember));
  background:color-mix(in srgb, var(--hue, var(--ember)) 9%, var(--void));
  box-shadow:0 0 0 1px var(--hue, var(--ember)), 0 0 34px -8px var(--hue, var(--ember)), 0 30px 60px -30px rgba(0,0,0,.8);
  animation:premise-pulse 1.4s ease-in-out infinite;
  outline:none;
}
a.premise:hover::after,a.premise:focus-visible::after{opacity:1;transform:none}
a.premise:hover::before{width:100%;left:0;transition:width .35s ease}
a.premise:hover p{color:var(--bone)}
/* the box breathes; the text inside stays perfectly still */
@keyframes premise-pulse{
  0%,100%{box-shadow:0 0 0 1px var(--hue, var(--ember)), 0 0 30px -10px var(--hue, var(--ember)), 0 30px 60px -30px rgba(0,0,0,.8)}
  50%    {box-shadow:0 0 0 2px var(--hue, var(--ember)), 0 0 52px -6px var(--hue, var(--ember)), 0 30px 60px -30px rgba(0,0,0,.8)}
}
@media (prefers-reduced-motion: reduce){
  a.premise:hover,a.premise:focus-visible{animation:none}
}
body[data-theme="light"] .premise{
  border-color:rgba(0,0,0,.10);
  box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 30px 60px -30px rgba(0,0,0,.25);
}
@media(max-width:720px){.products{padding:10vh 22px 14vh}}

/* ---------- secondary pages (no particle scene) ---------- */
.nav-links a.link.current{color:var(--bone)}
.page{
  position:relative;z-index:1;
  max-width:var(--max);margin:0 auto;padding:180px 40px 80px;
}
.page-hero{max-width:720px;margin-bottom:14vh}
.page-hero h1{font-size:clamp(48px, 6.6vw, 92px)}
.page-hero .body{margin-bottom:0}
.team-group{margin-bottom:12vh}
.team-group h2{font-size:clamp(32px, 4vw, 52px);margin-bottom:40px}
.people{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:48px 32px;
}
.person{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.avatar{
  width:120px;height:120px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:400;letter-spacing:-.04em;color:var(--bone);
  background:
    radial-gradient(circle at 30% 30%, rgba(212,105,75,.55), rgba(78,121,242,.25) 60%, transparent 100%),
    rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);
}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.person h3{font-size:22px;font-weight:400;letter-spacing:-.02em;margin-top:8px}
.person .role{
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--saffron);
}
.person .bio{font-size:16px;color:var(--silver);max-width:34em}
.person a.more{
  font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ash);transition:color .25s;
}
.person a.more:hover{color:var(--bone)}
.person.placeholder .avatar{
  background:none;border:1px dashed var(--ash);color:var(--ash);
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.person.placeholder h3,.person.placeholder .bio{color:var(--ash)}
.footer.compact{min-height:60vh}
.pill.current{filter:brightness(.85)}

/* products page: one beat per product */
.product-beat{
  position:relative;max-width:720px;padding:22vh 0 22vh 34px;margin-bottom:4vh;
  border-left:1px solid var(--hue, var(--ember));
}
.product-beat[data-hue="market"]{--hue:var(--cobalt)}
.product-beat[data-hue="earth"]{--hue:var(--verdant)}
.product-beat[data-hue="enterprise"]{--hue:var(--ember)}
.product-beat[data-hue="bias"]{--hue:var(--saffron)}
.product-beat .eyebrow{color:var(--hue, var(--saffron));margin-bottom:18px}
.product-beat h2{font-size:clamp(36px, 4.6vw, 64px)}
.product-beat .body{margin-bottom:0;max-width:34em}
@media(max-width:720px){.product-beat{padding-left:22px}}

/* engage page */
.steps-group{margin-bottom:12vh}
.steps-group h2{font-size:clamp(32px, 4vw, 52px);margin-bottom:48px}
.steps{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:40px 32px;
}
.steps li{display:flex;flex-direction:column;gap:10px}
.step-n{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ash)}
.steps h3{font-size:24px;font-weight:400;letter-spacing:-.02em}
.steps p{font-size:16px;color:var(--silver);max-width:30em}
.who-line{margin-bottom:12vh;max-width:640px}
.who-line .body{margin-bottom:0}
.contact-group{margin-bottom:8vh}
.contact-group h2{font-size:clamp(32px, 4vw, 52px);margin-bottom:40px}
.pilot-form{
  display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;max-width:760px;
}
.field{display:flex;flex-direction:column;gap:8px}
.field-wide{grid-column:1 / -1}
.field label{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);
}
.field input,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--ash);
  color:var(--bone);font:200 18px/1.4 var(--sans);padding:10px 0;border-radius:0;
  transition:border-color .25s;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--bone)}
.form-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:10px}
.form-actions .pill{border:0;cursor:pointer;font-family:var(--sans)}
.form-alt{font-size:14px;color:var(--ash)}
.form-alt a{color:var(--silver)}
.form-alt a:hover{color:var(--bone)}
@media(max-width:720px){.pilot-form{grid-template-columns:1fr}}

/* legal stubs */
.draft{
  display:inline-block;margin-left:10px;padding:3px 8px;vertical-align:middle;
  font-size:11px;letter-spacing:.1em;color:var(--saffron);
  border:1px solid var(--saffron);border-radius:12px;
}
.legal .page-hero{margin-bottom:8vh}
.legal .page-hero .body a{text-decoration:underline;text-underline-offset:3px}
body[data-theme="light"] .avatar{border-color:rgba(0,0,0,.12)}
@media(max-width:720px){
  .page{padding:130px 22px 60px}
  .avatar{width:96px;height:96px;font-size:28px}
}