/* ============ FONTS (Rapid Impact brand: Kallisto display, General Sans body) ============ */
@font-face{font-family:"Kallisto";font-weight:900;font-style:normal;font-display:swap;
  src:url("../fonts/Kallisto-Heavy.woff2") format("woff2");}
@font-face{font-family:"Kallisto";font-weight:700;font-style:normal;font-display:swap;
  src:url("../fonts/Kallisto-Bold.woff2") format("woff2");}
@font-face{font-family:"General Sans";font-weight:500;font-style:normal;font-display:swap;
  src:url("../fonts/GeneralSans-Medium.woff2") format("woff2");}

/* ============ TOKENS ============ */
:root{
  --ink:#18171C; --ink-2:#1E1D23; --ink-3:#121116;
  --paper:#FCFEED; --paper-ink:#18171C;
  --lime:#E3F850; --mint:#8DEA9A; --moss:#53B160; --moss-deep:#2d8a4e; --hud:#6EFF82;
  --lime-deep:#5F7A12; /* the lime end of the ramp, pitched down for cream backgrounds */
  --ash:#8A8A93; --ash-dim:#5A5A63; --ash-paper:#6A6A5E;
  --line-lime:rgba(110,255,130,.30); --line-dim:rgba(255,255,255,.10); --line-paper:rgba(24,23,28,.16);
  --font-display:"Kallisto","Arial Narrow",system-ui,sans-serif;
  --font-body:"General Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,"Cascadia Mono",monospace;
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-6:3rem; --sp-8:4.5rem; --sp-12:7.5rem;
  --maxw:1240px;
  --e-out:cubic-bezier(0,0,.2,1); --e-io:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:#F4F4F0;font-family:var(--font-body);font-weight:500;
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--lime);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* ============ PRIMITIVES ============ */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.22em;font-size:.68rem;font-weight:400}
.slab{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.87;
  letter-spacing:-.02em;text-wrap:balance}
.grn{background:linear-gradient(93deg,var(--lime) 20%,var(--mint) 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.limeword{color:var(--lime)}
.section{position:relative;padding-block:clamp(4rem,9vw,7.5rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;color:var(--lime);margin-bottom:1.6rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--lime)}
.lede{max-width:54ch;color:var(--ash);font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.5}
.stripes{display:flex;flex-direction:column;gap:6px}
.stripes span{height:5px;background:var(--lime);transform-origin:left}
.stripes span:nth-child(2){background:var(--lime)}
.stripes span:nth-child(3){background:var(--lime);opacity:.5}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-mono);text-transform:uppercase;
  letter-spacing:.12em;font-size:.74rem;font-weight:400;padding:.95rem 1.4rem;border:1px solid var(--lime);
  color:var(--ink);background:var(--lime);cursor:pointer;
  transition:background var(--motion,.18s) var(--e-io),color .18s var(--e-io),transform .12s var(--e-io)}
.btn .arw{transition:transform .2s var(--e-io)}
.btn:hover{background:transparent;color:var(--lime)}
.btn:hover .arw{transform:translate(3px,-3px)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:#F4F4F0;border-color:var(--line-dim)}
.btn.ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn.on-paper{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.btn.on-paper:hover{background:transparent;color:var(--ink)}

/* corner registration marks + ghost kanji */
.kanji{position:absolute;font-family:var(--font-display);font-weight:900;pointer-events:none;
  color:#fff;opacity:.035;line-height:.8;user-select:none;z-index:0}
.reg{position:absolute;z-index:2;color:var(--ash-dim)}
.hair{position:absolute;background:var(--line-dim);z-index:1}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:40;background:rgba(24,23,28,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dim)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:1.5rem}
.logo{font-family:var(--font-display);font-weight:900;font-size:1.15rem;letter-spacing:.02em;display:flex;align-items:center;gap:.05rem}
.logo b{color:var(--ink);background:var(--lime);padding:0 .28rem;margin-inline:.12rem;transform:skewX(-6deg);display:inline-block}
.nav .logo img{height:26px;width:auto;display:block}
.foot .logo img{height:22px;width:auto;display:block}
.navlinks{display:flex;gap:2rem;align-items:center}
.navlinks a{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);transition:color .15s}
.navlinks a:hover{color:var(--lime)}
@media(max-width:760px){.navlinks a:not(.navcta){display:none}}

/* ============ HERO ============ */
.hero{position:relative;min-height:clamp(560px,84vh,820px);display:flex;align-items:center;overflow:hidden;
  padding-block:4rem;border-bottom:1px solid var(--line-lime)}
.hero .kanji{font-size:min(46vw,640px);right:-4vw;top:44%;transform:translateY(-50%)}
.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;width:100%}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.6rem,7.4vw,6.7rem);margin-left:-.03em}
.hero .sub{margin-top:1.8rem}
.hero .cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
.hero .proofline{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid var(--line-dim);color:var(--ash);
  font-size:.92rem;max-width:46ch}
.hero .proofline b{color:#F4F4F0;font-weight:500}
.hero .stripes{margin-top:2.4rem;max-width:420px}
.craft{position:relative;aspect-ratio:1;width:100%;max-width:440px;margin-inline:auto}
@media(max-width:900px){.craft{max-width:300px;margin-top:2rem}}
.craft svg{width:100%;height:100%;overflow:visible}
.spin{transform-origin:center;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.craft .ring{fill:none;stroke:var(--line-lime);stroke-width:1}
/* framed brand-image "screen" (hero craft + founder portrait) */
.screen,.portrait{position:relative;border:1px solid var(--line-lime);overflow:hidden;background:#0b0b0f}
.screen{aspect-ratio:1}.portrait{aspect-ratio:3/2}
.screen img,.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.screen img{filter:saturate(1.05) contrast(1.03)}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px),
  linear-gradient(180deg,rgba(24,23,28,.12),rgba(24,23,28,.34))}
.screen-lbl{position:absolute;left:10px;bottom:9px;z-index:2;color:var(--lime);
  background:rgba(9,9,12,.62);padding:.24rem .5rem;font-size:.58rem}
.tick{position:absolute;width:10px;height:10px;border:1px solid var(--lime);z-index:2}
.tick.tl{top:6px;left:6px;border-right:0;border-bottom:0}
.tick.tr{top:6px;right:6px;border-left:0;border-bottom:0}
.tick.bl{bottom:6px;left:6px;border-right:0;border-top:0}
.tick.br{bottom:6px;right:6px;border-left:0;border-top:0}

/* ============ PROOF STRIP ============ */
.proof{background:var(--ink-3);border-block:1px solid var(--line-lime)}
.proof .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dim)}
.proof .cell{background:var(--ink-3);padding:clamp(1.6rem,3vw,2.6rem) clamp(1.2rem,2vw,1.8rem)}
@media(max-width:720px){.proof .wrap{grid-template-columns:1fr}}
.bignum{font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,7vw,5rem);line-height:.9;color:var(--lime);
  font-variant-numeric:tabular-nums}
.proof .cap{margin-top:.7rem;color:var(--ash);font-size:.9rem;max-width:34ch}
.proof-foot{color:var(--ash-dim);text-align:center;padding:1.4rem;font-size:.86rem}
.proof-foot b{color:#F4F4F0;font-weight:500}

/* ============ generic dark section headings ============ */
.sec-head{max-width:22ch;font-size:clamp(2.3rem,6vw,4.6rem);margin-bottom:1.5rem}

/* problem: split 01 / 02 */
.problem{background:var(--ink-2)}
.traps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-dim);margin-top:2.5rem;border:1px solid var(--line-dim)}
@media(max-width:720px){.traps{grid-template-columns:1fr}}
.trap{background:var(--ink-2);padding:clamp(1.6rem,3vw,2.4rem)}
.trap .n{font-family:var(--font-mono);color:var(--lime);font-size:.72rem;letter-spacing:.2em}
.trap h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.35rem;margin:.7rem 0 .6rem}
.trap p{color:var(--ash);font-size:.95rem}
/* long titles: same card, set as a sentence instead of a two-word label.
   Type borrowed from the page's other sentence-length settings (.lede/.quote scale,
   display-face tracking of -.01em used on .case .stats b and the .lane prices). */
.trap h3.trap--sentence{text-transform:none;letter-spacing:-.01em;
  font-size:clamp(1.2rem,1.6vw,1.35rem);line-height:1.2;text-wrap:balance}
.third{margin-top:2.5rem;padding:clamp(1.6rem,3vw,2.4rem);border:1px solid var(--line-lime);
  display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.third .slab{font-size:clamp(1.4rem,3vw,2.2rem);flex:1;min-width:280px}

/* ============ MOAT (cream breath) ============ */
.paper{background:var(--paper);color:var(--paper-ink)}
.paper .lede{color:var(--ash-paper)}
.paper .eyebrow{color:var(--moss-deep)}
.paper .eyebrow::before{background:var(--moss-deep)}
.paper .kanji{color:#18171C;opacity:.05}
/* the existing 2x2 .traps grid, re-skinned for a cream section (value-prop block) */
.paper .traps{background:var(--line-paper);border-color:var(--line-paper)}
.paper .trap{background:var(--paper)}
.paper .trap .n{color:var(--moss-deep)}
.paper .trap h3{color:var(--ink)}
.paper .trap p{color:var(--ash-paper)}
.moat .body{max-width:60ch;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.5;color:#2a2a24}
.moat .body b{font-weight:700}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem}
@media(max-width:800px){.tools{grid-template-columns:1fr}}
.tool{border:1px solid var(--line-paper);padding:1.6rem;background:rgba(24,23,28,.02);transition:transform .3s var(--e-out),border-color .3s}
.tool:hover{transform:translateY(-4px);border-color:var(--moss-deep)}
.tool .tn{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;color:var(--moss-deep)}
.tool h4{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.15rem;margin:.7rem 0 .5rem;color:var(--ink)}
.tool p{font-size:.9rem;color:var(--ash-paper)}
.kicker{margin-top:3rem;font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.4rem,3.4vw,2.4rem);line-height:1.02;max-width:20ch;color:var(--ink)}

/* ============ ACRO demo (dark console). NOTE: the .jarvis* class names below are
   legacy style hooks only; the product name in all visible copy is Acro. ============ */
.jarvis{background:radial-gradient(120% 120% at 80% 0%,#20202b 0%,var(--ink) 55%)}
.jarvis-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
@media(max-width:860px){.jarvis-grid{grid-template-columns:1fr}}
.console{position:relative;aspect-ratio:5/4;border:1px solid var(--line-lime);background:rgba(9,9,12,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;overflow:hidden}
.console .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(110,255,130,.03) 3px 4px);pointer-events:none}
.orb{position:relative;width:150px;height:150px}
.orb i{position:absolute;inset:0;border:1px solid var(--lime);border-radius:50%;opacity:.0;animation:pulse 3s var(--e-io) infinite}
.orb i:nth-child(2){animation-delay:1s}.orb i:nth-child(3){animation-delay:2s}
.orb b{position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle,var(--lime),var(--mint));box-shadow:0 0 30px rgba(110,255,130,.5)}
@keyframes pulse{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.4);opacity:0}}
.console .lbl{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;color:var(--ash)}

/* ============ OFFERS ============ */
.offers{background:var(--ink)}
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dim);margin-top:2.6rem;border:1px solid var(--line-dim)}
@media(max-width:820px){.lanes{grid-template-columns:1fr}}
.lane{background:var(--ink);padding:clamp(1.7rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.9rem;position:relative}
.lane.feat{background:var(--ink-2);outline:1px solid var(--line-lime);outline-offset:-1px}
.lane .ln{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;color:var(--lime)}
.lane h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.5rem;line-height:1}
.lane p{color:var(--ash);font-size:.92rem;flex:1}
.lane .price{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:#F4F4F0;border-top:1px solid var(--line-dim);padding-top:.9rem}
.lane .price s{color:var(--ash-dim);text-decoration:none}
.lane .tag{position:absolute;top:0;right:0;background:var(--lime);color:var(--ink);font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.14em;padding:.28rem .6rem}

/* ============ CASE STUDIES ============ */
.cases{background:var(--ink-3)}
.case{display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;padding-block:clamp(2.4rem,5vw,3.6rem);
  border-top:1px solid var(--line-dim);align-items:start}
.case:last-of-type{border-bottom:1px solid var(--line-dim)}
@media(max-width:820px){.case{grid-template-columns:1fr;gap:1rem}}
.case .who{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;color:var(--lime)}
.case h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,4vw,3rem);
  line-height:.94;margin:.8rem 0}
.case p{color:var(--ash);font-size:.98rem;max-width:52ch}
.case .stats{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.4rem}
.case .stats div{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--ash)}
.case .stats b{display:block;font-family:var(--font-display);font-weight:900;font-size:1.7rem;color:var(--lime);
  letter-spacing:-.01em;margin-bottom:.2rem;font-variant-numeric:tabular-nums}
/* testimonial still + quote */
.testi{position:relative;width:132px;height:132px;border-radius:50%;overflow:hidden;
  border:1px solid var(--line-lime);margin:1.2rem 0 .6rem}
.testi img{width:100%;height:100%;object-fit:cover;display:block}
.playbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(9,9,12,.34);color:var(--lime);border:0;cursor:pointer;font-size:1.25rem;
  transition:background .18s var(--e-io)}
.playbtn:hover{background:rgba(9,9,12,.12)}
.vlabel{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;color:var(--ash-dim);text-transform:uppercase}
.quote{border-left:2px solid var(--lime);padding-left:1.2rem;margin-top:1.8rem;font-size:clamp(1.02rem,1.5vw,1.2rem);
  line-height:1.5;color:#F4F4F0;font-style:normal;max-width:48ch}
.quote cite{display:block;margin-top:.9rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  color:var(--lime);font-style:normal}

/* ============ WHO WE BUILD FOR (cream, warm) ============ */
.who h2{font-size:clamp(2.4rem,6.5vw,5rem);max-width:16ch}
.who .body{max-width:56ch;font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.5;color:#2a2a24;margin-top:1.4rem}
.who .virt{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2.2rem}
.who .virt span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-paper);padding:.5rem .9rem;color:var(--ink)}

/* ============ FOUNDER ============ */
.founder{background:var(--ink-2)}
.founder-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:2.5rem;align-items:start}
@media(max-width:820px){.founder-grid{grid-template-columns:1fr}}
.founder .body{color:var(--ash);font-size:1rem;line-height:1.6;max-width:58ch}
.founder .body b{color:#F4F4F0;font-weight:500}
.credits{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.credits div{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--ash);
  padding-bottom:.5rem;border-bottom:1px solid var(--line-dim)}
.credits div b{color:var(--lime)}

/* ============ FINAL CTA ============ */
.final{background:var(--ink);text-align:center;border-top:1px solid var(--line-lime)}
.final h2{font-size:clamp(2.6rem,9vw,7rem);margin-bottom:1.6rem}
.final p{max-width:50ch;margin:0 auto 2rem;color:var(--ash)}
.final .scar{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--lime);margin-top:2rem}

/* ============ FOOTER ============ */
.foot{background:var(--ink-3);border-top:1px solid var(--line-dim);padding-block:3rem}
.foot .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
.foot .mono{color:var(--ash-dim)}
.foot .fk{font-family:var(--font-display);font-weight:900;color:#fff;opacity:.08;font-size:2rem}

/* ============ LAYERED BRAND IMAGES + EXTRA LINE-WORK ============ */
.rmark{position:absolute;z-index:0;pointer-events:none;user-select:none}
.rmark img{display:block;width:100%;height:auto}
.final{overflow:hidden}
.final .rmark{right:-8%;top:52%;transform:translateY(-50%);width:min(56vw,600px);opacity:.08}
.who{position:relative;z-index:2}
.who .wrap{position:relative;z-index:2}
.who-panel{position:relative;width:fit-content;max-width:100%}
.who-panel .tick{width:16px;height:16px}
.who-panel .tick.tl{top:-16px;left:-20px}
.who-panel .tick.tr{top:-16px;right:-20px}
.who-panel .tick.bl{bottom:-16px;left:-20px}
.who-panel .tick.br{bottom:-16px;right:-20px}
.jarvis-widget{display:flex;justify-content:center}
.jarvis-widget iframe{max-width:100%}
.who-arrow{position:absolute;left:0;bottom:0;width:clamp(282px,40.5vw,528px);z-index:1;pointer-events:none;opacity:1}
.who-arrow img{display:block;width:100%;height:auto}
.who h2,.who .body{text-shadow:0 0 4px var(--paper),0 0 8px var(--paper),0 0 12px var(--paper),0 0 16px var(--paper)}
/* Green ramp + thin ink stroke. paint-order puts the stroke BEHIND the fill so the
   gradient stays intact; chained drop-shadows compound and smear, so never use those. */
/* Green ramp plus a thin ink outline.
   -webkit-text-stroke must NOT sit on the same element as background-clip:text; stacking
   them makes Chrome drop the clipped gradient and paint only the stroke (hollow letters).
   So the gradient element keeps a clean fill path and the outline rides an ::after overlay
   that duplicates the word with a transparent fill. Chained drop-shadows are also out: they
   compound into a smeared halo. */
.who h2 .grn{position:relative}
.who h2 .grn::after{content:attr(data-t);position:absolute;left:0;top:0;pointer-events:none;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:.028em var(--ink)}

/* The lime->mint ramp is built for ink backgrounds. On cream it measures about 1.2:1 and
   the words dissolve, so paper sections get the same ramp pitched down into the moss
   range the eyebrows and bullets already use. Both ends clear WCAG AA for large text
   (4.8:1 at the lime end, 4.2:1 at the moss end, against --paper). Dark sections are
   untouched: this only fires inside .paper. */
.paper .grn{background-image:linear-gradient(93deg,var(--lime-deep) 20%,var(--moss-deep) 110%)}

/* .grn pairs background-clip:text with color:transparent, so an engine that cannot clip
   to the glyphs paints nothing at all. Hand those a solid fill instead of invisible text. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grn{color:var(--lime)}
  .paper .grn{color:var(--moss-deep)}
}
.prob-head{display:grid;grid-template-columns:1.2fr .8fr;gap:2.4rem;align-items:center;margin-bottom:.6rem}
.telem{position:absolute;top:1.1rem;right:clamp(1.25rem,4vw,3rem);z-index:3;color:var(--ash-dim)}
.paper .telem{color:var(--ash-paper)}
.xhair{position:absolute;z-index:1;width:14px;height:14px;pointer-events:none}
.xhair::before,.xhair::after{content:"";position:absolute;background:var(--line-lime);opacity:.55}
.xhair::before{left:50%;top:0;width:1px;height:100%}
.xhair::after{top:50%;left:0;height:1px;width:100%}
@media(max-width:860px){.prob-head{grid-template-columns:1fr;gap:1.6rem}.who-arrow{width:80vw;left:0;bottom:0;opacity:.34}}

/* ============ MOBILE ============ */
@media(max-width:640px){
  .wrap{padding-inline:1.25rem}
  .section{padding-block:3.2rem}
  .hero{min-height:auto;padding-block:2.25rem 3rem}
  .hero h1{font-size:clamp(2.5rem,12vw,4rem);overflow-wrap:break-word}
  .hero .kanji{font-size:150vw;right:-40%;top:36%;opacity:.05}
  .hero .reg[style*="bottom"]{display:none}
  .hero .hair{display:none}
  .hero .cta-row{flex-direction:column;align-items:stretch}
  .hero .cta-row .btn{width:100%;justify-content:center}
  .craft{max-width:190px;margin-top:1rem}
  .eyebrow{margin-bottom:1.1rem}
  .sec-head{font-size:clamp(2.1rem,10.5vw,3.4rem)}
  .third{flex-direction:column;align-items:flex-start;gap:1rem}
  .third .slab{font-size:clamp(1.5rem,8vw,2rem)}
  .moat .body,.who .body{font-size:1.08rem}
  .kicker{font-size:clamp(1.4rem,7vw,2rem)}
  .jarvis-grid{gap:2rem}
  .console{aspect-ratio:4/3}
  .case h3{font-size:clamp(1.7rem,8.5vw,2.4rem)}
  .case .stats{gap:1.1rem}
  .who h2{font-size:clamp(2.2rem,11vw,3.4rem)}
  .final h2{font-size:clamp(2.3rem,12vw,3.8rem)}
  .founder-grid{gap:1.4rem}
  .foot .wrap{flex-direction:column;align-items:flex-start;gap:.9rem}
  .foot .fk{display:none}
  .nav .wrap{height:56px}
}
@media(max-width:380px){
  .hero h1{font-size:clamp(2.2rem,11.5vw,3.4rem)}
  .bignum{font-size:3.2rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
/* CCTV signal-lock: the pixel-resolve overlay. No z-index, so it paints above the
   img but below .screen::after (scanlines stay on top) and below the z-index:2 labels. */
.pixfx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:block;image-rendering:pixelated}
.screen .pixfx{filter:saturate(1.05) contrast(1.03)}

/* ============================================================================
   craft/d-current.css · design test D: the current site, animated
   Part one (above) is the staging homepage's own stylesheet, lifted verbatim
   with the fonts as files. Part two is this page: the bar fixed, the pinned
   stages, and the scenes the notes asked for. Layout stays where it is; the
   motion is the change.
   ========================================================================== */
:root{--nav-h:62px;--gutter:clamp(1.25rem,4vw,3rem)}
@media(max-width:640px){:root{--nav-h:56px}}
/* a fixed bar: a sticky one is sampled as the ground behind a headline that
   scrolls under it, and the stages need a known top edge */
.nav{position:fixed;top:0;left:0;right:0}
body{padding-top:var(--nav-h)}
/* Nothing in main may widen the page on a phone: the kanji, the gears and the door numerals hang past the edge on purpose. clip, never hidden, so the sticky stages still stick (the interior kit does the same). */
main{overflow-x:clip}
[data-sc-act]{position:relative}
.telem{z-index:3}
.stage,.sc-stage.stage{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));overflow:clip;
  display:flex;flex-direction:column;justify-content:center}
.stage .wrap{width:100%}
.stage .section-pad{padding-block:0}

/* ---- hero: the kit's own open, with the kanji receding ---- */
.hero .kanji{will-change:transform}
.hero .stripes span{transform:scaleX(calc(.35 + var(--sc-p,0) * 1.3))}
.hero .stripes span:nth-child(2){transform:scaleX(calc(.6 + var(--sc-p,0) * .8))}
.hero .stripes span:nth-child(3){transform:scaleX(calc(.2 + var(--sc-p,0) * 1.6))}

/* ---- the stakes: the quote, large, written through the scan ---- */
/* the scan module inserts its canvas into the scanned element's parent and offsets it from
   that parent's rect, so the parent must be the containing block */
.quote--big{position:relative;border-left:3px solid var(--lime);padding-left:clamp(1rem,2.4vw,1.8rem);margin-top:3rem;max-width:none}
.quote--big .q__scan{position:relative;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.7rem,4.4vw,3.9rem);line-height:1.02;letter-spacing:-.015em;color:#F4F4F0;font-style:normal}
.quote--big .q__words{font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;max-width:19ch;text-wrap:balance;margin:0}
.quote--big cite{margin-top:1.2rem}

/* ---- the four gaps: the board is over them, and the tiles chew it away ---- */
.field{position:relative;isolation:isolate;margin-top:2.5rem;border:1px solid var(--line-dim);background:var(--ink-2)}
.field .traps{margin-top:0;border:0}
.field__src{display:none}
.field__cv{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);z-index:1;pointer-events:none;display:block;max-width:none}
.field::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.18) 2px 3px);opacity:var(--scr,1)}
.field__lbl{position:absolute;left:10px;bottom:9px;z-index:3;color:var(--lime);background:rgba(9,9,12,.72);padding:.24rem .5rem;font-size:.58rem;opacity:var(--scr,1)}
.field .tick{z-index:3;opacity:var(--scr,1)}
.gaps__line{margin-top:2.6rem;font-size:clamp(1.8rem,4.2vw,3.5rem);max-width:none}

/* ---- the name on it: the sentence assembles a word at a time, then the ground turns ---- */
.silence{background:var(--ink-3)}
.silence__stage{background:var(--ink-3);color:#F4F4F0;text-align:center;
  transition:background .34s cubic-bezier(.4,0,.2,1),color .34s cubic-bezier(.4,0,.2,1)}
.silence__stage.is-lit{background:var(--lime);color:var(--ink)}
.silence__line{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.3rem,7.4vw,7.2rem);line-height:.9;letter-spacing:-.02em;max-width:15ch;margin-inline:auto;text-wrap:balance;
  transform-origin:50% 50%;will-change:transform}
.silence__line .w{display:inline-block;transform-origin:50% 62%;will-change:transform,opacity}
.silence__stage .telem{color:var(--ash-dim);transition:color .34s}
.silence__stage.is-lit .telem{color:rgba(24,23,28,.62)}
.silence__stage .reg{transition:color .34s}
.silence__stage.is-lit .reg{color:rgba(24,23,28,.62)}
.silence__stage .hair{transition:background .34s}
.silence__stage.is-lit .hair{background:rgba(24,23,28,.18)}

/* ---- what we build: the craft on the gantry resolves as you arrive ---- */
.build .prob-head{align-items:center;margin-bottom:0}
.build .traps{margin-top:2.5rem}
.kicker--big{font-size:clamp(1.8rem,4.6vw,3.6rem);max-width:17ch;line-height:.96}

/* ---- who you become: small line, then the words at full size, the pilot seat beside ---- */
.change{background:var(--ink)}
.change__stage .kanji{right:-3vw;top:-4%;font-size:min(34vw,420px);will-change:transform}
.change__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.change__h2{max-width:none;margin-bottom:1rem}
.change__from{display:block;font-family:var(--font-body);font-weight:500;text-transform:none;letter-spacing:0;
  font-size:clamp(1.1rem,2vw,1.6rem);line-height:1.3;color:var(--ash);margin-bottom:.6rem}
.change__big{display:block;font-size:clamp(3rem,8.4vw,7.8rem);line-height:.86;letter-spacing:-.03em;color:var(--lime)}
.change__side{display:flex;flex-direction:column;gap:1.4rem}
.change__side .screen{width:min(100%,340px);margin-inline:auto}
.change__lines{display:flex;flex-direction:column;gap:.9rem}
.change__lines p{font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.4;color:#F4F4F0;padding-left:1rem;border-left:1px solid var(--line-lime);margin:0}
.change .lede{max-width:44ch}

/* ---- the plan: the wire draws through the three steps, the mechanism turns behind ---- */
.plan{overflow:hidden}
.plan__gears{position:absolute;right:-8%;top:4%;width:min(48vw,600px);height:auto;opacity:.11;pointer-events:none;user-select:none;z-index:0;
  transform:rotate(calc(var(--sc-p,0) * 70deg));will-change:transform;filter:grayscale(1) brightness(1.7)}
.plan .wrap{position:relative;z-index:1}
.plan__wire{display:block;width:100%;height:auto;margin-top:2.4rem;color:var(--lime);overflow:visible}
.plan__wire *{stroke:currentColor}
.plan__wire .w-ref{stroke:var(--ash-dim)}
.plan .lanes{margin-top:0}
@media(max-width:820px){.plan__wire{display:none}.plan .lanes{margin-top:2.6rem}}

/* ---- the doors travel sideways; the numerals behind them travel slower ---- */
.doors-stage{padding:0;justify-content:center}
.rail{display:flex;gap:clamp(1rem,1.8vw,1.5rem);padding-inline:var(--gutter);align-items:stretch;width:max-content;perspective:1400px}
.rail>*{flex:0 0 auto;width:clamp(19rem,26vw,24rem)}
.rail__lead{width:clamp(20rem,32vw,30rem);display:flex;flex-direction:column;justify-content:center;padding-right:1rem}
.rail__lead .sec-head{font-size:clamp(2rem,3.6vw,3.2rem);margin-bottom:1rem}
.rail .lane{border:1px solid var(--line-dim);background:var(--ink);will-change:transform;transform-style:preserve-3d}
.rail .lane.feat{background:var(--ink-2)}
.rail__note{display:flex;flex-direction:column;justify-content:center;gap:1.4rem;padding-left:.5rem;width:clamp(18rem,26vw,24rem)}
.rail__note p{color:var(--ash)}
.rail__note .cta-row{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.doors-stage .telem{top:1.1rem}
.doors__ghost{position:absolute;left:0;top:50%;z-index:0;pointer-events:none;user-select:none;white-space:nowrap;
  font-family:var(--font-display);font-weight:900;font-size:min(40vh,24rem);line-height:1;color:#fff;opacity:.045;letter-spacing:-.02em;
  transform:translate3d(calc(var(--sc-p,0) * -62vw),-50%,0);will-change:transform}
.doors__ghost span{display:inline-block;width:62vw;padding-left:var(--gutter)}
.doors__read{position:absolute;left:var(--gutter);bottom:1.2rem;z-index:3;color:var(--ash-dim);display:flex;flex-direction:column;gap:.55rem}
.doors__read b{font-weight:400;color:var(--lime)}
.doors__bar{width:150px;height:1px;background:var(--line-dim);position:relative}
.doors__bar::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:calc(var(--sc-p,0) * 100%);background:var(--lime)}
@media(max-width:900px){.rail>*{width:min(78vw,22rem)}.rail__lead{width:min(84vw,24rem)}}

/* ---- why custom: cream kept, the ramp dropped for one moss, twelve cells and a thirteenth ---- */
.mossword{color:var(--moss-deep)}
.moat .kanji{will-change:transform}
.thirteen{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:1.7rem 0 1.9rem}
.thirteen i{width:34px;height:34px;border:1px solid var(--line-paper);display:grid;place-items:center;
  font-family:var(--font-mono);font-style:normal;font-size:.56rem;letter-spacing:.04em;color:var(--ash-paper)}
.thirteen i.is-13{background:var(--moss-deep);border-color:var(--moss-deep);color:var(--paper);width:44px;height:44px;margin-left:10px;font-size:.62rem}
.thirteen .thirteen__lbl{margin-left:.6rem;color:var(--moss-deep)}
.moat .tool{background:rgba(24,23,28,.025)}

/* ---- who we build for: lime, ink type, the arrow and the halos gone ---- */
.who--lime{background:var(--lime);color:var(--ink)}
.who--lime .eyebrow{color:var(--ink)}
.who--lime .eyebrow::before{background:var(--ink)}
.who--lime h2,.who--lime .body{text-shadow:none;color:var(--ink)}
.who--lime h2 .grn{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--paper);-webkit-text-fill-color:var(--paper)}
.who--lime h2 .grn::after{-webkit-text-stroke:.03em var(--ink)}
.who--lime .virt span{border-color:rgba(24,23,28,.4);color:var(--ink)}
.who--lime .who-panel .tick{border-color:var(--ink)}
.who--lime .who-link{color:rgba(24,23,28,.72)}
.who--lime .who-link:hover{color:var(--ink)}
.who--lime .kanji{color:var(--ink);opacity:.06;right:-2vw;bottom:-12%;font-size:min(36vw,460px)}

/* ---- acro: the pointer lights the console ---- */
.jarvis{isolation:isolate}

/* ---- the close: the mark turns as the page ends ---- */
.final .rmark img{transform:rotate(calc(var(--sc-p,0) * 16deg));will-change:transform}

/* ---- V9 copy pass: the new furniture ---- */
.navlinks .navtalk{color:#F4F4F0}
.hero__benefit{margin-top:1rem;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(.95rem,1.3vw,1.15rem);color:var(--mint)}
.hero .cta-row{margin-top:1.8rem}
.stakes__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3.6rem);align-items:center;margin-top:.4rem}
.stakes__grid .screen{max-width:440px;margin-inline:auto}
.bills{margin-top:1.8rem;max-width:56ch;display:flex;flex-direction:column;gap:.6rem}
.bills p{color:#F4F4F0;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.45;padding-left:1rem;border-left:1px solid var(--line-lime);margin:0}
.bills p:first-child{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.15rem,1.8vw,1.5rem);border-left-color:var(--lime)}
.phil{margin:2.8rem 0 0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,2.6vw,2.15rem);line-height:1.15;letter-spacing:-.01em;color:var(--lime);max-width:30ch;text-wrap:balance}
.price__big{display:block;font-family:var(--font-display);font-weight:900;font-size:1.9rem;line-height:1;color:var(--lime);letter-spacing:-.01em;margin-bottom:.45rem}
.lane__link{color:var(--ash);align-self:flex-start}
.brief__value{color:#F4F4F0;font-weight:500}
.brief{margin-top:clamp(2.6rem,5vw,4rem);padding-top:2.4rem;border-top:1px solid var(--line-dim)}
.brief__head{margin-bottom:1.2rem}
.brief__pages{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.4rem)}
.brief__pages a{display:block;border:1px solid var(--line-lime);background:#0b0b0f;transition:transform .3s var(--e-out),border-color .3s}
.brief__pages a:hover,.brief__pages a:focus-visible{transform:translateY(-6px);border-color:var(--lime)}
.brief__pages img{display:block;width:100%;height:auto}
.brief__cap{margin-top:1.2rem;color:var(--ash);font-size:.92rem;max-width:62ch}
@media(max-width:900px){.stakes__grid{grid-template-columns:1fr}.brief__pages{grid-template-columns:repeat(2,1fr)}}

/* ---- phones: pins become sections (the script flips the acts), rails keep panning ---- */
@media(max-width:900px){
  .stage,.sc-stage.stage{position:static;height:auto;min-height:0;padding-block:3rem;display:block}
  .silence__stage{padding-block:4.5rem;min-height:62vh;display:grid;place-items:center}
  .change__grid{grid-template-columns:1fr}
  .doors-stage.sc-stage{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));display:flex;padding-block:0}
  .doors__ghost{font-size:min(30vh,12rem)}
}
@media(max-width:640px){
  .quote--big .q__scan{font-size:clamp(1.5rem,7.6vw,2.4rem)}
  .gaps__line{font-size:clamp(1.6rem,8vw,2.4rem)}
  .silence__line{font-size:clamp(2.2rem,11vw,3.6rem)}
  .change__big{font-size:clamp(2.8rem,13vw,4.6rem)}
  .kicker--big{font-size:clamp(1.6rem,8vw,2.4rem)}
  .field .traps{grid-template-columns:1fr}
}

/* ---- reduced motion: every device resolves to its finished state ---- */
@media(prefers-reduced-motion:reduce){
  .silence__line,.silence__line .w{transform:none!important;opacity:1!important}
  .silence__stage{transition:none}
  .rail>*{transform:none!important;opacity:1!important}
  .plan__gears,.doors__ghost,.final .rmark img,.hero .stripes span{transform:none!important}
  .field__cv,.field::after,.field__lbl{display:none}
}