/* MITO: design tokens lifted verbatim from "MITO Website.dc.html" */
:root{
  --ink:#000;
  --paper:#f5f4ff;
  --accent:#9b8cff;
  --accent-ink:#796bc0;
  --muted:#7a78a0;
  --body-muted:#b2b6ca;
  --hero-lede:#d2cefd;
  --rule:#1c1e30;
  --rule-soft:#423a6a;
  --pad:56px;
  --blue:#6f8dff;
  --warm:#ffb08c;
  --veil:rgba(5,5,14,.72);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:#000;color:#f5f4ff;
  -webkit-font-smoothing:antialiased;
}
/* smooth in-page scrolling, switched on by space.js once the page has loaded, so a fragment
   link (/#contact) lands at once instead of gliding while the flight starts */
html.smooth-scroll{scroll-behavior:smooth}
html{color-scheme:dark;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
a,button,[tabindex]{touch-action:manipulation}
section[id],#form{scroll-margin-top:104px}
body{font-family:'Manrope',Helvetica,Arial,sans-serif;background:#000;color:#f5f4ff;min-height:100vh}
a{color:#f5f4ff;text-decoration:none;transition:color .18s ease}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--accent)}}

/* Keyboard users get a visible ring the design never specified. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}
.skip-link{
  position:fixed;left:-9999px;top:env(safe-area-inset-top,0px);z-index:100;
  padding:14px 20px;background:var(--paper);color:#000;font-weight:700;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

@media (prefers-reduced-motion:reduce){
  html,body,html.smooth-scroll{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important}
}

/* ---------------- space: one fixed particle canvas behind the page ---------------- */
.space,.space-fallback{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none}
.space{display:block;opacity:0;transition:opacity .2s ease}
.has-space .space{opacity:1}
/* no WebGL: a still starfield with a violet nebula, so the page keeps its mood */
.space-fallback{
  background:
    radial-gradient(1px 1px at 12% 18%,rgba(245,244,255,.9),transparent 60%),
    radial-gradient(1px 1px at 64% 9%,rgba(245,244,255,.7),transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 42%,rgba(200,190,255,.85),transparent 60%),
    radial-gradient(1px 1px at 33% 66%,rgba(245,244,255,.6),transparent 60%),
    radial-gradient(1.5px 1.5px at 51% 83%,rgba(160,180,255,.8),transparent 60%),
    radial-gradient(1px 1px at 91% 77%,rgba(245,244,255,.7),transparent 60%),
    radial-gradient(1px 1px at 7% 58%,rgba(255,190,160,.6),transparent 60%),
    radial-gradient(ellipse 55% 45% at 50% 42%,rgba(155,140,255,.18),transparent 70%),
    radial-gradient(ellipse 40% 30% at 30% 70%,rgba(111,141,255,.1),transparent 70%),
    #000;
  background-size:420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,100% 100%,100% 100%,auto;
}
.space-fallback{transition:opacity .7s ease}
.has-space .space-fallback{opacity:0}
/* the 3D canvas fades in once its first frame is drawn (space.js adds space-on) */
.space{transition:opacity .7s ease}
html:not(.space-on) .space{opacity:0}
main,.site-footer{position:relative;z-index:1}


/* ---------------- header ---------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(28px + env(safe-area-inset-top,0px)) calc(var(--pad) + env(safe-area-inset-right,0px)) 28px calc(var(--pad) + env(safe-area-inset-left,0px));
  background:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,0));
}
.brand{display:flex;align-items:center;gap:14px}
.mark{position:relative;width:44px;height:22px;border:2px solid var(--paper);border-radius:11px;flex:none}
.mark::before{content:"";position:absolute;left:8px;top:5px;width:12px;height:8px;border-radius:4px;background:var(--accent)}
.mark::after{content:"";position:absolute;left:24px;top:5px;width:8px;height:8px;border-radius:4px;background:var(--paper)}
.brand-word{font-size:17px;font-weight:800;letter-spacing:.36em}
.site-nav{display:flex;gap:24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.site-nav a[aria-current]{color:var(--accent)}

/* ---------------- hero: centred copy inside the particle ring ---------------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:140px var(--pad) 110px;text-align:center;overflow:hidden;overflow:clip;
}
.hero-body{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px;max-width:720px;width:100%;margin:0 auto}
/* a soft dark core under the copy keeps the lede readable over the ring */
.hero-body::before{
  content:"";position:absolute;inset:-14% -16%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.78),rgba(0,0,0,.5) 55%,rgba(0,0,0,0));
}
.hero h1{
  margin:0;font-weight:800;font-size:clamp(52px,8.6vw,128px);line-height:.92;letter-spacing:-.05em;
  background:linear-gradient(100deg,#f5f4ff 0%,#f5f4ff 52%,#c8bfff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-programme{margin:0;max-width:640px;font-size:clamp(14px,1.3vw,17px);line-height:1.5;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-wrap:balance}
.hero-lede{margin:0;font-size:clamp(16px,1.25vw,18px);font-weight:400;line-height:1.65;max-width:600px;color:var(--hero-lede);text-wrap:pretty}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.hero-eyebrow{
  margin:0;display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;
  font-size:11px;letter-spacing:.18em;line-height:1.4;color:var(--paper);
  border:1px solid rgba(155,140,255,.38);border-radius:999px;background:rgba(14,11,34,.62);
}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px 1px rgba(155,140,255,.9);flex:none}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:8px}

/* ---------------- problem: fragments of the ring drift apart behind it ---------------- */
.problem-inner{max-width:1400px;margin:0 auto;padding:180px var(--pad)}
.problem .eyebrow{margin:0 0 32px;color:var(--accent)}
.problem h2{margin:0 0 120px;font-weight:700;font-size:clamp(44px,6vw,96px);line-height:.98;letter-spacing:-.04em;max-width:1100px;text-wrap:pretty}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
.problem-card{display:flex;flex-direction:column;gap:20px;border-top:2px solid var(--paper);padding:28px 28px 32px;background:var(--veil)}
.problem-card h3{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em}
.problem-card p{margin:0;font-size:17px;line-height:1.6;color:var(--body-muted);text-wrap:pretty}
.problem-close{margin:72px 0 0;font-size:clamp(24px,3vw,36px);font-weight:500;letter-spacing:-.02em;color:var(--accent);text-wrap:pretty}

/* ---------------- content sections ---------------- */
.explanation,.block{max-width:1400px;margin:0 auto;padding:160px var(--pad)}
.explanation .eyebrow,.block .eyebrow{margin:0 0 32px;color:var(--accent)}
.explanation h2,.block h2{margin:0;font-weight:700;font-size:clamp(40px,5vw,80px);line-height:1.05;letter-spacing:-.04em;max-width:1100px;text-wrap:pretty}
.explanation-grid{display:grid;grid-template-columns:2fr 3fr;gap:96px;align-items:start}
.explanation-copy p{margin:0 0 28px;font-size:clamp(18px,1.8vw,23px);line-height:1.65;color:var(--body-muted);text-wrap:pretty}
.explanation-copy p:last-child{margin-bottom:0;color:var(--paper)}

.block-intro{margin:40px 0 0;max-width:760px;font-size:clamp(18px,1.8vw,23px);line-height:1.6;color:var(--body-muted);text-wrap:pretty}
.serve-list,.lever-grid,.steps,.gov-grid{list-style:none;margin:0;padding:0}

/* who we serve: two deal cards, each with a short list */
.deal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:80px}
.deal-card{border:1px solid rgba(155,140,255,.26);padding:40px;display:flex;flex-direction:column;gap:24px;background:linear-gradient(180deg,rgba(8,7,22,.8),rgba(4,4,12,.68))}
.deal-card .eyebrow{margin:0}
.deal-card h3{margin:0;font-size:28px;font-weight:500;letter-spacing:-.02em;text-wrap:balance}
.deal-card p{margin:0;font-size:18px;line-height:1.6;color:var(--body-muted);text-wrap:pretty}
.deal-card p.mono{font-size:12px;color:var(--accent)}
.serve-list{margin-top:auto;padding-top:8px}
.serve-list li{position:relative;padding:14px 0 14px 24px;border-top:1px solid var(--rule);font-size:16px;line-height:1.5;color:var(--paper);text-wrap:pretty}
.serve-list li::before{content:"";position:absolute;left:0;top:25px;width:10px;height:2px;background:var(--accent)}

/* what we do */
.levers{position:relative}
.levers-inner{position:relative;max-width:1400px;margin:0 auto;padding:160px var(--pad)}
.levers .eyebrow{margin:0 0 32px;color:var(--accent)}
.levers h2{margin:0;font-weight:700;font-size:clamp(40px,4.6vw,72px);line-height:1.05;letter-spacing:-.04em;max-width:640px;text-wrap:pretty}
.levers .block-intro{max-width:520px}
.lever-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:64px;max-width:500px}
.lever{
  position:relative;display:flex;flex-direction:column;gap:12px;padding:24px 28px 26px;outline-offset:3px;
  border:1px solid rgba(155,140,255,.2);border-top:2px solid var(--paper);background:var(--veil);
  transition:border-color .2s ease,background-color .2s ease;
}
.lever-num{color:var(--accent)}
.lever h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.lever p{margin:0;font-size:16px;line-height:1.6;color:var(--body-muted);text-wrap:pretty}
.lever.is-lit,.enabler.is-lit{border-color:rgba(155,140,255,.75);background-color:rgba(24,19,58,.82)}
.lever.is-lit{border-top-color:var(--accent)}
.lever:focus-visible,.enabler:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.enabler{
  margin-top:16px;max-width:500px;padding:32px 28px;display:grid;grid-template-columns:1fr;gap:16px;
  border:1px solid rgba(155,140,255,.45);
  background:radial-gradient(ellipse 60% 140% at 0% 50%,rgba(155,140,255,.18),rgba(155,140,255,0) 70%),var(--veil);
  transition:border-color .2s ease,background-color .2s ease;
}
.enabler p.mono{margin:0 0 12px;color:var(--accent)}
.enabler h3{margin:0;font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.03em}
.enabler > p{margin:0;font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--paper);text-wrap:pretty}

/* how we work: five steps on one connecting rule, stacked on narrow screens */
.steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;margin-top:80px}
.steps::before{
  content:"";position:absolute;left:0;right:0;top:5px;height:1px;
  background:linear-gradient(90deg,var(--rule-soft),var(--accent));
}
.step{position:relative;display:flex;flex-direction:column;gap:14px;padding-top:36px}
.step::before{
  content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 5px #000;
}
.step-scope::before{background:#000;border:2px solid var(--muted);box-sizing:border-box}
.step .step-label{margin:0;font-size:12px;color:var(--accent)}
.step-scope .step-label{color:var(--muted)}
.step h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.step p{margin:0;font-size:16px;line-height:1.6;color:var(--body-muted);text-wrap:pretty}
.step .step-output{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);color:var(--paper)}
.step-output .mono{display:block;margin-bottom:6px;font-size:11px;color:var(--accent)}
/* line the step parts up across columns so every Output rule sits on one line */
@media (min-width:1101px){
  .steps{row-gap:14px}
  .step{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:14px}
  .step .step-output{margin-top:0}
}
.method-contract{margin:72px 0 0;max-width:960px;font-size:clamp(20px,2.2vw,28px);font-weight:500;line-height:1.4;letter-spacing:-.015em;text-wrap:pretty}
.gov-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px;padding-top:32px;border-top:1px solid var(--rule-soft)}
.gov-grid li{display:flex;flex-direction:column;gap:8px}
.gov-grid h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.gov-grid p{margin:0;font-size:15px;line-height:1.6;color:var(--body-muted);text-wrap:pretty}
.gov-grid p.mono{font-size:11px;color:var(--accent)}
.gov-note{margin:32px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}

/* why MITO: comparison table, MITO column carries the accent */
.compare-wrap{margin-top:80px;padding:8px 28px 4px;background:rgba(5,5,14,.6);border:1px solid rgba(155,140,255,.18)}
.compare{width:100%;border-collapse:collapse;table-layout:fixed;font-size:16px;line-height:1.5}
.compare th,.compare td{padding:20px 20px 20px 0;text-align:left;vertical-align:top;border-top:1px solid var(--rule-soft);text-wrap:pretty}
.compare thead th{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-top:0}
.compare thead td{border-top:0}
.compare tbody th{font-weight:700;color:var(--paper);letter-spacing:-.01em}
.compare tbody td{color:var(--body-muted)}
.compare .is-mito{padding-left:20px;background:rgba(155,140,255,.1);color:var(--paper);font-weight:500}
.compare thead .is-mito{color:var(--accent);font-weight:700;border-top:2px solid var(--accent)}
.compare tbody tr:last-child > *{border-bottom:1px solid var(--rule-soft)}
.why-close{margin:56px 0 0;font-size:clamp(24px,3vw,36px);font-weight:500;letter-spacing:-.02em;color:var(--accent);text-wrap:pretty}

/* part of Crest: full-width tinted band around the explanation grid */
.crest-band{position:relative}
.crest-band .explanation-copy{padding:32px;background:var(--veil);border-left:1px solid rgba(155,140,255,.4)}
.crest-link{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.crest-band + .contact{border-top:0}

/* ---------------- calls to action ---------------- */
.pill{
  display:inline-flex;align-items:center;gap:12px;padding:15px 26px;
  border:1px solid var(--paper);border-radius:999px;font-size:15px;font-weight:600;letter-spacing:.02em;
  -webkit-user-select:none;user-select:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .16s var(--ease-out);
}
.pill:active,.btn:active:not(:disabled){transform:scale(.97)}
.pill-solid{background:var(--paper);color:#000;border-color:var(--paper)}
.pill-arrow{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:-10px;border-radius:50%;background:#000;color:var(--paper);font-size:13px}
.pill-ghost{border-color:rgba(155,140,255,.32);background:rgba(14,11,34,.55);color:var(--paper)}
.pill-ghost span{margin-left:2px}
@media (hover:hover) and (pointer:fine){
  .pill-solid:hover{background:var(--accent);border-color:var(--accent);color:#000}
  .pill-ghost:hover{border-color:var(--accent);color:var(--paper)}
}

/* ---------------- form ---------------- */
.contact{position:relative}
.contact-inner{max-width:1400px;margin:0 auto;padding:160px var(--pad);display:grid;grid-template-columns:5fr 7fr;gap:96px;align-items:start}
.contact-intro{display:flex;flex-direction:column;gap:32px}
.contact-intro .eyebrow{margin:0;color:var(--accent)}
.contact-intro h2{margin:0;font-weight:700;font-size:clamp(36px,4.5vw,64px);line-height:1;letter-spacing:-.04em;text-wrap:pretty}
.contact-intro p{margin:0;font-size:17px;line-height:1.6;color:var(--body-muted);max-width:420px;text-wrap:pretty}

.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:40px 32px}
.field{display:flex;flex-direction:column;gap:12px;min-width:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field.wide{grid-column:1 / -1}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--rule-soft);
  color:var(--paper);font:400 18px 'Manrope',Helvetica,Arial,sans-serif;
  padding:10px 0;outline:none;letter-spacing:0;text-transform:none;width:100%;min-width:0;
  transition:border-bottom-color .18s ease;
}
.field textarea{resize:vertical}
.field select{border-radius:0;-webkit-appearance:none;appearance:none}
.field select option{color:#000}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--accent)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline-offset:6px}
.field ::placeholder{color:var(--muted);opacity:1}

.form-foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;padding:18px 36px;border:0;border-radius:999px;
  background:var(--paper);color:#000;font:600 15px 'Manrope',Helvetica,Arial,sans-serif;
  letter-spacing:.04em;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:background-color .18s ease,transform .16s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.btn:hover:not(:disabled){background:var(--accent)}}
.btn:disabled{opacity:.5;cursor:progress}
.form-note{font-size:12px;color:var(--muted)}
.turnstile-slot{grid-column:1 / -1;min-height:65px;min-width:0;overflow-x:auto}
.form-error{grid-column:1 / -1;margin:0;font-size:15px;color:#ff9b9b;line-height:1.5}

.sent{display:flex;flex-direction:column;gap:20px;padding:48px 0;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.sent-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(155,140,255,.18)}
.sent h3{margin:0;font-size:28px;font-weight:500;letter-spacing:-.02em}
.sent p{margin:0;font-size:17px;line-height:1.6;color:var(--body-muted)}
[hidden]{display:none!important}

/* ---------------- footer ---------------- */
.site-footer{border-top:1px solid var(--rule);background:linear-gradient(to bottom,rgba(0,0,0,.6),#000 40%)}
/* brand, not copy: a giant MITO cropped by the bottom edge */
.wordmark{overflow:hidden;line-height:0;padding:24px 0 0;margin-top:24px}
.wordmark svg{display:block;width:100%;height:auto}
.wordmark text{font-family:'Manrope',Helvetica,Arial,sans-serif;font-weight:800;font-size:330px;letter-spacing:-.02em}
.footer-bar{
  padding:40px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.footer-bar a{color:var(--body-muted)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.legal{
  padding:0 var(--pad) 56px;max-width:1400px;margin:0 auto;
  font-size:12px;line-height:1.7;color:var(--muted);
}
.legal p{margin:0 0 12px;max-width:1100px;text-wrap:pretty}
.legal p:last-child{margin-bottom:0}

/* ---------------- legal / content pages ---------------- */
.doc{max-width:820px;margin:0 auto;padding:180px var(--pad) 120px}
.doc h1{margin:0 0 16px;font-weight:800;font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.04em}
.doc .updated{margin:0 0 64px;color:var(--muted)}
.doc h2{margin:56px 0 18px;font-weight:700;font-size:24px;letter-spacing:-.02em}
.doc p,.doc li{font-size:16px;line-height:1.7;color:var(--body-muted);text-wrap:pretty}
.doc p{margin:0 0 16px}
.doc ul{margin:0 0 16px;padding-left:20px}
.doc li{margin-bottom:8px}
.doc a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------------- responsive ---------------- */
@media (min-width:1100px){
  .lever-grid{gap:20px}
}
@media (max-width:1099px){
  .lever-grid,.enabler,.levers h2,.levers .block-intro{max-width:none}
  .lever{background:rgba(5,5,14,.84)}
}
@media (max-width:1100px){
  .contact-inner{grid-template-columns:1fr;gap:64px}
  .explanation-grid{grid-template-columns:1fr;gap:56px}
  .problem-grid{grid-template-columns:1fr;gap:48px}
  .steps{grid-template-columns:1fr;gap:0}
  .steps::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto;background:linear-gradient(180deg,var(--rule-soft),var(--accent))}
  .step{padding:0 0 48px 40px}
  .step:last-child{padding-bottom:0}
  .step .step-output{max-width:560px}
  .step p{max-width:640px}
}
@media (max-width:860px){
  :root{--pad:28px}
  .site-header{padding:calc(20px + env(safe-area-inset-top,0px)) calc(var(--pad) + env(safe-area-inset-right,0px)) 20px calc(var(--pad) + env(safe-area-inset-left,0px))}
  .site-nav{gap:20px;font-size:11px}
  .problem-inner{padding:112px var(--pad)}
  .explanation,.block{padding:112px var(--pad)}
  .gov-grid{grid-template-columns:1fr;gap:28px}
  /* the comparison table becomes one card per row; each cell names its column */
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:100%}
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .compare tbody tr{border:1px solid var(--rule-soft);margin-bottom:20px}
  .compare tbody th,.compare tbody td{padding:14px 20px;border-top:0}
  .compare tbody th{padding-top:20px;font-size:18px}
  .compare tbody td{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;border-top:1px solid var(--rule)}
  .compare tbody td::before{content:attr(data-label);font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:3px}
  .compare tbody td.is-mito{padding-left:20px;border-top:1px solid rgba(155,140,255,.45)}
  .compare tbody td.is-mito::before{color:var(--accent)}
  .compare tbody tr:last-child > *{border-bottom:0}
  .contact-inner{padding:112px var(--pad)}
  .hero{padding:120px var(--pad) 80px}
  .hero-body{gap:20px}
  .compare-wrap{padding:0;background:none;border:0}
  .compare tbody tr{background:var(--veil)}
  .crest-band .explanation-copy{padding:24px}
  .doc{padding:140px var(--pad) 96px}
}
@media (max-width:640px){
  .site-nav{display:none}
  .contact-form{grid-template-columns:1fr}
  .hero-actions{gap:12px 28px}
  .deal-grid{grid-template-columns:1fr;margin-top:56px}
  .deal-card{padding:28px}
  .lever-grid{margin-top:48px}
  .lever{padding:22px 22px 24px}
  .enabler{padding:26px 22px}
  .problem-card{padding:24px 22px 28px}
  .hero-lede{font-size:16px}
  .steps,.compare-wrap{margin-top:56px}
  .compare tbody td{grid-template-columns:1fr;gap:4px}
  .problem h2{font-size:clamp(34px,8vw,44px);margin-bottom:64px}
  .problem-close{margin-top:48px}
  .form-foot{flex-direction:column;align-items:flex-start;gap:16px}
  .footer-bar{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ================= flight: the scroll is a camera journey =================
   space.js adds .is-flight only when WebGL2 runs and motion is allowed. Every section
   stays in the DOM in reading order. In the flight each one is a fixed panel: text in a
   left column (a bottom panel on phones), the scene framed to its right. Its title holds
   while its beats (cards, steps, rows) advance one at a time. Visibility is a pure
   function of scroll position: space.js writes opacity, a short rise and a blur-to-sharp
   per element, and the panel's scrim follows --a. No scroll-snap: proximity snapping pulled
   100px mouse-wheel ticks back to the previous snap point on every tick (a reader could not
   leave the hero); the dwells keep ~89% of scroll positions on a fully shown beat instead. */
.vh-probe{position:absolute;left:0;top:0;width:1px;height:100vh;height:100lvh;pointer-events:none;visibility:hidden}
.finale-mark,.hud,.scene-card{display:none}
.tone{color:#8f8bb8}

.is-flight{--head-gap:28px;--bento-h:max(34vh,330px);--col:min(560px,40vw);--matte:#07070d;--card:rgba(13,12,28,.74);--card-line:rgba(155,140,255,.18);--r-card:22px}
.is-flight .flight{position:relative}
.is-flight .panel{
  --a:0;position:fixed;inset:0;z-index:2;margin:0;padding:0;max-width:none;min-height:0;
  pointer-events:none;overflow:hidden;
}
/* the soft dark, blurred left half that keeps the column readable over any scene */
.is-flight .panel::before,.is-flight .panel::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--a)}
.is-flight .panel::before{background:linear-gradient(90deg,rgba(5,5,12,.84) 0%,rgba(5,5,12,.7) 34%,rgba(5,5,12,.18) 52%,rgba(5,5,12,0) 62%)}
.is-flight .panel::after{
  right:auto;width:52%;
  -webkit-backdrop-filter:blur(16px) saturate(1.05);backdrop-filter:blur(16px) saturate(1.05);
  -webkit-mask-image:linear-gradient(90deg,#000 68%,transparent);mask-image:linear-gradient(90deg,#000 68%,transparent);
}
.is-flight.tier-low .panel::after{display:none}
.is-flight .panel .panel-body{
  position:absolute;top:0;bottom:0;left:var(--pad);width:calc(var(--col) + 20px);max-width:none;margin:0 -10px;
  padding:96px 10px 48px;display:grid;grid-template-columns:minmax(0,1fr);align-content:safe center;
  text-align:left;z-index:1;overflow:hidden;overflow:clip;
}
.is-flight .panel.is-on .panel-body{pointer-events:auto}
.is-flight .panel:focus{outline:none}

/* head and beats start hidden; space.js drives them from the scroll position */
.is-flight .panel .panel-body > :not(.beat-area),.is-flight .panel .beat{opacity:0;will-change:opacity,transform}
.is-flight .panel .beat{pointer-events:none}
.is-flight .panel.is-on .beat.is-active{pointer-events:auto}

/* the beat area sits in flow below the head with one explicit gap. Every stage (and every
   beat inside a stage) shares one grid cell, so the area is as tall as the tallest beat and a
   cross-fade never moves the head; each card stays as tall as its own content. `order` puts
   it after any head line that follows the cards in the DOM (the problem's closing line)
   without changing the reading order. The selectors
   carry an extra class so no card rule's margin can cancel the gap. */
.is-flight .panel .beat-area{order:1;display:grid;grid-template-columns:minmax(0,1fr);margin:var(--head-gap) 0 0;padding:0}
.is-flight .panel .beat-area > .stage{grid-area:1/1;align-self:start;margin:0}
.is-flight .panel .beat-area > .stage:not(.beat){display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.is-flight .panel .beat-area > .stage:not(.beat) > .beat{grid-area:1/1;align-self:start}

/* type, scaled for a column */
.is-flight .panel h2{margin:0;font-size:clamp(30px,3.1vw,48px);line-height:1.06;max-width:none}
.is-flight .hero h1{font-size:clamp(56px,6.4vw,104px)}
.is-flight .panel .eyebrow,.is-flight .hero .hero-eyebrow{
  justify-self:start;display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:7px 14px 7px 11px;
  border:1px solid rgba(155,140,255,.32);border-radius:999px;background:rgba(14,11,34,.55);font-size:11px;letter-spacing:.18em;
}
.is-flight .panel .eyebrow::before{content:"";width:8px;height:8px;border:1.5px solid currentColor;border-radius:50%;flex:none}
.is-flight .panel .block-intro,.is-flight .panel .problem-close,.is-flight .panel .explanation-copy p{font-size:clamp(16px,1.25vw,19px);line-height:1.6;margin:18px 0 0;color:var(--body-muted)}
.is-flight .panel .problem-close{color:var(--accent)}
/* the small four-point star above some titles */
.is-flight .panel[data-star] .panel-body::before{
  content:"";width:22px;height:22px;margin:0 0 20px;background:#f5f4ff;justify-self:start;opacity:var(--a);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
}

/* hero: left column over the galaxy */
.is-flight .hero.panel .panel-body{gap:0}
.is-flight .hero .hero-body::before{display:none}
.is-flight .hero h1,.is-flight .hero .hero-programme,.is-flight .hero .hero-lede{text-align:left;margin:0 0 18px}
.is-flight .hero .hero-actions{justify-content:flex-start;margin-top:10px}

/* rounded dark cards (bento) for every beat */
.is-flight .panel .deal-card,.is-flight .panel .problem-card,.is-flight .panel .lever,.is-flight .panel .enabler,
.is-flight .panel .step,.is-flight .panel .gov-grid li,.is-flight .panel .method-contract,.is-flight .panel .why-close{
  border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);padding:24px 26px;max-width:none;margin:0;
}
.is-flight .panel .deal-grid,.is-flight .panel .problem-grid,.is-flight .panel .lever-grid,.is-flight .panel .steps{max-width:none;gap:0}
.is-flight .panel .deal-card h3{font-size:22px}
.is-flight .panel .deal-card p{font-size:15px}
/* bullets as pill chips */
.is-flight .panel .serve-list{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.is-flight .panel .serve-list li{border:1px solid rgba(155,140,255,.28);border-radius:999px;padding:8px 14px;font-size:13px;line-height:1.35;background:rgba(155,140,255,.06)}
.is-flight .panel .serve-list li::before{display:none}
.is-flight .panel .lever{border-top:1px solid var(--card-line)}
.is-flight .panel .lever.is-lit{border-color:rgba(155,140,255,.75)}
.is-flight .panel .enabler{margin-top:0}
/* method: steps as cards, the orbit-dot HUD marks progress */
.is-flight .panel .steps::before,.is-flight .panel .step::before{display:none}
.is-flight .panel .step{display:flex;flex-direction:column;gap:12px;grid-row:auto;grid-template-rows:none;padding:24px 26px}
.is-flight .panel .step .step-output{margin-top:6px}
.is-flight .panel .method-contract{font-size:clamp(18px,1.5vw,22px)}
.is-flight .panel .gov{display:grid;gap:12px}
.is-flight .panel .gov-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;border:0}
.is-flight .panel .gov-grid li{padding:18px}
.is-flight .panel .gov-note{margin:0;font-size:13px}
/* why: each comparison row becomes a bento card, MITO's cell lit */
.is-flight .panel .compare-wrap{padding:0;background:none;border:0}
.is-flight .panel .compare,.is-flight .panel .compare tbody{display:block;width:100%}
.is-flight .panel .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.is-flight .panel .compare tbody{display:grid}
.is-flight .panel .compare tbody tr{grid-area:1/1;align-self:start;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:22px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card)}
.is-flight .panel .compare tbody th{grid-column:1/-1;padding:0 0 8px;border:0;font-size:22px;letter-spacing:-.01em}
.is-flight .panel .compare tbody td{display:block;padding:12px 14px;border:0;border-radius:14px;background:rgba(255,255,255,.035);font-size:14px}
.is-flight .panel .compare tbody td::before{content:attr(data-label);display:block;margin-bottom:6px;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.is-flight .panel .compare tbody td.is-mito{grid-column:1/-1;padding:14px 16px;background:rgba(155,140,255,.14);border:1px solid rgba(155,140,255,.45);color:var(--paper);font-size:16px}
.is-flight .panel .compare tbody td.is-mito::before{color:var(--accent)}
.is-flight .panel .why-close{font-size:clamp(20px,1.8vw,26px);color:var(--accent)}

/* earth orb: title on the left, the problem card in a rounded card on the right */
.is-flight .panel[data-layout=orb] .problem-grid{
  position:fixed;right:var(--pad);top:0;bottom:0;width:min(330px,23vw);margin:0;align-self:stretch;align-content:center;
}
.is-flight .panel[data-layout=orb]{--col:min(420px,30vw)}
.is-flight .panel[data-layout=orb]::before{background:linear-gradient(90deg,rgba(5,5,12,.7) 0%,rgba(5,5,12,.35) 40%,rgba(5,5,12,0) 55%)}
.is-flight .panel[data-layout=orb] .problem-card{background:rgba(13,12,28,.82);padding:26px}
/* stacked (where it fits, measured by space.js): the cards keep their own rows, top to bottom,
   with the whole stack's height reserved from the start, so a new card fills in below and the
   ones already shown never move */
.is-flight .panel[data-layout=orb].is-stack .problem-grid{padding:96px 0 48px;row-gap:14px;align-content:center}
.is-flight .panel[data-layout=orb].is-stack .problem-grid > .beat{grid-area:auto}
.is-flight .panel[data-layout=orb].is-stack .problem-card{padding:20px 22px}
.is-flight .panel[data-layout=orb].is-stack .problem-card h3{font-size:18px;margin-bottom:8px}
.is-flight .panel[data-layout=orb].is-stack .problem-card p{font-size:14px;line-height:1.5}
/* stacked levers (where the head and all five cards fit the column): each card in its own row,
   in order, compact; body text stays at 15px */
.is-flight .panel.is-stack:not([data-layout]) .beat-area{row-gap:6px}
.is-flight .panel.is-stack:not([data-layout]) .panel-body{padding-bottom:24px}
.is-flight .panel.is-stack:not([data-layout]) .beat-area > .stage{grid-area:auto}
.is-flight .panel.is-stack:not([data-layout]) .beat-area > .stage:not(.beat){row-gap:6px}
.is-flight .panel.is-stack:not([data-layout]) .beat-area > .stage:not(.beat) > .beat{grid-area:auto}
.is-flight .panel.is-stack .lever{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:1px;align-items:baseline;padding:9px 16px}
.is-flight .panel.is-stack .lever .lever-num{grid-column:1;grid-row:1}
.is-flight .panel.is-stack .lever h3{grid-column:2;grid-row:1;font-size:17px}
.is-flight .panel.is-stack .lever p{grid-column:2;grid-row:2;font-size:15px;line-height:1.45}
.is-flight .panel.is-stack .enabler{padding:10px 16px;gap:2px}
.is-flight .panel.is-stack .enabler p.mono{margin:0 0 2px}
.is-flight .panel.is-stack .enabler h3{font-size:19px}
.is-flight .panel.is-stack .enabler > p{font-size:15px;line-height:1.45}
/* who we serve, stacked: the two owner cards one under the other, compact */
.is-flight #serve.is-stack .beat-area > .stage:not(.beat){row-gap:10px}
.is-flight #serve.is-stack .deal-card{padding:16px 20px;gap:8px}
.is-flight #serve.is-stack .deal-card h3{font-size:19px}
.is-flight #serve.is-stack .deal-card > p:not(.mono){font-size:15px;line-height:1.45;margin:0}
.is-flight #serve.is-stack .serve-list{gap:6px}
.is-flight #serve.is-stack .serve-list li{padding:5px 11px;font-size:12.5px}
/* how we work, stacked: the steps build a compact timeline (label, title, text, output in
   rows); the contract and the governance then stack over the same rows */
.is-flight #method.is-stack .beat-area{grid-template-rows:auto 1fr;row-gap:10px}
.is-flight #method.is-stack .beat-area > .steps{grid-row:1 / span 2;grid-column:1;row-gap:6px}
.is-flight #method.is-stack .beat-area > .method-contract{grid-row:1;grid-column:1}
.is-flight #method.is-stack .beat-area > .gov{grid-row:2;grid-column:1}
.is-flight #method.is-stack .step{display:grid;grid-template-columns:4.6em minmax(0,1fr);grid-template-rows:none;column-gap:12px;row-gap:1px;align-items:baseline;padding:8px 14px}
.is-flight #method.is-stack .step .step-label{grid-column:1;grid-row:1 / span 3;margin:0;font-size:10px;letter-spacing:.14em}
.is-flight #method.is-stack .step h3{grid-column:2;margin:0;font-size:16px;line-height:1.25}
.is-flight #method.is-stack .step p:not(.step-label):not(.step-output){grid-column:2;margin:0;font-size:15px;line-height:1.45}
.is-flight #method.is-stack .step .step-output{grid-column:2;margin:1px 0 0;padding:0;border:0;font-size:13px;line-height:1.35}
.is-flight #method.is-stack .step .step-output .mono{display:inline;margin:0 8px 0 0}
.is-flight #method.is-stack .method-contract{font-size:17px;line-height:1.45;padding:14px 18px}
.is-flight #method.is-stack .gov-grid li{padding:12px 14px}
.is-flight #method.is-stack .gov-grid h3{font-size:15px}
.is-flight #method.is-stack .gov-grid p{font-size:13px;line-height:1.4}
/* why MITO, stacked: a real comparison table; its header is there from the start (with the
   panel), each row arrives on its beat and stays, then the closing line under it */
.is-flight #why.is-stack{--col:min(680px,47vw)}
.is-flight #why.is-stack .compare-wrap{margin:0}
.is-flight #why.is-stack .compare{display:table;width:100%;border-collapse:separate;border-spacing:0 4px;table-layout:fixed}
.is-flight #why.is-stack .compare thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;display:table-header-group;opacity:var(--a)}
.is-flight #why.is-stack .compare tbody{display:table-row-group}
.is-flight #why.is-stack .compare tr,.is-flight #why.is-stack .compare tbody tr{display:table-row;grid-area:auto;padding:0;border:0;background:none;border-radius:0}
.is-flight #why.is-stack .compare th,.is-flight #why.is-stack .compare td,.is-flight #why.is-stack .compare tbody th,.is-flight #why.is-stack .compare tbody td{display:table-cell;padding:9px 10px;border:0;border-radius:0;font-size:13px;line-height:1.35;vertical-align:top;background:rgba(13,12,28,.78)}
.is-flight #why.is-stack .compare tbody th{font-size:14px;padding-bottom:9px;border-radius:12px 0 0 12px}
.is-flight #why.is-stack .compare tbody td.is-mito{border-radius:0 12px 12px 0;background:rgba(155,140,255,.16);border:0;color:var(--paper);font-size:13px}
.is-flight #why.is-stack .compare tbody td::before{display:none}
.is-flight #why.is-stack .compare thead th,.is-flight #why.is-stack .compare thead td{background:none;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400;padding:4px 10px}
.is-flight #why.is-stack .compare thead th.is-mito{color:var(--accent)}
.is-flight #why.is-stack .why-close{font-size:clamp(17px,1.5vw,21px);padding:14px 18px}

/* conceptual: the rounded scene card with a bento row under it */
.is-flight .scene-card{
  display:block;position:fixed;top:86px;left:16px;right:16px;bottom:var(--bento-h);z-index:1;pointer-events:none;
  border-radius:28px;box-shadow:0 0 0 200vmax var(--matte);outline:1px solid rgba(155,140,255,.14);
  opacity:0;transition:opacity .5s var(--ease-out);
}
.is-flight .scene-card.is-on{opacity:1;transition:opacity .9s var(--ease-out)}
.is-flight .panel[data-layout=scenecard]::before,.is-flight .panel[data-layout=scenecard]::after{display:none}
.is-flight .panel[data-layout=scenecard] .panel-body{
  left:16px;right:16px;width:auto;top:auto;bottom:16px;height:calc(var(--bento-h) - 32px);padding:0 10px;
  grid-template-rows:auto minmax(0,1fr);align-content:stretch;overflow:visible;
}
.is-flight .panel[data-layout=scenecard] .explanation-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--head-gap)}
.is-flight .panel[data-layout=scenecard] .panel-body::before{position:absolute;left:4px;top:calc(16px - var(--bento-h));margin:0}
.is-flight .panel[data-layout=scenecard] .eyebrow{margin:0 0 12px}
.is-flight .panel[data-layout=scenecard] h2{align-self:center;font-size:clamp(28px,2.6vw,42px);padding-right:24px}
.is-flight .panel[data-layout=scenecard] .explanation-copy{
  padding:24px 28px;border:1px solid var(--card-line);border-radius:var(--r-card);background:rgba(16,15,30,.92);
  display:flex;flex-direction:column;justify-content:space-between;
}
.is-flight .panel[data-layout=scenecard] .explanation-copy p{margin:0 0 14px;font-size:15px}
.is-flight .panel[data-layout=scenecard] .crest-link{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid rgba(245,244,255,.5);border-radius:999px;text-decoration:none;color:var(--paper)}

/* orbit-ring HUD with travelling dots */
.is-flight .hud{
  display:block;position:fixed;right:7vw;top:50%;width:min(52vh,34vw);aspect-ratio:1;z-index:1;pointer-events:none;
  transform:translate3d(0,-50%,0);opacity:0;transition:opacity .4s var(--ease-out);
}
.is-flight .hud.is-on{opacity:1;transition:opacity 1s var(--ease-out) .2s}
.hud svg{display:block;width:100%;height:100%;overflow:visible}
.hud-ring{fill:none;stroke:rgba(232,234,255,.55);stroke-width:.5}
.hud-ring-faint{stroke:rgba(232,234,255,.18)}
.hud-ring-dot{stroke-dasharray:.6 2.6;stroke-linecap:round;stroke:rgba(232,234,255,.6)}
.hud-dot{fill:#f5f4ff}
.hud-spin{transform-box:view-box;transform-origin:0 0;animation:hud-spin 26s linear infinite}
.hud-spin-b{animation-duration:38s;animation-direction:reverse}
@keyframes hud-spin{to{transform:rotate(360deg)}}
.hud-mark{fill:rgba(232,234,255,.35);transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease-out),fill .5s ease}
.hud-mark.is-active{fill:#fff;transform:scale(1.7)}
.hud[data-mode=rings] .hud-ring-faint{display:none}

/* the black hole and the name, at the end of the flight */
.is-flight .finale-mark{
  display:block;position:fixed;left:50%;bottom:9vh;z-index:1;width:min(1100px,86vw);
  opacity:0;pointer-events:none;transform:translate3d(-50%,0,0) scale(.96);transform-origin:50% 100%;
}
.finale-mark svg{display:block;width:100%;height:auto}
.finale-mark text{font-family:'Manrope',Helvetica,Arial,sans-serif;font-weight:800;font-size:250px;letter-spacing:-.02em}
.is-flight .contact{background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.78) 22%,rgba(0,0,0,.9))}
.is-flight .contact-inner{padding-top:30vh}
.is-flight main,.is-flight .site-footer{z-index:auto}
.is-flight .contact,.is-flight .site-footer{position:relative;z-index:3}

/* phones and narrow portrait screens: the scene above, the text in a bottom panel */
.is-flight.is-portrait .panel::before{background:linear-gradient(to bottom,rgba(5,5,12,0) 0%,rgba(5,5,12,.05) 18%,rgba(5,5,12,.72) 36%,rgba(5,5,12,.9) 52%,rgba(5,5,12,.94) 100%)}
.is-flight.is-portrait .panel::after{display:none}
.is-flight.is-portrait .panel .panel-body{left:var(--pad);right:var(--pad);width:auto;top:auto;bottom:0;max-height:64%;padding:0 10px calc(22px + env(safe-area-inset-bottom,0px));align-content:safe end}
.is-flight.is-portrait .panel h2{font-size:clamp(26px,7vw,36px)}
.is-flight.is-portrait .hero h1{font-size:clamp(48px,14vw,72px)}
.is-flight.is-portrait{--head-gap:18px}
.is-flight.is-portrait .panel .deal-card{padding:18px 20px;gap:12px}
.is-flight.is-portrait .panel .gov-grid{grid-template-columns:1fr;gap:8px}
.is-flight.is-portrait .panel .gov-grid li{padding:12px 16px;gap:3px}
.is-flight.is-portrait .panel .gov-grid h3{font-size:15px}
.is-flight.is-portrait .panel .gov-grid p{font-size:13px;line-height:1.45}
.is-flight.is-portrait .panel .gov{gap:10px}
.is-flight.is-portrait .panel .compare tbody tr{grid-template-columns:1fr 1fr;padding:16px}
.is-flight.is-portrait .panel[data-layout=orb] .problem-grid{position:static;width:auto}
.is-flight.is-portrait{--bento-h:54vh}
.is-flight.is-portrait .scene-card{top:70px;left:10px;right:10px;border-radius:22px}
.is-flight.is-portrait .panel[data-layout=scenecard] .panel-body{left:10px;right:10px;bottom:10px;height:calc(var(--bento-h) - 20px);max-height:none}
.is-flight.is-portrait .panel[data-layout=scenecard] .explanation-copy p{font-size:14px;margin-bottom:10px}
.is-flight.is-portrait .panel[data-layout=scenecard] .explanation-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:var(--head-gap)}
.is-flight.is-portrait .panel[data-layout=scenecard] .panel-body::before{display:none}
.is-flight.is-portrait .hud{right:auto;left:50%;top:9vh;width:min(36vh,72vw);transform:translate3d(-50%,0,0)}
.is-flight.is-portrait .finale-mark{bottom:14vh;width:88vw}

/* reduced motion: one still per section behind a normal page, dimmed for reading */
.is-stills.has-space .space{opacity:.62;transition:opacity .22s ease}

/* ================= device and engine fixes (compat pass) ================= */
/* the flight smooths the scroll itself; a smooth CSS scroll on top made focus jumps (Tab
   wrapping to the skip link, form fields far down) glide through the whole route */
html.is-flight{scroll-behavior:auto}
/* notched phones in landscape (viewport-fit=cover): keep content and the fixed flight
   layers clear of the side insets */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.is-flight .panel .panel-body{left:calc(var(--pad) + env(safe-area-inset-left,0px))}
.is-flight.is-portrait .panel .panel-body{right:calc(var(--pad) + env(safe-area-inset-right,0px))}
.is-flight .panel[data-layout=orb] .problem-grid{right:calc(var(--pad) + env(safe-area-inset-right,0px))}
.is-flight .scene-card,.is-flight .panel[data-layout=scenecard] .panel-body{left:calc(16px + env(safe-area-inset-left,0px));right:calc(16px + env(safe-area-inset-right,0px))}
/* touch: every link and control is at least 44px tall to the finger; inline padding grows
   the hit area without moving the layout */
@media (pointer:coarse){
  .site-nav a,.footer-links a{padding-block:15px;margin-block:-15px}
  .brand{padding-block:12px;margin-block:-12px}
  .footer-bar span a,.legal a{padding-block:14px}
  .is-flight .panel .crest-link{min-height:44px}
}

/* phones in landscape: too short for a stacked column, so the head sits on the left and the
   current beat on the right, with compact type. The orb and scene-card layouts keep their
   own arrangement with compact type. */
.is-flight.is-short{--head-gap:14px}
.is-flight.is-short .panel .panel-body{padding:64px 10px 12px}
.is-flight.is-short .panel:not(.hero):not([data-layout]) .panel-body{
  right:calc(var(--pad) + env(safe-area-inset-right,0px));width:auto;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:28px;
}
.is-flight.is-short .panel:not(.hero):not([data-layout]) .panel-body > :not(.beat-area),
.is-flight.is-short .panel:not(.hero):not([data-layout]) .panel-body::before{grid-column:1}
.is-flight.is-short .panel:not(.hero):not([data-layout]) .beat-area{grid-column:2;grid-row:1 / span 8;align-self:center;margin:0}
.is-flight.is-short .panel:not(.hero):not([data-layout])::before{background:linear-gradient(90deg,rgba(5,5,12,.84),rgba(5,5,12,.62) 45%,rgba(5,5,12,.5))}
.is-flight.is-short .panel::after,.is-flight.is-short .hud{display:none}
.is-flight.is-short .panel h2{font-size:21px}
.is-flight.is-short .hero h1{font-size:40px}
.is-flight.is-short .hero .panel-body{width:min(560px,62vw)}
/* short landscape screens (phones on their side, short windows up to 520px): the hero's title
   block and its text sit side by side, so the calls to action are on screen from the first frame */
@media (max-height:520px){
  .is-flight.is-short .hero .panel-body{
    width:auto;right:calc(var(--pad) + env(safe-area-inset-right,0px));
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:28px;align-content:center;
  }
  .is-flight.is-short .hero .hero-eyebrow,.is-flight.is-short .hero h1,.is-flight.is-short .hero .hero-programme{grid-column:1}
  .is-flight.is-short .hero .hero-lede{grid-column:2;grid-row:1 / span 3;align-self:end}
  .is-flight.is-short .hero .hero-actions{grid-column:2}
}
.is-flight.is-short .hero .hero-lede{font-size:13px;line-height:1.5}
.is-flight.is-short .panel .eyebrow,.is-flight.is-short .hero .hero-eyebrow{margin-bottom:10px;padding:5px 10px}
.is-flight.is-short .panel[data-star] .panel-body::before{display:none}
.is-flight.is-short .panel .block-intro,.is-flight.is-short .panel .problem-close{font-size:13px;margin-top:8px}
.is-flight.is-short .panel .deal-card,.is-flight.is-short .panel .problem-card,.is-flight.is-short .panel .lever,.is-flight.is-short .panel .enabler,
.is-flight.is-short .panel .step,.is-flight.is-short .panel .method-contract,.is-flight.is-short .panel .why-close,.is-flight.is-short .panel .compare tbody tr{padding:14px 16px}
.is-flight.is-short .panel .deal-card h3,.is-flight.is-short .panel .problem-card h3,.is-flight.is-short .panel .compare tbody th{font-size:16px}
.is-flight.is-short .panel .deal-card,.is-flight.is-short .panel .lever,.is-flight.is-short .panel .step{gap:8px}
.is-flight.is-short .panel .beat p,.is-flight.is-short .panel .beat li,.is-flight.is-short .panel .compare tbody td,.is-flight.is-short .panel .gov-grid p{font-size:12.5px;line-height:1.45}
.is-flight.is-short .panel .method-contract,.is-flight.is-short .panel .why-close{font-size:15px}
.is-flight.is-short .panel .gov-grid li{padding:10px 12px}
.is-flight.is-short .panel .gov-grid h3{font-size:14px}
.is-flight.is-short .panel .serve-list li{padding:5px 10px;font-size:11.5px}
.is-flight.is-short{--bento-h:52vh}
.is-flight.is-short .scene-card{top:58px}
.is-flight.is-short .panel[data-layout=scenecard] .panel-body{bottom:10px;height:calc(var(--bento-h) - 20px)}
.is-flight.is-short .panel[data-layout=scenecard] h2{font-size:19px}
.is-flight.is-short .panel[data-layout=scenecard] .explanation-copy{padding:12px 16px}
.is-flight.is-short .panel[data-layout=scenecard] .explanation-copy p{font-size:12px;line-height:1.45;margin-bottom:8px}
.is-flight.is-short .panel[data-layout=scenecard] .crest-link{padding:6px 14px}
.is-flight.is-short .panel[data-layout=orb] .problem-grid{top:56px;bottom:8px}

/* small phones in portrait: the hero may use the height under the header, and type and
   cards tighten so every beat fits its panel */
.is-flight.is-portrait .hero.panel .panel-body{max-height:calc(100% - 76px - env(safe-area-inset-top,0px))}
@media (max-height:820px){
  .is-flight.is-portrait .panel h2{font-size:24px}
  .is-flight.is-portrait .hero h1{font-size:44px}
  .is-flight.is-portrait .hero .hero-lede{font-size:14px;line-height:1.55}
  .is-flight.is-portrait .panel .deal-card,.is-flight.is-portrait .panel .problem-card,.is-flight.is-portrait .panel .lever,
  .is-flight.is-portrait .panel .enabler,.is-flight.is-portrait .panel .step,.is-flight.is-portrait .panel .method-contract,
  .is-flight.is-portrait .panel .why-close{padding:16px 18px}
  .is-flight.is-portrait .panel .beat p,.is-flight.is-portrait .panel .beat li{font-size:14px;line-height:1.5}
  .is-flight.is-portrait .panel .problem-card h3{font-size:18px}
  .is-flight.is-portrait .panel .eyebrow{margin-bottom:12px}
  .is-flight.is-portrait .panel[data-star] .panel-body::before{margin-bottom:12px}
  .is-flight.is-portrait .panel[data-layout=scenecard] .explanation-copy{padding:16px 18px}
  .is-flight.is-portrait .panel[data-layout=scenecard] .explanation-copy p{font-size:13px;line-height:1.5}
  .is-flight.is-portrait .panel .gov-grid li{padding:10px 14px;gap:2px}
  .is-flight.is-portrait .panel .gov-grid h3{font-size:14px}
  .is-flight.is-portrait .panel .gov-grid p{font-size:12.5px;line-height:1.4}
  .is-flight.is-portrait .panel .gov-grid p.mono{font-size:10px}
  .is-flight.is-portrait .panel .gov-note{font-size:12px;line-height:1.4}
}
.is-flight.is-short .panel[data-layout=scenecard] .explanation-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:24px}
/* A beat taller than its panel is panned by the page scroll (space.js sets --pan on the
   body), never shrunk and never an inner scroller. Only bodies that pan get the translate: a
   translate would make the beat area the containing block of the orb's fixed card. The top
   edge fades where the content slides under the header. */
.is-flight .panel .panel-body.is-pan > *{translate:0 var(--pan,0px)}
.is-flight .panel .panel-body.is-pan{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent calc(var(--pt,24px) - 24px),#000 var(--pt,24px));
  mask-image:linear-gradient(to bottom,transparent 0,transparent calc(var(--pt,24px) - 24px),#000 var(--pt,24px));
}
.is-measuring .panel .panel-body *{transform:none!important;translate:none!important}

/* tablets in portrait (an 820x1180 iPad): the stacked arrangement (scene above, text below)
   suits a tall screen best; the column is centred, wider and keeps desktop type */
.is-flight.is-tablet{--head-gap:24px}
.is-flight.is-tablet .panel:not([data-layout=scenecard]) .panel-body{max-width:700px;margin-inline:auto}
.is-flight.is-tablet .panel h2{font-size:clamp(30px,4.6vw,42px)}

/* WebGL context lost: the CSS starfield stands in until the scene is back */
.has-space.gl-lost .space-fallback{opacity:1}
.gl-lost .space{visibility:hidden}
.contact-form input:not([type=hidden]),.contact-form select{min-height:44px}
.icon-ext{display:inline-block;width:.72em;height:.72em;margin-left:.3em;vertical-align:.02em}

/* ================= intro =================
   intro-gate.js adds .intro (first visit in a session) or .intro-fade (everything else) before
   first paint. The logo draws itself with CSS from the first frame (off the main thread while the
   page loads); intro.js runs the galaxy, docks the logo into the header, reveals the hero text
   and hands the galaxy over to the 3D one. Every hide below is opacity only: the text is in the
   DOM throughout, and .intro-end always brings everything back. */
.intro-stage{display:none}
html.intro:not(.intro-done) .intro-stage{display:block;position:fixed;inset:0;z-index:60;pointer-events:none;background:transparent}
.intro-galaxy{display:none}
/* the intro galaxy sits where the 3D galaxy does: under the page panels (z 2), so the hero
   column's scrim and blur cover it exactly as they cover the 3D one */
html.intro:not(.intro-done) .intro-galaxy{display:block;position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:1;pointer-events:none}
html.intro.intro-end .intro-galaxy{opacity:0;transition:opacity .2s ease}
.intro-logo{
  position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:14px;color:var(--paper);isolation:isolate;
  transform:translate(-50%,-50%) scale(2.6);transform-origin:50% 50%;will-change:transform,opacity;
  animation:intro-glow 1s ease-out 1.1s both;
}
.intro-mark{display:block;width:44px;height:22px;overflow:visible;filter:drop-shadow(0 0 3px rgba(2,2,8,.9))}
/* a soft dark halo behind the mark and the letters (not a box), gone as the logo docks */
.intro-logo::before{
  content:"";position:absolute;left:-28%;right:-22%;top:-130%;bottom:-130%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(3,3,10,.92),rgba(3,3,10,.78) 45%,rgba(3,3,10,.35) 75%,rgba(3,3,10,0));
}
.intro-mark .cap{fill:none;stroke:var(--paper);stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100;animation:intro-draw .8s cubic-bezier(.77,0,.175,1) .1s forwards}
.intro-mark .dot-v,.intro-mark .dot-w{opacity:0;transform-box:fill-box;transform-origin:center}
.intro-mark .dot-v{fill:var(--accent);animation:intro-dot-l .5s var(--ease-out) .7s forwards}
.intro-mark .dot-w{fill:var(--paper);animation:intro-dot-r .5s var(--ease-out) .8s forwards}
.intro-word{font-size:17px;font-weight:800;letter-spacing:.36em;line-height:1;white-space:nowrap;text-shadow:0 0 8px rgba(2,2,8,.95),0 0 2px rgba(2,2,8,.9)}
.intro-word span{display:inline-block;opacity:0;animation:intro-letter .5s var(--ease-out) forwards}
.intro-word span:nth-child(1){animation-delay:.9s}
.intro-word span:nth-child(2){animation-delay:.96s}
.intro-word span:nth-child(3){animation-delay:1.02s}
.intro-word span:nth-child(4){animation-delay:1.08s}
@keyframes intro-draw{to{stroke-dashoffset:0}}
@keyframes intro-dot-l{from{opacity:0;transform:translateX(-6px) scale(.9)}to{opacity:1;transform:none}}
@keyframes intro-dot-r{from{opacity:0;transform:translateX(6px) scale(.9)}to{opacity:1;transform:none}}
@keyframes intro-letter{from{opacity:0;transform:translateY(6px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes intro-glow{from{filter:drop-shadow(0 0 0 rgba(155,140,255,0))}to{filter:drop-shadow(0 0 10px rgba(155,140,255,.6))}}
@media (max-width:640px){.intro-logo{transform:translate(-50%,-50%) scale(1.9)}}

/* while the intro plays: the header logo waits for the docking logo, the nav and the hero text
   for their entrance, the 3D canvas and the starfield for the hand-over (!important: the flight
   writes inline opacity on the hero lines) */
html.intro:not(.intro-end) .site-header .brand{opacity:0!important}
html.intro.intro-docked .site-header .brand{opacity:1!important}
html.intro:not(.intro-end):not(.intro-text) .site-nav{opacity:0!important}
html.intro:not(.intro-end):not(.intro-text) #top .hero-body > *{opacity:0!important;transform:translate3d(0,16px,0)!important;filter:blur(5px)!important}
html.intro:not(.intro-end):not(.intro-handoff) .space,
html.intro:not(.intro-end) .space-fallback{opacity:0!important}
/* the hero lines rise in as transitions from the held state (a transition shows the line from its
   first frame, so the browser counts it as painted then) */
html.intro:not(.intro-end):not(.intro-scrim) #top.panel::before,html.intro:not(.intro-end):not(.intro-scrim) #top.panel::after{opacity:0!important}
html.intro #top.panel::before,html.intro #top.panel::after{transition:opacity .6s ease}
html.intro.intro-text:not(.intro-end) #top .hero-body > *{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .6s var(--ease-out)}
html.intro.intro-text:not(.intro-end) #top .hero-body > :nth-child(2){transition-delay:.07s}
html.intro.intro-text:not(.intro-end) #top .hero-body > :nth-child(3){transition-delay:.14s}
html.intro.intro-text:not(.intro-end) #top .hero-body > :nth-child(4){transition-delay:.21s}
html.intro.intro-text:not(.intro-end) #top .hero-body > :nth-child(5){transition-delay:.28s}
html.intro.intro-text:not(.intro-end) .site-nav{transition:opacity .5s ease-out .2s}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}
/* the end state, also what any input skips to: everything that was waiting fades in */
html.intro.intro-end .site-header .brand,html.intro.intro-end .site-nav,html.intro.intro-end #top .hero-body > *{transition:opacity .2s ease}
html.intro.intro-end .intro-stage{opacity:0;transition:opacity .2s ease}

/* no intro (a return in this session, a link, a reload, reduced motion): a short fade */
html.intro-fade .site-header,html.intro-fade #top .hero-body{animation:intro-fade .35s ease-out both}
@media (prefers-reduced-motion:reduce){
  html.intro-fade .site-header,html.intro-fade #top .hero-body{animation-duration:.35s!important}
}