/* =========================================================
   ITRUL V3 — "Full Stack"
   Brutalist-editorial, dark, kinetic. Vanilla. No deps.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --ink:        #08080B;
  --ink-2:      #0E0E13;
  --ink-3:      #15151C;
  --bone:       #EDEBE4;
  --bone-dim:   #9B998F;
  --line:       #26262F;
  --acid:       #D6FF3E;
  --acid-hi:    #E7FF6E;   /* acid, hover state                      */
  --plasma:     #5B2BFF;
  --plasma-hi:  #8169FF;   /* plasma lifted to read on ink           */
  --danger:     #FF5C3E;

  /* surfaces and lines that existed as one-off hexes before          */
  --line-2:     #3A3A48;   /* stronger hairline                      */
  --dim-2:      #5E5C56;   /* micro copy: notes, captions            */
  --dim-3:      #3F3E48;   /* lowest-contrast marks                  */
  --ghost:      #14141A;   /* ghost numerals behind cards            */
  --placeholder:#44434C;
  --surface-4:  #191920;   /* phase bar: discovery                   */
  --surface-5:  #262630;   /* phase bar: design                      */
  --ghost-hi:   #1F1F28;   /* ghost numeral, hover                   */
  --stroke:     #22222C;   /* outlined display type                  */

  /* type scale — three mono steps, not eight near-duplicates         */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8 9.4 17.7 19.5 7.2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --fs-micro:   .62rem;
  --fs-label:   .68rem;
  --fs-ui:      .74rem;
  --fs-copy:    .92rem;

  --fs-display: clamp(2.4rem, min(8.6vw, 13vh), 9rem);
  --fs-h2:      clamp(1.9rem, 4.6vw, 4.2rem);
  --fs-h2-sm:   clamp(1.35rem, 3vw, 2.5rem);  /* same treatment, height-constrained */
  --fs-h3:      clamp(1.35rem, 2.2vw, 2.1rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.15rem);
  --fs-mono:    clamp(.66rem, .78vw, .78rem);

  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 40px;
  --sp-5: 64px; --sp-6: 96px; --sp-7: 140px; --sp-8: 200px;

  --pad: clamp(18px, 4.5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --f-disp: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-serif:'Instrument Serif', Georgia, serif;
  --f-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

/* the hidden attribute must win over any display rule */
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-disp);
  font-size:var(--fs-body);
  line-height:1.55;
  font-variation-settings:'wdth' 100,'wght' 400;
  -webkit-font-smoothing:antialiased;
  /* `clip`, not `hidden`: `overflow-x:hidden` on <body> turns the body into its own
     scroll container, which silently breaks every in-page anchor link. `clip` gives the
     same protection without creating one, and leaves position:sticky working. */
  overflow-x:clip;
}
body.is-locked{ overflow:hidden; height:100vh; }

img,svg,canvas{ display:block; max-width:100%; }
h1,h2,h3,p,dl,dd,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }

::selection{ background:var(--acid); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--acid);
  outline-offset:3px;
  border-radius:1px;
}

.skip{
  position:fixed; top:8px; left:8px; z-index:9999;
  padding:10px 16px; background:var(--acid); color:var(--ink);
  font-family:var(--f-mono); font-size:var(--fs-ui); text-transform:uppercase;
  transform:translateY(-200%);
}
.skip:focus{ transform:none; }

/* ---------- SHARED BITS ---------- */
.tag{
  display:inline-block;
  font-family:var(--f-mono); font-size:var(--fs-mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim);
  padding-bottom:10px; border-bottom:1px solid var(--line);
  margin-bottom:var(--sp-3);
}
.hl{ color:var(--acid); }
.serif{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }

.eyebrow{
  display:inline-flex; align-items:flex-start; gap:10px;
  font-family:var(--f-mono); font-size:var(--fs-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim);
}
.pulse{
  flex:none; margin-top:.45em;
  width:7px; height:7px; background:var(--acid); border-radius:50%;
  box-shadow:0 0 0 0 rgba(214,255,62,.7); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(214,255,62,.6); }
  70%{ box-shadow:0 0 0 12px rgba(214,255,62,0); }
  100%{ box-shadow:0 0 0 0 rgba(214,255,62,0); }
}

/* ---------- BUTTONS ---------- */
.btn{
  --bg:var(--acid); --fg:var(--ink);
  position:relative; display:inline-flex; align-items:center; gap:14px;
  padding:16px 26px; background:var(--bg); color:var(--fg);
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.12em;
  text-transform:uppercase; font-weight:700;
  border-radius:0; overflow:hidden; isolation:isolate;
  transition:color .25s var(--ease);
  will-change:transform;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--ink); transform:translateY(101%);
  transition:transform .45s var(--ease-out);
}
.btn:hover{ color:var(--acid); }
.btn:hover::before{ transform:translateY(0); }
.btn:hover .btn__dot{ background:var(--acid); transform:scale(2.4); }
.btn__dot{
  width:7px; height:7px; background:var(--ink); border-radius:50%;
  transition:transform .45s var(--ease-out), background .25s var(--ease);
}
.btn--sm{ padding:11px 18px; font-size:var(--fs-label); }
.btn--lg{ padding:21px 34px; font-size:var(--fs-copy); }
.btn--block{ width:100%; justify-content:center; }
.btn--ghost{
  --bg:transparent; --fg:var(--bone);
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn--ghost::before{ background:var(--bone); }
.btn--ghost:hover{ color:var(--ink); }
.btn--ghost:hover .btn__dot{ background:var(--ink); }
.btn--ghost .btn__dot{ background:var(--acid); }

.link{
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.12em;
  text-transform:uppercase; color:var(--bone-dim);
  border-bottom:1px solid var(--line); padding-bottom:5px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.link:hover{ color:var(--bone); border-color:var(--acid); }

/* ---------- GRAIN + RULERS ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.045; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  33%{ transform:translate(-3%,2%) }
  66%{ transform:translate(2%,-3%) }
}
.rulers{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  display:grid; grid-template-columns:repeat(5,1fr);
  padding:0 var(--pad);
}
.rulers i{ border-left:1px solid rgba(255,255,255,.035); }
.rulers i:first-child{ border-left:0; }
@media (max-width:760px){ .rulers{ display:none; } }

/* ---------- LOADER ---------- */
.loader{
  position:fixed; inset:0; z-index:9800; background:var(--ink);
  display:grid; place-items:center;
}
.loader.is-done{ pointer-events:none; }
.loader__grid{ text-align:center; padding:var(--pad); width:min(760px,90vw); }
.loader__label{
  display:block; font-family:var(--f-mono); font-size:var(--fs-mono);
  letter-spacing:.24em; color:var(--bone-dim); margin-bottom:var(--sp-3);
}
.loader__word{
  display:flex; justify-content:center; gap:clamp(2px,1vw,10px);
  font-size:clamp(3rem,13vw,10rem); line-height:.86;
  font-variation-settings:'wdth' 120,'wght' 800; letter-spacing:-.03em;
}
.loader__word span{ display:block; transform:translateY(110%); opacity:0; }
.loader__meter{
  height:1px; background:var(--line); margin:var(--sp-4) 0 var(--sp-2);
}
.loader__meter i{ display:block; height:100%; width:0%; background:var(--acid); }
.loader__num{
  font-family:var(--f-mono); font-size:var(--fs-mono);
  letter-spacing:.2em; color:var(--acid);
}
.loader__curtain{
  position:absolute; inset:0; background:var(--acid);
  transform:scaleY(0); transform-origin:bottom;
}
.loader.is-out .loader__curtain{
  transform-origin:bottom; animation:curtain 1.1s var(--ease-out) forwards;
}
@keyframes curtain{
  0%{ transform:scaleY(0); transform-origin:bottom; }
  45%{ transform:scaleY(1); transform-origin:bottom; }
  46%{ transform:scaleY(1); transform-origin:top; }
  100%{ transform:scaleY(0); transform-origin:top; }
}
.loader.is-gone{ display:none; }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:18px var(--pad);
  transition:transform .5s var(--ease-out), background .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
.nav.is-stuck{
  background:rgba(8,8,11,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav.is-hidden{ transform:translateY(-110%); }
.nav__mark{ display:inline-flex; align-items:center; }
.nav__links{ display:flex; gap:clamp(14px,2vw,32px); }
.nav__links a{
  position:relative; font-family:var(--f-mono); font-size:var(--fs-ui);
  letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim);
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:100%; height:1px;
  background:var(--acid); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after,.nav__links a.is-current::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-current{ color:var(--acid); }
@media (max-width:900px){ .nav__links{ display:none; } }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(96px,13vh,150px) var(--pad) clamp(28px,6vh,64px);
  overflow:hidden;
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:.85;
}
.hero__inner{ position:relative; z-index:2; }
.hero__title{
  font-size:var(--fs-display); line-height:.85; letter-spacing:-.045em;
  font-variation-settings:'wdth' 112,'wght' 800;
  text-transform:uppercase;
  margin:clamp(12px,2.2vh,28px) 0 clamp(20px,5vh,56px);
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.04em; }
.line--indent{ padding-left:clamp(0px,3.5vw,7vw); }
.line--indent2{ padding-left:clamp(0px,7vw,14vw); }
.line--indent3{ padding-left:clamp(0px,10.5vw,21vw); }
.hero__title .w{ display:inline-block; }
.hero__title .serif{
  font-variation-settings:normal; text-transform:none;
  font-size:1.06em; letter-spacing:-.02em; color:var(--bone);
}
html.js .hero__title .ch{ display:inline-block; transform:translateY(105%); }

.hero__foot{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-4); align-items:end;
  border-top:1px solid var(--line); padding-top:var(--sp-3);
}
.hero__lede{ max-width:56ch; color:var(--bone-dim); }
.hero__cta{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
@media (max-width:860px){
  .hero__foot{ grid-template-columns:1fr; align-items:start; }
}

.hero__scroll{
  position:absolute; right:var(--pad); bottom:var(--sp-6); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:var(--fs-micro); letter-spacing:.3em; color:var(--bone-dim);
  writing-mode:vertical-rl;
}
.hero__scroll i{
  writing-mode:horizontal-tb; width:1px; height:56px; background:var(--line); position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:''; position:absolute; inset:0; background:var(--acid);
  animation:scrollDot 2s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{ transform:translateY(-100%) } 100%{ transform:translateY(100%) } }
@media (max-width:860px){ .hero__scroll{ display:none; } }


/* ---------- SECTION HEADLINE — one definition, every section ---------- */
.pin__title,
.split__head h2,
.benefits__head h2,
.teams__head h2,
.faq__head h2,
.base__content h2,
.audit__h,
.contact__title{
  font-size:var(--fs-h2); line-height:.95; letter-spacing:-.04em;
  font-variation-settings:'wdth' 108,'wght' 700;
  text-transform:uppercase;
}

/* ---------- PIN / HORIZONTAL ---------- */
.pin{ position:relative; height:420vh; background:var(--ink); }
.pin__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:var(--sp-4);
  padding:var(--sp-6) 0 var(--sp-5);
}
.pin__head{ padding:0 var(--pad); max-width:1100px; }
.pin__title{
  /* the pinned headline shares the section treatment but lives inside a 100svh
     sticky box, so it takes the smaller step of the same scale */
  font-size:var(--fs-h2-sm); max-width:24ch;
}
.pin__progress{ margin-top:var(--sp-3); height:1px; background:var(--line); max-width:280px; }
.pin__progress i{ display:block; height:100%; width:0; background:var(--acid); }

.pin__track{
  display:flex; gap:clamp(16px,2vw,32px);
  padding:0 var(--pad); will-change:transform;
}
.step{
  flex:0 0 clamp(280px,34vw,460px);
  min-height:clamp(340px,46vh,480px);
  border:1px solid var(--line); background:var(--ink-2);
  padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2);
  position:relative; overflow:hidden;
  transition:border-color .4s var(--ease), background .4s var(--ease);
  will-change:transform;
}
.step::after{
  content:''; position:absolute; inset:auto 0 0 0; height:2px; background:var(--acid);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out);
}
.step:hover{ border-color:var(--line-2); background:var(--ink-3); }
.step:hover::after{ transform:scaleX(1); }
.step__n{
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.2em; color:var(--acid);
}
.step h3{
  font-size:var(--fs-h3); line-height:1; letter-spacing:-.03em;
  font-variation-settings:'wdth' 110,'wght' 700; text-transform:uppercase;
  margin-top:auto;
}
.step p{ color:var(--bone-dim); font-size:var(--fs-copy); }
.step__meta{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-1);
}
.step__meta li{
  font-family:var(--f-mono); font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border:1px solid var(--line); color:var(--bone-dim);
}
.step--accent{ background:var(--acid); border-color:var(--acid); color:var(--ink); }
.step--accent .step__n{ color:var(--ink); }
.step--accent p{ color:rgba(8,8,11,.72); }
.step--accent .step__meta li{ border-color:rgba(8,8,11,.28); color:rgba(8,8,11,.75); }
.step--accent:hover{ background:var(--acid-hi); border-color:var(--acid-hi); }
.step--accent::after{ background:var(--ink); }

@media (max-width:860px){
  .pin{ height:auto; }
  .pin__sticky{ position:static; height:auto; }
  .pin__track{ flex-direction:column; transform:none !important; }
  .step{ flex:1 1 auto; min-height:0; }
  .pin__progress{ display:none; }
}

/* ---------- DOORS ---------- */
.doors{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.door{
  position:relative; padding:var(--sp-6) var(--pad) var(--sp-5);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--sp-2);
  overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease);
}
.door:last-child{ border-right:0; }
.door::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--acid);
  transform:translateY(100%); transition:transform .6s var(--ease-out);
}
.door--alt::before{ background:var(--plasma); }
.door:hover::before{ transform:translateY(0); }
.door:hover{ color:var(--ink); }
.door--alt:hover{ color:var(--bone); }
.door__tag{
  font-family:var(--f-mono); font-size:var(--fs-mono);
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
  transition:color .4s var(--ease);
}
.door:hover .door__tag{ color:inherit; opacity:.7; }
.door__title{
  font-size:clamp(1.7rem,3.6vw,3.2rem); line-height:.98; letter-spacing:-.035em;
  font-variation-settings:'wdth' 108,'wght' 700; text-transform:uppercase; max-width:14ch;
}
.door__title em{ font-family:var(--f-serif); font-style:italic; text-transform:none; font-variation-settings:normal; }
.door p{ color:var(--bone-dim); max-width:44ch; transition:color .4s var(--ease); }
.door:hover p{ color:inherit; opacity:.85; }
.door__go{
  margin-top:var(--sp-3);
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.14em; text-transform:uppercase;
}
@media (max-width:860px){
  .doors{ grid-template-columns:1fr; }
  .door{ border-right:0; border-bottom:1px solid var(--line); }
}

/* ---------- SCOPE ENGINE ---------- */
.split{
  padding:var(--sp-7) var(--pad);
  border-top:1px solid var(--line);
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(91,43,255,.16), transparent 60%),
    var(--ink);
}
.split__head{ margin-bottom:var(--sp-5); }
.split__head h2{ }
.split__grid{
  display:grid; grid-template-columns:minmax(280px,38%) 1fr;
  gap:clamp(24px,4vw,72px); align-items:start;
}
@media (max-width:960px){ .split__grid{ grid-template-columns:1fr; } }

.field{ margin-bottom:var(--sp-4); }
.field label{
  display:block; font-family:var(--f-mono); font-size:var(--fs-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim);
}
.field output{
  display:block; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.15;
  letter-spacing:-.03em; font-variation-settings:'wdth' 105,'wght' 700;
  font-variant-numeric:tabular-nums; margin:4px 0 12px;
}
.field__scale{
  display:flex; justify-content:space-between; margin-top:8px;
  font-family:var(--f-mono); font-size:var(--fs-micro); letter-spacing:.1em; color:var(--dim-2);
}

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:44px; background:transparent; display:block;
}
input[type=range]::-webkit-slider-runnable-track{
  height:2px; background:var(--line);
}
input[type=range]::-moz-range-track{ height:2px; background:var(--line); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; margin-top:-11px; border-radius:0;
  background:var(--acid); border:0;
  transition:transform .2s var(--ease-out);
}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:0; background:var(--acid); border:0;
}
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.25) rotate(45deg); }
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.1) rotate(45deg); }

.split__note{
  font-family:var(--f-mono); font-size:var(--fs-label); line-height:1.7; color:var(--dim-2);
  border-left:1px solid var(--line); padding-left:14px;
}

.split__readout{ display:flex; flex-direction:column; gap:var(--sp-4); }
.bars__legend{
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim-2); margin-bottom:10px;
}
.bars__legend span{ color:var(--bone-dim); letter-spacing:0; }
.bars{
  position:relative;
  display:flex; gap:4px; height:clamp(160px,26vh,240px);
  align-items:flex-end; border-bottom:1px solid var(--line); padding-bottom:2px;
}
.bars::before{
  content:''; position:absolute; left:0; right:0; top:0;
  border-top:1px dashed var(--dim-3);
}
.bar{
  flex:1; position:relative; background:var(--ink-3);
  border:1px solid var(--line); border-bottom:0;
  display:flex; align-items:flex-start; justify-content:center;
  transition:height .55s var(--ease-out), background .35s var(--ease);
  min-height:6px;
}
.bar--you{ background:var(--acid); border-color:var(--acid); }
.bar__lbl{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  font-family:var(--f-mono); font-size:var(--fs-micro); letter-spacing:.08em;
  color:var(--bone-dim); white-space:nowrap;
}
.bar--you .bar__lbl{ color:var(--acid); }

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  margin-top:var(--sp-4);
}
.stat{ background:var(--ink); padding:var(--sp-3); }
.stat dt{
  font-family:var(--f-mono); font-size:var(--fs-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim);
  margin-bottom:10px;
}
.stat__big{
  font-size:clamp(1.5rem,2.6vw,2.3rem); line-height:1; letter-spacing:-.035em;
  font-variation-settings:'wdth' 100,'wght' 700; font-variant-numeric:tabular-nums;
}

/* ---------- BENEFITS ---------- */
.benefits{ padding:var(--sp-7) var(--pad); border-top:1px solid var(--line); }
.benefits__head{ margin-bottom:var(--sp-5); }
.benefits__head h2{ }
.bgrid{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.bcard{
  grid-column:span 2; background:var(--ink); padding:var(--sp-4) var(--sp-3) var(--sp-3);
  position:relative; overflow:hidden; min-height:260px;
  display:flex; flex-direction:column; gap:12px;
}
.bcard--wide{ grid-column:span 3; }
.bcard::before{
  content:''; position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(214,255,62,.16), transparent 62%);
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
}
.bcard:hover::before{ opacity:1; }
.bcard__n{
  position:absolute; right:-.06em; top:-.24em;
  font-size:clamp(6rem,10vw,11rem); line-height:1;
  font-variation-settings:'wdth' 120,'wght' 800;
  color:var(--ghost); z-index:0; transition:color .4s var(--ease), transform .6s var(--ease-out);
}
.bcard:hover .bcard__n{ color:var(--ghost-hi); transform:translateY(6px); }
.bcard h3{
  position:relative; z-index:1; margin-top:auto;
  font-size:clamp(1.1rem,1.7vw,1.5rem); line-height:1.02; letter-spacing:-.03em;
  font-variation-settings:'wdth' 106,'wght' 700; text-transform:uppercase;
}
.bcard p{ position:relative; z-index:1; color:var(--bone-dim); font-size:var(--fs-copy); }
@media (max-width:1024px){
  .bgrid{ grid-template-columns:repeat(4,1fr); }
  .bcard,.bcard--wide{ grid-column:span 2; }
}
@media (max-width:640px){
  .bgrid{ grid-template-columns:1fr; }
  .bcard,.bcard--wide{ grid-column:span 1; min-height:0; }
}

/* ---------- TEAMS ---------- */
.teams{ padding:var(--sp-7) var(--pad); border-top:1px solid var(--line); }
.teams__head{ margin-bottom:var(--sp-5); }
.teams__head h2{ }
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px); }
@media (max-width:860px){ .plans{ grid-template-columns:1fr; } }
.plan{
  position:relative; border:1px solid var(--line); background:var(--ink-2);
  padding:var(--sp-4) var(--sp-3) var(--sp-3);
  display:flex; flex-direction:column; gap:var(--sp-3);
  will-change:transform; transition:border-color .4s var(--ease);
}
.plan:hover{ border-color:var(--line-2); }
.plan--best{
  background:linear-gradient(180deg, rgba(91,43,255,.22), rgba(8,8,11,0) 55%), var(--ink-2);
  border-color:color-mix(in srgb, var(--plasma) 30%, var(--line));
}
.plan__flag{
  position:absolute; top:-1px; right:-1px;
  background:var(--acid); color:var(--ink);
  font-family:var(--f-mono); font-size:var(--fs-micro); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; padding:8px 14px;
}
.plan__kicker{
  font-family:var(--f-mono); font-size:var(--fs-mono);
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
}
.plan__title{
  font-size:clamp(1.6rem,3vw,2.6rem); line-height:.98; letter-spacing:-.035em;
  font-variation-settings:'wdth' 108,'wght' 700; text-transform:uppercase; margin-top:8px;
}
.plan__list{ display:flex; flex-direction:column; }
.plan__list li{
  padding:14px 0; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.06em;
  color:var(--bone-dim);
}
.plan__list li::before{
  content:''; width:6px; height:6px; background:var(--acid); flex:none;
}
.plan footer{
  margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap;
}
.plan__price{
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone);
}

/* ---------- BASE / LT ---------- */
.base{
  position:relative; padding:var(--sp-7) var(--pad);
  border-top:1px solid var(--line); overflow:hidden;
}
.base__type{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end;
  padding-right:var(--pad); pointer-events:none; z-index:0;
}
.base__lt{
  font-size:clamp(9rem,24vw,26rem); line-height:.74; letter-spacing:-.07em;
  font-variation-settings:'wdth' 125,'wght' 800;
  color:transparent; -webkit-text-stroke-width:1px; -webkit-text-stroke-color:var(--stroke);
  transform:translateY(6%);
}
.base__coord{
  position:absolute; left:var(--pad); bottom:var(--sp-4);
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.2em; color:var(--dim-3);
}
.base__content{ position:relative; z-index:1; max-width:900px; }
.base__content h2{ }
.base__items{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.bitem{ background:var(--ink); padding:var(--sp-3); }
.bitem h3{
  font-size:1.05rem; letter-spacing:-.01em; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 700; margin-bottom:10px;
}
.bitem p{ color:var(--bone-dim); font-size:var(--fs-copy); }

/* ---------- CONTACT ---------- */
.contact{
  padding:var(--sp-7) var(--pad);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,90px);
  background:
    radial-gradient(90% 70% at 10% 100%, rgba(214,255,62,.10), transparent 60%),
    var(--ink);
}
@media (max-width:960px){ .contact{ grid-template-columns:1fr; } }
.contact__title{ line-height:.92; }
.contact__title .serif{ text-transform:none; font-variation-settings:normal; }
.contact__lede{ max-width:40ch; color:var(--bone-dim); margin:var(--sp-3) 0 var(--sp-4); }
.mail{
  display:inline-block; position:relative;
  font-size:clamp(1.2rem,2.6vw,2rem); letter-spacing:-.02em;
  font-variation-settings:'wdth' 100,'wght' 600;
}
.mail__underline{
  position:absolute; left:0; bottom:-6px; height:1px; width:100%; background:var(--acid);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out);
}
.mail:hover .mail__underline{ transform:scaleX(1); transform-origin:left; }

.form{ display:flex; flex-direction:column; gap:var(--sp-3); }
.form__row{ display:flex; flex-direction:column; gap:8px; }
.form__row label{
  font-family:var(--f-mono); font-size:var(--fs-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim);
}
.form input,.form textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:12px 0; border-radius:0; resize:vertical;
  transition:border-color .3s var(--ease);
}
.form input::placeholder,.form textarea::placeholder{ color:var(--placeholder); }
.form input:focus,.form textarea:focus{ outline:none; border-bottom-color:var(--acid); }
.form input:focus-visible,.form textarea:focus-visible{ outline:none; }
.form .err{
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; color:var(--danger);
  min-height:1em;
}
.form__row.is-bad input,.form__row.is-bad textarea{ border-bottom-color:var(--danger); }
.form__ok{
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.12em;
  text-transform:uppercase; color:var(--acid);
}

/* ---------- FOOTER ---------- */
.foot{ border-top:1px solid var(--line); background:var(--ink-2); }
.foot__top{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-3); padding:var(--sp-5) var(--pad) var(--sp-4);
}
.foot__top > div{ display:flex; flex-direction:column; gap:8px; }
.foot__lbl{
  font-family:var(--f-mono); font-size:var(--fs-mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim-2);
}
.foot__top a:hover{ color:var(--acid); }

.foot__bar{
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2);
  flex-wrap:wrap;
  padding:var(--sp-3) var(--pad); border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.1em; color:var(--bone-dim);
}
.foot__top-btn{
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone-dim); transition:color .25s var(--ease);
}
.foot__top-btn:hover{ color:var(--acid); }

/* ---------- REVEALS ----------
   Guarded by html.js so the page stays fully readable if JS never runs. */
html:not(.js) .loader{ display:none; }
html.js .reveal{ opacity:0; transform:translateY(22px); }
html.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--d,0) * 90ms);
}
html.js [data-anim]{ opacity:0; transform:translateY(34px); }
html.js [data-anim].is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:calc(var(--d,0) * 70ms);
}

/* ---------- SMALL SCREENS ---------- */
@media (max-width:700px){
  :root{ --fs-display: clamp(1.9rem, 8.8vw, 3.2rem); }
  .line--indent,.line--indent2,.line--indent3{ padding-left:0; }
  .hero__title .line{ padding-bottom:.1em; }
  .hero{ padding-top:clamp(88px,16vh,120px); }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1 1 auto; justify-content:center; }
  .nav{ padding:14px var(--pad); }
  .nav .btn--sm{ padding:10px 14px; font-size:var(--fs-micro); letter-spacing:.08em; }
  .cookie{ padding:14px var(--pad) 18px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,[data-anim]{ opacity:1 !important; transform:none !important; }
  .hero__title .ch{ transform:none !important; }
  .loader{ display:none !important; }
  .grain{ display:none; }
}

/* =========================================================
   V3 ADDITIONS — scope engine + services grid
   ========================================================= */

/* ---------- SEGMENTED CONTROLS ---------- */
.field--seg{ border:0; padding:0; margin:0 0 var(--sp-4); }
.field--seg legend{
  padding:0; margin-bottom:12px;
  font-family:var(--f-mono); font-size:var(--fs-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim);
}
.seg{ display:flex; flex-wrap:wrap; gap:4px; }
.seg input{
  position:absolute; width:1px; height:1px; opacity:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
}
.seg label{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; min-height:44px;
  border:1px solid var(--line); background:var(--ink-2);
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.06em;
  text-transform:uppercase; color:var(--bone-dim);
  transition:border-color .25s var(--ease), color .25s var(--ease),
             background .25s var(--ease);
}
.seg label:hover{ border-color:var(--line-2); color:var(--bone); }
.seg input:checked + label{
  background:var(--acid); border-color:var(--acid); color:var(--ink); font-weight:700;
}
.seg input:focus-visible + label{ outline:2px solid var(--acid); outline-offset:3px; }

/* ---------- PHASE BAR ---------- */
.phases{
  display:flex; height:clamp(56px,8vh,76px);
  border:1px solid var(--line); overflow:hidden; background:var(--ink-2);
}
.phase{
  display:flex; align-items:center; justify-content:center;
  min-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.1em;
  text-transform:uppercase;
  border-right:1px solid var(--ink);
  transition:width .55s var(--ease-out);
}
.phase:last-child{ border-right:0; }
.phase--d{ background:var(--surface-4); color:var(--bone-dim); }
.phase--s{ background:var(--surface-5); color:var(--bone-dim); }
.phase--b{ background:var(--acid); color:var(--ink); font-weight:700; }
.phase--l{ background:var(--plasma); color:var(--bone); }

/* ---------- DELIVERABLES ---------- */
.deliv{
  margin-top:var(--sp-4); padding-top:var(--sp-3);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:10px 24px;
}
.deliv li{
  position:relative; padding-left:20px;
  font-family:var(--f-mono); font-size:var(--fs-ui); line-height:1.7; color:var(--bone-dim);
}
.deliv li::before{
  content:''; position:absolute; left:0; top:.6em;
  width:7px; height:7px; background:var(--acid);
}

/* ---------- SERVICES GRID ---------- */
.svc{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.svcard{
  background:var(--ink-2); padding:var(--sp-4) var(--sp-3) var(--sp-3);
  display:flex; flex-direction:column; gap:14px; min-height:340px;
  position:relative; overflow:hidden;
  transition:background .35s var(--ease);
  will-change:transform;
}
.svcard:hover{ background:var(--ink-3); }
.svcard__n{
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.2em; color:var(--acid);
}
.svcard h3{
  font-size:clamp(1.15rem,1.8vw,1.6rem); line-height:1; letter-spacing:-.03em;
  font-variation-settings:'wdth' 108,'wght' 700; text-transform:uppercase;
  margin-top:auto;
}
.svcard p{ color:var(--bone-dim); font-size:var(--fs-copy); }
.svcard--a{ background:var(--acid); }
.svcard--a:hover{ background:var(--acid-hi); }
.svcard--a h3,.svcard--a .svcard__n{ color:var(--ink); }
.svcard--a p{ color:rgba(8,8,11,.74); }
.svcard--a .step__meta li{ border-color:rgba(8,8,11,.28); color:rgba(8,8,11,.78); }

@media (max-width:1100px){ .svc{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){
  .svc{ grid-template-columns:1fr; }
  .svcard{ min-height:0; }
  .seg{ display:grid; grid-template-columns:1fr 1fr; }
  .seg label{ justify-content:center; }
}

/* =========================================================
   CONSENT · FORM CONSENT · LEGAL PAGES
   ========================================================= */

/* ---------- CONSENT DIALOG ---------- */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:950;
  padding:0 var(--pad) var(--pad);
  transform:translateY(120%); transition:transform .55s var(--ease-out);
}
.consent.is-in{ transform:none; }
.consent__box{
  max-width:1100px; margin:0 auto;
  background:var(--ink-3); border:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-3); align-items:start; padding:var(--sp-3);
}
.consent__t{
  font-size:1rem; letter-spacing:-.01em; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 700; margin-bottom:8px;
}
.consent__p{ font-size:var(--fs-copy); color:var(--bone-dim); max-width:72ch; }
.consent__p a{ color:var(--acid); text-decoration:underline; text-underline-offset:3px; }
.consent__list{ margin-top:var(--sp-3); display:flex; flex-direction:column; gap:14px; }
.consent__row{ border-top:1px solid var(--line); padding-top:12px; }
.consent__sw{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.consent__sw input{
  position:absolute; width:1px; height:1px; opacity:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
}
.consent__track{
  width:38px; height:20px; flex:none; background:var(--ink);
  border:1px solid var(--line-2); position:relative;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.consent__track::after{
  content:''; position:absolute; top:2px; left:2px; width:14px; height:14px;
  background:var(--bone-dim); transition:transform .2s var(--ease-o), background .2s var(--ease);
}
.consent__sw input:checked + .consent__track{ background:var(--acid); border-color:var(--acid); }
.consent__sw input:checked + .consent__track::after{ transform:translateX(18px); background:var(--ink); }
.consent__sw input:focus-visible + .consent__track{ outline:2px solid var(--acid); outline-offset:3px; }
.consent__k{
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.1em; text-transform:uppercase;
}
.consent__d{ margin-top:6px; font-size:var(--fs-copy); color:var(--bone-dim); max-width:70ch; }
.consent__acts{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
/* accept and reject carry identical weight on purpose */
.consent__acts .btn{ justify-content:center; white-space:nowrap; }
.consent__more{
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone-dim);
  border-bottom:1px solid var(--line); padding-bottom:4px;
}
.consent__more:hover{ color:var(--bone); border-color:var(--acid); }
@media (max-width:860px){
  .consent__box{ grid-template-columns:1fr; }
  .consent__acts{ flex-direction:row; flex-wrap:wrap; }
  .consent__acts .btn{ flex:1 1 180px; }
}

/* ---------- FORM CONSENT CHECKBOXES ---------- */
.check{ display:grid; grid-template-columns:auto 1fr; gap:10px 12px; align-items:start; }
.check input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:20px; height:20px; margin:2px 0 0; flex:none;
  display:grid; place-content:center;          /* so the tick sits dead centre */
  background:transparent; border:1px solid var(--line); border-radius:0; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.check input[type=checkbox]:checked{ background:var(--acid); border-color:var(--acid); }
/* a real tick, masked from an SVG: centred, round caps, no rotated-border wedge */
.check input[type=checkbox]:checked::after{
  content:''; display:block; width:14px; height:14px;
  background-color:var(--ink);
  -webkit-mask:var(--tick) center / 14px 14px no-repeat;
          mask:var(--tick) center / 14px 14px no-repeat;
}
.check label{ font-size:var(--fs-copy); line-height:1.55; color:var(--bone-dim); cursor:pointer; }
.check label a{ color:var(--acid); text-decoration:underline; text-underline-offset:3px; }
.check .err{ grid-column:2; }
.check.is-bad input[type=checkbox]{ border-color:var(--danger); }

.form__row--trap{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
}
.form__ok--ok{ color:var(--acid); }
.form__ok--bad{ color:var(--danger); }

/* ---------- FOOTER LEGAL ---------- */
.foot__legal{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  padding:var(--sp-3) var(--pad) 0;
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; color:var(--bone-dim);
}
.foot__legal a:hover,.foot__legal-btn:hover{ color:var(--acid); }
.foot__legal-btn{
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; color:var(--bone-dim);
}

/* ---------- LEGAL PAGES ---------- */
.legal{
  padding:calc(var(--sp-8) - 40px) var(--pad) var(--sp-7);
  max-width:860px;
}
.legal__kicker{
  font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--acid);
}
.legal h1{
  font-size:clamp(2rem,5vw,3.6rem); line-height:1; letter-spacing:-.04em;
  font-variation-settings:'wdth' 108,'wght' 700; text-transform:uppercase;
  margin:var(--sp-2) 0 var(--sp-3);
}
.legal__meta{
  font-family:var(--f-mono); font-size:var(--fs-label); color:var(--bone-dim);
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--line);
}
.legal h2{
  font-size:clamp(1.05rem,1.8vw,1.4rem); letter-spacing:-.02em; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 700;
  margin:var(--sp-5) 0 var(--sp-2); scroll-margin-top:90px;
}
.legal h3{
  font-size:.98rem; font-weight:600; margin:var(--sp-3) 0 8px; color:var(--bone);
}
.legal p,.legal li{ color:var(--bone-dim); font-size:var(--fs-copy); }
.legal p + p{ margin-top:var(--sp-2); }
.legal ul{ margin:var(--sp-2) 0; display:flex; flex-direction:column; gap:8px; }
.legal ul li{ position:relative; padding-left:20px; }
.legal ul li::before{
  content:''; position:absolute; left:0; top:.6em; width:7px; height:7px; background:var(--acid);
}
.legal a{ color:var(--acid); text-decoration:underline; text-underline-offset:3px; }
.legal table{
  width:100%; border-collapse:collapse; margin:var(--sp-3) 0;
  border:1px solid var(--line); font-size:var(--fs-copy);
}
.legal th,.legal td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top;
}
.legal th{
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-dim); font-weight:400; background:var(--ink-2);
}
.legal td{ color:var(--bone-dim); }
.legal tr:last-child td{ border-bottom:0; }
.draft{
  border:1px solid var(--danger); background:rgba(255,92,62,.07);
  padding:var(--sp-3); margin:var(--sp-3) 0;
}
.draft strong{ color:var(--danger); display:block; margin-bottom:6px;
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.14em; text-transform:uppercase; }
.draft p{ color:var(--bone); font-size:var(--fs-copy); }
.legal__back{
  display:inline-block; margin-top:var(--sp-5);
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:5px;
}
.legal__back:hover{ border-color:var(--acid); }

/* ---------- SCOPE ENGINE DISCLAIMER ---------- */
.stats__note{
  margin-top:var(--sp-3); padding:14px 16px;
  border:1px solid var(--line); border-left:2px solid var(--acid);
  background:var(--ink-2);
  font-family:var(--f-mono); font-size:var(--fs-ui); line-height:1.8; color:var(--bone-dim);
}
.stats__note strong{ color:var(--bone); font-weight:700; }

/* =========================================================
   FAQ + STACK ROW
   ========================================================= */
.faq{ padding:var(--sp-7) var(--pad); border-top:1px solid var(--line); }
.faq__head{ margin-bottom:clamp(28px,5vh,56px); }
.faq__head h2{ }
.faq__list{ border-top:1px solid var(--line-2); }

.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:clamp(18px,2.6vh,26px) 0; cursor:pointer; list-style:none;
  transition:padding-left .3s var(--ease-o), color .25s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ padding-left:12px; }
.qa summary:focus-visible{ outline:2px solid var(--acid); outline-offset:3px; }
.qa__q{
  font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.25; letter-spacing:-.02em;
  font-variation-settings:'wdth' 104,'wght' 600;
}
.qa[open] .qa__q{ color:var(--acid); }
.qa__i{
  position:relative; flex:none; width:18px; height:18px;
}
.qa__i::before,.qa__i::after{
  content:''; position:absolute; background:var(--bone-dim);
  transition:transform .3s var(--ease-o), background .25s var(--ease);
}
.qa__i::before{ left:0; top:8px; width:18px; height:2px; }
.qa__i::after{ left:8px; top:0; width:2px; height:18px; }
.qa[open] .qa__i::after{ transform:scaleY(0); }
.qa[open] .qa__i::before{ background:var(--acid); }
.qa__a{ padding:0 0 clamp(20px,3vh,30px); max-width:78ch; }
.qa__a p{ color:var(--bone-dim); font-size:var(--fs-copy); }
.qa[open] .qa__a{ animation:qaIn .4s var(--ease-o) both; }
@keyframes qaIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

.stackrow{
  margin-top:clamp(32px,5vh,64px); padding-top:var(--sp-3);
  border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:var(--sp-3) var(--sp-4); flex-wrap:wrap;
}
.stackrow__k{
  font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-dim); flex:none;
}
.stackrow__l{ display:flex; flex-wrap:wrap; gap:8px; }
.stackrow__l li{
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase;
  color:var(--bone-dim); border:1px solid var(--line); padding:7px 12px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.stackrow__l li:hover{ border-color:var(--acid); color:var(--bone); }

/* ---------- PHASE BAR: tight segments + legend ---------- */
.phase.is-tight span{ opacity:0; }     /* no room for the word; the legend carries it */
.plegend{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:14px;
}
.plegend__i{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em;
  text-transform:uppercase; color:var(--bone-dim);
}
.plegend__i i{ width:10px; height:10px; flex:none; }
.plegend__i--d i{ background:var(--surface-4); box-shadow:inset 0 0 0 1px var(--line); }
.plegend__i--s i{ background:var(--surface-5); }
.plegend__i--b i{ background:var(--acid); }
.plegend__i--l i{ background:var(--plasma); }
.plegend__i b{ color:var(--bone); font-weight:700; }

/* a deliverable that is an actual shipped surface */
.deliv li.is-surface::before{ background:var(--acid); }
.deliv li:not(.is-surface)::before{ background:var(--line-2); }

/* =========================================================
   BUSINESS AUDIT — the section gets its own weight
   ========================================================= */
.audit{
  padding:var(--sp-7) var(--pad);
  border-top:1px solid var(--line);
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(91,43,255,.16), transparent 62%),
    radial-gradient(90% 60% at 0% 100%, rgba(214,255,62,.07), transparent 60%),
    var(--ink);
}
.audit__intro{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,72px); align-items:end;
  padding-bottom:clamp(36px,6vh,72px); border-bottom:1px solid var(--line);
}
.audit__h{ grid-column:1 / -1; margin-bottom:var(--sp-3); }
.audit__h .serif{ text-transform:none; font-variation-settings:normal; }
.audit__lede{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--sp-3) clamp(24px,3vw,48px); }
.audit__lede p{ color:var(--bone-dim); }
.audit__lede p:first-child{ color:var(--bone); font-size:1.05rem; }

/* same component as .tag, so sub-labels read identically across sections */
.audit__sub{
  display:inline-block;
  font-family:var(--f-mono); font-size:var(--fs-mono); font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim);
  padding-bottom:10px; border-bottom:1px solid var(--line);
  margin:clamp(36px,6vh,72px) 0 var(--sp-3);
}

/* what we look for */
.look{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.look__i{ background:var(--ink-2); padding:var(--sp-3); display:flex; flex-direction:column; gap:10px; }
.look__n{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.2em; color:var(--acid); }
.look__i h4{
  font-size:1.02rem; line-height:1.1; letter-spacing:-.02em; text-transform:uppercase;
  font-variation-settings:'wdth' 106,'wght' 700; margin:0;
}
.look__i p{ color:var(--bone-dim); font-size:var(--fs-copy); }
@media (max-width:1000px){ .look{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .look{ grid-template-columns:1fr; } }

/* the flagship case */
.case--a{
  border:1px solid var(--acid); background:rgba(214,255,62,.05);
  padding:var(--sp-4) var(--sp-3) var(--sp-3);
}
.case__n{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.2em; color:var(--acid); }
.case__t{
  font-size:clamp(1.25rem,2.4vw,2rem); line-height:1.02; letter-spacing:-.03em;
  text-transform:uppercase; font-variation-settings:'wdth' 108,'wght' 700;
  margin:10px 0 var(--sp-3);
}
.case__g{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.case__c{ background:var(--ink); padding:var(--sp-3); }
.case__k{
  display:block; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--acid); margin-bottom:10px;
}
.case__c p{ color:var(--bone-dim); font-size:var(--fs-copy); }
@media (max-width:900px){ .case__g{ grid-template-columns:1fr; } }

/* the supporting cases */
.cases{ margin-top:1px; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-top:0; }
.case--s{
  background:var(--ink-2); padding:var(--sp-3);
  display:flex; flex-direction:column; gap:10px;
  transition:background .3s var(--ease);
}
.case--s:hover{ background:var(--ink-3); }
.case--s .case__t{ font-size:clamp(1.05rem,1.6vw,1.3rem); margin:8px 0 6px; }
.case__p{ color:var(--bone-dim); font-size:var(--fs-copy); }
.case__p b{ color:var(--bone); font-weight:700; }
@media (max-width:860px){ .cases{ grid-template-columns:1fr; } }

/* how the audit runs */
.how{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.how__s{ background:var(--ink-2); padding:var(--sp-3); display:flex; flex-direction:column; gap:10px; }
.how__n{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; color:var(--plasma); }
.how__s h4{ font-size:1.05rem; letter-spacing:-.02em; text-transform:uppercase;
  font-variation-settings:'wdth' 106,'wght' 700; margin:0; }
.how__s p{ color:var(--bone-dim); font-size:var(--fs-copy); }
.how__s em{ color:var(--acid); font-style:normal; }
@media (max-width:860px){ .how{ grid-template-columns:1fr; } }

.audit__cta{
  margin-top:var(--sp-4); display:flex; align-items:center; gap:var(--sp-3);
  flex-wrap:wrap;
}
.audit__note{
  flex:1 1 320px; font-family:var(--f-mono); font-size:var(--fs-label); line-height:1.8;
  color:var(--bone-dim); border-left:1px solid var(--line); padding-left:14px;
}

/* ---------- AUDIT: the sixth cell is the shard field, not an empty box ---------- */
.case--viz{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(91,43,255,.18), transparent 60%),
    var(--ink);
  display:flex; align-items:flex-end; min-height:260px;
}
.viz__cv{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9;
}
.viz__body{
  position:relative; z-index:1; padding:var(--sp-3);
  display:flex; flex-direction:column; gap:10px;
}
/* the field keeps drifting behind the copy, but never competes with it */
.viz__body::before{
  content:''; position:absolute; inset:-40px -20px -20px -20px; z-index:-1;
  background:linear-gradient(to top, var(--ink) 55%, rgba(14,14,18,.86) 78%, transparent 100%);
}
.viz__k{
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.2em;
  text-transform:uppercase; color:var(--acid);
}
.viz__p{ color:var(--bone-dim); font-size:var(--fs-copy); max-width:40ch; }
.viz__go{
  margin-top:4px; align-self:flex-start;
  font-family:var(--f-mono); font-size:var(--fs-ui); letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone); border-bottom:1px solid var(--line); padding-bottom:5px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.viz__go:hover{ color:var(--acid); border-color:var(--acid); }

/* ---------- GRID GAP FILLER: a short last row becomes a shard panel ---------- */
.gridviz{
  position:relative; overflow:hidden; min-height:180px;
  background:
    radial-gradient(120% 120% at 85% 15%, rgba(91,43,255,.14), transparent 62%),
    var(--ink-2);
}
.gridviz__cv{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }

@media (max-width:720px){
  /* the replay control stops floating over the mark and sits under it */
  .foot__mark{ display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start; }
  .foot__replay{ position:static; }
}

@media (max-width:720px){
  /* the replay control stops floating over the mark and sits under it */
  .foot__mark{ display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start; }
  .foot__replay{ position:static; }
}

/* =========================================================
   THE MARK — wireframe only. No fill inside the letterforms, ever.
   Contours are the real Archivo glyphs (wght 800 / wdth 125) pulled from the
   project's own woff2; only the frame is ever drawn.
   ========================================================= */
.mk{ display:block; width:100%; height:auto; overflow:visible; }
.mk--sm{ width:124px; }
.mk__frame path{ fill:none; stroke:var(--bone); vector-effect:non-scaling-stroke; }

/* header: the frame reacts to the pointer */
.mk--sm .mk__frame path{
  stroke-width:1.6;
  transition:stroke .3s var(--ease);
}
.nav__mark:hover .mk__frame path{ stroke:var(--acid); }

/* footer: plotted frame, baseline guides, visible tool head */
.mk--xl .mk__frame path{ stroke-width:1.4; stroke:var(--bone-dim); }
.mk--xl.is-on .mk__frame path{ stroke:var(--bone); transition:stroke .8s var(--ease); }
.foot__mark:hover .mk--xl .mk__frame path{ stroke:var(--acid); transition:stroke .3s var(--ease); }

.mk__gx{ stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; opacity:0;
  transition:opacity .6s var(--ease); }
.mk--xl.is-on .mk__gx{ opacity:1; }

.mk__cross{ stroke:var(--acid); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.4; }
.mk__head{ fill:var(--acid); }
.mk__tool{ opacity:0; transition:opacity .4s var(--ease); }
.mk__tool.is-cutting{ opacity:1; }

.foot__mark{ position:relative; padding:clamp(24px,5vh,56px) var(--pad) clamp(30px,5vh,60px); }
.foot__replay{
  position:absolute; right:var(--pad); top:clamp(24px,5vh,56px);
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim-2);
  border:1px solid var(--line); padding:7px 12px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.foot__replay:hover{ color:var(--acid); border-color:var(--acid); }

@media (prefers-reduced-motion: reduce){
  .mk__tool{ display:none; }
  .mk--xl .mk__gx{ opacity:1; }
}