:root{
  --black:#0C0C0B;
  --black-2:#141412;
  --raise:#1A1A18;
  --beige:#E8E7E1;
  --beige-2:#DDDCD4;
  --ink:#111310;
  --line-d:rgba(237,235,228,.14);
  --line-dot-d:rgba(237,235,228,.22);
  --line-l:rgba(17,19,16,.16);
  --tx-d:#EDEBE4;
  --mut-d:#9C9A92;
  --tx-l:#111310;
  --mut-l:#57564F;
  --ease:cubic-bezier(.22,.61,.24,1);

  /* ---- semantic, theme-aware tokens (dark theme = default) ---- */
  --bg:#0C0C0B;          /* page / dark-section background */
  --bg-raise:#1A1A18;    /* raised dark-section background */
  --panel:#E8E7E1;       /* the light "beige" panel/section surface */
  --panel-2:#DDDCD4;
  --on-bg:#EDEBE4;       /* text on --bg */
  --on-bg-mut:#9C9A92;
  --on-panel:#111310;    /* text on --panel */
  --on-panel-mut:#57564F;
  --line:rgba(237,235,228,.14);
  --line-dot:rgba(237,235,228,.22);
  --line-on-panel:rgba(17,19,16,.16);
  --ink-rgb:237,235,228; /* particle / canvas ink (light on dark) */
  --hero-vignette:var(--hero-vignette);
  color-scheme:dark;
}
/* legacy token names resolve through the semantic layer so existing
   references (var(--black), var(--tx-d), etc.) all work */
:root{
  --black:var(--bg);
  --raise:var(--bg-raise);
  --beige:var(--panel);
  --beige-2:var(--panel-2);
  --ink:var(--on-panel);
  --tx-d:var(--on-bg);
  --mut-d:var(--on-bg-mut);
  --tx-l:var(--on-panel);
  --mut-l:var(--on-panel-mut);
  --line-d:var(--line);
  --line-dot-d:var(--line-dot);
  --line-l:var(--line-on-panel);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--black);color:var(--tx-d);
  font-family:'Inter',-apple-system,sans-serif;font-weight:450;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:rgba(237,235,228,.25)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit;font-size:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{max-width:1420px;margin:0 auto;padding:0 44px}
@media(max-width:700px){.wrap{padding:0 20px}}
.disp{font-family:'Anton','Arial Narrow','Impact','Helvetica Neue',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.012em;line-height:.94;font-stretch:condensed}
html.fontfallback .disp{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;font-weight:800;letter-spacing:-.035em}
.mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.08em}
.plabel{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.plabel::before{content:"( "}.plabel::after{content:" )"}
.dot-label{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:500}
.dot-label i{width:11px;height:11px;border-radius:50%;background:currentColor;opacity:.55;flex:0 0 auto}

/* ---------- grain ---------- */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:210;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}12%{transform:translate(-2%,1%)}25%{transform:translate(1%,-2%)}
  37%{transform:translate(-1%,2%)}50%{transform:translate(2%,1%)}62%{transform:translate(-2%,-1%)}
  75%{transform:translate(1%,2%)}87%{transform:translate(2%,-2%)}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.split-line{display:block;overflow:hidden}
.split-line span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.split-in .split-line span{transform:none}
.split-line:nth-child(2) span{transition-delay:.1s}
.split-line:nth-child(3) span{transition-delay:.2s}

/* ---------- nav ---------- */
nav{
  position:fixed;inset:0 0 auto 0;z-index:120;mix-blend-mode:normal;
  color:var(--tx-d);                                   /* light lettering over dark sections */
  transition:background .5s,color .45s var(--ease);
}
nav.ink{color:var(--tx-l)}                             /* dark lettering over light sections */
nav.scrolled{background:var(--hero-vignette);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
nav.ink.scrolled{background:linear-gradient(180deg,rgba(232,231,225,.94),rgba(232,231,225,0))}
html:has(.menu-ov.open) nav{color:var(--tx-d)}         /* menu overlay is dark → stay light */
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{font-family:'Anton',sans-serif;font-size:20px;letter-spacing:.05em;text-transform:uppercase;color:currentColor;transition:color .45s var(--ease);
  display:inline-flex;flex-direction:column;line-height:.9}
.brand>span{display:block}
.brand .o{display:inline-block}
.nav-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;opacity:.85;transition:opacity .4s,transform .4s var(--ease);
}
.nav-mark svg{width:100%;height:100%;display:block}
.nav-mark path{
  fill:currentColor;fill-opacity:0;                    /* outline state */
  stroke:currentColor;stroke-width:7;stroke-opacity:.9;
  transition:fill-opacity .55s var(--ease),stroke-opacity .55s var(--ease),fill .45s var(--ease),stroke .45s var(--ease);
}
.nav-mark.filled path{fill-opacity:1;stroke-opacity:0} /* docked: complete white */
.nav-mark:hover{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
.nav-mark.pulse{animation:markPulse .9s var(--ease)}
@keyframes markPulse{0%{opacity:.85;transform:translate(-50%,-50%) scale(1)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.22)}100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}}
.nav-in{position:relative}
.menu-btn{
  cursor:pointer;background:none;border:0;padding:10px 2px;
  display:flex;flex-direction:column;gap:6px;align-items:flex-end;
}
.menu-btn span{display:block;width:30px;height:2px;background:currentColor;transition:width .35s var(--ease),background-color .45s var(--ease)}
.menu-btn:hover span:nth-child(2){width:22px}
.menu-ov{
  position:fixed;inset:0;z-index:200;background:rgba(10,10,9,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s;
}
.menu-ov.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
.menu-in{padding-top:24px;height:100%;display:flex;flex-direction:column}
.menu-head{display:flex;justify-content:flex-end;align-items:center;height:76px}
.menu-links{display:flex;flex-direction:column;margin:auto 0 0;max-width:640px}
.menu-links a{
  font-family:'Inter',sans-serif;text-transform:none;letter-spacing:-.02em;font-weight:500;
  font-size:clamp(30px,4.4vw,54px);line-height:1;color:var(--mut-d);
  display:flex;align-items:baseline;gap:clamp(18px,2.4vw,40px);
  padding:clamp(16px,2.3vh,26px) 4px;
  border-top:1px solid rgba(237,235,228,.10);
  transition:color .4s var(--ease),padding-left .4s var(--ease),border-color .4s var(--ease);
  transform:translateY(16px);opacity:0;
}
.menu-links a:last-child{border-bottom:1px solid rgba(237,235,228,.10)}
.menu-ov.open .menu-links a{transform:none;opacity:1}
.menu-ov.open .menu-links a:nth-child(1){transition-delay:.05s}
.menu-ov.open .menu-links a:nth-child(2){transition-delay:.10s}
.menu-ov.open .menu-links a:nth-child(3){transition-delay:.15s}
.menu-ov.open .menu-links a:nth-child(4){transition-delay:.20s}
.menu-ov.open .menu-links a:nth-child(5){transition-delay:.25s}
.menu-ov.open .menu-links a:nth-child(6){transition-delay:.30s}
.menu-ov.open .menu-links a:nth-child(7){transition-delay:.35s}
.menu-links a:hover{color:var(--tx-d);padding-left:22px;border-color:rgba(237,235,228,.28)}
.menu-links a em{
  font-family:'IBM Plex Mono',monospace;font-style:normal;
  font-size:clamp(11px,.9vw,13px);letter-spacing:.18em;color:var(--mut-d);
  min-width:2.4em;align-self:center;opacity:.65;
}
.menu-links a:hover em{opacity:1;color:var(--tx-d)}
.menu-foot{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:26px 4px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut-d);
}
.menu-foot a{color:var(--mut-d);transition:color .35s var(--ease)}
.menu-foot a:hover{color:var(--tx-d)}
@media(max-width:640px){.menu-foot{justify-content:flex-start;gap:8px;flex-direction:column;align-items:flex-start}}
.nav-right{display:flex;align-items:center;gap:10px}
.mute{
  width:38px;height:38px;flex:0 0 auto;background:var(--raise);
  border:1px solid var(--line-d);display:grid;place-items:center;color:var(--tx-d);
  transition:border-color .3s,transform .35s var(--ease);
}
.mute:hover{border-color:var(--mut-d);transform:translateY(-1px)}
.mute svg{width:17px;height:17px;display:block}
.btn-box{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--beige);color:var(--ink);
  font-weight:500;font-size:14.5px;padding:8px 6px 8px 16px;
  transition:transform .4s var(--ease),background .3s;
}
.btn-box .sq{
  width:26px;height:26px;background:var(--ink);color:var(--beige);
  display:grid;place-items:center;font-size:13px;
  transition:transform .4s var(--ease);
}
.btn-box:hover{transform:translateY(-2px)}
.btn-box:hover .sq{transform:rotate(45deg)}

/* ---------- theme sections ---------- */
.sec-dark{background:var(--black);color:var(--tx-d)}
.sec-raise{background:var(--raise);color:var(--tx-d)}
.sec-light{background:var(--beige);color:var(--tx-l)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:96px}
/* ---------- hero background: the image, rebuilt from particles ---------- */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-bg img{display:none}                                /* pixel source only */
.hero-bg::after{content:"";position:absolute;inset:0;z-index:2;background:
  radial-gradient(ellipse 60% 52% at 50% 55%, rgba(12,12,11,.5), rgba(12,12,11,0) 72%),
  linear-gradient(180deg, rgba(12,12,11,.94), rgba(12,12,11,.28) 24%, rgba(12,12,11,.28) 72%, rgba(12,12,11,.96))}
@media(prefers-reduced-motion:reduce){
  .hero-bg canvas{display:none}
  .hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.5}
}
/* the image now carries the brain→drone story; the drawn layers stand down (restorable) */
.hero .hbrain,.hero .hdrone{display:none}
/* ---------- hero background: giant brain → module install loop ---------- */
.hbrain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hb-g{animation:hbBreath 8s ease-in-out infinite;transform-origin:430px 400px}
@keyframes hbBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.hb-line{stroke:var(--tx-d);stroke-linecap:round;stroke-linejoin:round}
.hb-line.giant{stroke-width:2.6;opacity:.16}
.hb-line.giant.dim{stroke-width:1.6;opacity:.1}
.hb-syn{fill:var(--tx-d);opacity:.12;animation:hbSyn 3s ease-in-out infinite}
.hb-syn.s2{animation-delay:.6s}.hb-syn.s3{animation-delay:1.2s}
.hb-syn.s4{animation-delay:1.8s}.hb-syn.s5{animation-delay:2.4s}
@keyframes hbSyn{0%,100%{opacity:.1}50%{opacity:.55}}
.hb-label{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.18em;fill:var(--tx-d);opacity:.5}
.hb-label.mid{font-size:11px;opacity:.45}
.hb-socket{stroke:var(--tx-d);stroke-width:1.6;stroke-dasharray:5 6;opacity:.4}
.hb-uplink{stroke:var(--tx-d);stroke-width:1.2;opacity:.3;stroke-dasharray:2 10;animation:hbMarch 1.5s linear infinite}
@keyframes hbMarch{to{stroke-dashoffset:-24}}
.hb-line.mod{stroke-width:2.4;opacity:.85}
.hb-line.mod.fold{stroke-width:2;opacity:.7}
.hb-line.mod.pin{stroke-width:2;opacity:.6}
.hb-mod-inner{animation:hbModSpin 7s ease-in-out infinite}
@keyframes hbModSpin{0%,20%{transform:rotate(-6deg) scale(.94)}40%{transform:rotate(4deg) scale(1)}60%,100%{transform:rotate(10deg) scale(1)}}
.hb-ringburst{stroke:var(--tx-d);stroke-width:1.6;fill:none}
@media(max-width:900px){.hbrain{opacity:.5}}
@media(prefers-reduced-motion:reduce){
  .hb-g,.hb-syn,.hb-uplink,.hb-mod-inner{animation:none}
  .hb-module,.hb-dock{display:none}
}
/* ---------- hero drone: blueprint quadcopter ---------- */
.hdrone{
  position:absolute;right:clamp(10px,5vw,90px);top:clamp(64px,11vh,130px);
  width:clamp(260px,30vw,480px);pointer-events:none;z-index:1;
  opacity:.5;transform:rotate(-8deg);
}
.hd-bob{animation:hdBob 6.5s ease-in-out infinite}
@keyframes hdBob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-14px) rotate(1.2deg)}
}
.hdrone svg{width:100%;height:auto;display:block}
.hd-line{stroke:var(--tx-d);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hd-line.disc{stroke-width:1.4;stroke-dasharray:3 9;opacity:.65;animation:hdDisc 5s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes hdDisc{to{transform:rotate(360deg)}}
.hd-fill{fill:var(--tx-d)}
.rotor .blades{stroke:var(--tx-d);stroke-width:2.4;stroke-linecap:round;opacity:.8;
  transform-origin:var(--hx) var(--hy);animation:hdSpin .38s linear infinite}
@keyframes hdSpin{to{transform:rotate(180deg)}}
.hd-core{fill:var(--tx-d);animation:hdCore 3s var(--ease) infinite}
@keyframes hdCore{0%,100%{opacity:1}50%{opacity:.55}}
.hd-rings .ring{stroke:var(--tx-d);fill:none;stroke-width:1.3;opacity:0;
  transform-box:fill-box;transform-origin:center;animation:hdRing 3s linear infinite}
.hd-rings .r2{animation-delay:1s}
.hd-rings .r3{animation-delay:2s}
@keyframes hdRing{0%{transform:scale(1);opacity:.55}80%{opacity:0}100%{transform:scale(4.4);opacity:0}}
.hd-callout .co{stroke-width:1.2;opacity:.7}
.hd-dot{fill:var(--tx-d);animation:hdCore 1.6s var(--ease) infinite}
.hd-label{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;fill:var(--tx-d)}
.hd-label.dim{opacity:.55;font-size:10px}
@media(max-width:900px){.hdrone{right:-6vw;top:70px;width:230px;opacity:.28}}
@media(prefers-reduced-motion:reduce){
  .hd-bob,.hd-line.disc,.rotor .blades,.hd-core,.hd-rings .ring,.hd-dot{animation:none}
  .hd-rings{display:none}
}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 40%,transparent 40%,var(--hero-vignette) 100%);pointer-events:none}
.hero-in{position:relative;z-index:2}
.hero-h{font-size:clamp(58px,10.5vw,164px);color:var(--tx-d);text-align:left;width:fit-content;margin-inline:auto}
.hero-h .eyebrow{text-align:left;padding-left:.03em}
.hero-h .w1{font:inherit;font-weight:inherit}
.hero-h .eyebrow span{
  font-family:'Inter',-apple-system,sans-serif;font-weight:500;text-transform:none;
  font-size:clamp(24px,3.4vw,54px);letter-spacing:-.01em;line-height:1.1;
  margin-bottom:0;
}
.hero-h .mini{
  font-family:'Inter',-apple-system,sans-serif;font-weight:500;font-style:normal;text-transform:none;
  font-size:clamp(24px,3.4vw,54px);letter-spacing:-.01em;
  display:inline-block;margin:0 clamp(10px,1.5vw,30px) 0 clamp(8px,1.1vw,22px);vertical-align:baseline;
}
.shine{
  font-style:normal;
  background:linear-gradient(110deg,#B8B6AE 0%,#B8B6AE 38%,#FFFFFF 50%,#B8B6AE 62%,#B8B6AE 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:glare 3.4s linear infinite;
}
@keyframes glare{0%{background-position:130% 0}100%{background-position:-130% 0}}
@media(prefers-reduced-motion:reduce){.shine{animation:none;background-position:50% 0}}
@media(prefers-reduced-motion:reduce){.cv-mark{display:none}}
.hero-h .l2{margin-left:clamp(30px,8vw,150px)}
.hero-h .l3{margin-left:clamp(90px,20vw,420px);display:flex;align-items:center;gap:clamp(12px,2vw,32px)}
.hero-h .arr{font-family:'Inter',sans-serif;font-weight:600;transform:translateY(-4%)}
.hero-sub{
  font-family:'IBM Plex Mono',monospace;font-weight:400;
  font-size:clamp(11px,1.15vw,14px);letter-spacing:.17em;text-transform:uppercase;
  color:var(--mut-d);text-align:center;
  margin-top:clamp(26px,3.4vh,44px);
}
.btn-big{
  display:inline-flex;align-items:center;gap:.85em;
  background:var(--tx-d);color:#101010;border-radius:999px;
  font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:clamp(11px,1.1vw,13.5px);letter-spacing:.18em;text-transform:uppercase;
  padding:clamp(14px,1.6vw,19px) clamp(28px,3.2vw,42px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  will-change:transform;
}
.btn-big .p{opacity:.5;transition:transform .35s var(--ease)}
.btn-big:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.btn-big:hover .p:first-child{transform:translateX(-5px)}
.btn-big:hover .p:last-child{transform:translateX(5px)}
.hero-foot{
  position:relative;z-index:2;display:flex;justify-content:center;gap:clamp(18px,4vw,54px);
  flex-wrap:wrap;padding:56px 20px 40px;
}
.hw-tag{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.18em;color:var(--mut-d);display:flex;align-items:center;gap:12px}
.hw-tag i{width:5px;height:5px;background:var(--mut-d);border-radius:50%}

/* ---------- gap statement + scroll word reveal ---------- */
.gap{position:relative;z-index:2;padding:0 0 170px;margin-top:-36vh;overflow:hidden}
/* ---------- converge (WE CLOSE [mark] THAT GAP) ---------- */
.converge{position:relative}
.cv-wrap{height:170vh;position:relative}
.cv-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}
.cv-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(150px,21vw,320px);aspect-ratio:1/1;
  will-change:opacity,transform;pointer-events:none;
}
.cv-mark path{fill:var(--tx-d)}
.cv-row{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.6vw,44px);white-space:nowrap}
.cv-word{font-size:clamp(40px,9vw,164px);line-height:1;will-change:transform}
.cv-left{transform:translateX(-60vw)}
.cv-right{transform:translateX(60vw)}
.cv-cue{
  position:relative;width:min(92vw,940px);height:clamp(280px,42vh,430px);margin-top:clamp(4px,1vh,14px);
  opacity:0;transition:opacity .7s var(--ease);
}
.cv-cue.in{opacity:1}
.cv-flight .trail{
  fill:none;stroke:rgba(237,235,228,.30);stroke-width:1.5;stroke-dasharray:2 8;stroke-linecap:round;
  animation:trailMove 2.6s linear infinite;
}
@keyframes trailMove{to{stroke-dashoffset:-40}}
.cv-drone{
  position:absolute;left:0;top:0;width:26px;height:26px;offset-rotate:auto;
  animation:droneFly 7.5s ease-in-out infinite;will-change:offset-distance;opacity:0;
}
@keyframes droneFly{
  0%{offset-distance:0%;opacity:0}
  7%{opacity:1}
  62%{offset-distance:100%;opacity:1}
  84%{offset-distance:100%;opacity:1}
  94%{offset-distance:100%;opacity:0}
  100%{offset-distance:100%;opacity:0}
}
.cv-cue-txt{
  position:absolute;left:70%;bottom:-6px;transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut-d);white-space:nowrap;
}
.cv-cue-arr{display:none;position:absolute;left:11%;bottom:22px;transform:translateX(-50%);font-family:'Inter',sans-serif;font-weight:500;font-size:22px;line-height:1;color:var(--tx-d)}
@supports not (offset-path:path("M0 0 L1 1")){
  .cv-drone,.cv-flight{display:none}
  .cv-cue-arr{display:block}
}
@media(prefers-reduced-motion:reduce){
  .cv-wrap{height:auto;padding:140px 0}
  .gap{margin-top:0}
  .cv-left,.cv-right{transform:none}
  .cv-cue{opacity:1}
  .cv-drone,.cv-flight{display:none}
  .cv-cue-arr{display:block}
}
.gap-h{position:relative;font-size:clamp(46px,8.6vw,138px);text-align:center;z-index:2}
.gap-tile{
  position:absolute;left:50%;top:-38%;transform:translateX(-50%);
  width:clamp(180px,24vw,360px);aspect-ratio:3/4;z-index:1;opacity:.9;
  background:
    linear-gradient(180deg,rgba(12,12,11,.15),rgba(12,12,11,.5)),
    repeating-linear-gradient(0deg,#22221F 0 2px,#191917 2px 5px),
    #191917;
  outline:1px solid var(--line-d);
}
.gap-tile::after{content:"";position:absolute;inset:14%;border:1px dashed var(--line-dot-d)}
.gap-body{
  display:grid;grid-template-columns:.42fr 1fr;gap:clamp(40px,6vw,110px);
  margin-top:clamp(90px,14vh,160px);align-items:start;
}
.gap-aside{position:sticky;top:130px}
.ga-track{height:1px;background:var(--line-d);position:relative;margin-bottom:14px}
.ga-track i{position:absolute;left:0;top:-.5px;height:2px;background:var(--tx-d);width:33%;transition:width .5s var(--ease)}
.ga-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:56px}
.ga-arrows{display:flex;gap:18px;font-size:22px}
.ga-arrows button{transition:transform .3s var(--ease)}
.ga-arrows button:last-child:hover{transform:translateX(3px)}
.ga-arrows button:first-child:hover{transform:translateX(-3px)}
.ga-count{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.12em;color:var(--mut-d)}
.slider-paused{color:var(--tx-d)!important}
.ga-n{font-size:clamp(44px,4.6vw,66px);font-weight:600;letter-spacing:-.02em;line-height:1}
.ga-l{margin-top:14px;color:var(--mut-d);font-size:17px;line-height:1.5;max-width:22ch;min-height:4.6em;transition:opacity .3s}
.reveal p{
  font-family:'Inter',-apple-system,sans-serif;
  font-size:clamp(19px,2vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.4;
  margin-bottom:0;max-width:34ch;
}
.reveal p:last-child{margin-bottom:0}
.reveal .w{color:var(--tx-d);opacity:.13;will-change:opacity}
/* "Cognitive Identity" gets the same light-sweep shine as the hero "Brains",
   plus a breathing halo, so it shimmers and glows while you read it. The glow
   lives on the wrapper as a drop-shadow filter because the shine turns the text
   itself into a moving gradient (a text-shadow wouldn't survive that). */
.reveal .pin-wrap{
  position:relative;white-space:nowrap;isolation:isolate;
  will-change:filter;animation:pinBreath 3.4s var(--ease) infinite;
}
.reveal .pin-wrap::before{
  content:"";position:absolute;inset:-.14em -.46em;z-index:-1;border-radius:.6em;
  background:radial-gradient(135% 155% at 50% 55%,rgba(237,235,228,.22),rgba(237,235,228,0) 72%);
}
.reveal .w-pin{
  opacity:1;
  background:linear-gradient(110deg,#CFCDC5 0%,#CFCDC5 32%,#FFFFFF 50%,#CFCDC5 68%,#CFCDC5 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:glare 3.0s linear infinite;
}
@keyframes pinBreath{
  0%,100%{filter:drop-shadow(0 0 7px rgba(255,255,255,.30))}
  50%{filter:drop-shadow(0 0 20px rgba(255,255,255,.60))}
}
@media(prefers-reduced-motion:reduce){
  .reveal .pin-wrap{animation:none;filter:drop-shadow(0 0 9px rgba(255,255,255,.4))}
  .reveal .w-pin{animation:none;background-position:50% 0}
}
@media(max-width:900px){
  .gap-body{grid-template-columns:1fr;gap:50px}
  .gap-aside{position:static}
  .ga-l{min-height:0}
}
@media(prefers-reduced-motion:reduce){.reveal .w{opacity:1}}

/* ---------- platform rows (light) ---------- */
.plat{padding:150px 0 120px}
.plat-grid{display:grid;grid-template-columns:.24fr 1fr;gap:40px;align-items:start}
/* ---- platform auto-marquee ---- */
.plat .dot-label{margin-bottom:46px}
.pmarquee{position:relative;padding:6px 0 10px}
.pmq-view{
  position:relative;
  overflow:hidden;
  perspective:1400px;              /* gives the overstretch lean its 3D depth */
  touch-action:pan-y;              /* horizontal swipes drag the track, vertical still scrolls page */
  cursor:grab;
  -webkit-user-select:none;user-select:none;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 1.5%,#000 98%,transparent 100%);
          mask:linear-gradient(90deg,transparent 0,#000 1.5%,#000 98%,transparent 100%);
}
.pmq-view.dragging{cursor:grabbing}
.pmq-view.dragging .pcard{transition:none}
/* while stretched past a boundary, cards stay rigid — no hover-lift jiggle */
.pmarquee.stretch .pcard{transition:none}
.pmarquee.stretch .pcard:hover{transform:none;box-shadow:none;border-color:var(--line-l)}
/* ---- finite carousel: the loop-duplicate group is retired ---- */
.pmq-group[aria-hidden="true"]{display:none}
/* ---- silent end spacer: no words, the physics + blur say it ---- */
.pmq-end{flex:0 0 clamp(34px,4.5vw,72px)}
/* ---- blur haze at the boundary: fades in as you reach the end ---- */
.pmq-edge{
  position:absolute;right:0;top:0;bottom:0;width:clamp(110px,14vw,220px);
  pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(270deg,rgba(0,0,0,.09),transparent 78%);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  -webkit-mask:linear-gradient(270deg,#000 26%,transparent);
          mask:linear-gradient(270deg,#000 26%,transparent);
}
.pmq-edge-left{
  position:absolute;left:0;top:0;bottom:0;width:clamp(110px,14vw,220px);
  pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(90deg,rgba(0,0,0,.09),transparent 78%);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  -webkit-mask:linear-gradient(90deg,#000 26%,transparent);
          mask:linear-gradient(90deg,#000 26%,transparent);
}
.pmq-edge.on{opacity:1}
.pmq-edge.bump{animation:edgeBump .38s cubic-bezier(.22,1,.36,1)}
@keyframes edgeBump{0%{opacity:.3;transform:scaleX(1)}40%{opacity:1;transform:scaleX(1.35)}100%{opacity:1;transform:scaleX(1)}}
.pmq-edge{transform-origin:right center}
.pmq-edge.left{
  right:auto;left:0;transform-origin:left center;
  background:linear-gradient(90deg,rgba(0,0,0,.09),transparent 78%);
  -webkit-mask:linear-gradient(90deg,#000 26%,transparent);
          mask:linear-gradient(90deg,#000 26%,transparent);
}
.pmq-fwd.off{opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.pmq-track{display:flex;width:max-content;will-change:transform}
.pmq-group{display:flex;gap:26px;padding-right:26px}
.pmq-fwd{
  position:absolute;right:clamp(12px,2vw,34px);top:50%;transform:translateY(-50%);z-index:6;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:var(--ink);color:var(--beige);border:1px solid var(--ink);
  display:grid;place-items:center;font-size:26px;line-height:1;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.5);
  transition:transform .3s var(--ease),background .3s,color .3s;
}
.pmq-fwd .cc{display:block;transform:translateX(-1px)}
.pmq-fwd:hover{transform:translateY(-50%) scale(1.07)}
.pmq-fwd:active{transform:translateY(-50%) scale(.94)}
.pmq-fwd.on{background:var(--beige);color:var(--ink)}
.pmq-fwd.on .cc::after{content:"»";margin-left:-4px}
.pcard{
  flex:0 0 clamp(300px,38vw,440px);box-sizing:border-box;
  border:1px solid var(--line-l);background:rgba(0,0,0,.012);
  padding:22px;display:flex;flex-direction:column;gap:16px;
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s var(--ease);
}
.pcard:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:0 26px 60px -34px rgba(0,0,0,.55)}
.pcard .panel{margin:0}
.pcard-body{display:flex;flex-direction:column}
.pcard h3{font-size:clamp(21px,2vw,27px);font-weight:600;letter-spacing:-.015em;line-height:1.12;margin-top:2px}
.pcard .desc{margin-top:11px;color:var(--mut-l);font-size:14.5px;line-height:1.6;max-width:none}
.pcard .fact{margin-top:14px}

/* ===== card 04: 3D flip → exploded cognitive-identity stack =====
   Front face carries the card chrome (border, padding) so the whole card
   appears to rotate. Back face is a full-bleed dark scene. The stack starts
   COLLAPSED (layers merged into one block); once the flip lands, each layer
   glides apart to reveal the glowing identity layer in the middle. */
.pcard-flip{padding:0;border:none;background:none;perspective:1700px;overflow:visible;
  /* keep the base pcard transitions (transform, border-color) AND add box-shadow
     for the hover boundary halo — otherwise setting a new transition here would
     replace them, killing the lift animation */
  transition:transform .5s var(--ease),border-color .5s,box-shadow .38s var(--ease)}
/* subtle boundary + soft halo while the card is being viewed \u2014 draws the eye
   to the active card in the marquee without competing with the flip motion.
   Applied on .flipped (touch, active state) and on :hover (mouse users). */
.pcard-flip.flipped{
  box-shadow:0 0 0 1.5px rgba(150,230,240,.55),
             0 12px 40px rgba(150,230,240,.18)
}
.pcard-flip .flip-in{
  position:relative;flex:1;display:flex;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .85s var(--ease);
}
.pcard-flip.flipped .flip-in{transform:rotateY(180deg)}
.pcard-flip .flip-front,
.pcard-flip .flip-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pcard-flip .flip-front{
  width:100%;box-sizing:border-box;
  border:1px solid var(--line-l);background:rgba(0,0,0,.012);
  padding:22px;display:flex;flex-direction:column;gap:16px;
}
.pcard-flip .flip-back{
  position:absolute;inset:0;transform:rotateY(180deg);
  background:var(--black);color:var(--tx-d);border:1px solid var(--ink);
  display:flex;flex-direction:column;overflow:hidden;
}
.fb-top{
  display:flex;justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;
  color:var(--mut-d);padding:16px 18px 8px;
}
.fb-cap{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  color:var(--mut-d);text-align:center;padding:6px 14px 16px;
}
.fb-svg{flex:1;width:100%;min-height:0}
.fb-lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;fill:var(--mut-d)}
.fb-bright{fill:var(--tx-d)}
.fb-tick{stroke:rgba(237,235,228,.3);stroke-width:1}
/* side labels + ticks hide while collapsed, fade in once expanded */
.fb-side,.fb-tick,.fb-spine{opacity:0;transition:opacity .5s var(--ease) .95s}
.pcard-flip.flipped .fb-side,.pcard-flip.flipped .fb-tick,.pcard-flip.flipped .fb-spine{opacity:1}
/* ---- collapsed → exploded (cascading unfold, bottom-up) ---- */
.lyr{transition:transform .8s var(--ease) .45s;will-change:transform}
.lyr-brL{transform:translate(20px,165px)}
.lyr-brR{transform:translate(-20px,165px)}
.lyr-spindle{transform:translateY(78px)}
.lyr-pcil{transform:translateY(0)}        /* the anchor: everything merges into it */
.lyr-frame{transform:translateY(-55px)}
.lyr-amber{transform:translateY(-118px)}
.lyr-base{transform:translateY(-180px)}
.lyr-base{transition-delay:.45s}
.lyr-amber{transition-delay:.53s}
.lyr-frame{transition-delay:.61s}
.lyr-spindle{transition-delay:.69s}
.lyr-brL,.lyr-brR{transition-delay:.77s}
.pcard-flip.flipped .lyr{transform:none}
/* identity halo breathes once expanded */
.pcil-halo{animation:pcilPulse 2.8s var(--ease) infinite}
@keyframes pcilPulse{0%,100%{opacity:.5}50%{opacity:1}}
/* energy filaments flicker */
.fil{stroke-linecap:round;animation:filFlick 2.1s ease-in-out infinite}
.fil.f2{animation-delay:.7s}
.fil.f3{animation-delay:1.4s}
@keyframes filFlick{0%,100%{opacity:.2}50%{opacity:.95}}
/* synapse dots on the brain shimmer */
.syn{animation:synBlink 2.6s ease-in-out infinite}
.syn.s2{animation-delay:.9s}
.syn.s3{animation-delay:1.7s}
@keyframes synBlink{0%,100%{opacity:.15}50%{opacity:1}}
/* data motes rise from the base up the spine into the brain */
.fb-motes{opacity:0;transition:opacity .6s var(--ease) 1.1s}
.pcard-flip.flipped .fb-motes{opacity:1}
/* mouse-capable devices flip on hover — kept behind a media query so touch
   browsers can't get sticky :hover after a tap (which would fight our
   .flipped state and prevent tap-outside from closing the card) */
@media(hover:hover) and (pointer:fine){
  .pcard-flip:hover{
    box-shadow:0 0 0 1.5px rgba(150,230,240,.55),
               0 12px 40px rgba(150,230,240,.18)
  }
  /* the flip effects are additionally gated by :not(.locked-front) — a click
     on a card adds that class to lock it to the front so the person can read
     the description. The halo above still fires on hover so pointing at a
     locked card still shows feedback; only the flip itself is suppressed. */
  .pcard-flip:hover:not(.locked-front) .flip-in{transform:rotateY(180deg)}
  .pcard-flip:hover:not(.locked-front) .fb-side,
  .pcard-flip:hover:not(.locked-front) .fb-tick,
  .pcard-flip:hover:not(.locked-front) .fb-spine{opacity:1}
  .pcard-flip:hover:not(.locked-front) .lyr{transform:none}
  .pcard-flip:hover:not(.locked-front) .fb-motes{opacity:1}
}
.mote{animation:moteRise 3.8s linear infinite}
@keyframes moteRise{
  0%{transform:translateY(0);opacity:0}
  10%{opacity:.9}
  80%{opacity:.9}
  100%{transform:translateY(-300px);opacity:0}
}
/* cyan side label for the identity callout */
.fb-cy{fill:#BFEFF4}
/* ---- card 01 scene: collapsed \u2192 expanded (everything merges into the lens) ---- */
.l2-in{transform:translateY(148px)}
.l2-st{transform:translateY(80px)}
.l2-px{transform:translateY(0)}           /* the lens is the anchor */
.l2-ch{transform:translateY(-58px)}
.l2-ob{transform:translateY(-140px)}
.l2-ob{transition-delay:.45s}
.l2-ch{transition-delay:.55s}
.l2-st{transition-delay:.65s}
.l2-in{transition-delay:.75s}
/* lens halo breathes; streams march */
.mu-halo{animation:pcilPulse 2.8s var(--ease) infinite}
.flow{animation:dashMove 1.5s linear infinite}
.flow.f2{animation-delay:.5s}
.flow.f3{animation-delay:1s}
@keyframes dashMove{to{stroke-dashoffset:-22}}
/* ---- scenes 02/03/05/06: collapsed \u2192 expanded (merge into each anchor) ---- */
.l3-plan{transform:translateY(140px)}
.l3-gate{transform:translateY(0)}
.l3-out{transform:translateY(-135px)}
.l3-out{transition-delay:.45s}.l3-plan{transition-delay:.65s}
.l4-core{transform:translateY(115px)}
.l4-ad{transform:translateY(0)}
.l4-fleet{transform:translateY(-120px)}
.l4-fleet{transition-delay:.45s}.l4-core{transition-delay:.65s}
.l5-ev{transform:translateY(150px)}
.l5-box{transform:translateY(0)}
.l5-out{transform:translateY(-140px)}
.l5-out{transition-delay:.45s}.l5-ev{transition-delay:.65s}
.l6-obj{transform:translateY(170px)}
.l6-map{transform:translateY(0)}
.l6-seal{transform:translateY(-165px)}
.l6-seal{transition-delay:.45s}.l6-obj{transition-delay:.65s}
@media(prefers-reduced-motion:reduce){
  .pcard-flip .flip-in{transition:none}
  .lyr{transition:none;transform:none!important}
  .fb-side,.fb-tick,.fb-spine{opacity:1;transition:none}
  .pcil-halo,.fil,.syn,.mote,.mu-halo,.flow{animation:none}
  .fil{opacity:.6}
  .syn{opacity:.8}
  .fb-motes{display:none}
}
@media(prefers-reduced-motion:reduce){
  .pmq-track{flex-wrap:wrap;justify-content:center;transform:none!important}
  .pmq-group:nth-child(2){display:none}
  .pmq-end{display:none}
  .pmq-fwd{display:none}
}
.prow-meta{display:flex;align-items:center;gap:0;font-family:'IBM Plex Mono',monospace;font-size:13px;margin-bottom:22px}
.prow-meta .k{letter-spacing:.1em}
.prow-meta .stem{width:26px;height:1px;background:currentColor;opacity:.5;margin:0 0 0 8px}
.prow-meta .num{border:1px solid currentColor;padding:2px 8px;letter-spacing:.1em}
.fact{margin-top:44px}
.fact .n{
  display:inline-block;background:var(--beige-2);padding:6px 14px;
  font-size:clamp(26px,2.4vw,34px);font-weight:600;letter-spacing:-.01em;
}
.fact .l{margin-top:12px;font-size:17px;font-weight:500;line-height:1.4;max-width:24ch}

/* mock media panel — inner console fills the entire panel now so the dark
   bezel bands don't show inside the card. The inner is absolutely positioned
   to lock to the panel's full size regardless of parent centering. */
.panel{
  background:transparent;outline:1px solid rgba(17,19,16,.2);
  aspect-ratio:16/10.6;position:relative;overflow:hidden;
}
.panel .inner{
  position:absolute;inset:0;box-sizing:border-box;
  background:#F1EFE8;color:#141412;padding:26px 28px;
  font-size:clamp(10px,1.05vw,14px);
}
.panel .inner.dark{background:#161614;color:#EDEBE4}
.p-top{display:flex;justify-content:space-between;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:.72em;letter-spacing:.12em;opacity:.6;margin-bottom:1.2em}
.p-line{font-family:'IBM Plex Mono',monospace;font-size:.95em;line-height:1.6}
.p-line .p{opacity:.55}
.p-reply{margin-top:1em;padding-top:1em;border-top:1px dashed rgba(0,0,0,.25);line-height:1.55}
.inner.dark .p-reply{border-top-color:rgba(255,255,255,.2)}
.check-row{display:flex;justify-content:space-between;gap:1em;padding:.55em 0;border-bottom:1px dotted rgba(0,0,0,.22);font-size:.95em}
.inner.dark .check-row{border-bottom-color:rgba(255,255,255,.16)}
.check-row:last-child{border-bottom:0}
.check-row .ok{font-family:'IBM Plex Mono',monospace;font-size:.8em;letter-spacing:.1em}
.bar-row{display:flex;align-items:center;gap:1em;margin:.8em 0;font-size:.92em}
.bar{flex:1;height:.55em;background:rgba(0,0,0,.12);position:relative}
.inner.dark .bar{background:rgba(255,255,255,.14)}
.bar i{position:absolute;inset:0;right:auto;background:currentColor;opacity:.85}
.chipset{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1em}
.chipset span{border:1px solid rgba(0,0,0,.3);padding:.35em .8em;font-family:'IBM Plex Mono',monospace;font-size:.78em;letter-spacing:.1em}
.inner.dark .chipset span{border-color:rgba(255,255,255,.28)}
.big-word{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:2.6em;line-height:1;letter-spacing:.01em;margin:.2em 0 .3em}

/* ---------- deploy (dark, scroll-spy list) ---------- */
.deploy{padding:150px 0 120px}
.deploy-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:70px;align-items:start}
.quote-box{position:sticky;top:120px}
.q-progress{display:flex;align-items:center;gap:0;margin-bottom:10px}
.q-progress .track{flex:1;height:1px;background:var(--line-d);position:relative}
.q-progress .track i{position:absolute;left:0;top:-0.5px;height:2px;background:var(--tx-d);width:33%;transition:width .5s var(--ease)}
.q-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.q-arrows{display:flex;gap:18px;font-size:22px}
.q-arrows button{transition:transform .3s var(--ease);opacity:.9}
.q-arrows button:hover{transform:translateX(2px);opacity:1}
.q-arrows button:first-child:hover{transform:translateX(-2px)}
.q-count{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.12em;color:var(--mut-d)}
.q-label{margin-bottom:26px;color:var(--mut-d)}
.q-text{font-size:clamp(13.5px,1.25vw,16px);line-height:1.65;min-height:8em;color:var(--tx-d)}
.q-src{margin-top:26px;display:flex;align-items:center;gap:14px;color:var(--mut-d);font-size:14px}
.q-src .mark{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-d);display:grid;place-items:center;font-family:'Anton',sans-serif;font-size:18px;color:var(--tx-d)}
.q-src .mark.logo{border:none;border-radius:0;width:46px;height:46px}
.q-src .mark.logo img{width:100%;height:100%;object-fit:contain;display:block}
.svc-head{margin-bottom:36px}
.svc-list{position:relative}
.svc-list{position:relative}
.svc-item{
  display:block;font-size:clamp(40px,5.6vw,86px);font-weight:600;letter-spacing:-.02em;line-height:1.16;
  color:#4B4A45;transition:color .5s var(--ease);cursor:pointer;
  position:relative;z-index:1;
  padding-right:calc(clamp(170px,17vw,270px) + 3vw); /* keep text clear of the preview card */
}
.svc-item.active{color:var(--tx-d)}
.svc-preview{
  position:absolute;right:-2%;top:8%;width:clamp(170px,17vw,270px);aspect-ratio:4/5.1;
  background:rgba(22,22,20,.16);color:var(--tx-d);padding:18px;pointer-events:none;z-index:3;
  border:1px solid rgba(237,235,228,.28);
  box-shadow:0 30px 70px rgba(0,0,0,.35),inset 0 1px 0 rgba(237,235,228,.18);
  transform:rotate(2deg);transition:opacity .5s var(--ease),transform .5s var(--ease),top .55s var(--ease);
  font-size:12px;
}
.svc-preview::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,12,11,0) 36%,rgba(12,12,11,.30) 80%,rgba(12,12,11,.42) 100%);
}
.svc-preview .ph{
  margin:-18px -18px 12px;aspect-ratio:4/2.9;overflow:hidden;background:transparent;
  border-bottom:1px solid rgba(237,235,228,.18);
}
.svc-preview .ph img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.62;mix-blend-mode:screen;                 /* photo layer — glass stays see-through, brighter */
  filter:grayscale(.4) contrast(1.08) brightness(1.35);
  transform:scale(1.04);transition:transform .6s var(--ease),opacity .35s;
}
.svc-preview .t{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:20px;line-height:1.05;margin-bottom:10px}
.svc-preview .d{font-size:11.5px;line-height:1.5;color:#C9C7BF}
.svc-preview .m{margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;opacity:.6}
@media(max-width:1080px){
  .svc-preview{
    position:absolute;right:0;top:8%;width:min(38vw,150px);max-width:none;aspect-ratio:4/5.1;margin:0;
    transform:rotate(2deg);
    background:rgba(22,22,20,.55);
  }
  .svc-preview .ph{aspect-ratio:4/2.6;margin:-18px -18px 10px}
  .svc-preview .ph img{mix-blend-mode:normal;opacity:1;filter:grayscale(.2) contrast(1.05) brightness(1.02)}
  .svc-preview .t{font-size:15px;margin-bottom:7px}
  .svc-preview .d{font-size:9.5px;line-height:1.45}
  .svc-preview .m{font-size:8px;margin-top:8px}
  .svc-item{max-width:60%;padding-right:0}
}

/* ---------- journey ---------- */
.journey{padding-top:130px}
.j-title{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(60px,11.8vw,186px);text-align:center;white-space:nowrap;margin-bottom:90px}
.j-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border-top:1px dotted var(--line-dot-d)}
.j-row:nth-child(even) .j-media{order:-1}
.j-copy{padding:64px 56px 64px 0;display:flex;gap:44px;align-items:flex-start}
.j-row:nth-child(even) .j-copy{padding:64px 0 64px 56px}
.j-step{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.2em;white-space:nowrap;padding-top:10px;color:var(--mut-d)}
.j-copy h3{font-size:clamp(24px,2.5vw,34px);font-weight:600;letter-spacing:-.012em}
.j-copy p{margin-top:16px;color:var(--mut-d);font-size:16.5px;max-width:44ch;line-height:1.7}
.j-media{position:relative;min-height:420px;background:color-mix(in srgb,var(--bg) 84%,var(--on-bg) 8%);outline:1px solid var(--line-d);display:flex;align-items:center;justify-content:center;overflow:visible;padding:44px;perspective:1100px;cursor:pointer}
/* cover face (SLIK-style): visible by default, slides away on hover */
.j-clip{position:absolute;inset:0;overflow:hidden;z-index:6}
.j-media.reveal .j-clip{pointer-events:none}
.j-cover{
  position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 84%,var(--on-bg) 8%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  transition:transform .75s var(--ease),opacity .75s var(--ease);
}
.j-cover::before{content:"";position:absolute;inset:26px;border:1px dashed var(--line-dot-d);pointer-events:none}
.j-cover .cw{
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.015em;
  font-size:clamp(44px,5.4vw,92px);line-height:.95;color:var(--tx-d);text-align:center;
}
.j-cover .cs{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;color:var(--mut-d)}
.j-cover .ch{
  position:absolute;bottom:38px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.2em;color:var(--mut-d);opacity:.8;
}
.j-media.reveal .j-cover{transform:translateY(103%);opacity:.4}
/* panel hidden behind cover until reveal, then pops up */
.j-media .inner{
  width:min(430px,86%);cursor:pointer;position:relative;z-index:1;
  transform-style:preserve-3d;
  opacity:0;transform:translateY(44px) scale(.93);
  transition:transform .65s var(--ease) .12s,box-shadow .65s var(--ease),opacity .6s var(--ease) .12s;
}
.j-media.reveal .inner{opacity:1;transform:none}
.j-media .j-pill{z-index:2;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease) .25s,transform .5s var(--ease) .25s}
.j-media.reveal .j-pill{opacity:1;transform:none}
@media(hover:none){
  .j-cover .ch{font-size:0}
  .j-cover .ch::after{content:"SCROLL IN · TAP TO INSPECT";font-size:9.5px}
}
.j-media .inner::after{
  content:"TAP TO INSPECT";position:absolute;right:10px;bottom:8px;
  font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.18em;opacity:.35;
  transition:opacity .4s;
}
.j-media .inner.popped{z-index:40;box-shadow:0 70px 130px rgba(0,0,0,.8),0 20px 40px rgba(0,0,0,.5)}
.j-media .inner.popped::after{opacity:0}
.j-media.dimmed::before{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:2;
  opacity:1;transition:opacity .5s;
}
.j-pill{
  position:absolute;left:44px;bottom:38px;background:var(--beige);color:var(--ink);
  font-weight:500;font-size:15px;padding:11px 20px;display:inline-flex;gap:10px;align-items:center;
}
@media(max-width:900px){
  .j-row{grid-template-columns:1fr}
  .j-row:nth-child(even) .j-media{order:0}
  .j-copy,.j-row:nth-child(even) .j-copy{padding:44px 0}
  .j-media{min-height:340px}
}

/* ---------- FAQ ---------- */
.faq{padding:150px 0 130px}
.faq-grid{display:grid;grid-template-columns:.55fr 1.45fr;gap:70px}
.faq-aside{position:sticky;top:120px;align-self:start}
.ask-card{margin-top:70px}
.ask-card .mark{width:70px;height:70px;border:1px solid var(--line-d);display:grid;place-items:center;font-family:'Anton',sans-serif;font-size:26px;margin-bottom:22px}
.ask-card .mark.logo{border:none;width:72px;height:72px;margin-left:-6px}
.ask-card .mark.logo img{width:100%;height:100%;object-fit:contain;display:block}
.ask-card p{color:var(--mut-d);font-size:19px;line-height:1.5;max-width:16ch}
.ask-card .btn-box{margin-top:24px}
.faq-h{font-size:clamp(34px,4.4vw,62px);font-weight:600;letter-spacing:-.02em;line-height:1.12;max-width:18ch;margin-bottom:64px}
.faq-item{border-bottom:1px dotted var(--line-dot-d)}
.faq-item:first-of-type{border-top:1px dotted var(--line-dot-d)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
  text-align:left;font-size:clamp(18px,1.9vw,24px);font-weight:500;
  padding:30px 6px;
  transition:background .35s var(--ease),color .35s var(--ease),padding .35s var(--ease),transform .35s var(--ease);
}
/* stacked hover: cursor row lights up, neighbours catch graded bands (depth) */
.faq-item.hv0 .faq-q{background:var(--beige);color:var(--ink);padding-left:24px;padding-right:24px;transform:scale(1.012)}
.faq-item.hv0 .faq-q .dot{background:var(--ink);border-color:var(--ink)}
.faq-item.hv1 .faq-q{background:rgba(232,231,225,.34);padding-left:16px;padding-right:16px}
.faq-item.hv2 .faq-q{background:rgba(232,231,225,.12);padding-left:10px;padding-right:10px}
.faq-q .dot{flex:0 0 10px;height:10px;border-radius:50%;border:1px solid var(--mut-d);transition:background .4s,border-color .4s}
.faq-item.open .faq-q{background:var(--beige);color:var(--ink);padding-left:22px;padding-right:22px}
.faq-item.open .faq-q .dot{background:var(--ink);border-color:var(--ink)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.faq-a p{padding:24px 6px 34px;color:var(--mut-d);font-size:16.5px;max-width:62ch;line-height:1.7}

/* ---------- final CTA ---------- */
.final{position:relative;padding:170px 0 150px;overflow:hidden;text-align:center}
.final::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 50%,transparent 30%,var(--hero-vignette))}
.final .wrap{position:relative;z-index:2}
.final-h{font-size:clamp(54px,9.8vw,156px)}
.final-h .l2{margin-left:clamp(24px,6vw,120px)}
.final-h .l3{display:flex;justify-content:center;gap:clamp(12px,2vw,30px)}
.final .btn-big{margin-top:64px}
@media(max-width:700px){
  /* size to keep "let's build autonomy" and "that proves → itself" each on
     a single line so mobile mirrors the two-line desktop layout. Anton is
     condensed but the "→" and "itself" chunk still won't fit at the old
     display size, so we clamp the font smaller and force nowrap on both. */
  .final-h{font-size:clamp(24px,7vw,36px);line-height:1.05;letter-spacing:-.005em}
  .final-h .split-line span,
  .final-h .split-line{white-space:nowrap}
  .final-h .l3{flex-wrap:nowrap;gap:clamp(8px,2.2vw,18px)}
  .final .btn-big{margin-top:48px}
}

/* ---------- footer ---------- */
footer{padding:80px 0 0;position:relative}
.foot-inner{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:40px;flex-wrap:wrap;
  padding-bottom:48px;
  border-bottom:1px solid var(--line-d);
}
.foot-brand{display:flex;flex-direction:column;gap:8px;max-width:260px}
.foot-brand .fb-name{font-family:'Anton',sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:.04em;color:var(--on-bg)}
.foot-brand .fb-tagline{font-size:13px;color:var(--mut-d);line-height:1.5}
.foot-links{display:flex;gap:clamp(28px,4vw,56px);flex-wrap:wrap}
.foot-links-col{display:flex;flex-direction:column;gap:10px}
.foot-links-col .fl-head{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-d);margin-bottom:4px}
.foot-links-col a{
  font-size:14px;font-weight:450;color:var(--on-bg);opacity:.65;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  display:block;
}
.foot-links-col a:hover{opacity:1;transform:translateX(3px)}
.foot-base{
  margin-top:32px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:36px;font-size:13px;
}
.foot-base .muted{color:var(--mut-d)}
.foot-base a:hover{opacity:.7}

/* ---------- logo particle band ---------- */
.halftone{
  position:relative;height:clamp(260px,36vh,420px);background:#050505;overflow:hidden;
  cursor:pointer;
}
#droneCv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- minimap: minimized badge → click → full board ---------- */
.minimap{
  position:fixed;right:22px;bottom:22px;z-index:150;width:132px;
  background:color-mix(in srgb,var(--bg) 80%,var(--on-bg) 10%);border:1px solid var(--line);padding:12px 12px 10px;
  font-family:'IBM Plex Mono',monospace;color:#EDEBE4;
  cursor:pointer;
  transition:width .55s var(--ease),opacity .4s var(--ease),box-shadow .4s var(--ease);
}
.minimap:hover{box-shadow:0 18px 44px -20px rgba(0,0,0,.65)}
.minimap .rowline{max-height:22px;overflow:hidden}
/* minimized: only the section we're currently at */
.minimap:not(.open) .rowline:not(.on){max-height:0;opacity:0;padding-top:0;padding-bottom:0}
/* open: the full board, rows become navigation */
.minimap.open{width:196px;cursor:default}
.minimap.open .rowline{cursor:pointer}
.minimap.open .rowline:hover{opacity:1}
.minimap .rowline{display:flex;justify-content:space-between;align-items:center;font-size:8.5px;letter-spacing:.1em;padding:3px 0;opacity:.42;transition:opacity .3s,max-height .45s var(--ease),padding .45s var(--ease);text-transform:uppercase}
.minimap .rowline.on{opacity:1}
.minimap .vp{height:2px;background:rgba(237,235,228,.25);margin-top:10px;position:relative}
.minimap .vp i{position:absolute;left:0;top:0;bottom:0;background:#EDEBE4;width:0%}
@media(max-width:820px){.minimap{display:none}}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .deploy-grid,.faq-grid{grid-template-columns:1fr;gap:40px}
  .quote-box,.faq-aside{position:static}
  .pcard{flex-basis:78vw}
  .foot-inner{flex-direction:column;gap:32px}
  .idx{grid-template-columns:1fr auto}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.split-line span{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- careers nav button ---------- */
.careers-nav-btn{font-size:13px;padding:6px 5px 6px 14px}
@media(max-width:520px){.careers-nav-btn{display:none}}

/* ---------- contact nav link (Meta-style, blended) ---------- */
.contact-nav-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;letter-spacing:.04em;
  color:var(--on-bg);opacity:.55;
  transition:opacity .35s var(--ease),color .45s var(--ease);
  text-decoration:none;background:none;border:none;padding:0;
}
.contact-nav-link:hover{opacity:1}
.contact-nav-link svg{width:14px;height:14px;flex:0 0 auto}
nav.ink .contact-nav-link{color:var(--on-panel);opacity:1}
nav.ink .contact-nav-link:hover{opacity:.7}

/* ---------- contact dropdown ---------- */
.contact-drop{position:relative}
.contact-chevron{transition:transform .35s var(--ease);margin-left:2px}
.contact-drop:hover .contact-chevron{transform:rotate(180deg)}
.contact-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:180px;
  background:var(--bg-raise);
  border:1px solid var(--line-dot);
  border-radius:10px;
  padding:6px;
  opacity:0;visibility:hidden;
  transform:translateY(-8px) scale(.96);
  transform-origin:top right;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s;
  z-index:200;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
/* invisible hover bridge so the menu doesn't close between button and dropdown */
.contact-menu::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.contact-drop:hover .contact-menu,
.contact-drop.open .contact-menu{
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s;
}
.contact-drop:hover .contact-chevron,
.contact-drop.open .contact-chevron{transform:rotate(180deg)}
.contact-menu a{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:7px;
  font-size:13.5px;font-weight:500;letter-spacing:.02em;
  color:var(--on-bg);
  text-decoration:none;
  transition:background .25s var(--ease),transform .2s var(--ease);
}
.contact-menu a:hover{background:rgba(237,235,228,.08);transform:translateX(2px)}
.contact-menu a svg{flex:0 0 auto;opacity:.7}
nav.ink .contact-menu{
  background:var(--panel);border-color:var(--line-on-panel);
}
nav.ink .contact-menu a{color:var(--on-panel)}
nav.ink .contact-menu a:hover{background:rgba(17,19,16,.06)}

/* ---------- careers modal overlay ---------- */
.careers-ov{
  position:fixed;inset:0;z-index:250;
  background:rgba(10,10,9,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.careers-ov.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
.careers-inner{max-width:620px;margin:0 auto;padding:100px 32px 80px}
@media(max-width:700px){.careers-inner{padding:90px 20px 60px}}

.careers-close{position:fixed;top:20px;right:32px;z-index:260}
@media(max-width:700px){.careers-close{right:20px}}

.careers-head{margin-bottom:48px}
.careers-head h2{font-family:'Anton',sans-serif;font-size:clamp(36px,5vw,56px);text-transform:uppercase;letter-spacing:.01em;line-height:.96;color:var(--tx-d)}
.careers-head p{margin-top:16px;font-size:15px;color:var(--mut-d);line-height:1.6;max-width:520px}

.careers-form{display:flex;flex-direction:column;gap:28px}
.cf-group{display:flex;flex-direction:column;gap:6px}
.cf-group label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-d)}
.cf-group label .req{color:#e25c5c;margin-left:2px}
.cf-group input,.cf-group select,.cf-group textarea{
  background:var(--raise);border:1px solid var(--line-d);color:var(--tx-d);
  font-family:'Inter',sans-serif;font-size:15px;padding:12px 14px;
  transition:border-color .3s;outline:none;width:100%;
}
.cf-group input:focus,.cf-group select:focus,.cf-group textarea:focus{border-color:var(--mut-d)}
.cf-group textarea{min-height:100px;resize:vertical}
.cf-group select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239C9A92' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.cf-group input[type="file"]{padding:10px 14px;cursor:pointer;font-size:13px}
.cf-group input[type="file"]::file-selector-button{
  background:var(--beige);color:var(--ink);border:0;padding:6px 14px;margin-right:12px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:background .3s}
.cf-group input[type="file"]::file-selector-button:hover{background:var(--beige-2)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:520px){.cf-row{grid-template-columns:1fr}}
.cf-hint{font-size:12px;color:var(--mut-d);margin-top:2px}
.cf-submit{
  margin-top:12px;display:inline-flex;align-items:center;gap:12px;
  background:var(--beige);color:var(--ink);font-weight:600;font-size:15px;
  padding:14px 24px;border:0;cursor:pointer;align-self:flex-start;
  transition:transform .4s var(--ease),background .3s;
}
.cf-submit:hover{transform:translateY(-2px)}
.cf-submit .sq{width:26px;height:26px;background:var(--ink);color:var(--beige);display:grid;place-items:center;font-size:13px;transition:transform .4s var(--ease)}
.cf-submit:hover .sq{transform:rotate(45deg)}

.cf-success{display:none;text-align:center;padding:60px 20px}
.cf-success h3{font-family:'Anton',sans-serif;font-size:32px;text-transform:uppercase;color:var(--tx-d);margin-bottom:12px}
.cf-success p{color:var(--mut-d);font-size:15px;line-height:1.6}