/* NEXA AURA v25 — BROADCAST CHAOS
   cream base · ink · amber · signal red · volt blue · acid
   Clash Display / Satoshi / Khand · sharp corners · hard shadows · solid color */

:root{
  --cream:#f8f5ee; --paper:#efe9dc; --ink:#0d0d0d; --ink2:#151412;
  --amber:#c9962b; --amber-hot:#e8b23a; --rec:#ff2d17; --volt:#2431ff; --acid:#d8ff3d;
  --line:rgba(13,13,13,.16); --line-inv:rgba(248,245,238,.18);
  --g1:#ff2e63; --g2:#b06cff; --g3:#5f7cff; --grad:linear-gradient(100deg,var(--g1),var(--g2) 52%,var(--g3));
  --serif:'Clash Display',system-ui,sans-serif;
  --sans:'Satoshi',system-ui,sans-serif;
  --mono:'Khand',system-ui,sans-serif;
  --ease-boing:cubic-bezier(.34,1.56,.64,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip;max-width:100%}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
::selection{background:var(--acid);color:var(--ink)}

.wrap{max-width:1440px;margin-inline:auto;padding-inline:clamp(20px,4vw,56px)}
.mono{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.serif{font-family:var(--serif)}
.sec{position:relative;padding:clamp(90px,12vw,170px) 0;overflow:hidden}
.sec--ink{background:var(--ink);color:var(--cream)}
.sec--paper{background:var(--paper)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;margin-bottom:26px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--rec)}
.sec--ink .eyebrow{color:var(--amber-hot)}
.h-giant{font-family:var(--serif);font-weight:600;font-size:clamp(42px,7.2vw,108px);line-height:.98;letter-spacing:-.015em}
.h-giant em{font-style:italic;color:var(--amber)}
.sec--ink .h-giant em{color:var(--amber-hot)}
.lede{max-width:620px;font-size:clamp(16px,1.35vw,19px);color:rgba(13,13,13,.72);margin-top:22px}
.sec--ink .lede{color:rgba(248,245,238,.72)}

/* ---------- FX LAYERS ---------- */
#grain{position:fixed;inset:-100px;z-index:96;pointer-events:none;opacity:.07;
  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'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-40px,30px)}50%{transform:translate(30px,-45px)}75%{transform:translate(-25px,-20px)}100%{transform:translate(0,0)}}
#scan{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(13,13,13,.7) 3px 4px)}
#progress{position:fixed;left:0;top:0;height:4px;width:100%;z-index:120;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--rec),var(--amber),var(--volt))}
#confetti{position:fixed;inset:0;z-index:119;pointer-events:none}

/* cursor */
#cur,#curRing{position:fixed;left:0;top:0;z-index:130;pointer-events:none;border-radius:50%;will-change:transform;display:none}
body.has-cursor #cur{display:block}
body.has-cursor #curRing{display:grid}
#cur{width:10px;height:10px;background:var(--rec);mix-blend-mode:difference}
#curRing{width:44px;height:44px;border:1.5px solid var(--ink);display:grid;place-items:center;
  transition:width .3s var(--ease-boing),height .3s var(--ease-boing),background .3s,border-color .3s}
#curRing span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;opacity:0;transition:opacity .2s;color:var(--ink);white-space:nowrap}
body.cur-view #curRing{width:84px;height:84px;background:var(--acid);border-color:var(--acid)}
body.cur-view #curRing span{opacity:1}
body.cur-hide #cur,body.cur-hide #curRing{opacity:0}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.has-cursor *{cursor:none!important}
}
@media (pointer:coarse){#cur,#curRing,#rec{display:none}}
@media (max-width:920px){#rec{display:none}}
.spark{position:fixed;z-index:118;pointer-events:none;font-size:14px;color:var(--amber);will-change:transform,opacity}

/* boot / preloader */
#boot{position:fixed;inset:0;z-index:200;background:var(--ink);color:var(--cream);display:flex;align-items:flex-end;overflow:hidden}
#boot .cols{position:absolute;inset:0;display:flex}
#boot .cols i{flex:1;background:var(--ink);transform-origin:top}
#boot .inner{position:relative;z-index:2;width:100%;padding:clamp(24px,4vw,56px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
#bootPct{font-family:var(--serif);font-weight:600;font-size:clamp(90px,18vw,240px);line-height:.85;letter-spacing:-.02em}
#bootPct sup{font-size:.22em;color:var(--amber-hot);font-family:var(--mono);letter-spacing:.15em}
#bootFeed{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-align:right;color:rgba(248,245,238,.7)}
#bootFeed b{display:block;color:var(--rec);margin-bottom:8px}
#bootFeed b::before{content:"● ";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- NAV ---------- */
#nav{position:fixed;inset:16px 16px auto;z-index:110;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 16px;border:1px solid var(--line);border-radius:999px;
  background:rgba(248,245,238,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#nav .logo{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-.01em;display:flex;gap:6px;align-items:baseline}
#nav .logo i{font-style:normal;color:var(--amber)}
#nav .links{display:flex;gap:2px}
#nav .links a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:8px 11px;border-radius:999px;transition:background .2s,color .2s}
#nav .links a:hover{background:var(--ink);color:var(--cream)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 22px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--cream);
  transition:transform .25s var(--ease-boing),background .2s,color .2s;position:relative;overflow:hidden}
.btn:hover{transform:scale(1.06) rotate(-1.5deg);background:var(--rec);border-color:var(--rec)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}
.sec--ink .btn--ghost{border-color:var(--cream);color:var(--cream)}
.sec--ink .btn--ghost:hover{background:var(--cream);color:var(--ink)}
#nav .btn{padding:10px 18px}
#burger{display:none}
@media (max-width:920px){
  #nav .links{position:fixed;inset:80px 16px auto;flex-direction:column;background:var(--ink);color:var(--cream);
    border-radius:24px;padding:18px;transform:translateY(-16px);opacity:0;pointer-events:none;transition:.3s var(--ease-boing)}
  #nav .links a{color:var(--cream);font-size:14px;padding:12px}
  body.menu-open #nav .links{opacity:1;transform:none;pointer-events:auto}
  #burger{display:inline-flex;flex-direction:column;gap:5px;padding:10px}
  #burger i{width:22px;height:2px;background:var(--ink);transition:.3s}
  body.menu-open #burger i:first-child{transform:translateY(7px) rotate(45deg)}
  body.menu-open #burger i:nth-child(2){opacity:0}
  body.menu-open #burger i:last-child{transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- TICKERS ---------- */
.ticker{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);padding:14px 0;background:var(--cream)}
.ticker--ink{background:var(--ink);color:var(--amber-hot);border-color:var(--line-inv)}
.ticker--amber{background:var(--amber);color:var(--ink);border-color:transparent}
.ticker__track{display:inline-flex;gap:0;will-change:transform;animation:tick var(--dur,26s) linear infinite}
.ticker--rev .ticker__track{animation-direction:reverse}
.ticker__track>span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font-family:var(--mono);font-size:clamp(12px,1.1vw,15px);letter-spacing:.2em;text-transform:uppercase}
.ticker__track .star{color:var(--rec);animation:spin 4s linear infinite;display:inline-block}
.ticker--ink .star{color:var(--acid)}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- HERO ---------- */
#hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;padding-top:120px;overflow:hidden}
#blob{position:absolute;right:-8vw;top:-6vw;width:52vw;height:52vw;min-width:420px;min-height:420px;z-index:0;opacity:.9;
  background:radial-gradient(closest-side,var(--amber-hot),var(--amber) 60%,transparent 72%);
  filter:blur(2px);animation:blob 14s ease-in-out infinite alternate}
@keyframes blob{
  0%{border-radius:52% 48% 61% 39%/44% 59% 41% 56%;transform:rotate(0) scale(1)}
  50%{border-radius:38% 62% 47% 53%/58% 36% 64% 42%}
  100%{border-radius:61% 39% 42% 58%/39% 51% 49% 61%;transform:rotate(28deg) scale(1.08)}}
#hero .wrap{position:relative;z-index:2;padding-bottom:34px}
.hero-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(13,13,13,.65);margin-bottom:3.2vw}
.hero-title{font-family:var(--serif);font-weight:600;line-height:.88;letter-spacing:-.02em;font-size:clamp(40px,12.5vw,196px)}
.hero-title .row{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero-title .row>span{display:inline-block;will-change:transform}
.hero-title .l{display:inline-block;transition:transform .35s var(--ease-boing),color .2s}
.hero-title .l:hover{transform:translateY(-.12em) rotate(6deg) scale(1.12);color:var(--rec)}
.hero-title .row--mid>span{color:transparent;-webkit-text-stroke:2px var(--ink)}
#cycleWrap{display:inline-grid;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
#cycle{font-style:italic;color:var(--amber);display:inline-block;will-change:transform}
.hero-sub{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px;margin-top:4vh}
.hero-sub p{max-width:520px;font-size:clamp(15px,1.3vw,18px);color:rgba(13,13,13,.75)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
#badge{position:absolute;z-index:3;right:clamp(16px,6vw,90px);bottom:22vh;width:132px;height:132px;pointer-events:none}
#badge svg{width:100%;height:100%;animation:spin 12s linear infinite}
#badge text{font-family:var(--mono);font-size:11.5px;letter-spacing:.32em;fill:var(--ink)}
#badge .core{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:var(--rec)}
#rec{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:11px;letter-spacing:.18em;will-change:transform;cursor:none}
#rec i{width:9px;height:9px;border-radius:50%;background:var(--rec);animation:blink 1s steps(1) infinite}
.frames{position:absolute;inset:0;z-index:1;pointer-events:none}
.frame{position:absolute;border:1px solid var(--line);background:rgba(248,245,238,.6);backdrop-filter:blur(4px);border-radius:14px;padding:10px;width:min(220px,26vw);box-shadow:0 24px 60px -30px rgba(13,13,13,.4);will-change:transform}
.frame img{border-radius:8px;aspect-ratio:4/3;object-fit:cover;width:100%}
.frame .ph{border-radius:8px;aspect-ratio:4/3;background:linear-gradient(135deg,var(--paper),#ddd3bd)}
.frame figcaption{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-top:8px;color:rgba(13,13,13,.6)}
.frame .r{color:var(--rec)}
.f1{left:3vw;top:17vh;rotate:-7deg}.f2{right:25vw;top:12vh;rotate:5deg}
.f3{left:27vw;top:11vh;rotate:-3deg}.f4{right:4vw;top:19vh;rotate:8deg}
@media (max-width:920px){.f2,.f3,.f4{display:none}#badge{display:none}.frame{width:min(170px,34vw);padding:7px}.f1{left:auto;right:14px;top:88px;rotate:-5deg}.frame figcaption{font-size:8px}}
@media (max-width:560px){.hero-title .row--mid>span{-webkit-text-stroke:1.4px var(--ink)}#hero{padding-top:104px}}

/* glitch pulse on hero title */
body.glitching .hero-title{animation:glitch .32s steps(2) both}
@keyframes glitch{
  0%{transform:translate(0);text-shadow:none}
  25%{transform:translate(-6px,2px) skewX(-4deg);text-shadow:6px 0 var(--rec),-6px 0 var(--volt)}
  50%{transform:translate(5px,-3px) skewX(3deg);text-shadow:-8px 0 var(--acid),8px 0 var(--rec)}
  100%{transform:translate(0);text-shadow:none}}

/* ---------- GHOST HEADINGS ---------- */
.ghost{position:absolute;top:6%;left:0;white-space:nowrap;z-index:0;pointer-events:none;
  font-family:var(--serif);font-weight:700;font-size:clamp(120px,22vw,340px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(13,13,13,.14);will-change:transform}
.sec--ink .ghost{-webkit-text-stroke:1.5px rgba(248,245,238,.12)}

/* ---------- ABOUT / STATS ---------- */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:end;position:relative;z-index:2}
.about-copy p+p{margin-top:16px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:60px;position:relative;z-index:2}
.stat{border:1.5px solid var(--ink);border-radius:20px;padding:26px 22px;background:var(--cream);
  transition:transform .3s var(--ease-boing),background .2s;rotate:var(--r,0deg)}
.stat:hover{transform:translateY(-8px) rotate(0deg);background:var(--acid)}
.stat b{font-family:var(--serif);font-weight:700;font-size:clamp(44px,5.4vw,84px);line-height:1;display:block}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(13,13,13,.6)}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}

/* ---------- MODEL (ink) ---------- */
.model-title{font-size:clamp(52px,9vw,150px);font-family:var(--serif);font-weight:600;line-height:.95}
.model-title .strike{position:relative;color:rgba(248,245,238,.45)}
.model-title .strike::after{content:"";position:absolute;left:-2%;top:52%;width:104%;height:.09em;background:var(--rec);rotate:-2deg;transform-origin:left;transform:scaleX(var(--sx,1))}
.model-title .win{color:var(--amber-hot);font-style:italic}
.model-copy{max-width:560px;margin-top:26px;color:rgba(248,245,238,.75)}

/* ---------- CITIES / SPLIT-FLAP ---------- */
#board{display:grid;gap:10px;margin-top:44px;position:relative;z-index:2}
.board-row{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line-inv);padding:16px 4px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}
.board-row .city{font-size:clamp(20px,3.4vw,44px);letter-spacing:.1em;display:inline-flex}
.board-row .city b{display:inline-block;min-width:.72em;text-align:center;font-weight:400}
.board-row .tag{font-size:10.5px;color:var(--acid)}
.board-row--hq .city{color:var(--amber-hot)}
.intl{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:rgba(248,245,238,.8)}
.intl span{border:1px solid var(--line-inv);padding:10px 16px;border-radius:999px}

/* ---------- SERVICES ---------- */
.svc{position:relative;border-top:1.5px solid var(--ink);padding:34px 0;display:grid;
  grid-template-columns:90px 1fr auto;gap:24px;align-items:center;overflow:hidden;will-change:transform}
.svc:last-of-type{border-bottom:1.5px solid var(--ink)}
.svc::before{content:"";position:absolute;inset:0;background:var(--amber);transform:scaleY(0);transform-origin:bottom;transition:transform .38s var(--ease-boing);z-index:0}
.svc:hover::before{transform:scaleY(1)}
.svc>*{position:relative;z-index:1}
.svc .n{font-family:var(--mono);font-size:14px;letter-spacing:.2em;transition:transform .5s var(--ease-boing)}
.svc:hover .n{transform:rotate(360deg) scale(1.4)}
.svc h3{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.6vw,54px);line-height:1;transition:transform .3s var(--ease-boing)}
.svc:hover h3{transform:translateX(14px) skewX(-4deg)}
.svc p{max-width:520px;margin-top:8px;color:rgba(13,13,13,.7);font-size:14.5px}
.svc:hover p{color:rgba(13,13,13,.85)}
.svc .spec{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1.5px solid var(--ink);border-radius:999px;padding:10px 14px;white-space:nowrap;
  transition:transform .35s var(--ease-boing),background .2s}
.svc:hover .spec{transform:rotate(-4deg) scale(1.08);background:var(--ink);color:var(--cream)}
@media (max-width:820px){.svc{grid-template-columns:1fr}.svc .spec{justify-self:start}}

/* ---------- WORK TAPE ---------- */
#work{background:var(--ink);color:var(--cream)}
#tapePin{height:100svh;display:flex;align-items:center;overflow:hidden;position:relative}
#tapeTrack{display:flex;gap:clamp(20px,3vw,44px);padding-inline:clamp(20px,6vw,80px);will-change:transform}
.wcard{flex:0 0 auto;width:min(430px,78vw);background:var(--cream);color:var(--ink);border-radius:22px;padding:16px;
  rotate:var(--r,0deg);box-shadow:0 40px 80px -40px rgba(0,0,0,.7);transition:rotate .35s var(--ease-boing),scale .35s var(--ease-boing)}
.wcard:hover{rotate:0deg;scale:1.03}
.wcard .thumb{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#222}
.wcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-boing),filter .3s}
.wcard:hover .thumb img{transform:scale(1.12) rotate(1.5deg)}
.wcard .thumb::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s;
  background:linear-gradient(105deg,rgba(255,45,23,.35),transparent 40%,rgba(255,212,0,.4))}
.wcard:hover .thumb::after{opacity:1}
.wcard .hud{position:absolute;inset:10px 10px auto;display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.wcard .hud .r::before{content:"● ";color:var(--rec);animation:blink 1s steps(1) infinite}
.wcard .meta{padding:16px 8px 8px}
.wcard .meta .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(13,13,13,.55)}
.wcard h3{font-family:var(--serif);font-weight:700;font-size:30px;line-height:1.05;margin:6px 0}
.wcard p{font-size:13.5px;color:rgba(13,13,13,.7)}
.wcard .yt{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1.5px solid var(--rec);padding-bottom:3px}
#tapeEnd{flex:0 0 auto;width:40vw;display:grid;place-items:center}
#tapeEnd a{font-family:var(--serif);font-style:italic;font-size:clamp(30px,4vw,56px);color:var(--amber-hot)}
@media (max-width:820px){#tapePin{height:auto;padding:70px 0}#tapeTrack{flex-direction:column;padding-inline:20px}.wcard{width:100%;rotate:0deg}#tapeEnd{width:100%;padding:30px 0}}

/* ---------- QUOTES ---------- */
.qrow{overflow:hidden;padding:16px 0}
.qtrack{display:flex;gap:22px;width:max-content;will-change:transform;animation:tick var(--dur,60s) linear infinite}
.qrow--rev .qtrack{animation-direction:reverse}
.qcard{flex:0 0 auto;width:min(420px,80vw);background:var(--cream);border:1.5px solid var(--ink);border-radius:18px;padding:26px;rotate:var(--r,0deg);position:relative}
.qcard::before{content:"";position:absolute;top:-12px;left:34px;width:84px;height:24px;background:rgba(201,150,43,.55);rotate:-3deg;border-radius:2px}
.qcard blockquote{font-family:var(--serif);font-size:20px;line-height:1.3;font-weight:500}
.qcard footer{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(13,13,13,.55)}
.qrow:hover .qtrack{animation-play-state:paused}

/* ---------- PROCESS ---------- */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:56px}
.pcard{border:1.5px solid var(--ink);border-radius:20px;padding:24px 18px;background:var(--cream);rotate:var(--r,0deg);
  transition:transform .3s var(--ease-boing),background .2s,rotate .3s var(--ease-boing)}
.pcard:hover{transform:translateY(-10px);rotate:0deg;background:var(--amber);}
.pcard .n{font-family:var(--serif);font-weight:700;font-size:44px;line-height:1;color:var(--rec)}
.pcard h3{font-family:var(--serif);font-size:24px;margin:12px 0 8px}
.pcard p{font-size:13px;color:rgba(13,13,13,.7)}
@media (max-width:1020px){.proc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.proc{grid-template-columns:1fr}}

/* ---------- TEAM ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.tcard{border:1.5px solid var(--cream);border-radius:22px;padding:14px;background:var(--ink2);will-change:transform}
.tcard .por{position:relative;aspect-ratio:4/5;border-radius:14px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 120% at 20% 10%,#3a3327,var(--ink2))}
.tcard .por b{font-family:var(--serif);font-size:110px;font-weight:700;color:var(--amber);opacity:.85}
.tcard .hud{position:absolute;inset:10px 10px auto;display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:rgba(248,245,238,.75)}
.tcard .hud .r::before{content:"● ";color:var(--rec);animation:blink 1s steps(1) infinite}
.tcard h3{font-family:var(--serif);font-size:28px;margin:16px 6px 2px}
.tcard .role{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-hot);margin:0 6px}
.tcard p{font-size:13.5px;color:rgba(248,245,238,.72);margin:10px 6px 6px}
@media (max-width:820px){.team{grid-template-columns:1fr}}

/* ---------- KIT ---------- */
.kit-belt{overflow:hidden;margin-top:50px;border-block:1.5px solid var(--ink);padding:22px 0;background:var(--paper)}
.kit-track{display:flex;gap:16px;width:max-content;animation:tick 34s linear infinite}
.kit-track:hover{animation-play-state:paused}
.kchip{flex:0 0 auto;border:1.5px solid var(--ink);border-radius:16px;padding:16px 20px;background:var(--cream);rotate:var(--r,0deg)}
.kchip b{font-family:var(--serif);font-size:22px;display:block}
.kchip span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(13,13,13,.6)}
.stamp{display:inline-block;margin-top:36px;font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;font-size:12px;
  border:2px solid var(--rec);color:var(--rec);border-radius:12px;padding:14px 20px;rotate:-3deg}

/* ---------- CATEGORIES ---------- */
.cats{margin-top:44px;position:relative;z-index:2}
.cat{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line-inv);padding:20px 6px;
  font-family:var(--serif);font-weight:600;font-size:clamp(24px,4vw,52px);color:rgba(248,245,238,.85);transition:padding-left .3s var(--ease-boing),color .2s}
.cat:last-child{border-bottom:1px solid var(--line-inv)}
.cat:hover{padding-left:26px;color:var(--acid)}
.cat .mono{font-size:10px;color:var(--amber-hot)}

/* ---------- FAQ ---------- */
.faq{margin-top:50px;max-width:860px}
.fq{border-top:1.5px solid var(--ink)}
.fq:last-child{border-bottom:1.5px solid var(--ink)}
.fq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 4px;text-align:left}
.fq button h3{font-family:var(--serif);font-size:clamp(20px,2.4vw,32px);font-weight:600}
.fq .x{font-family:var(--mono);font-size:22px;transition:transform .45s var(--ease-boing);color:var(--rec)}
.fq.open .x{transform:rotate(315deg) scale(1.3)}
.fq .panel{height:0;overflow:hidden}
.fq .panel p{padding:0 4px 26px;max-width:640px;color:rgba(13,13,13,.75)}
.fq .qn{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(13,13,13,.45);margin-right:14px}

/* ---------- ACADEMY TEASER / CTA CARDS ---------- */
.teaser{border:1.5px solid var(--cream);border-radius:26px;padding:clamp(28px,4vw,56px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px;background:var(--ink2);position:relative;overflow:hidden}
.teaser h3{font-family:var(--serif);font-size:clamp(30px,4vw,56px);font-weight:600;line-height:1.02}
.teaser p{color:rgba(248,245,238,.72);max-width:460px;margin-top:10px}

/* ---------- CONTACT ---------- */
#contact .card{border:1.5px solid var(--ink);border-radius:26px;background:var(--paper);padding:clamp(22px,3vw,44px);rotate:-1deg;position:relative;box-shadow:0 40px 90px -50px rgba(13,13,13,.5)}
#contact .card::before,#contact .card::after{content:"";position:absolute;width:110px;height:30px;background:rgba(201,150,43,.5);top:-14px;border-radius:2px}
#contact .card::before{left:8%;rotate:-4deg}#contact .card::after{right:8%;rotate:3deg}
.form-grid{display:grid;gap:18px;margin-top:8px}
.form-grid .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label.f{display:grid;gap:8px}
label.f .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(13,13,13,.6)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--cream);border:1.5px solid var(--ink);border-radius:14px;padding:14px 16px;outline:none;transition:transform .25s var(--ease-boing),border-color .2s,box-shadow .2s;width:100%}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--volt);transform:rotate(.6deg) scale(1.01);box-shadow:6px 6px 0 var(--acid)}
.hidden{display:none}
#send{justify-content:center;font-size:13px;padding:20px;overflow:hidden}
#send .in{display:inline-flex;gap:22px;animation:tick 5s linear infinite}
@media (max-width:640px){.form-grid .two{grid-template-columns:1fr}}
.contact-side{display:grid;gap:14px;align-content:start}
.wa{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1.5px solid var(--ink);border-radius:18px;padding:20px;background:var(--cream);transition:transform .25s var(--ease-boing),background .2s}
.wa:hover{transform:rotate(-1.5deg) scale(1.03);background:var(--acid)}
.wa b{font-family:var(--serif);font-size:22px}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,60px);align-items:start;margin-top:46px}
@media (max-width:920px){.contact-grid{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
footer.ft{background:var(--ink);color:var(--cream);padding:90px 0 30px;position:relative;overflow:hidden}
#talk{display:block;text-align:center;font-family:var(--serif);font-weight:700;font-size:clamp(64px,14vw,220px);line-height:.9;letter-spacing:-.02em;color:var(--cream);will-change:transform}
#talk em{color:var(--amber-hot)}
#talk:hover em{color:var(--rec)}
.ft-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;margin-top:70px;border-top:1px solid var(--line-inv);padding-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(248,245,238,.65)}
.ft-meta a:hover{color:var(--acid)}
#wrapline{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,40px);color:var(--amber-hot);text-align:center;margin-top:40px;letter-spacing:0;text-transform:none}

/* ---------- REVEALS ---------- */
[data-rev]{opacity:0}
.no-js [data-rev],[data-rev].on{opacity:1}

/* ---------- BROCHURE ---------- */
.spread{min-height:88svh;display:grid;align-content:center;border-top:1.5px solid var(--line);position:relative;padding:80px 0}
.spread .pg{position:absolute;top:26px;right:0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(13,13,13,.5)}
.sec--ink .spread{border-color:var(--line-inv)}
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.gcard{border:1.5px solid var(--ink);border-radius:18px;padding:22px;background:var(--cream);rotate:var(--r,0deg);transition:transform .3s var(--ease-boing),rotate .3s var(--ease-boing),background .2s}
.gcard:hover{rotate:0deg;transform:translateY(-6px);background:var(--acid)}
.gcard b{font-family:var(--serif);font-size:22px;display:block;margin-bottom:6px}
.gcard p{font-size:13px;color:rgba(13,13,13,.7)}
@media (max-width:900px){.grid6{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid6{grid-template-columns:1fr}}
.areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.areas span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:999px;padding:9px 14px;background:var(--cream)}
.price3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.prc{border:1.5px solid var(--ink);border-radius:22px;padding:28px;background:var(--cream);rotate:var(--r,0deg);transition:.3s var(--ease-boing)}
.prc:hover{rotate:0deg;transform:translateY(-8px)}
.prc.hot{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.prc .from{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.prc b{font-family:var(--serif);font-weight:700;font-size:clamp(34px,4vw,52px);display:block;margin:6px 0}
.prc p{font-size:13.5px;opacity:.75}
@media (max-width:900px){.price3{grid-template-columns:1fr}}
.case{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:40px}
@media (max-width:900px){.case{grid-template-columns:1fr}}

/* ---------- ACADEMY EXTRAS ---------- */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:46px}
@media (max-width:900px){.split2{grid-template-columns:1fr}}
.listcard{border:1.5px solid var(--ink);border-radius:22px;padding:26px;background:var(--cream);rotate:var(--r,0deg)}
.listcard.no{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.listcard h3{font-family:var(--serif);font-size:26px;margin-bottom:14px}
.listcard li{list-style:none;display:flex;gap:12px;padding:9px 0;font-size:14.5px}
.listcard li b{color:var(--rec);font-family:var(--mono)}
.listcard.no li b{color:var(--acid)}
.gearline{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;border-top:1px solid var(--line);padding:18px 4px;font-size:15px}
.gearline:last-child{border-bottom:1px solid var(--line)}
.gearline b{font-family:var(--serif);font-size:24px}
.gearline .mono{font-size:10px;color:rgba(13,13,13,.55)}
.gearline .arr{color:var(--rec);font-size:22px}
.price2{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:44px}
@media (max-width:900px){.price2{grid-template-columns:1fr}}
.seat{font-family:var(--serif);font-weight:700;font-size:clamp(90px,16vw,220px);line-height:.85;color:var(--amber)}
.strike-price{text-decoration:line-through;text-decoration-color:var(--rec);text-decoration-thickness:4px;opacity:.55;font-size:.5em;vertical-align:middle;margin-left:14px}

/* ---------- REDUCED MOTION / PRINT ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #grain,#scan{display:none}
  [data-rev]{opacity:1}
}
@media print{
  #nav,#grain,#scan,#cur,#curRing,#progress,#boot,.ticker,footer.ft,.btn,#confetti{display:none!important}
  body{background:#fff;color:#000}
  .sec,.spread{min-height:0;padding:24px 0;page-break-inside:avoid}
  .sec--ink{background:#fff;color:#000}
  [data-rev]{opacity:1!important}
  .spread{border-color:#ccc}
}


/* ============ V28 LAYER: pod-gradient accents on the amber system ============ */
/* boot globe */
#boot{display:grid;place-items:center}
#globeWrap{will-change:transform}
#globe{width:min(78vw,520px);height:auto;display:block}
#boot .inner{position:absolute;left:0;right:0;bottom:0}
#bootPct{font-size:clamp(40px,7vw,84px)}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:250}

/* gradient hovers everywhere */
.svc:hover::before{background:var(--grad)}
.svc:hover h3,.svc:hover p,.svc:hover .n{color:#0d0d0d}
.svc:hover .spec{background:#0d0d0d;color:#f8f5ee;border-color:#0d0d0d}
.stat b{font-family:var(--mono);font-weight:700;font-size:clamp(30px,4vw,58px);letter-spacing:-.02em}
.stat:hover{background:var(--grad)}
.stat:hover b,.stat:hover span{color:#0d0d0d}
.pcard:hover{background:var(--grad)}
.pcard:hover .n,.pcard:hover h3,.pcard:hover p{color:#0d0d0d}
.gcard:hover{background:var(--grad)}
.gcard:hover b,.gcard:hover p{color:#0d0d0d}
.wa:hover{background:var(--grad)}
.wa:hover b,.wa:hover span,.wa:hover .mono{color:#0d0d0d}
.cat:hover{color:inherit;}
.cat:hover span:first-child{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.prc:hover{background:linear-gradient(120deg,rgba(255,46,99,.10),rgba(95,124,255,.10))}
#talk:hover em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
input:focus,select:focus,textarea:focus{border-color:var(--g3);box-shadow:6px 6px 0 rgba(95,124,255,.4)}

/* tidal-wave buttons */
@keyframes wave{to{background-position:-250% 0}}
.btn:hover{background:linear-gradient(100deg,var(--g1),var(--g2) 30%,var(--g3) 55%,var(--g2) 80%,var(--g1));background-size:250% 100%;animation:wave 1.1s linear infinite;border-color:transparent;color:#0d0d0d;transform:scale(1.06) rotate(-1.5deg)}
.btn--ghost:hover{color:#0d0d0d}
#send:hover .in{color:#0d0d0d}
.sec--ink .btn--ghost:hover{background:linear-gradient(100deg,var(--g1),var(--g2) 30%,var(--g3) 55%,var(--g2) 80%,var(--g1));background-size:250% 100%;animation:wave 1.1s linear infinite;color:#0d0d0d;border-color:transparent}

/* dual-base lockup */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:46px 0 8px;position:relative;z-index:2}
#duoGlobe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:230px;height:230px;opacity:.55;pointer-events:none;z-index:3}
@media (max-width:760px){#duoGlobe{display:none}}
.duo>div{border:1px solid var(--line-inv);border-radius:22px;padding:26px;transition:background .25s}
.duo>div:hover{background:linear-gradient(120deg,rgba(255,46,99,.12),rgba(95,124,255,.12))}
.duo .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-hot)}
.duo h3{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.6vw,64px);line-height:1;margin-top:8px}
.duo .us h3{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.duo p{margin-top:10px;color:rgba(248,245,238,.7);font-size:14px}
@media (max-width:760px){.duo{grid-template-columns:1fr}}

/* pricing bento */
.bento{display:grid;gap:14px;grid-template-columns:repeat(6,1fr);margin-top:50px;position:relative;z-index:2;
  grid-template-areas:"std std std std start start" "std std std std studio studio" "prem prem prem prem edit edit" "prem prem prem prem misc misc" "note note note note cta cta"}
.b{border:1.5px solid var(--ink);border-radius:20px;background:var(--cream);padding:22px;transition:background .25s,transform .25s var(--ease-boing)}
.b:hover{background:linear-gradient(120deg,rgba(255,46,99,.10),rgba(95,124,255,.10));transform:translateY(-4px)}
.b-std{grid-area:std}.b-prem{grid-area:prem}.b-start{grid-area:start}.b-studio{grid-area:studio}
.b-edit{grid-area:edit}.b-misc{grid-area:misc}.b-note{grid-area:note}.b-cta{grid-area:cta;display:flex;flex-direction:column;justify-content:space-between;gap:14px;align-items:flex-start}
.b h3{font-family:var(--serif);font-size:24px}
.b .subt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(13,13,13,.55);margin-top:4px}
.b .big{font-family:var(--mono);font-weight:700;font-size:clamp(24px,2.6vw,36px);margin-top:10px}
.b p{font-size:13px;color:rgba(13,13,13,.72);margin-top:8px}
.b-start{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.b-start .subt,.b-start p{color:rgba(248,245,238,.7)}
.b-start:hover{background:var(--grad)}
.b-start:hover h3,.b-start:hover .subt,.b-start:hover .big,.b-start:hover p{color:#0d0d0d}
.ptable{width:100%;border-collapse:separate;border-spacing:0;margin-top:18px}
.ptable th{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;background:none;color:rgba(13,13,13,.45);padding:0 12px 10px;text-align:left;border-bottom:1.5px solid var(--ink)}
.ptable th:not(:first-child),.ptable td:not(:first-child){text-align:right}
.ptable td{padding:16px 12px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:14px;vertical-align:middle;transition:background .2s}
.ptable td:first-child{font-family:var(--serif);font-weight:600;font-size:19px}
.ptable tr:last-child td{border-bottom:0}
.ptable tr:hover td{background:linear-gradient(120deg,rgba(255,46,99,.08),rgba(95,124,255,.08))}
.ptable .hint{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--amber);text-transform:uppercase;margin-top:4px;font-weight:400}
.row-hot td{background:rgba(201,150,43,.07)}
.row-hot td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
.b h3 em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.b-prem{background:linear-gradient(135deg,rgba(255,46,99,.05),rgba(176,108,255,.05) 50%,rgba(95,124,255,.06))}
.kitline{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.kitline span{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:rgba(13,13,13,.6)}
@media (max-width:900px){
  .bento{grid-template-columns:1fr;grid-template-areas:"std" "start" "studio" "prem" "edit" "misc" "note" "cta"}
  .ptable td,.ptable th{padding:9px 8px}
  .ptable td{font-size:12px}
}


/* ============ PINNED STATEMENT PANEL ============ */
#seqPin{height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;
  background:var(--ink);color:var(--cream)}
#seqPin::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 40%,rgba(0,0,0,.55))}
#seq{position:relative;z-index:2;width:100%;text-align:center;padding-inline:24px}
#seq .st{position:absolute;inset:0;display:grid;place-content:center;gap:18px;opacity:0}
#seq .st span{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber-hot)}
#seq .st b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(46px,9.4vw,140px);
  letter-spacing:-.02em;line-height:.96}
#seq .st b em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
#seqRec{position:absolute;top:clamp(24px,5vw,48px);left:clamp(20px,5vw,56px);z-index:3;
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(248,245,238,.6)}
#seqRec i{width:8px;height:8px;border-radius:50%;background:var(--rec);animation:blink 1s steps(1) infinite}
#seqDots{position:absolute;bottom:clamp(24px,5vw,48px);left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:9px}
#seqDots i{width:6px;height:6px;border-radius:50%;background:rgba(248,245,238,.22);transition:background .35s,transform .35s}
#seqDots i.on{background:var(--amber-hot);transform:scale(1.35)}
@media (max-width:560px){#seq .st b{font-size:clamp(38px,11vw,62px)}}


/* ================= SHARP · SOLID · SHADOW SYSTEM ================= */
:root{
  --serif:'Clash Display',system-ui,sans-serif;
  --sans:'Satoshi',system-ui,sans-serif;
  --mono:'Khand',system-ui,sans-serif;
}
body{font-family:var(--sans)}

/* type retune for Clash metrics */
.hero-title{font-size:clamp(40px,10.5vw,150px);font-weight:600;line-height:.97;letter-spacing:-.02em}
.h-giant{font-size:clamp(38px,6.2vw,92px);font-weight:600;letter-spacing:-.015em;line-height:1}
.model-title{font-weight:600}
#seq .st b{font-size:clamp(42px,8vw,118px);font-weight:600;letter-spacing:-.02em}
.wcard h3,.tcard h3,.pcard h3,.b h3,.listcard h3,.gcard b,.kchip b,.qcard blockquote,.duo h3,.svc h3{font-weight:600}
.mono,.eyebrow,.btn,.ticker__track>span,.spec,.stamp{letter-spacing:.12em}
.btn{font-weight:600;font-size:12.5px}

/* SHARP: zero radius, everywhere */
.btn,#nav,#nav .links a,#nav .links,input,select,textarea,.stat,.pcard,.gcard,.kchip,.qcard,.prc,
.listcard,.b,.wl,.wa,#contact .card,.duo>div,.teaser,.tcard,.tcard .por,.frame,.frame img,.frame .ph,
.wcard,.wcard .thumb,.stamp,.svc .spec,.kitline span,.areas span,.intl span,#rec,#cur,#curRing,
.weekpills span,.wl .thumb{border-radius:0!important}

/* nav: sharp full-width bar */
#nav{inset:0 0 auto;padding:14px clamp(20px,4vw,56px);border:0;border-bottom:1px solid var(--line);
  background:rgba(248,245,238,.88)}
body.menu-open #nav .links{border-radius:0}

/* BORDERS OFF, HARD SHADOWS ON */
.stat,.pcard,.gcard,.kchip,.qcard,.prc,.listcard,.b,.wl,.wa,#contact .card,.frame{
  border:0!important;box-shadow:8px 8px 0 var(--ink);
  transition:transform .3s var(--ease-boing),box-shadow .3s var(--ease-boing),background .25s}
.stat:hover,.pcard:hover,.gcard:hover,.prc:hover,.wl:hover,.wa:hover,.b:hover,.kchip:hover{
  transform:translate(-4px,-4px)!important;box-shadow:13px 13px 0 var(--ink)}
.tcard,.teaser,.duo>div{border:0!important;box-shadow:8px 8px 0 rgba(0,0,0,.5)}
.listcard.no,.b-start,.prc.hot{box-shadow:8px 8px 0 var(--amber)!important}
.wcard{box-shadow:10px 10px 0 rgba(0,0,0,.55)}
.wcard:hover{box-shadow:14px 14px 0 rgba(0,0,0,.7)}
.fq,.svc,.gearline,.board-row,.cat{border-color:var(--ink)}
.qcard::before,#contact .card::before,#contact .card::after{display:none}

/* card tilts off; physical objects (frames, tape cards, stamp) keep theirs */
.stat,.pcard,.gcard,.kchip,.qcard,.prc,.listcard,.wl{rotate:0deg!important}

/* buttons: sharp solids */
.btn{border:0;box-shadow:6px 6px 0 rgba(13,13,13,.85);border-radius:0!important}
.btn:hover{background:var(--amber)!important;color:var(--ink)!important;animation:none!important;
  transform:translate(-3px,-3px)!important;box-shadow:10px 10px 0 rgba(13,13,13,.85)}
.btn--ghost{background:var(--cream);color:var(--ink);border:0;box-shadow:6px 6px 0 rgba(13,13,13,.35)}
.sec--ink .btn--ghost{background:var(--cream);color:var(--ink);border:0;box-shadow:6px 6px 0 rgba(0,0,0,.6)}
.sec--ink .btn--ghost:hover{background:var(--amber)!important;color:var(--ink)!important}
#send:hover .in{color:var(--ink)}

/* SOLID: gradients out */
#progress{background:var(--amber)}
.ticker--amber{background:var(--amber);color:var(--ink);border:0}
.eyebrow::before{background:var(--rec)}
.h-giant em,.sec--ink .h-giant em,#talk em,.model-title .win,.b h3 em,#seq .st b em,.duo .us h3{
  font-style:normal;background:var(--amber);color:var(--ink);-webkit-text-fill-color:var(--ink);
  -webkit-background-clip:border-box;background-clip:border-box;
  padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#cycle{font-style:normal;background:var(--amber);color:var(--ink);padding:0 .12em}
#blob{background:var(--amber);border-radius:0;filter:none;animation:none;opacity:1;
  width:42vw;height:42vw;min-width:340px;min-height:340px;right:-5vw;top:-9vw;rotate:8deg}
.svc:hover::before{background:var(--amber)}
.svc:hover .spec{background:var(--ink);color:var(--cream)}
.stat:hover,.pcard:hover,.gcard:hover,.wa:hover{background:var(--amber)}
.stat:hover b,.stat:hover span,.pcard:hover .n,.pcard:hover h3,.pcard:hover p,
.gcard:hover b,.gcard:hover p,.wa:hover b,.wa:hover span,.wa:hover .mono{color:var(--ink)}
.b:hover{background:#fffdf6}
.ptable tr:hover td{background:rgba(201,150,43,.14)}
.cat:hover span:first-child{background:none;-webkit-text-fill-color:initial;color:var(--amber-hot)}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:5px 5px 0 var(--amber);transform:none}
body.cur-view #curRing{background:var(--amber);border-color:var(--amber)}
#duoGlobe{opacity:.6}
@media (max-width:560px){.hero-title{font-size:clamp(36px,11.5vw,60px)}}


/* ================= SIGNAL PALETTE · RED + CAB YELLOW ================= */
:root{--amber:#ffd400;--amber-hot:#ffdf3d;--acid:#ffd400;--volt:#ff2d17;--rec:#ff2d17}
#grain{opacity:.09}

/* paper */
#hero{background:radial-gradient(120% 100% at 30% 0%,#fbf7ee,var(--cream) 60%)}
.b:not(.b-start),.stat,.pcard,.gcard:not([style*="display:block"]),.qcard,.prc:not(.hot),
.listcard:not(.no),.wa,#contact .card,.wl,.kchip{background:#fdfaf1}

/* dark sections: depth + embers */
.sec--ink,#work{background:
  radial-gradient(90% 70% at 88% 0%,rgba(255,45,23,.13),transparent 55%),
  radial-gradient(70% 55% at 0% 100%,rgba(255,212,0,.07),transparent 60%),
  linear-gradient(180deg,#151210 0%,#0d0d0d 55%,#070707 100%)}
footer.ft{background:radial-gradient(120% 85% at 50% 100%,#1c130d,#0a0a0a 72%)}
#seqPin{background:radial-gradient(100% 85% at 50% 28%,#17110d,#080808 78%)}
#seqPin::before{content:"";position:absolute;left:-20%;right:-20%;bottom:-42%;height:75%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 100%,rgba(255,45,23,.24),transparent 70%)}
#boot{background:radial-gradient(120% 100% at 50% 0%,#161210,#090909)}

/* hazard progress */
#progress{height:5px;background:repeating-linear-gradient(-45deg,var(--amber) 0 14px,var(--ink) 14px 28px)}

/* hairlines through headlines */
.h-giant{position:relative}
.h-giant::after{content:"";position:absolute;left:-6%;right:-8%;top:54%;height:2px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,var(--rec) 28%,var(--amber) 72%,transparent);
  transform:rotate(var(--lr,-5deg)) scaleX(0);transform-origin:left center;opacity:.9}
.h-giant.on::after{animation:lineDraw 1s .35s cubic-bezier(.6,0,.2,1) forwards}
.sec:nth-of-type(even) .h-giant{--lr:4deg}
.sec:nth-of-type(3n) .h-giant{--lr:-8deg}
@keyframes lineDraw{to{transform:rotate(var(--lr,-5deg)) scaleX(1)}}
.hline{position:absolute;height:2px;pointer-events:none;z-index:2;opacity:.85;
  background:linear-gradient(90deg,transparent,var(--rec) 30%,var(--amber) 70%,transparent);
  transform:rotate(var(--lr)) scaleX(0);transform-origin:left center}
body.loaded .hline{animation:lineDraw .9s var(--ld,.8s) cubic-bezier(.6,0,.2,1) forwards}
.hl1{left:-4%;right:30%;top:34%;--lr:-9deg;--ld:.7s}
.hl2{left:22%;right:-6%;top:56%;--lr:5deg;--ld:1s}
.hl3{left:-6%;right:52%;top:74%;--lr:-4deg;--ld:1.25s}

/* signal ribbon */
.ribbon{position:absolute;pointer-events:none;z-index:1}
.ribbon--hero{inset:0;opacity:.9}
.ribbon--mid{left:0;right:0;top:-40px;height:360px;width:100%;opacity:.55}
.rpath{stroke-dasharray:1000;stroke-dashoffset:1000}
body.loaded .ribbon--hero .rpath{animation:ribbonDraw 1.7s .45s cubic-bezier(.6,0,.2,1) forwards}
.rpath.r-on{animation:ribbonDraw 1.7s .2s cubic-bezier(.6,0,.2,1) forwards}
.rpulse{stroke-dasharray:3 197;stroke-dashoffset:1000;opacity:0;stroke-linecap:round}
body.loaded .rpulse{opacity:.95;animation:pulseFlow 4.5s 2.3s linear infinite}
@keyframes ribbonDraw{to{stroke-dashoffset:0}}
@keyframes pulseFlow{to{stroke-dashoffset:-1000}}

/* mega ring: slow orbit with marker */
.mega-ring{position:absolute;right:-18vw;top:-8vw;width:56vw;height:56vw;z-index:0;pointer-events:none;
  border:2px solid rgba(255,45,23,.5);border-radius:50%!important;animation:orbit 70s linear infinite}
.mega-ring::after{content:"";position:absolute;top:-8px;left:50%;width:15px;height:15px;background:var(--amber);
  transform:translateX(-50%)}
@keyframes orbit{to{transform:rotate(360deg)}}
@media (max-width:820px){.mega-ring{width:90vw;height:90vw;right:-45vw}}

/* reduced motion: everything lands drawn */
@media (prefers-reduced-motion:reduce){
  .h-giant::after,.hline{transform:rotate(var(--lr,-5deg)) scaleX(1)}
  .rpath{stroke-dashoffset:0}
  .rpulse{display:none}
  .mega-ring{animation:none}
}


/* ================= V34 · CONVERSION LAYER ================= */
:root{--red:#ff2d17;--red-hot:#ff4a2f}

/* --- primary CTA = red --- */
.btn{background:var(--red);color:#fff;font-weight:600;box-shadow:6px 6px 0 var(--ink)}
.btn:hover{background:var(--red-hot)!important;color:#fff!important;
  transform:translate(-3px,-3px)!important;box-shadow:10px 10px 0 var(--ink)!important;animation:none!important}
.btn--ghost{background:var(--cream);color:var(--ink)!important;box-shadow:6px 6px 0 var(--ink)}
.btn--ghost:hover{background:var(--amber)!important;color:var(--ink)!important}
.sec--ink .btn--ghost{background:var(--cream);color:var(--ink)!important;box-shadow:6px 6px 0 rgba(0,0,0,.85)}
#send{background:var(--red);color:#fff;font-size:14px;padding:22px}
#send:hover .in{color:#fff}
#nav .btn{padding:11px 16px;font-size:11px;white-space:nowrap;box-shadow:5px 5px 0 var(--ink)}
.btn .short{display:none}

/* --- cursor bug: difference blend turned red into teal --- */
/* cursor: visible on cream AND on black, without blend modes */
#cur{mix-blend-mode:normal;background:var(--red);width:10px;height:10px;
  box-shadow:0 0 0 2px rgba(248,245,238,.9),0 0 0 3px rgba(13,13,13,.35)}
#curRing{border:1.5px solid var(--red);background:rgba(248,245,238,.06)}
body.cur-view #curRing{background:var(--amber)!important;border-color:var(--amber)!important}
body.cur-view #curRing span{color:var(--ink)}
/* dot hides inside the label puck so it does not sit on the text */
body.cur-view #cur{opacity:0}

/* --- academy price card --- */
.prc.hot .was{display:inline-block;margin-left:12px;font-family:var(--mono);font-size:.42em;
  text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px;opacity:.55;vertical-align:middle}
.strike-price{display:none}

/* --- academy value strip --- */
.vstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.vstrip .v{background:#fdfaf1;padding:20px 18px;box-shadow:8px 8px 0 var(--ink);
  transition:transform .3s var(--ease-boing),box-shadow .3s var(--ease-boing),background .25s}
.vstrip .v:hover{transform:translate(-4px,-4px);box-shadow:13px 13px 0 var(--ink);background:var(--amber)}
.vstrip b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.4vw,46px);line-height:1}
.vstrip span{display:block;margin-top:6px;font-size:13px;color:rgba(13,13,13,.7)}
.vstrip .v:hover span{color:var(--ink)}
@media (max-width:820px){.vstrip{grid-template-columns:1fr 1fr}}

.vprice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  margin-top:16px;background:var(--ink);color:var(--cream);padding:24px;box-shadow:8px 8px 0 var(--amber)}
.vprice .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.vprice b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.4vw,58px);line-height:1;margin-top:4px}
.vprice b i{font-style:normal;font-family:var(--mono);font-size:.4em;text-decoration:line-through;
  text-decoration-color:var(--red);text-decoration-thickness:3px;opacity:.6;margin-left:12px}
.vprice .k2{display:block;margin-top:6px;font-size:12.5px;color:rgba(248,245,238,.65)}

/* --- academy sticky conversion bar --- */
#stickybar{position:fixed;left:0;right:0;bottom:0;z-index:115;display:flex;align-items:center;
  gap:16px;padding:12px clamp(14px,3vw,28px);background:var(--ink);color:var(--cream);
  border-top:3px solid var(--amber);transform:translateY(115%);transition:transform .45s var(--ease-boing)}
#stickybar.on{transform:none}
#stickybar .sb-i b{display:block;font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.1}
#stickybar .sb-i span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(248,245,238,.6)}
#stickybar .sb-p{margin-left:auto;text-align:right;white-space:nowrap}
#stickybar .sb-p b{font-family:var(--serif);font-weight:600;font-size:24px}
#stickybar .sb-p i{font-style:normal;font-family:var(--mono);font-size:11px;text-decoration:line-through;
  text-decoration-color:var(--red);opacity:.55;margin-left:8px}
#stickybar .btn{padding:13px 20px;box-shadow:4px 4px 0 rgba(0,0,0,.6)}
@media (max-width:600px){
  #stickybar{gap:10px;padding:10px 12px}
  #stickybar .sb-i span,#stickybar .sb-p i{display:none}
  #stickybar .sb-i b{font-size:14px}
  #stickybar .sb-p b{font-size:19px}
  #stickybar .btn{padding:12px 14px;font-size:10.5px}
}

/* --- pricing calculator --- */
.calc{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:46px;position:relative;z-index:2}
@media (max-width:940px){.calc{grid-template-columns:1fr}}
.calc-controls{background:#fdfaf1;padding:clamp(20px,3vw,32px);box-shadow:8px 8px 0 var(--ink)}
.cgroup+.cgroup{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.clabel{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(13,13,13,.55)}
.copts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.copt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 16px;background:var(--cream);color:var(--ink);box-shadow:4px 4px 0 rgba(13,13,13,.28);
  transition:transform .2s var(--ease-boing),box-shadow .2s var(--ease-boing),background .2s,color .2s}
.copt:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(13,13,13,.4)}
.copt.on{background:var(--ink);color:var(--cream);box-shadow:4px 4px 0 var(--amber)}
.chint{margin-top:10px;font-size:12.5px;color:rgba(13,13,13,.6)}

.calc-out{background:var(--ink);color:var(--cream);padding:clamp(20px,3vw,32px);box-shadow:8px 8px 0 var(--amber);
  display:flex;flex-direction:column}
.calc-out .clabel{color:var(--amber)}
.cnum{font-family:var(--serif);font-weight:600;font-size:clamp(46px,6.4vw,84px);line-height:1;margin-top:8px}
.cnum small{font-family:var(--mono);font-size:.18em;letter-spacing:.16em;color:rgba(248,245,238,.55);display:block;margin-top:10px}
.cbreak{list-style:none;margin-top:20px;border-top:1px solid var(--line-inv)}
.cbreak li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line-inv);font-family:var(--mono);font-size:12.5px}
.cbreak li span:first-child{color:rgba(248,245,238,.7);text-transform:uppercase;letter-spacing:.1em;font-size:11px}
.cnote{margin-top:16px;font-size:12.5px;color:rgba(248,245,238,.62)}
.cform{margin-top:22px;display:grid;gap:12px}
.cform .f .lbl{color:rgba(248,245,238,.6)}
.cform input,.cform textarea{background:#151412;color:var(--cream);border:1px solid var(--line-inv)}
.cform textarea{min-height:76px}
.cform input:focus,.cform textarea:focus{border-color:var(--amber);box-shadow:5px 5px 0 var(--amber)}
.cerr{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);display:none}
.cerr.on{display:block}
.clink{display:inline-block;margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);border-bottom:1px solid var(--amber);padding-bottom:3px}

/* ================= MOBILE REPAIR ================= */
@media (max-width:920px){
  #rec{display:none!important}
  .ribbon,.hline{display:none!important}
  .h-giant::after{display:none}
}
@media (max-width:820px){
  #blob{width:58vw;height:58vw;min-width:0!important;min-height:0!important;right:-14vw;top:-10vw}
  .f1{right:12px!important;top:96px!important;width:min(150px,32vw)!important}
  .mega-ring{opacity:.55}
}
@media (max-width:640px){
  #nav{padding:10px 14px;gap:10px}
  #nav .logo{font-size:19px}
  #nav .btn{padding:10px 13px;font-size:10px;box-shadow:4px 4px 0 var(--ink)}
  .btn .full{display:none}
  .btn .short{display:inline}
  #hero{padding-top:96px}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1 1 auto;justify-content:center;text-align:center}
  body{padding-bottom:0}
}
@media (max-width:560px){
  .f1{display:none}
  #blob{width:66vw;height:66vw;right:-18vw;top:-14vw}
}


/* ---- v36: nothing parks at 0,0 when motion is reduced ---- */
@media (prefers-reduced-motion:reduce){
  #cur,#curRing{display:none!important}
  #rec{display:none!important}
}


/* ---- v37: cursor press feedback (transform is owned by JS, so use colour) ---- */
body.cur-press #curRing{background:var(--red);border-color:var(--red)}
body.cur-press #cur{opacity:0}


/* ================= V38 · ICONS + ACADEMY HERO REFINEMENT ================= */
.ic{width:1em;height:1em;display:block;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:square;stroke-linejoin:miter;flex:none}

/* value strip */
.vhead{margin-top:44px;margin-bottom:0}
.vstrip{margin-top:18px;gap:14px}
.vstrip .v{display:flex;flex-direction:column;gap:13px;padding:24px 22px 22px;background:#fdfaf1;
  box-shadow:8px 8px 0 var(--ink)}
.vstrip .vi{width:30px;height:30px;color:var(--red)}
.vstrip .vi .ic{width:100%;height:100%;stroke-width:1.5}
.vstrip b{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-family:var(--serif);font-weight:600;font-size:clamp(32px,3.4vw,46px);line-height:.95}
.vstrip b i{font-style:normal;font-family:var(--mono);font-size:.3em;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(13,13,13,.5);white-space:nowrap}
.vstrip .d{font-size:13px;line-height:1.5;color:rgba(13,13,13,.66)}
.vstrip .v:hover{background:var(--amber)}
.vstrip .v:hover .vi{color:var(--ink)}
.vstrip .v:hover b i,.vstrip .v:hover .d{color:rgba(13,13,13,.8)}

/* price block */
.vprice{align-items:flex-start;padding:28px;gap:26px}
.vprice .vp-left{flex:1 1 380px}
.vprice b{display:block;white-space:nowrap;margin:6px 0 16px}
.vprice b i{white-space:nowrap}
.vp-inc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}
.vp-inc li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:rgba(248,245,238,.82);line-height:1.4}
.vp-inc .ic{width:15px;height:15px;color:var(--amber);margin-top:2px;stroke-width:2.2}
.vprice .hero-cta{flex:0 0 auto;flex-direction:column;align-items:stretch}
.vprice .hero-cta .btn{justify-content:center}
@media (max-width:900px){.vp-inc{grid-template-columns:1fr}.vprice .hero-cta{width:100%}}

/* outcome cards */
.gcard .gi{width:26px;height:26px;color:var(--red);margin-bottom:14px}
.gcard:hover .gi{color:var(--ink)}

/* academy hero: stop the plane and the hairline fighting the headline */
#hero .h-giant::after{display:none}
.academy #blob{width:30vw;height:30vw;min-width:0;min-height:0;right:-6vw;top:-12vw;rotate:10deg}
@media (max-width:820px){.academy #blob{width:52vw;height:52vw;right:-16vw;top:-10vw}}


/* ================= V39 · LOGO, PORTRAITS, FORM STATES ================= */
#nav .logo{display:inline-flex;align-items:center;gap:10px}
.logomark{width:26px;height:auto;flex:none;fill:currentColor;color:var(--ink)}
#nav .logo:hover .logomark{color:var(--red)}
.ft-logo{width:54px;height:auto;fill:var(--cream);opacity:.9;margin-bottom:22px}

/* team portraits */
.tcard .por{background:#111;overflow:hidden}
.tcard .por img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92) contrast(1.04);transition:transform .6s var(--ease-boing),filter .4s}
.tcard:hover .por img{transform:scale(1.05);filter:saturate(1) contrast(1.08)}
.tcard .por .hud{z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.8)}

/* form states */
.formnote{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(13,13,13,.5)}
.calc-out .formnote{color:rgba(248,245,238,.5)}
.formnote.err{color:var(--red)}
.sent{padding:8px 0}
.sent b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,42px);line-height:1}
.sent p{margin:12px 0 22px;color:rgba(13,13,13,.7);max-width:420px}
.calc-out .sent p{color:rgba(248,245,238,.72)}
.cform .sent b{color:var(--cream)}
button[disabled]{cursor:not-allowed}


/* ---- v41: real BTS frames ---- */
.frame img{background:#12100e}
@media (max-width:920px){
  .f1{display:none}
  .f2{display:block!important;right:12px;left:auto;top:96px;rotate:-4deg;width:min(150px,32vw)}
}
@media (max-width:560px){.f2{display:none!important}}


/* ---- v42: explicit width+height attributes were cancelling aspect-ratio ---- */
.frame img{height:auto!important;aspect-ratio:4/3;object-fit:cover;width:100%}
.wcard .thumb img,.wl img{height:100%!important}
.tcard .por img{height:100%!important}


/* ---- v43: country + phone row ---- */
.phone-row{display:grid;grid-template-columns:minmax(150px,.85fr) 1.15fr;gap:18px}
@media (max-width:600px){.phone-row{grid-template-columns:1fr}}
.phone-row select{text-overflow:ellipsis}


/* ---- v44: booking terms link under the estimate ---- */
.cterms{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(248,245,238,.45);border-bottom:1px solid rgba(248,245,238,.25);padding-bottom:2px}
.cterms:hover{color:var(--amber);border-color:var(--amber)}


/* ================= V49 · SELECTS, FADE FIX, ICON BENTO ================= */

/* --- the fade bug: .prc:hover was washing out the dark card --- */
.prc.hot:hover,.b-start:hover,.listcard.no:hover{background:var(--ink)!important}
.prc.hot:hover *,.b-start:hover *,.listcard.no:hover *{color:var(--cream)}
.prc.hot:hover .from,.b-start:hover .from{color:var(--amber)!important}
.prc.hot:hover .btn{background:var(--red)!important;color:#fff!important}
.prc.hot,.b-start,.listcard.no{opacity:1}

/* --- proper select styling, light and dark --- */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230d0d0d' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:13px 8px;
  padding-right:46px;cursor:pointer;line-height:1.3;
  transition:border-color .2s,box-shadow .2s,background-color .2s}
select:hover{background-color:#fffdf3;border-color:var(--ink)}
select:focus{border-color:var(--ink);box-shadow:5px 5px 0 var(--amber);background-color:#fff}
select option{background:var(--cream);color:var(--ink);padding:10px}
.cform select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f8f5ee' stroke-width='2'/%3E%3C/svg%3E")}
.cform select:hover{background-color:#1d1b18;border-color:var(--amber)}
.cform select:focus{box-shadow:5px 5px 0 var(--amber)}
.cform select option{background:#151412;color:var(--cream)}
input,select,textarea{transition:border-color .2s,box-shadow .2s,background-color .2s}
input:hover,textarea:hover{background-color:#fffdf3}
label.f .lbl{transition:color .2s}
label.f:focus-within .lbl{color:var(--red)}

/* --- comparison list icons --- */
.listcard li .ic{width:16px;height:16px;margin-top:3px;stroke-width:2.4;flex:none}
.listcard li .li-x{color:var(--red)}
.listcard li .li-y{color:var(--amber)}
.listcard.no li .li-y{color:var(--amber-hot)}




/* ================= V51 · BENTO COMPARISON, ICONS, HOVER ================= */

/* stat cards: icon sits above the number */
.stat{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.st-ic{width:26px;height:26px;color:var(--red);stroke-width:1.6}
.stat b{margin:0}
.stat span{display:block}
.stat:hover{background:var(--amber)}
.stat:hover .st-ic,.stat:hover b,.stat:hover span{color:var(--ink)}

/* process cards: icon above the number */
.pcard{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.p-ic{width:26px;height:26px;color:var(--red);stroke-width:1.6;margin-bottom:2px}
.pcard:hover{background:var(--amber)}
.pcard:hover .p-ic,.pcard:hover .n,.pcard:hover h3,.pcard:hover p{color:var(--ink)}

/* the bento comparison */
.bento-vs{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-top:44px;position:relative;z-index:2}
.bv{grid-column:span var(--span,2);background:#fdfaf1;padding:24px 22px;
  box-shadow:8px 8px 0 var(--ink);display:flex;flex-direction:column;gap:11px;
  transition:transform .3s var(--ease-boing),box-shadow .3s var(--ease-boing),background .25s}
.bv:hover{transform:translate(-4px,-4px);box-shadow:14px 14px 0 var(--ink);background:var(--amber)}
.bv .ic{width:28px;height:28px;color:var(--red);stroke-width:1.6}
.bv:hover .ic{color:var(--ink)}
.bv h4{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.05}
.bv p{display:flex;gap:9px;align-items:flex-start;margin:0}
.bv-a{font-size:13px;line-height:1.4;color:rgba(13,13,13,.48)}
.bv-a::before{content:"✕";color:var(--red);font-weight:700;font-size:12px;flex:none;line-height:1.35}
.bv:hover .bv-a{color:rgba(13,13,13,.62)}
.bv-b{font-size:14.5px;line-height:1.4;font-weight:600;color:var(--ink);
  background:rgba(255,212,0,.22);padding:9px 11px;margin:2px -4px -4px!important;transition:background .25s,color .25s}
.bv-b::before{content:"✓";color:#8a6d00;font-weight:700;font-size:13px;flex:none;line-height:1.35}
.bv:hover .bv-b{background:var(--ink);color:var(--cream)}
.bv:hover .bv-b::before{color:var(--amber)}
/* dark variant for the academy */
.bento-vs--dark .bv{background:var(--ink2);box-shadow:8px 8px 0 var(--amber)}
.bento-vs--dark .bv h4{color:var(--cream)}
.bento-vs--dark .bv-a{color:rgba(248,245,238,.42)}
.bento-vs--dark .bv-b{background:rgba(255,212,0,.16);color:var(--cream)}
.bento-vs--dark .bv:hover{background:var(--amber);box-shadow:14px 14px 0 var(--ink)}
.bento-vs--dark .bv:hover h4,.bento-vs--dark .bv:hover .ic{color:var(--ink)}
.bento-vs--dark .bv:hover .bv-a{color:rgba(13,13,13,.6)}
.bento-vs--dark .bv:hover .bv-b{background:var(--ink);color:var(--cream)}
@media (max-width:900px){.bv{grid-column:span 3}}
@media (max-width:600px){.bento-vs{grid-template-columns:1fr}.bv{grid-column:span 1}}

/* the dark cards must not wash out on hover */
.prc.hot:hover,.b-start:hover,.listcard.no:hover{background:var(--ink)!important}
.prc.hot:hover *,.b-start:hover *,.listcard.no:hover *{color:var(--cream)}
.prc.hot:hover .from,.b-start:hover .from{color:var(--amber)!important}
.prc.hot:hover .btn{background:var(--red)!important;color:#fff!important}

/* selects */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230d0d0d' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:13px 8px;
  padding-right:46px;cursor:pointer;line-height:1.3}
select:hover{background-color:#fffdf3;border-color:var(--ink)}
select:focus{border-color:var(--ink);box-shadow:5px 5px 0 var(--amber)}
.cform select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f8f5ee' stroke-width='2'/%3E%3C/svg%3E")}
.cform select:hover{background-color:#1d1b18;border-color:var(--amber)}
.cform select option{background:#151412;color:var(--cream)}
input,select,textarea{transition:border-color .2s,box-shadow .2s,background-color .2s}
input:hover,textarea:hover{background-color:#fffdf3}
label.f:focus-within .lbl{color:var(--red)}


/* ================= V57 · SERVICE SPLIT CARDS ================= */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:52px}
.scard{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  background:#fdfaf1;box-shadow:10px 10px 0 var(--ink);overflow:hidden;
  transition:transform .35s var(--ease-boing),box-shadow .35s var(--ease-boing)}
.scard:hover{transform:translate(-5px,-5px);box-shadow:16px 16px 0 var(--ink)}
.scard-img{position:relative;overflow:hidden;background:#12100e;min-height:100%}
.scard-img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9) contrast(1.05);transition:transform .7s var(--ease-boing),filter .4s}
.scard:hover .scard-img img{transform:scale(1.06);filter:saturate(1) contrast(1.1)}
.scard-body{padding:26px 26px 24px;display:flex;flex-direction:column;gap:9px;min-width:0}
.scard-body .n{font-size:30px;font-family:var(--serif);font-weight:600;color:var(--red);line-height:1}
.scard-body h3{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2vw,26px);line-height:1.05;margin:0}
.scard-body .kick{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--amber-hot);margin:0}
.scard-body>p:not(.kick){font-size:14px;line-height:1.5;color:rgba(13,13,13,.68);margin:0}
.scard-body .spec{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(13,13,13,.5)}

/* text-only cards run dark, so the grid has rhythm instead of six identical tiles */
.scard--text{grid-template-columns:1fr;background:var(--ink);box-shadow:10px 10px 0 var(--amber)}
.scard--text:hover{box-shadow:16px 16px 0 var(--amber)}
.scard--text .scard-body{padding:30px}
.scard--text h3{color:var(--cream)}
.scard--text>.scard-body>p:not(.kick){color:rgba(248,245,238,.7)}
.scard--text .spec{border-top-color:var(--line-inv);color:rgba(248,245,238,.5)}

@media (max-width:980px){.sgrid{grid-template-columns:1fr}}
@media (max-width:560px){
  .scard{grid-template-columns:1fr}
  .scard-img{aspect-ratio:16/9;min-height:0}
  .scard-body{padding:22px}
}


/* ================= V58 · STAT RULES, CLEAN BENTO, STRAIGHT WORK ================= */

/* stats: ruled columns instead of boxed cards */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink);margin-top:44px}
.stat{background:none!important;box-shadow:none!important;border:0!important;rotate:none!important;
  padding:26px 30px 30px;position:relative;transform:none!important}
.stat+.stat{border-left:1px solid rgba(13,13,13,.22)}
.stat:hover{background:none!important;transform:none!important}
.stat .st-ic{width:22px;height:22px;color:var(--red);margin-bottom:14px}
.stat b{display:block;font-family:var(--serif);font-weight:600;line-height:.95;
  font-size:clamp(40px,5.4vw,72px);letter-spacing:-.03em}
.stat span{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(13,13,13,.55)}
.stat:hover b{color:var(--red)}
.sec--ink .stats{border-top-color:var(--cream)}
.sec--ink .stat+.stat{border-left-color:rgba(248,245,238,.2)}
@media (max-width:700px){
  .stats{grid-template-columns:1fr}
  .stat+.stat{border-left:0;border-top:1px solid rgba(13,13,13,.18)}
  .stat{padding:20px 4px 22px}
}

/* bento comparison: same card language as services, no yellow wash */
.bv{background:#fdfaf1;padding:26px 24px;box-shadow:10px 10px 0 var(--ink);gap:0}
.bv:hover{background:#fdfaf1;transform:translate(-5px,-5px);box-shadow:16px 16px 0 var(--ink)}
.bv .ic{width:24px;height:24px;color:var(--red);margin-bottom:14px}
.bv:hover .ic{color:var(--red)}
.bv h4{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.05;margin:0 0 14px}
.bv p{display:flex;gap:10px;align-items:flex-start;margin:0;padding:9px 0}
.bv-a{font-size:13px;line-height:1.45;color:rgba(13,13,13,.42);border-bottom:1px solid var(--line)}
.bv-a::before{content:"✕";color:rgba(255,45,23,.6);font-weight:700;font-size:11px;flex:none;line-height:1.4}
.bv:hover .bv-a{color:rgba(13,13,13,.42)}
.bv-b{background:none!important;font-size:14.5px;line-height:1.45;font-weight:600;color:var(--ink);
  padding:11px 0 0!important;margin:0!important}
.bv-b::before{content:"✓";color:var(--red);font-weight:700;font-size:13px;flex:none;line-height:1.4}
.bv:hover .bv-b{background:none!important;color:var(--ink)}
.bv:hover .bv-b::before{color:var(--red)}
/* academy dark variant */
.bento-vs--dark .bv{background:var(--ink2);box-shadow:10px 10px 0 var(--amber)}
.bento-vs--dark .bv:hover{background:var(--ink2);box-shadow:16px 16px 0 var(--amber)}
.bento-vs--dark .bv h4{color:var(--cream)}
.bento-vs--dark .bv-a{color:rgba(248,245,238,.36);border-bottom-color:var(--line-inv)}
.bento-vs--dark .bv-b{color:var(--cream)}
.bento-vs--dark .bv-b::before{color:var(--amber)}
.bento-vs--dark .bv:hover .bv-b{color:var(--cream)}

/* work: straight grid, no rotation, no pin */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.wcard{display:flex;flex-direction:column;rotate:none!important;transform:none;
  background:var(--ink2);box-shadow:10px 10px 0 rgba(0,0,0,.55);width:auto!important;
  transition:transform .35s var(--ease-boing),box-shadow .35s var(--ease-boing)}
.wcard:hover{transform:translate(-5px,-5px);box-shadow:16px 16px 0 var(--amber)}
.wcard .thumb{aspect-ratio:16/9;overflow:hidden;position:relative;background:#000}
.wcard .thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease-boing)}
.wcard:hover .thumb img{transform:scale(1.06)}
.wcard .meta{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.wcard .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.wcard h3{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.05;color:var(--cream);margin:0}
.wcard .meta p{font-size:13.5px;line-height:1.5;color:rgba(248,245,238,.62);margin:0}
.wcard .yt{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cream);
  border-top:1px solid var(--line-inv);display:inline-block}
.wcard:hover .yt{color:var(--amber)}

.wcard--open{background:var(--red);box-shadow:10px 10px 0 var(--ink);justify-content:space-between;
  padding:26px 24px;min-height:280px}
.wcard--open:hover{box-shadow:16px 16px 0 var(--ink)}
.wcard--open .tag{color:rgba(255,255,255,.8)}
.wcard--open h3{color:var(--ink);font-size:clamp(28px,3vw,40px);margin:auto 0}
.wcard--open .yt{color:var(--ink);border-top-color:rgba(13,13,13,.3)}
.wcard--open:hover .yt{color:#fff}

@media (max-width:1000px){.wgrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.wgrid{grid-template-columns:1fr}.wcard--open{min-height:200px}}