/* ══════════════════════════════════════════════════════════════════════════
   CHROMA CHASERS — 01 · TOKENS & PRIMITIVES
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --void:#08090a;
  --void-2:#0d0f10;
  --panel:#121517;
  --panel-2:#171b1d;
  --line:#23282b;

  --bone:#efe9dc;
  --bone-2:#a9a396;
  --bone-3:#6d6960;

  --chroma:#00d563;
  --lime:#c3f53c;
  --amber:#ffb14a;
  --signal:#ff3a17;
  --ice:#78b7ff;
  --violet:#b07bff;
  --violet-deep:#6d28d9;

  --display:'Archivo',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'Space Mono',ui-monospace,monospace;

  --gut:clamp(18px,4vw,64px);
  --maxw:1520px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
body{
  margin:0;background:var(--void);color:var(--bone);
  font-family:var(--display);font-size:clamp(15px,1.02vw,17px);line-height:1.55;overflow-x:hidden;
}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
::selection{background:var(--chroma);color:#04140c}
:focus-visible{outline:2px solid var(--chroma);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.pad{padding-block:clamp(40px,5vw,78px)}
.pad-sm{padding-block:clamp(26px,3.4vw,48px)}
.alt{background:var(--void-2);border-block:1px solid var(--line)}

.lab{
  font-family:var(--mono);font-size:clamp(9.5px,.72vw,11px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3);
  display:inline-flex;align-items:center;gap:.7em;
}
.lab::before{content:'';width:22px;height:1px;background:currentColor;opacity:.6;flex:none}
.lab.bare::before{display:none}
.lab b{color:var(--chroma);font-weight:400}

.dsp{
  font-weight:900;font-variation-settings:'wdth' 112,'wght' 900;
  line-height:.86;letter-spacing:-.035em;text-transform:uppercase;margin:0;text-wrap:balance;
}
.dsp .sw{
  font-family:var(--serif);font-weight:400;font-style:italic;font-variation-settings:normal;
  text-transform:none;letter-spacing:-.005em;padding-inline:.015em;
}
.h-xl{font-size:clamp(44px,10.6vw,168px)}
.h-lg{font-size:clamp(36px,7.2vw,104px)}
.h-md{font-size:clamp(27px,4.3vw,60px)}

.body-lg{font-size:clamp(16px,1.3vw,20px);line-height:1.52;color:var(--bone-2);max-width:62ch;font-weight:400}
.body{color:var(--bone-2);font-weight:400}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em}

/* ── sketchbook marginalia ───────────────────────────────────────────── */
.note-hand{
  font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.5vw,21px);
  color:var(--violet);display:inline-block;transform:rotate(-2deg);transform-origin:left center;
  position:relative;padding-bottom:6px;
}
.note-hand::after{
  content:'';position:absolute;left:2%;right:6%;bottom:0;height:6px;
  border-bottom:1.6px solid currentColor;border-radius:50%;opacity:.45;
  transform:rotate(.6deg);
}

/* ── grain ──────────────────────────────────────────────────────────── */
.grain{
  position:fixed;inset:0;z-index:92;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── chroma reveal ──────────────────────────────────────────────────── */
.chroma{filter:saturate(.05) contrast(1.14) brightness(.88);transition:filter 900ms var(--ease-out)}
.chroma.lit{filter:saturate(1) contrast(1.03) brightness(1)}

/* ── scroll reveal ──────────────────────────────────────────────────── */
.rv{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .rv{opacity:0;transform:translateY(26px)}
.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}


/* ══════════════════════════════════════════════════════════════════════════
   00b · DRAWN MARKS — the planning layer
   ════════════════════════════════════════════════════════════════════════ */
.mk-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mk{
  position:absolute;overflow:visible;color:var(--mc);
  width:calc(var(--s,1) * clamp(46px,5.4vw,96px));height:auto;
  transform:
    translate(calc(-50% + var(--mx,0px)), calc(-50% + var(--my,0px) + var(--sy,0px)))
    rotate(calc(var(--r,0deg) + var(--mr,0deg)));
  opacity:0;transition:opacity .7s var(--ease-out);
  will-change:transform;
}
.mk.in{opacity:.5}
#hero .mk.in{opacity:.72}
/* stroked marks draw themselves in */
.mk.drawn path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.25s var(--ease-out)}
.mk.drawn.in path{stroke-dashoffset:0}
.mk.fill path{transition:none}
.mk path{
  fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.mk.fill path{fill:currentColor;stroke:none}
/* on the pale hero the marks need to read darker */
#hero .mk{opacity:.72}
@media(max-width:900px){
  .mk.in{opacity:.3}
  #hero .mk.in{opacity:.5}
  .mk{width:calc(var(--s,1) * clamp(32px,7vw,56px))}
  .mk-layer .mk:nth-child(n+5){display:none}
}
/* keep real content above the furniture */
section > .wrap{position:relative;z-index:2}

/* ══════════════════════════════════════════════════════════════════════════
   02 · NAV
   ════════════════════════════════════════════════════════════════════════ */
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:80;
  background:linear-gradient(90deg,var(--chroma),var(--lime),var(--amber));box-shadow:0 0 14px -2px var(--chroma)}
#nav{
  position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:16px var(--gut);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),backdrop-filter .45s,border-color .45s,padding .45s;
}
#nav.stuck{background:rgba(8,9,10,.8);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line);padding-block:11px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .glyph{
  width:26px;height:26px;flex:none;border-radius:3px;
  background:conic-gradient(from 210deg,var(--chroma),var(--lime),var(--amber),var(--signal),var(--violet),var(--chroma));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 22px -6px var(--chroma);
}
.brand .txt{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;line-height:1.2}
.brand .txt small{display:block;color:var(--bone-3);font-size:8.5px;letter-spacing:.26em}
.nav-mid{display:flex;gap:clamp(12px,1.9vw,30px);align-items:center}
.nav-mid a{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--bone-2);position:relative;padding:5px 0;transition:color .3s}
.nav-mid a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--chroma);transition:width .38s var(--ease-out)}
.nav-mid a:hover{color:var(--bone)}
.nav-mid a:hover::after{width:100%}
.nav-cta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:9px 17px;display:inline-flex;
  align-items:center;gap:8px;transition:.35s var(--ease);flex:none;
}
.nav-cta .dot{width:6px;height:6px;border-radius:50%;background:var(--chroma);box-shadow:0 0 10px var(--chroma)}
.nav-cta:hover{background:var(--bone);color:var(--void);border-color:var(--bone)}
.burger{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.18em;border:1px solid var(--line);border-radius:100px;padding:9px 15px}
@media(max-width:1020px){
  .nav-mid{
    position:fixed;inset:0;background:rgba(8,9,10,.97);backdrop-filter:blur(20px);
    flex-direction:column;justify-content:center;gap:22px;opacity:0;visibility:hidden;transition:.4s var(--ease);
  }
  .nav-mid.open{opacity:1;visibility:visible}
  .nav-mid.open a{font-size:30px;font-family:var(--display);font-weight:800;letter-spacing:-.02em;color:var(--bone)}
  .burger{display:inline-block;position:relative;z-index:2}
  .nav-cta{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   03 · HERO — bright chroma canvas, the name as the artwork
   ════════════════════════════════════════════════════════════════════════ */
#hero{
  --ink:#0a0f0c;
  position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  display:grid;grid-template-rows:1fr auto;color:var(--ink);background:#f6f5ee;
}
.wash{
  position:absolute;inset:0;z-index:0;translate:var(--wx,0) var(--wy,0);
  background:
    radial-gradient(84% 60% at 50% 118%, #1fd875 0%, #63e79a 20%, #b2efbe 42%, #dfeedd 66%, rgba(246,245,238,0) 86%),
    radial-gradient(46% 34% at 88% 4%,  rgba(255,177,74,.34), transparent 70%),
    radial-gradient(40% 34% at 6% 8%,   rgba(176,123,255,.24), transparent 72%);
}
/* iridescent bloom — the premium bit */
.bloom{
  position:absolute;right:-12%;top:-22%;z-index:1;pointer-events:none;
  width:min(62vw,780px);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 200deg at 50% 50%,
    #ffb14a,#ff3a17,#b07bff,#78b7ff,#22e07a,#c3f53c,#ffb14a);
  filter:blur(96px) saturate(1.25);opacity:.34;
  translate:var(--bx,0) var(--by,0);
  animation:bloomFloat 22s ease-in-out infinite, bloomSpin 40s linear infinite;
  will-change:transform,translate;
}
@keyframes bloomFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%    {transform:translate3d(-5%,6%,0) scale(1.09)}
  66%    {transform:translate3d(4%,-4%,0) scale(.95)}
}
@keyframes bloomSpin{to{filter:blur(96px) saturate(1.25) hue-rotate(360deg)}}

/* green light drifting around the corners of the frame */
.glow{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.glow i{
  position:absolute;width:52vw;height:52vw;max-width:620px;max-height:620px;border-radius:50%;
  filter:blur(80px);opacity:.5;
}
.glow i:nth-child(1){background:radial-gradient(circle,#22e07a,transparent 66%);animation:cornerA 26s ease-in-out infinite}
.glow i:nth-child(2){background:radial-gradient(circle,#0f9d58,transparent 66%);animation:cornerB 32s ease-in-out infinite}
.glow i:nth-child(3){background:radial-gradient(circle,#b8ff5c,transparent 66%);animation:cornerC 38s ease-in-out infinite}
@keyframes cornerA{
  0%,100%{left:-18%;top:62%} 25%{left:58%;top:78%}
  50%{left:76%;top:12%}      75%{left:6%;top:-16%}
}
@keyframes cornerB{
  0%,100%{left:74%;top:70%}  25%{left:-14%;top:44%}
  50%{left:18%;top:-18%}     75%{left:72%;top:8%}
}
@keyframes cornerC{
  0%,100%{left:30%;top:-20%} 33%{left:-16%;top:18%}
  66%{left:64%;top:64%}
}
.hero-grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,rgba(10,15,12,.06) 0 1px,transparent 1px);
  background-size:12.5% 100%;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 74%);
  mask-image:linear-gradient(to bottom,#000,transparent 74%);
}

.hero-in{
  position:relative;z-index:3;align-self:center;width:100%;
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(76px,9.5vh,110px) var(--gut) clamp(20px,3vh,40px);
  display:grid;gap:clamp(16px,2.6vh,32px);
}
.hero-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.brk{font-family:var(--mono);font-size:clamp(9.5px,.74vw,11px);letter-spacing:.2em;text-transform:uppercase;color:rgba(10,15,12,.55)}
.brk b{color:var(--ink);font-weight:400}
.brk.dim{color:rgba(10,15,12,.42)}
.pill-live{
  display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#f6f5ee;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border-radius:100px;padding:9px 16px;
}
.pill-live i{width:7px;height:7px;border-radius:50%;background:#22e07a;box-shadow:0 0 0 3px rgba(34,224,122,.28)}

.lockup{position:relative;translate:var(--lx,0) var(--ly,0)}
.title-star{
  position:absolute;left:78%;top:-17%;z-index:6;
  width:clamp(34px,4.4vw,74px);color:#e0452b;overflow:visible;
  transform:rotate(var(--sr,0deg));
  animation:starPulse 3.6s ease-in-out infinite;
}
.title-star path{fill:currentColor}
@keyframes starPulse{
  0%,100%{opacity:1;scale:1}
  50%    {opacity:.72;scale:1.16}
}
@media(max-width:959px){.title-star{width:28px;left:auto;right:4%;top:-13%}}
.word{
  margin:0;font-weight:900;font-variation-settings:'wdth' 118,'wght' 900;
  font-size:clamp(52px,14.2vw,232px);line-height:.82;letter-spacing:-.045em;
  text-transform:uppercase;color:var(--ink);
}
.word .ln{display:block}
/* line one: the grotesk — this is the word that carries the colour */
.word .l-a{
  font-family:var(--display);font-weight:900;font-variation-settings:'wdth' 118,'wght' 900;
  letter-spacing:-.045em;
  /* one solid colour at a time; the next wipes across from the left.
     Each band is 2x the element width, so the word sits fully in one
     colour and only the boundary travels. Last stop repeats the first
     so the 0%->100% sweep loops seamlessly. */
  background:linear-gradient(96deg,
    #e0452b 0%,    #e0452b 11%,
    #f0812a 12.5%, #f0812a 23.5%,
    #d9b114 25%,   #d9b114 36%,
    #0f9d58 37.5%, #0f9d58 48.5%,
    #1e8fd0 50%,   #1e8fd0 61%,
    #6d28d9 62.5%, #6d28d9 73.5%,
    #b03ad9 75%,   #b03ad9 86%,
    #e0452b 87.5%, #e0452b 100%);
  background-size:3200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:chromaCycle 75s linear infinite;
}
@keyframes chromaCycle{from{background-position:0% 0}to{background-position:100% 0}}
@supports not (background-clip:text){ .word .l-a{color:var(--violet-deep)} }
/* line two: the didone italic, solid ink */
.word .l-b{
  font-family:var(--fraun);font-weight:500;font-style:italic;font-variation-settings:'opsz' 144,'wght' 500,'SOFT' 100,'WONK' 1;
  text-transform:none;letter-spacing:-.018em;line-height:.92;
  font-size:1.12em;margin-top:-.04em;color:var(--ink);
}
.slogan{
  margin:clamp(8px,1.2vh,16px) 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(24px,3.6vw,58px);line-height:1;color:var(--ink);
  transform:rotate(-1.6deg);transform-origin:left center;
}

/* stickers */
.tag{
  font-family:var(--mono);font-size:clamp(9.5px,.78vw,11.5px);letter-spacing:.12em;
  text-transform:uppercase;background:var(--ink);color:#f6f5ee;border-radius:100px;
  padding:8px 15px;box-shadow:0 8px 22px -10px rgba(10,15,12,.55);
  transition:transform .28s var(--ease),background .28s,color .28s;white-space:nowrap;
}
.tag:hover{transform:translateY(-3px) rotate(0deg) !important;background:var(--violet);color:#120a1e}
.tag.hot{background:var(--signal);color:#fff}
.tag.hot:hover{background:var(--ink);color:#fff}
.tag.go{background:#22e07a;color:#04140c}
.tag.go:hover{background:var(--ink);color:#22e07a}
@media(min-width:960px){
  .tag{position:absolute;z-index:4}
  .t1{top:-5%;left:42%;transform:rotate(-5deg)}
  .t2{bottom:38%;right:4%;transform:rotate(4deg)}
  .t3{top:44%;right:19%;transform:rotate(-3deg)}
  .t4{top:-2%;right:26%;transform:rotate(7deg)}
  .t5{bottom:16%;right:2%;transform:rotate(-6deg)}
  .t6{bottom:-4%;left:58%;transform:rotate(3deg)}
}
@media(max-width:959px){
  .lockup{display:grid;gap:12px;justify-items:start}
  .tag{position:static;display:none}
  .lockup .t1,.lockup .t3,.lockup .t5{display:inline-block}
}

.seal{
  position:absolute;right:2%;top:-8%;z-index:5;
  width:clamp(84px,9vw,124px);aspect-ratio:1;border-radius:50%;
  background:var(--ink);color:#f6f5ee;display:grid;place-items:center;
  font-family:var(--mono);font-size:clamp(9px,.72vw,11px);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.5;text-align:center;
  box-shadow:0 14px 34px -14px rgba(10,15,12,.6);
  transform:rotate(-9deg);transition:transform .35s var(--ease),background .3s,color .3s;
}
.seal b{color:#22e07a;font-size:1.3em}
.seal:hover{transform:rotate(0deg) scale(1.05);background:var(--violet);color:#120a1e}
.seal:hover b{color:var(--ink)}
@media(max-width:959px){.seal{display:none}}

/* ── doodles: the hand-drawn furniture ──────────────────────────────── */
.doodles{position:absolute;inset:0;z-index:2;pointer-events:none}
.dd{position:absolute;overflow:visible}
.dd path{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dd-2 path,.dd-4 path,.dd-5 path{fill:currentColor;stroke:none}
.dd-1{top:13%;left:4%;width:clamp(70px,7vw,124px);color:var(--violet-deep)}
.dd-1 path{stroke:currentColor}
.dd-2{top:7%;right:16%;width:clamp(34px,3.4vw,58px);color:#22e07a}
.dd-3{bottom:24%;left:2%;width:clamp(58px,6vw,96px);color:var(--signal)}
.dd-3 path{stroke:currentColor}
.dd-4{top:34%;right:7%;width:clamp(20px,2vw,34px);color:var(--violet-deep)}
.dd-5{bottom:16%;right:22%;width:clamp(14px,1.4vw,24px);color:var(--signal)}
.dd-6{bottom:9%;left:38%;width:clamp(64px,6.5vw,110px);color:#0f9d58}
.dd-6 path{stroke:currentColor}
@media(max-width:820px){.dd-1,.dd-3,.dd-6{display:none}}

/* Rotterdam × Amsterdam */
.place{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap}
.place .city{
  font-weight:800;font-variation-settings:'wdth' 108,'wght' 800;
  font-size:clamp(14px,1.55vw,22px);letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);
}
.place .x{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,28px);color:var(--violet);line-height:1}
.place .rule{flex:1 1 40px;min-width:28px;height:1px;background:rgba(10,15,12,.22)}
.place .ww{font-family:var(--mono);font-size:clamp(9.5px,.74vw,11px);letter-spacing:.2em;text-transform:uppercase;color:rgba(10,15,12,.6)}

.hero-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,60px);align-items:end}
@media(max-width:860px){.hero-bottom{grid-template-columns:1fr;gap:20px}}
.hero-copy{margin:0;max-width:50ch;font-weight:400;font-size:clamp(14px,1.05vw,16.5px);line-height:1.6;color:rgba(10,15,12,.72)}
.hero-acts{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  border-radius:100px;padding:13px 22px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn-solid{background:var(--ink);color:#f6f5ee;border:1px solid var(--ink)}
.btn-solid:hover{background:var(--violet);border-color:var(--violet);color:#120a1e;transform:translateY(-2px)}
.btn-line{border:1px solid rgba(10,15,12,.3);color:rgba(10,15,12,.75)}
.btn-line:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}

.hero-foot{
  position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;
  gap:16px 28px;flex-wrap:wrap;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:16px var(--gut) 20px;border-top:1px solid rgba(10,15,12,.14);
}

/* nav sits on light until it sticks */
#nav:not(.stuck) .brand .txt{color:#0a0f0c}
#nav:not(.stuck) .brand .txt small{color:rgba(10,15,12,.5)}
#nav:not(.stuck) .nav-mid a{color:rgba(10,15,12,.66)}
#nav:not(.stuck) .nav-mid a:hover{color:#0a0f0c}
#nav:not(.stuck) .nav-cta{border-color:rgba(10,15,12,.28);color:#0a0f0c}
#nav:not(.stuck) .nav-cta:hover{background:#0a0f0c;color:#f6f5ee;border-color:#0a0f0c}
#nav:not(.stuck) .burger{border-color:rgba(10,15,12,.28);color:#0a0f0c}
@media(max-width:1020px){#nav:not(.stuck) .nav-mid.open a{color:var(--bone)}}

/* ══════════════════════════════════════════════════════════════════════════
   04 · POP-UP
   ════════════════════════════════════════════════════════════════════════ */
#pop{
  position:fixed;inset:0;z-index:160;display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);background:rgba(6,9,7,.62);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility .32s;
}
#pop.open{opacity:1;visibility:visible}
.pop-card{
  position:relative;width:100%;max-width:520px;background:#f6f5ee;color:#0a0f0c;
  border-radius:4px;padding:clamp(26px,3.4vw,42px);display:grid;gap:16px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transform:translateY(14px) scale(.985);transition:transform .38s var(--ease-out);
}
#pop.open .pop-card{transform:none}
.pop-card::before{
  content:'';position:absolute;inset:auto 0 0;height:4px;
  background:linear-gradient(90deg,#22e07a,var(--amber),var(--violet),var(--signal));
}
.pop-card h3{margin:0;color:#0a0f0c;font-size:clamp(25px,3vw,36px);line-height:.94}
.pop-card h3 .sw{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;font-variation-settings:normal;color:var(--violet)}
.pop-card > p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(10,15,12,.68);font-weight:400}
.pop-card .brk{color:rgba(10,15,12,.5)}
.pop-rows{display:grid;gap:1px;background:rgba(10,15,12,.14);border:1px solid rgba(10,15,12,.14);margin-top:4px}
.pop-row{display:grid;grid-template-columns:86px 1fr 18px;gap:12px;align-items:center;background:#f6f5ee;padding:13px 14px;transition:background .25s}
.pop-row:not(.static):hover{background:#e6f7ea}
.pop-row .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,15,12,.48)}
.pop-row .v{font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.pop-row .a{font-size:13px;color:var(--violet);text-align:right}
.pop-x{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(10,15,12,.18);display:grid;place-items:center;font-size:15px;transition:.28s;
}
.pop-x:hover{background:#0a0f0c;color:#f6f5ee;border-color:#0a0f0c}
/* ══════════════════════════════════════════════════════════════════════════
   05 · TICKER
   ════════════════════════════════════════════════════════════════════════ */
.ticker{
  position:relative;overflow:hidden;border-block:1px solid var(--line);
  background:linear-gradient(90deg,var(--void),var(--void-2),var(--void));
  padding-block:13px;z-index:10;
}
.ticker-run{display:flex;width:max-content;animation:run 70s linear infinite}
.ticker:hover .ticker-run{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}
.ticker-run span{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-2);padding-inline:22px;display:inline-flex;align-items:center;gap:22px;white-space:nowrap;
}
.ticker-run span::after{content:'✳';color:var(--chroma);font-size:10px}

/* ══════════════════════════════════════════════════════════════════════════
   06 · SECTION HEAD
   ════════════════════════════════════════════════════════════════════════ */
.sec-head{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(20px,3vw,40px)}
@media(max-width:860px){.sec-head{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════════
   07 · ABOUT · FACTS
   ════════════════════════════════════════════════════════════════════════ */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--panel)}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.facts{grid-template-columns:1fr}}
.fact{padding:clamp(22px,3vw,38px);border-right:1px solid var(--line);position:relative;overflow:hidden}
.fact:last-child{border-right:0}
@media(max-width:900px){
  .fact:nth-child(2n){border-right:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:520px){.fact{border-right:0;border-bottom:1px solid var(--line)}.fact:last-child{border-bottom:0}}
.fact .n{
  font-size:clamp(40px,5.6vw,78px);font-weight:900;font-variation-settings:'wdth' 100,'wght' 900;
  line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.fact .n.wide{font-size:clamp(24px,2.7vw,40px);letter-spacing:-.03em;color:var(--chroma)}
.fact .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);margin-top:12px;line-height:1.6}
.fact::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--chroma);transition:width 1.2s var(--ease-out) .2s}
.fact.in::after{width:100%}


/* ── founders preview, early in the page ────────────────────────────── */
.peek{
  display:inline-flex;align-items:center;gap:16px;
  margin:clamp(24px,3vw,44px) 0 clamp(26px,3.4vw,46px);
  padding:10px 22px 10px 12px;border:1px solid var(--line);border-radius:100px;
  background:var(--panel);transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease);
}
.peek:hover{border-color:var(--chroma);background:var(--panel-2);transform:translateY(-2px)}
.peek-faces{display:flex;flex:none}
.peek-faces img,.peek-faces .ph{
  width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:2px solid var(--panel);margin-right:-14px;background:var(--panel-2);
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--bone-3);
  filter:saturate(.25);transition:filter .5s var(--ease);
}
.peek:hover .peek-faces img{filter:saturate(1)}
.peek-faces img:last-child,.peek-faces .ph:last-child{margin-right:0}
.peek-txt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-2)}
.peek-arrow{color:var(--chroma);font-size:14px;line-height:1}
@media(max-width:520px){.peek{width:100%;justify-content:flex-start}}

/* ══════════════════════════════════════════════════════════════════════════
   08 · SERVICES
   ════════════════════════════════════════════════════════════════════════ */
.svc{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
@media(max-width:1000px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.svc{grid-template-columns:1fr}}
.svc-i{
  padding:clamp(22px,2.6vw,34px);border-right:1px solid var(--line);position:relative;
  display:grid;gap:14px;align-content:start;overflow:hidden;background:var(--panel);
  transition:background .5s var(--ease);
}
.svc-i:last-child{border-right:0}
@media(max-width:1000px){.svc-i:nth-child(2n){border-right:0}.svc-i:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:600px){.svc-i{border-right:0;border-bottom:1px solid var(--line)}.svc-i:last-child{border-bottom:0}}
.svc-i:hover{background:var(--panel-2)}
.svc-i::before{content:'';position:absolute;inset:auto 0 0;height:2px;width:0;background:var(--sc);transition:width .7s var(--ease-out)}
.svc-i:hover::before{width:100%}
.svc-i .no{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--sc)}
.svc-i h3{margin:0;font-size:clamp(21px,2.2vw,30px);font-weight:900;letter-spacing:-.03em;text-transform:uppercase;line-height:.96;font-variation-settings:'wdth' 106,'wght' 900}
.svc-i p{margin:0;color:var(--bone-2);font-size:14.5px;line-height:1.55;font-weight:400}
.svc-i ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.svc-i li{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-3);display:flex;gap:9px}
.svc-i li::before{content:'—';color:var(--sc);flex:none}
.svc-who{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.svc-who b{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;border:1px solid var(--line);border-radius:100px;padding:4px 9px;color:var(--bone-2)}

/* ── process ─────────────────────────────────────────────────────────── */
.proc{position:relative;padding-top:40px;margin-top:clamp(30px,4.4vw,58px)}
.proc-ruler{position:absolute;top:0;left:0;right:0;height:34px;background:linear-gradient(to bottom,rgba(239,233,220,.07),transparent)}
.proc-ruler::before{content:'';position:absolute;inset:0 0 auto;height:8px;background:repeating-linear-gradient(to right,var(--bone-3) 0 1px,transparent 1px 12px);opacity:.5}
.proc-ruler::after{content:'';position:absolute;inset:0 0 auto;height:15px;background:repeating-linear-gradient(to right,var(--bone-2) 0 1.5px,transparent 1.5px 60px);opacity:.6}
.proc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.proc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,22px)}
@media(max-width:1000px){.proc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.proc-grid{grid-template-columns:1fr}}
.step{display:grid;gap:11px;align-content:start;padding-top:20px;border-top:1px solid var(--line);position:relative}
.step::before{content:'';position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--chroma);transition:width .8s var(--ease-out)}
.step.in::before{width:100%}
.step .no{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--chroma)}
.step h4{margin:0;font-size:clamp(17px,1.7vw,23px);font-weight:800;letter-spacing:-.025em;text-transform:uppercase;line-height:1.02}
.step p{margin:0;color:var(--bone-2);font-size:14px;line-height:1.55;font-weight:400}
.step-arrow{
  position:absolute;top:-34px;right:-4%;font-size:18px;color:var(--violet);opacity:.55;
  font-family:var(--serif);transform:rotate(14deg);
}
@media(max-width:1000px){.step-arrow{display:none}}


/* ══════════════════════════════════════════════════════════════════════════
   08b · SOFTWARE & SKILLS
   ════════════════════════════════════════════════════════════════════════ */
.soft{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.soft{grid-template-columns:repeat(2,1fr)}}
.sw-tile{
  background:var(--panel);padding:clamp(18px,2.2vw,28px);display:grid;gap:9px;align-content:start;
  position:relative;overflow:hidden;transition:background .45s var(--ease);
}
.sw-tile:hover{background:var(--panel-2)}
.sw-tile::after{content:'';position:absolute;inset:auto 0 0;height:2px;width:0;background:var(--tc);transition:width .6s var(--ease-out)}
.sw-tile:hover::after{width:100%}
.sw-mark{
  width:46px;height:46px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:-.02em;
  color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,#0c0f11);
  border:1px solid color-mix(in srgb,var(--tc) 32%,transparent);
}
.sw-name{font-size:15px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.sw-use{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
.sw-who{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 30%,var(--line));
  border-radius:100px;padding:3px 9px;justify-self:start;margin-top:2px;
}

.skills-wrap{margin-top:clamp(28px,4vw,52px)}
.skills-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,34px)}
.bars{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px)}
@media(max-width:820px){.bars{grid-template-columns:1fr;gap:34px}}
.skillcol{display:grid;gap:16px}
.skillcol-h{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sc);
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.bar{display:grid;gap:8px}
.bar-k{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.bar-k span{font-size:14px;font-weight:600;letter-spacing:-.01em}
.bar-k b{font-family:var(--mono);font-size:11px;color:var(--sc);font-weight:400}
.bar-t{height:4px;background:var(--line);position:relative;overflow:hidden}
.bar-t i{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--sc);
  transition:width 1.1s var(--ease-out) .15s;
}
.rv.in .bar-t i{width:var(--w)}

/* ══════════════════════════════════════════════════════════════════════════
   09b · COPYWRITING CLIENT
   ════════════════════════════════════════════════════════════════════════ */
.cclient{
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(22px,3vw,44px);display:grid;gap:16px;justify-items:start;
}
.cclient-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;width:100%}
.cclient h3{
  margin:6px 0 0;font-size:clamp(30px,4.2vw,60px);font-weight:900;
  font-variation-settings:'wdth' 108,'wght' 900;letter-spacing:-.04em;line-height:.94;text-transform:uppercase;
}
.cclient-where{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);margin-top:8px}
.cclient-what{margin:0;font-size:clamp(15px,1.25vw,18px);line-height:1.58;color:var(--bone-2);max-width:62ch;font-weight:400}
.cclient-role{
  margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);line-height:1.8;
}
.cclient .breakdown{grid-template-columns:repeat(3,1fr)}
@media(max-width:620px){.cclient .breakdown{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════════
   09 · WORK
   ════════════════════════════════════════════════════════════════════════ */
.filters{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(20px,3vw,38px)}
.fgroup{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:8px 15px;color:var(--bone-2);
  transition:.32s var(--ease);white-space:nowrap;
}
.chip:hover{color:var(--bone);border-color:var(--bone-3)}
.chip[aria-pressed="true"]{background:var(--bone);color:var(--void);border-color:var(--bone)}
.chip .c{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:.5px;background:var(--cc,var(--chroma))}
.chip[aria-pressed="true"] .c{box-shadow:0 0 0 2px rgba(0,0,0,.18)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,18px)}
.card{
  grid-column:span 4;position:relative;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);isolation:isolate;
  transition:border-color .5s var(--ease),transform .6s var(--ease-out);
}
.card.w6{grid-column:span 6}
.card.w8{grid-column:span 8}
.card.w12{grid-column:span 12}
@media(max-width:1000px){.card,.card.w6,.card.w8{grid-column:span 6}.card.w12{grid-column:span 12}}
@media(max-width:640px){.card,.card.w6,.card.w8,.card.w12{grid-column:span 12}}
.card.hide{display:none}
.card:hover{border-color:color-mix(in srgb,var(--cc) 50%,var(--line));transform:translateY(-3px)}
.card-media{position:relative;overflow:hidden;background:#0e1113;aspect-ratio:16/9}
.card[data-fmt="9:16"] .card-media{aspect-ratio:3/4}
.card-media img,.card-media video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.05)}
.card-media video{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.card.playing .card-media video{opacity:1}
.card-media::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(8,9,10,.9) 0%,rgba(8,9,10,.15) 42%,transparent 70%)}
.card-badges{position:absolute;top:12px;left:12px;right:12px;z-index:3;display:flex;gap:7px;justify-content:space-between;align-items:flex-start}
.badge{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(8,9,10,.7);backdrop-filter:blur(8px);border:1px solid rgba(239,233,220,.14);
  border-radius:100px;padding:5px 10px;color:var(--bone-2);white-space:nowrap;
}
.badge.fmt{border-color:color-mix(in srgb,var(--cc) 45%,transparent);color:var(--bone)}
.badge.fmt::before{content:'';width:7px;height:7px;background:var(--cc);border-radius:50%;display:inline-block;margin-right:6px}
.card-body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(14px,1.6vw,22px);display:grid;gap:7px}
.card-body h3{margin:0;font-size:clamp(19px,2vw,30px);font-weight:900;font-variation-settings:'wdth' 108,'wght' 900;letter-spacing:-.03em;line-height:.96;text-transform:uppercase}
.card-meta{display:flex;flex-wrap:wrap;gap:7px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-3)}
.card-meta b{color:color-mix(in srgb,var(--cc) 80%,var(--bone));font-weight:400}
.card-play{
  position:absolute;inset:auto 14px 14px auto;z-index:4;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(239,233,220,.25);display:grid;place-items:center;
  background:rgba(8,9,10,.55);backdrop-filter:blur(8px);transition:.4s var(--ease);
}
.card:hover .card-play{background:var(--bone);color:var(--void);border-color:var(--bone);transform:scale(1.08)}

/* ══════════════════════════════════════════════════════════════════════════
   10 · VERTICAL RAIL
   ════════════════════════════════════════════════════════════════════════ */
.rail{
  display:flex;gap:clamp(12px,1.5vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:18px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--line)}
.reel{
  flex:0 0 clamp(210px,21vw,280px);scroll-snap-align:start;position:relative;
  border:1px solid var(--line);background:var(--panel);overflow:hidden;
  transition:border-color .5s var(--ease),transform .55s var(--ease-out);
}
.reel:hover{border-color:color-mix(in srgb,var(--cc) 50%,var(--line));transform:translateY(-4px)}
.reel-media{position:relative;aspect-ratio:9/16;overflow:hidden;background:#0e1113}
.reel-media img,.reel-media video{width:100%;height:100%;object-fit:cover}
.reel-media video{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.reel.playing .reel-media video{opacity:1}
.reel-media::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(8,9,10,.92),transparent 45%)}
.reel-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px;display:grid;gap:5px}
.reel-body h4{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;line-height:1.05}
.reel-body .m{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
.reel .notch{position:absolute;top:9px;left:50%;translate:-50% 0;width:52px;height:5px;border-radius:100px;background:rgba(8,9,10,.6);z-index:3}
.rail-hint{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);margin-top:14px}

/* ══════════════════════════════════════════════════════════════════════════
   11 · CLIENTS — floating logo rail
   ════════════════════════════════════════════════════════════════════════ */
.clients-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,44px)}
.logo-rail{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.logo-run{display:flex;width:max-content;animation:run 46s linear infinite;align-items:center}
.logo-rail:hover .logo-run{animation-play-state:paused}
.logo{
  flex:none;width:clamp(172px,16vw,236px);height:clamp(112px,10vw,148px);
  display:block;padding:22px 28px;margin-inline:clamp(6px,.8vw,12px);
  border:1px solid var(--line);background:var(--panel);border-radius:3px;
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
/* width+height+contain letterboxes every logo inside the tile — no cropping,
   whatever its native aspect ratio (square, wide wordmark, tall shield). */
.logo img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  filter:grayscale(1) brightness(1.6) contrast(.9);opacity:.6;
  transition:filter .5s var(--ease),opacity .5s var(--ease);
}
.logo.blend img{mix-blend-mode:screen;filter:grayscale(1) brightness(1.8)}
.logo:hover{border-color:var(--chroma);background:var(--panel-2);transform:translateY(-4px)}
.logo:hover img{filter:none;opacity:1}
.logo.blend:hover img{filter:none;mix-blend-mode:screen}

/* ══════════════════════════════════════════════════════════════════════════
   12 · FOUNDERS
   ════════════════════════════════════════════════════════════════════════ */
.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,30px)}
@media(max-width:860px){.duo-grid{grid-template-columns:1fr}}
.person{
  position:relative;border:1px solid var(--line);background:var(--panel);overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;transition:border-color .5s var(--ease);
}
.person:hover{border-color:color-mix(in srgb,var(--pc) 55%,var(--line))}
.person-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0f1214}
.person-media img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;transition:transform 1.1s var(--ease-out),filter .9s var(--ease-out)}
.person:hover .person-media img{transform:scale(1.045)}
.person-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(205deg,color-mix(in srgb,var(--pc) 45%,transparent),transparent 40%,rgba(0,0,0,.72));
  mix-blend-mode:color-dodge;opacity:.32;transition:opacity .8s var(--ease-out);
}
.person:hover .person-media::after{opacity:.6}
.person-media .slot{
  position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;padding:24px;
  background:repeating-linear-gradient(45deg,#101416 0 12px,#0c1012 12px 24px);
  color:var(--bone-3);font-family:var(--mono);font-size:11px;letter-spacing:.14em;line-height:1.9;
}
.person-tag,.person-from{
  position:absolute;top:14px;z-index:2;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;background:rgba(8,9,10,.72);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:100px;padding:6px 12px;color:var(--bone-2);
}
.person-tag{left:14px}
.person-from{right:14px;color:var(--pc);border-color:color-mix(in srgb,var(--pc) 40%,var(--line))}
@media(max-width:520px){.person-from{display:none}}
.person-body{padding:clamp(18px,2.4vw,30px);display:grid;gap:14px;align-content:start}
.person-body h3{margin:0;font-size:clamp(26px,3.3vw,44px);font-weight:900;font-variation-settings:'wdth' 110,'wght' 900;letter-spacing:-.03em;line-height:.92;text-transform:uppercase}
.person-body h3 .sw{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;font-variation-settings:normal}
.roles{display:flex;flex-wrap:wrap;gap:7px}
.roles span{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:5px 11px;color:var(--bone-2);transition:.4s var(--ease);
}
.person:hover .roles span{border-color:color-mix(in srgb,var(--pc) 40%,var(--line));color:var(--bone)}
.person-bio{margin:0;font-size:15px;line-height:1.6;color:var(--bone-2);font-weight:400}
.person-kit{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;line-height:1.85;color:var(--bone-3)}

/* ══════════════════════════════════════════════════════════════════════════
   13 · TESTIMONIALS
   ════════════════════════════════════════════════════════════════════════ */
.tst-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,20px)}
.tst{
  grid-column:span 6;border:1px solid var(--line);background:var(--panel);
  padding:clamp(24px,2.8vw,40px);display:grid;gap:22px;align-content:space-between;
  position:relative;overflow:hidden;transition:border-color .5s var(--ease);
}
.tst.w4{grid-column:span 4}
.tst.w12{grid-column:span 12}
.tst.hide{display:none}
@media(max-width:900px){.tst,.tst.w4{grid-column:span 12}}
.tst:hover{border-color:color-mix(in srgb,var(--tc) 50%,var(--line))}
.tst::before{
  content:'"';position:absolute;top:-30px;right:16px;font-family:var(--serif);font-style:italic;
  font-size:190px;color:var(--tc);opacity:.1;line-height:1;pointer-events:none;
}
.tst-svc{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 40%,var(--line));
  border-radius:100px;padding:5px 11px;justify-self:start;
}
.tst q{quotes:none;font-size:clamp(17px,1.55vw,23px);line-height:1.42;color:var(--bone);font-weight:400}
.tst q .hl{color:var(--tc)}
.tst-by{display:flex;gap:14px;align-items:center}
.tst-av{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;border:1px solid var(--line);background:var(--panel-2)}
.tst-av.ph{display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--bone-3)}
.tst-logo{
  width:52px;height:52px;flex:none;border:1px solid var(--line);border-radius:3px;
  display:grid;place-items:center;padding:7px;background:var(--void);
}
.tst-logo img{max-width:100%;max-height:100%;object-fit:contain}
.tst-logo.blend img{mix-blend-mode:screen}
.tst-by .n{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.tst-by .r{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);margin-top:3px}
.tst-vid{grid-column:span 12;border:1px solid var(--line);background:var(--panel);overflow:hidden;position:relative}
.tst-vid video{width:100%;max-height:70svh;background:#000}
.tst-vid-cap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
.tst-vid-cap b{color:var(--bone-2);font-weight:400}
.slotbox{
  aspect-ratio:16/7;display:grid;place-content:center;gap:10px;text-align:center;padding:30px;
  background:repeating-linear-gradient(45deg,#101416 0 12px,#0c1012 12px 24px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--bone-3);line-height:2;
}
.slotbox b{color:var(--bone-2);font-weight:400;display:block}
.slotbox code{color:var(--chroma)}


/* ══════════════════════════════════════════════════════════════════════════
   13b · VIDEO TESTIMONIAL (vertical)
   ════════════════════════════════════════════════════════════════════════ */
.vid-tst{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(20px,3vw,48px);
  align-items:center;border:1px solid var(--line);background:var(--panel);
  padding:clamp(20px,2.6vw,36px);margin-top:clamp(12px,1.6vw,20px);
}
@media(max-width:760px){.vid-tst{grid-template-columns:1fr}}
.vt-player{
  position:relative;border-radius:14px;overflow:hidden;background:#000;
  border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.vt-player video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.vt-body{display:grid;gap:16px;align-content:center;justify-items:start}
.vt-pull{
  margin:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(22px,2.6vw,38px);line-height:1.15;color:var(--bone);
}
.vt-by .n{font-size:16px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.vt-by .r{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);margin-top:4px}
.vf{color:#3897f0;font-size:.72em;font-style:normal}

/* ══════════════════════════════════════════════════════════════════════════
   13c · MANAGED ACCOUNT — circled profile + number breakdown
   ════════════════════════════════════════════════════════════════════════ */
.managed{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(22px,3.4vw,58px);
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(20px,2.8vw,40px);align-items:center;
}
@media(max-width:820px){.managed{grid-template-columns:1fr;gap:26px}}
.mg-shot{
  position:relative;display:block;border-radius:12px;overflow:visible;
  transition:transform .5s var(--ease-out);
}
.mg-shot img{
  width:100%;display:block;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.85);
}
.mg-shot:hover{transform:translateY(-4px)}
/* the ring sits over the profile header of the screenshot */
.ring-shot{
  position:absolute;left:24%;top:13.6%;width:74%;height:11.6%;
  overflow:visible;pointer-events:none;z-index:2;
}
.ring-shot path{
  fill:none;stroke:var(--violet);stroke-width:2.4;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:340;stroke-dashoffset:340;
  transition:stroke-dashoffset 1.2s var(--ease-out) .3s;
}
.rv.in .ring-shot path,.mg-shot.in .ring-shot path{stroke-dashoffset:0}
.mg-pin{
  position:absolute;right:-14px;top:26.5%;z-index:3;
  font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.3vw,18px);
  color:var(--violet);background:var(--panel);padding:2px 8px;transform:rotate(-3deg);
  white-space:nowrap;
}
@media(max-width:820px){.mg-pin{right:auto;left:8px;top:auto;bottom:-10px}}

.mg-body{display:grid;gap:12px;align-content:center;justify-items:start}
.mg-body h3{
  margin:0;font-size:clamp(30px,4vw,56px);font-weight:900;
  font-variation-settings:'wdth' 108,'wght' 900;letter-spacing:-.035em;
  line-height:.94;text-transform:uppercase;display:flex;align-items:center;gap:10px;
}
.mg-handle{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--violet)}
.mg-role{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);line-height:1.8}
.mg-blurb{margin:4px 0 0;font-size:15px;line-height:1.6;color:var(--bone-2);max-width:56ch;font-weight:400}

.breakdown{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);width:100%;margin-top:10px;
}
@media(max-width:620px){.breakdown{grid-template-columns:repeat(2,1fr)}}
.bd{background:var(--panel);padding:clamp(14px,1.6vw,20px)}
.bd .n{
  font-size:clamp(22px,2.6vw,36px);font-weight:900;letter-spacing:-.04em;line-height:.95;
  font-variant-numeric:tabular-nums;
}
.bd.hero .n{color:var(--violet);font-size:clamp(28px,3.4vw,48px)}
.bd .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);margin-top:8px;line-height:1.6}

.btn-ghost{
  border:1px solid var(--line);color:var(--bone-2);margin-top:6px;
}
.btn-ghost:hover{border-color:var(--violet);color:var(--bone);background:rgba(176,123,255,.08)}

.result-svc{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet);border:1px solid color-mix(in srgb,var(--violet) 40%,var(--line));
  border-radius:100px;padding:5px 11px;justify-self:start;
}

.grid-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin:clamp(44px,6vw,80px) 0 clamp(18px,2.4vw,30px);
}

/* ══════════════════════════════════════════════════════════════════════════
   14 · INSTAGRAM — two up, equal height, readable
   ════════════════════════════════════════════════════════════════════════ */
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px)}
@media(max-width:820px){.ig-grid{grid-template-columns:1fr}}
.ig{border:1px solid var(--line);background:var(--panel);overflow:hidden;position:relative;transition:border-color .5s;display:grid;grid-template-rows:auto 1fr}
.ig:hover{border-color:var(--violet)}
.ig-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ig-head .h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
.ig-embed{
  height:clamp(560px,52vw,760px);overflow:hidden;background:#0e1113;
  display:flex;align-items:flex-start;justify-content:center;
}
.ig-embed iframe,.ig-embed blockquote{
  margin:0 !important;min-width:0 !important;width:100% !important;
  border:0 !important;background:transparent !important;
}
.ig-fallback{padding:40px 26px;text-align:center;display:grid;gap:14px;place-content:center}
.ig-fallback .lnk{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);border:1px solid var(--line);border-radius:100px;padding:10px 18px;display:inline-block}
.ig-profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,20px);margin-top:clamp(16px,2vw,26px)}
@media(max-width:820px){.ig-profiles{grid-template-columns:1fr}}
.ig-p{border:1px solid var(--line);background:var(--panel);padding:clamp(18px,2.2vw,28px);display:grid;gap:9px;transition:.45s var(--ease)}
.ig-p:hover{background:var(--panel-2);border-color:var(--violet)}
.ig-p .at{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--violet)}
.ig-p .big{font-size:clamp(28px,3.4vw,46px);font-weight:900;letter-spacing:-.04em;line-height:.92;font-variant-numeric:tabular-nums}
.ig-p .cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3)}

/* ══════════════════════════════════════════════════════════════════════════
   15 · CONTACT / FOOTER
   ════════════════════════════════════════════════════════════════════════ */
#contact{position:relative;overflow:hidden;background:radial-gradient(90% 120% at 50% 118%,#123024 0%,var(--void) 62%)}
.big-cta{display:block;width:100%;text-align:center;position:relative;z-index:2;margin-top:22px}
.big-cta .h-xl{transition:color .5s var(--ease);display:block}
.big-cta:hover .h-xl{color:var(--chroma)}
.big-cta .h-xl .sw{color:var(--chroma)}
.cta-sub{
  margin:20px 0 0;text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);position:relative;z-index:2;
}
.contact-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(26px,4vw,52px);position:relative;z-index:2}
@media(max-width:860px){.contact-meta{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.contact-meta{grid-template-columns:1fr}}
.cm{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:1px solid var(--line)}
.cm .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.cm .v{font-size:15px;line-height:1.5;color:var(--bone);overflow-wrap:anywhere}
.cm .v a{transition:color .3s}
.cm .v a:hover{color:var(--chroma)}
footer{border-top:1px solid var(--line);padding:22px var(--gut);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
footer .f{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3)}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:7px 13px;color:var(--bone-2);transition:.35s var(--ease)}
.socials a:hover{background:var(--bone);color:var(--void);border-color:var(--bone)}

/* ══════════════════════════════════════════════════════════════════════════
   16 · LIGHTBOX
   ════════════════════════════════════════════════════════════════════════ */
#lb{position:fixed;inset:0;z-index:150;background:rgba(5,6,6,.94);backdrop-filter:blur(14px);
  display:grid;place-items:center;padding:clamp(16px,4vw,54px);opacity:0;visibility:hidden;transition:.4s var(--ease)}
#lb.open{opacity:1;visibility:visible}
#lb .box{position:relative;width:100%;max-width:1180px;border:1px solid var(--line);background:#0b0d0e;overflow:hidden}
#lb.vert .box{max-width:min(420px,88vw)}
#lb video{width:100%;height:auto;max-height:82svh;background:#000}
#lb .cap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:13px 16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
#lb .x{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(239,233,220,.25);background:rgba(8,9,10,.6);backdrop-filter:blur(8px);display:grid;place-items:center;font-size:17px}
#lb .x:hover{background:var(--bone);color:var(--void)}

@media (prefers-reduced-motion:reduce){
  .word .l-a,.bloom,.glow i,.title-star{animation:none !important}
  .mk{transform:translate(-50%,-50%) rotate(var(--r,0deg)) !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   17 · TYPE PALETTE — more voices, used sparingly
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --chunk:'Bowlby One',var(--display);     /* fat rounded display     */
  --groove:'Bagel Fat One',var(--display); /* 70s groovy              */
  --hand:'Caveat',cursive;                 /* real handwriting        */
  --pixel:'Silkscreen',var(--mono);        /* blocky pixel            */
}
.f-chunk {font-family:var(--chunk);font-weight:400;letter-spacing:-.01em}
.f-groove{font-family:var(--groove);font-weight:400;letter-spacing:0}
.f-hand  {font-family:var(--hand);font-weight:700}
.f-pixel {font-family:var(--pixel);font-weight:400;letter-spacing:.04em}

/* the sketch annotations become genuine handwriting */
.note-hand{
  font-family:var(--hand);font-weight:700;font-style:normal;
  font-size:clamp(19px,2vw,28px);letter-spacing:.01em;
}
/* section index numbers go pixel */
.lab{font-family:var(--pixel);letter-spacing:.12em;font-size:clamp(9px,.7vw,10.5px)}
/* a groovy word inside the big headings, alternating with the serif */
.sec-head:nth-of-type(odd) .dsp .sw{font-family:var(--serif)}
.svc-i .no,.step .no{font-family:var(--pixel)}
.badge,.tst-svc,.result-svc{font-family:var(--pixel);letter-spacing:.1em}
.slogan{font-family:var(--hand);font-weight:700;font-style:normal;font-size:clamp(26px,3.8vw,58px);transform:rotate(-2.4deg);max-width:62%}
.seal span{font-family:var(--pixel);font-size:clamp(8px,.62vw,9.5px);letter-spacing:.06em}
.tag{font-family:var(--pixel);letter-spacing:.04em}
.ticker-run span:nth-child(3n){font-family:var(--chunk);letter-spacing:0;text-transform:none}
.ticker-run span:nth-child(5n){font-family:var(--groove);letter-spacing:0;text-transform:none}

/* ══════════════════════════════════════════════════════════════════════════
   18 · SUNNY — the light-chaser, eyes follow the pointer
   ════════════════════════════════════════════════════════════════════════ */
.sunny{
  position:absolute;left:clamp(8px,3vw,54px);bottom:clamp(96px,14vh,170px);
  z-index:5;width:clamp(64px,7vw,110px);pointer-events:none;
  animation:sunBob 5.5s ease-in-out infinite;
}
.sunny svg{width:100%;height:auto;overflow:visible}
.sun-rays{fill:#f0a92a;transform-origin:60px 60px;animation:sunSpin 26s linear infinite}
.sun-face{fill:#ffcf4a;stroke:#0a0f0c;stroke-width:3}
.eye-w{fill:#fff;stroke:#0a0f0c;stroke-width:2.4}
.eye-p{fill:#0a0f0c;transition:transform .12s linear}
.sun-smile{fill:none;stroke:#0a0f0c;stroke-width:3.4;stroke-linecap:round}
@keyframes sunBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes sunSpin{to{transform:rotate(360deg)}}
@media(max-width:820px){.sunny{width:52px;left:6px;bottom:auto;top:16%}}

/* ══════════════════════════════════════════════════════════════════════════
   19 · CHASE BAND — particles running the light
   ════════════════════════════════════════════════════════════════════════ */
.chase{
  position:relative;height:clamp(120px,16vw,210px);overflow:hidden;
  background:#0b1410;border-bottom:1px solid var(--line);
}
.chase-guides{
  position:absolute;inset:0;opacity:.3;
  background-image:
    repeating-linear-gradient(to right,rgba(195,245,60,.5) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(to bottom,rgba(195,245,60,.28) 0 1px,transparent 1px 34px);
  background-size:100% 1px,1px 100%;
  background-repeat:repeat-x,repeat-y;
  background-position:0 50%,0 0;
}
.chase-guides::after{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(to right,rgba(195,245,60,.16) 0 1px,transparent 1px 90px);
}
#chaseCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.chase-cap{
  position:absolute;left:var(--gut);bottom:12px;z-index:2;
  font-family:var(--hand);font-weight:700;font-size:clamp(16px,1.7vw,24px);color:var(--lime);opacity:.85;
}

/* ══════════════════════════════════════════════════════════════════════════
   20 · SPINNING PROCESS RINGS
   ════════════════════════════════════════════════════════════════════════ */
.rings{
  position:relative;width:min(420px,76vw);aspect-ratio:1;margin:clamp(40px,6vw,80px) auto 0;
}
.rings svg{width:100%;height:100%;overflow:visible}
.ring{font-family:var(--pixel);font-size:15px;letter-spacing:.08em;fill:var(--bone-2)}
.r-a{fill:var(--amber);animation:spinA 34s linear infinite;transform-origin:210px 210px}
.r-b{fill:var(--chroma);animation:spinB 26s linear infinite;transform-origin:210px 210px;font-size:13px}
.r-c{fill:var(--violet);animation:spinA 20s linear infinite;transform-origin:210px 210px;font-size:12px}
@keyframes spinA{to{transform:rotate(360deg)}}
@keyframes spinB{to{transform:rotate(-360deg)}}
.rings-core{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.rings-core span{
  font-family:var(--chunk);font-size:clamp(22px,3vw,44px);color:var(--bone);
  letter-spacing:-.02em;
}
@media(max-width:620px){.ring{font-size:19px}.r-b{font-size:17px}.r-c{font-size:15px}}

/* ══════════════════════════════════════════════════════════════════════════
   21 · WARP BAND
   ════════════════════════════════════════════════════════════════════════ */
.warp{
  position:relative;overflow:hidden;background:var(--signal);
  border-block:1px solid var(--line);padding-block:clamp(10px,1.4vw,20px);
}
.warp-run{display:flex;width:max-content;animation:run 34s linear infinite}
.warp:hover .warp-run{animation-play-state:paused}
.warp-run span{
  font-family:var(--chunk);font-size:clamp(34px,6vw,90px);line-height:.9;
  color:#150404;padding-inline:clamp(16px,2.4vw,40px);white-space:nowrap;
  display:inline-block;transform-origin:50% 50%;
  animation:warpY 3.4s ease-in-out infinite;
}
.warp-run span:nth-child(2n){animation-delay:-.85s;color:#fff4ef}
.warp-run span:nth-child(3n){animation-delay:-1.7s}
.warp-run span:nth-child(4n){animation-delay:-2.55s}
@keyframes warpY{
  0%,100%{transform:scaleY(1)   skewX(0deg)}
  30%    {transform:scaleY(1.5) skewX(-5deg)}
  60%    {transform:scaleY(.72) skewX(5deg)}
}

/* ══════════════════════════════════════════════════════════════════════════
   22 · CAMBOT — the little operator
   ════════════════════════════════════════════════════════════════════════ */
.cambot{
  position:absolute;right:clamp(6px,3vw,64px);top:clamp(10px,4vw,60px);z-index:3;
  width:clamp(86px,10vw,150px);pointer-events:none;
  animation:botBob 4.4s ease-in-out infinite;
}
.cambot svg{width:100%;height:auto;overflow:visible}
.bot-body rect,.bot-body circle{stroke:var(--bone);stroke-width:3;fill:#141a18}
.bot-lens-ring{fill:#0d1211}
.bot-lens{fill:#123024;stroke:var(--chroma)}
.bot-glint{fill:var(--bone);stroke:none;opacity:.75}
.bot-rec{fill:var(--signal);stroke:none;animation:botRec 1.8s steps(1) infinite}
.bot-lid{fill:#141a18;stroke:var(--bone);stroke-width:3;transform-origin:70px 84px;animation:botBlink 5.2s ease-in-out infinite}
.bot-legs path{stroke:var(--bone);stroke-width:3;fill:none;stroke-linecap:round}
.bot-antenna{fill:none;stroke:var(--bone);stroke-width:3;stroke-linecap:round}
.bot-tip{fill:var(--amber);stroke:none;animation:botTip 2.2s ease-in-out infinite}
@keyframes botBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes botBlink{0%,92%,100%{transform:scaleY(0)}94%,98%{transform:scaleY(1)}}
@keyframes botRec{0%,50%{opacity:1}51%,100%{opacity:.15}}
@keyframes botTip{0%,100%{opacity:1;r:5}50%{opacity:.5;r:6.5}}
.cambot-say{
  display:block;text-align:center;margin-top:6px;
  font-family:var(--hand);font-weight:700;font-size:clamp(15px,1.5vw,21px);
  color:var(--amber);transform:rotate(-3deg);
}
@media(max-width:900px){.cambot{position:static;margin:0 auto 18px;width:96px}}

@media (prefers-reduced-motion:reduce){
  .sun-rays,.sunny,.cambot,.bot-lid,.bot-rec,.bot-tip,
  .ring,.warp-run,.warp-run span{animation:none !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   23 · VINTAGE LAYER — VHS hud, halftone, section voices
   ════════════════════════════════════════════════════════════════════════ */
.vhs{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--pixel);font-size:10px;letter-spacing:.08em;color:rgba(10,15,12,.72);
  background:rgba(10,15,12,.06);border:1px solid rgba(10,15,12,.16);border-radius:4px;padding:6px 12px;
}
.vhs-rec{display:inline-flex;align-items:center;gap:6px;color:#d8281a}
.vhs-rec i{width:8px;height:8px;border-radius:50%;background:#d8281a;box-shadow:0 0 8px #d8281a;animation:recBlink 1.1s steps(1) infinite}
@keyframes recBlink{0%,55%{opacity:1}56%,100%{opacity:.15}}
.vhs-date{opacity:.6}
@media(max-width:700px){.vhs{display:none}}

/* halftone screen on photographs */
.halftone{position:relative}
.halftone::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.55) 0 .9px,transparent 1.1px);
  background-size:5px 5px;mix-blend-mode:multiply;opacity:.5;
}
.halftone::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(120deg,rgba(0,213,99,.14),transparent 45%,rgba(176,123,255,.14));
  mix-blend-mode:screen;
}

/* the pixel word inside a serif/grotesk heading */
.px-word{font-family:var(--pixel);font-size:.58em;letter-spacing:.06em;vertical-align:.08em;
  text-transform:uppercase;color:var(--lime)}
.hand-word{font-family:var(--hand);font-weight:700;font-style:normal;text-transform:none;
  font-size:1.02em;color:var(--violet);letter-spacing:.01em}
.sw-g{font-family:var(--groove);text-transform:none;font-size:.92em;color:var(--amber);letter-spacing:0}
.ch-word{font-size:.62em;vertical-align:.1em;color:var(--signal);letter-spacing:.06em}
h2.f-chunk{letter-spacing:-.01em;font-variation-settings:normal;line-height:.92}
h2.f-groove{letter-spacing:0;font-variation-settings:normal;line-height:.95}

/* word-by-word reveal */
.words .w{opacity:.22;transition:opacity .35s var(--ease-out);display:inline}
.words .w.on{opacity:1}

/* ══════════════════════════════════════════════════════════════════════════
   24 · THE PIGEON — location scout
   ════════════════════════════════════════════════════════════════════════ */
.pigeon{
  position:absolute;left:44%;bottom:2px;z-index:5;
  width:clamp(74px,8vw,118px);pointer-events:none;
  animation:pgWalk 2.4s ease-in-out infinite;
}
.pigeon svg{width:100%;height:auto;overflow:visible}
.pg-body ellipse,.pg-head{fill:#a89ab4;stroke:#0a0f0c;stroke-width:3}
.pg-wing{fill:#8d7f9c;stroke:#0a0f0c;stroke-width:3}
.pg-tail{fill:#6e6180;stroke:#0a0f0c;stroke-width:3;stroke-linejoin:round}
.pg-cheek{fill:#7a3fa0;opacity:.55}
.pg-eye{fill:#fff;stroke:#0a0f0c;stroke-width:2.4}
.pg-pupil{fill:#0a0f0c}
.pg-beak{fill:#f28c1e;stroke:#0a0f0c;stroke-width:2.4;stroke-linejoin:round}
.pg-cam{fill:#2b2f34;stroke:#0a0f0c;stroke-width:3}
.pg-lens{fill:#111;stroke:#dfe4ea;stroke-width:3}
.pg-shoe{fill:#dfe4ea}
.pg-strap{fill:none;stroke:#0a0f0c;stroke-width:3;stroke-linecap:round}
.pg-map path:first-child{fill:#f6f5ee;stroke:#0a0f0c;stroke-width:2.6;stroke-linejoin:round}
.pg-map path:last-child{fill:none;stroke:#3a7bd5;stroke-width:2.2;stroke-linecap:round}
.pg-map{transform-origin:40px 70px;animation:pgMap 2.4s ease-in-out infinite}
.pg-legs path{fill:none;stroke:#f28c1e;stroke-width:4;stroke-linecap:round}
.pg-leg{transform-origin:50% 116px}
.pg-leg.l1{animation:pgLeg 1.2s ease-in-out infinite}
.pg-leg.l2{animation:pgLeg 1.2s ease-in-out infinite reverse}
@keyframes pgWalk{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}
@keyframes pgLeg{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes pgMap{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
.pigeon-say{
  display:block;text-align:center;margin-top:2px;
  font-family:var(--hand);font-weight:700;font-size:clamp(14px,1.4vw,20px);color:var(--violet-deep);
  transform:rotate(2deg);
}
@media(max-width:820px){.pigeon{width:64px;left:auto;right:8px;bottom:2px}}

/* ══════════════════════════════════════════════════════════════════════════
   25 · CHROMA-VISION — the CRT
   ════════════════════════════════════════════════════════════════════════ */
.crt{position:relative;max-width:980px;margin:0 auto;padding-bottom:26px}
.crt-bezel{
  position:relative;border-radius:22px;padding:clamp(16px,2.4vw,30px) clamp(16px,2.4vw,30px) 0;
  background:
    linear-gradient(180deg,#5a4634 0%,#3e3024 40%,#2b2118 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.5),
    0 40px 80px -30px rgba(0,0,0,.85), 0 2px 0 #1a130e;
}
/* wood grain */
.crt-bezel::before{
  content:'';position:absolute;inset:0;border-radius:22px;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(94deg,rgba(0,0,0,.12) 0 2px,transparent 2px 7px,rgba(255,255,255,.05) 7px 9px,transparent 9px 16px);
}
.crt-screen{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:#050707;
  border-radius:8% / 10%;
  box-shadow:inset 0 0 0 6px #0b0c0c,inset 0 0 40px 12px rgba(0,0,0,.9),0 0 0 4px #1b1612;
}
@media(min-width:900px){.crt-screen{aspect-ratio:16/10}}
.crt-screen video{
  width:100%;height:100%;object-fit:cover;display:block;background:#050707 center/cover no-repeat;
  filter:contrast(1.14) saturate(1.28) brightness(.94);
  transform:scale(1.03);
}
.crt-scan{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.28) 2px 3px),
    linear-gradient(90deg,rgba(255,0,60,.08),rgba(0,255,120,.06),rgba(60,120,255,.08));
  mix-blend-mode:multiply;animation:scanRoll 8s linear infinite;
}
@keyframes scanRoll{to{background-position:0 300px,0 0}}
.crt-glass{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 50%,transparent 58%,rgba(0,0,0,.55) 100%),
    radial-gradient(60% 40% at 24% 10%,rgba(255,255,255,.16),transparent 70%);
  animation:crtFlicker 4.5s steps(3) infinite;
}
@keyframes crtFlicker{0%,100%{opacity:1}50%{opacity:.94}70%{opacity:.98}}
.crt-snow{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;mix-blend-mode:screen;
}
.crt.zap .crt-snow{animation:snow .55s steps(6) 1}
@keyframes snow{0%{opacity:.95;background-position:0 0}50%{opacity:.8;background-position:40px 90px}100%{opacity:0;background-position:120px 30px}}
.crt-hud{
  position:absolute;inset:14px 18px;pointer-events:none;
  font-family:var(--pixel);font-size:clamp(9px,.9vw,12px);letter-spacing:.06em;color:#eafcc9;
  text-shadow:0 0 6px rgba(234,252,201,.7);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
}
.hud-rec{display:inline-flex;gap:6px;align-items:center;color:#ff5a3c;justify-self:start}
.hud-rec i{width:9px;height:9px;border-radius:50%;background:#ff5a3c;box-shadow:0 0 8px #ff5a3c;animation:recBlink 1.1s steps(1) infinite}
.hud-tc{justify-self:end}
.hud-ch{align-self:end;justify-self:start}
.hud-title{align-self:end;justify-self:end;opacity:.85}
.crt-panel{
  position:relative;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(12px,2vw,26px);
  padding:16px 6px 18px;
}
.crt-brand{display:grid;gap:2px;color:#e6d9c4}
.crt-brand span{font-size:11px;letter-spacing:.14em}
.crt-brand small{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.crt-knobs{display:flex;gap:12px;justify-content:center}
.knob{
  width:38px;height:38px;border-radius:50%;position:relative;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#9c8b73,#3d3126 70%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.25),inset 0 -3px 4px rgba(0,0,0,.6),0 3px 6px rgba(0,0,0,.6);
  transition:transform .35s var(--ease);
}
.knob::after{
  content:'';position:absolute;left:50%;top:5px;width:3px;height:12px;background:#f6f5ee;border-radius:2px;
  transform:translateX(-50%);
}
.knob[aria-pressed="true"]{transform:rotate(90deg);box-shadow:inset 0 2px 3px rgba(255,255,255,.25),inset 0 -3px 4px rgba(0,0,0,.6),0 0 0 3px var(--amber)}
.knob span{position:absolute;left:50%;top:calc(100% + 6px);translate:-50% 0;font-family:var(--pixel);font-size:8px;color:#e6d9c4;letter-spacing:.06em;white-space:nowrap;transform:none}
.knob[aria-pressed="true"] span{transform:rotate(-90deg);transform-origin:50% -16px}
.crt-grill{
  width:clamp(60px,10vw,120px);height:34px;border-radius:4px;
  background:repeating-linear-gradient(90deg,#1a130e 0 3px,#3b2d21 3px 6px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6);
}
.crt-power{
  width:30px;height:30px;border-radius:50%;background:#2b2118;border:2px solid #6b5a46;display:grid;place-items:center;
}
.crt-power i{width:10px;height:10px;border-radius:50%;background:#ff5a3c;box-shadow:0 0 10px #ff5a3c}
.crt-power.on i{background:#22e07a;box-shadow:0 0 10px #22e07a}
.crt-feet{display:flex;justify-content:space-between;padding:0 12%}
.crt-feet i{width:60px;height:16px;background:#1f1812;border-radius:0 0 8px 8px;box-shadow:0 6px 12px rgba(0,0,0,.6)}
.crt-note{position:absolute;right:0;bottom:-12px;color:var(--amber)}
@media(max-width:700px){.crt-panel{grid-template-columns:1fr 1fr;gap:14px}.crt-grill{display:none}.crt-note{display:none}}

/* mini CRT beside each section index */
.crt-mini{
  display:inline-grid;place-items:center;width:52px;height:42px;margin-right:12px;vertical-align:middle;
  border-radius:8px;background:linear-gradient(180deg,#4e3c2c,#2b2118);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 14px -6px rgba(0,0,0,.8);
  padding:4px 5px 6px;position:relative;
}
.crt-mini b{
  width:100%;height:100%;display:grid;place-items:center;border-radius:4px / 5px;
  background:#071510;color:var(--lime);font-family:var(--pixel);font-size:11px;letter-spacing:.06em;
  box-shadow:inset 0 0 8px 2px rgba(0,0,0,.8);position:relative;overflow:hidden;
  text-shadow:0 0 6px rgba(195,245,60,.7);
}
.crt-mini b::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,transparent 0 1px,rgba(0,0,0,.35) 1px 2px);
}
.crt-mini::after{content:'';position:absolute;right:5px;bottom:2px;width:4px;height:4px;border-radius:50%;background:#ff5a3c;box-shadow:0 0 4px #ff5a3c}

/* ══════════════════════════════════════════════════════════════════════════
   26 · THE WALL — every frame counts
   ════════════════════════════════════════════════════════════════════════ */
.wall{
  position:relative;height:clamp(360px,46vw,620px);overflow:hidden;background:#0a0b0a;
  border-block:1px solid var(--line);
}
.wall-in{position:absolute;inset:-8% -6%;animation:wallDrift 40s ease-in-out infinite alternate}
@keyframes wallDrift{from{transform:translate3d(-2%,-1%,0) rotate(-.6deg)}to{transform:translate3d(2%,1.5%,0) rotate(.6deg)}}
.wall-in img{
  position:absolute;width:var(--w);aspect-ratio:16/10;object-fit:cover;
  left:var(--x);top:var(--y);transform:rotate(var(--r)) translate(-50%,-50%);
  border:3px solid #f6f5ee;box-shadow:0 20px 40px -18px rgba(0,0,0,.9);
  filter:saturate(.35) contrast(1.1);transition:filter .6s var(--ease),transform .6s var(--ease);
  animation:wallFloat var(--dur) ease-in-out infinite alternate;animation-delay:var(--del);
}
@keyframes wallFloat{from{margin-top:0}to{margin-top:-14px}}
.wall:hover .wall-in img{filter:saturate(1) contrast(1.02)}
.wall-word{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:0;pointer-events:none;z-index:2;
  text-align:center;mix-blend-mode:screen;
}
.wall-word span{display:block;line-height:.86;text-shadow:0 8px 40px rgba(0,0,0,.6)}
.wall-word .f-chunk{font-size:clamp(48px,9vw,140px);color:#f6f5ee}
.wall-word .f-groove{font-size:clamp(56px,11vw,170px);color:var(--lime);margin-top:-.08em}
.wall-word .f-pixel{font-size:clamp(14px,2vw,26px);color:var(--amber);letter-spacing:.3em;margin-top:.5em}

/* ══════════════════════════════════════════════════════════════════════════
   27 · LETTER FIELD
   ════════════════════════════════════════════════════════════════════════ */
.field{
  position:relative;height:clamp(280px,34vw,460px);overflow:hidden;background:#4a1fd6;
  border-block:1px solid var(--line);
}
.field-in{position:absolute;inset:-6%;font-family:var(--groove);line-height:1;user-select:none}
.field-in i{
  position:absolute;font-style:normal;color:#6a3bff;-webkit-text-stroke:2px #2a0f7a;
  left:var(--x);top:var(--y);font-size:var(--s);transform:rotate(var(--r));
  animation:fieldBob var(--dur) ease-in-out infinite alternate;animation-delay:var(--del);
}
.field-in i:nth-child(3n){color:#8b5cf6}
.field-in i:nth-child(5n){color:#5327f0}
@keyframes fieldBob{from{translate:0 0}to{translate:0 -10px}}
.field-word{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none;
  font-size:clamp(80px,17vw,270px);color:#fff9a8;-webkit-text-stroke:3px #2a0f7a;line-height:1;
  text-shadow:8px 8px 0 #2a0f7a;
}
.field-cap{position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:2;color:#fff9a8;font-size:clamp(9px,.9vw,12px);letter-spacing:.2em}

/* ══════════════════════════════════════════════════════════════════════════
   28 · ASCII BAND
   ════════════════════════════════════════════════════════════════════════ */
.ascii{position:relative;height:clamp(200px,28vw,380px);overflow:hidden;background:#0d1a7a;border-block:1px solid var(--line)}
#asciiCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ascii-tag{position:absolute;left:var(--gut);top:14px;color:rgba(255,255,255,.55);font-size:10px;letter-spacing:.2em}

/* ══════════════════════════════════════════════════════════════════════════
   29 · PROCESS AS FANNED CARDS
   ════════════════════════════════════════════════════════════════════════ */
.proc-grid{align-items:start}
.step{
  border:0;padding:clamp(18px,2vw,26px);background:#f6f5ee;color:#0a0f0c;border-radius:6px;
  transform:rotate(var(--tilt,0deg));box-shadow:0 26px 50px -24px rgba(0,0,0,.8);
  transition:transform .5s var(--ease-out),box-shadow .5s;
  background-image:
    radial-gradient(circle at 20% 15%,rgba(0,0,0,.04) 0 1px,transparent 1.2px),
    repeating-linear-gradient(0deg,transparent 0 22px,rgba(10,15,12,.05) 22px 23px);
  background-size:9px 9px,100% 100%;
}
.step::before{display:none}
.step:nth-child(1){--tilt:-3deg}.step:nth-child(2){--tilt:2deg}.step:nth-child(3){--tilt:-1.5deg}
.step:nth-child(4){--tilt:2.5deg}.step:nth-child(5){--tilt:-2deg}
.step:hover{transform:rotate(0deg) translateY(-8px);box-shadow:0 36px 60px -24px rgba(0,0,0,.9)}
.step .no{
  font-family:var(--chunk);font-size:clamp(34px,4vw,60px);color:#5a3a1a;line-height:1;
  order:-1;letter-spacing:-.02em;
}
.step .no::after{content:'.'}
.step h4{font-family:var(--chunk);font-weight:400;color:#5a3a1a;font-size:clamp(18px,1.9vw,26px);letter-spacing:0}
.step p{color:rgba(10,15,12,.68)}
.step-arrow{color:var(--signal);opacity:.9;top:-28px;right:-10%}

@media (prefers-reduced-motion:reduce){
  .pigeon,.pg-leg,.pg-map,.crt-scan,.crt-glass,.wall-in,.wall-in img,.field-in i,
  .vhs-rec i,.hud-rec i{animation:none !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   30 · THE WALL, REBUILT — frames burst out from the centre
   ════════════════════════════════════════════════════════════════════════ */
.wall-in img{
  left:50%;top:50%;
  transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--r));
  animation:wallFloat var(--dur) ease-in-out infinite alternate;animation-delay:var(--del);
  opacity:1;
}
/* before the section arrives every frame is a dot in the middle */
.wall:not(.in) .wall-in img{
  transform:translate(-50%,-50%) scale(0) rotate(calc(var(--r) * -3));
  opacity:0;animation:none;
}
.wall.in .wall-in img{
  animation:
    wallBurst 1.1s cubic-bezier(.16,1,.3,1) var(--burst) both,
    wallFloat var(--dur) ease-in-out calc(var(--burst) + 1.1s) infinite alternate;
}
@keyframes wallBurst{
  0%  {transform:translate(-50%,-50%) scale(0) rotate(calc(var(--r) * -3));opacity:0}
  55% {opacity:1}
  100%{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--r));opacity:1}
}
/* insurance: whatever happened to the burst, the frames are up after 2s */
.wall.settled .wall-in img{
  animation:wallFloat var(--dur) ease-in-out infinite alternate;animation-delay:var(--del);
  transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--r));opacity:1;
}
.wall-word{opacity:0;transform:scale(.8);transition:opacity .8s var(--ease-out) 1.2s,transform .8s var(--ease-out) 1.2s}
.wall.in .wall-word{opacity:1;transform:none}
.wall.settled .wall-word{opacity:1;transform:none;transition:none}

/* ══════════════════════════════════════════════════════════════════════════
   31 · HERO STICKERS — bigger, breathing, more of them
   ════════════════════════════════════════════════════════════════════════ */
.tag{
  font-size:clamp(11px,.95vw,14px);padding:11px 20px;
  animation:tagFloat var(--tf,4.6s) ease-in-out infinite;animation-delay:var(--td,0s);
}
.tag:hover{animation-play-state:paused}
@keyframes tagFloat{
  0%,100%{translate:0 0}
  50%    {translate:0 -9px}
}
@media(min-width:960px){
  .t1{--tf:4.2s;--td:-1s}  .t2{--tf:5.1s;--td:-2.4s} .t3{--tf:4.6s;--td:-.6s}
  .t4{--tf:5.4s;--td:-3s}  .t5{--tf:4.8s;--td:-1.8s} .t6{--tf:5s;--td:-.3s}
  .t7{top:20%;left:10%;transform:rotate(-7deg);--tf:5.6s;--td:-2s}
  .t8{top:-6%;left:66%;transform:rotate(5deg);--tf:4.4s;--td:-3.4s}
  .t9{bottom:8%;left:30%;transform:rotate(-4deg);--tf:5.2s;--td:-1.2s}
  .t10{top:62%;right:34%;transform:rotate(6deg);--tf:4.9s;--td:-2.8s}
  .t11{bottom:-8%;right:12%;transform:rotate(-3deg);--tf:5.8s;--td:-.9s}
}
@media(max-width:959px){.lockup .t7,.lockup .t9{display:inline-block}}

/* ══════════════════════════════════════════════════════════════════════════
   32 · THE STACK — a ring of real frames turning in 3D
   ════════════════════════════════════════════════════════════════════════ */
.stack{
  position:absolute;right:clamp(14px,5vw,90px);top:clamp(96px,13vh,150px);z-index:5;
  width:clamp(110px,11vw,170px);aspect-ratio:1;perspective:900px;pointer-events:none;
}
.stack-ring{
  position:absolute;inset:0;transform-style:preserve-3d;
  animation:stackTurn 26s linear infinite;
}
.stack-ring img{
  position:absolute;left:50%;top:50%;width:64%;aspect-ratio:4/5;object-fit:cover;
  margin:-40% 0 0 -32%;border:5px solid #f6f5ee;border-bottom-width:18px;
  box-shadow:0 18px 30px -14px rgba(0,0,0,.7);backface-visibility:hidden;
  transform:rotateY(var(--a)) translateZ(var(--z));filter:saturate(1.05) contrast(1.05);
}
@keyframes stackTurn{to{transform:rotateY(360deg)}}
.stack-say{
  position:absolute;left:50%;top:104%;translate:-50% 0;white-space:nowrap;
  font-family:var(--hand);font-weight:700;font-size:clamp(14px,1.4vw,20px);color:var(--violet-deep);transform:rotate(-2deg);
}
@media(max-width:959px){.stack{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   33 · 3D — cards tilt to the pointer, founders flip, reels fan
   ════════════════════════════════════════════════════════════════════════ */
.grid{perspective:1400px}
.card{
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .28s var(--ease),border-color .5s var(--ease),opacity .45s;
}
.card:hover{--lift:-6px;box-shadow:0 40px 70px -40px rgba(0,0,0,.9)}
.card .card-body,.card .card-badges,.card .card-play{transform:translateZ(28px)}

.duo-grid{perspective:1600px}
.person{transform-style:preserve-3d;transition:transform .9s var(--ease-out),border-color .5s;position:relative}
.person.flipped{transform:rotateY(180deg)}
.person-back{
  position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;
  background:var(--panel);border:1px solid color-mix(in srgb,var(--pc) 45%,var(--line));
  padding:clamp(22px,3vw,40px);display:grid;gap:14px;align-content:center;
}
.person-media,.person-body{backface-visibility:hidden}
.person-back h3{margin:0;font-family:var(--hand);font-weight:700;font-size:clamp(28px,3.2vw,44px);color:var(--pc);line-height:1}
.person-back p{margin:0;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:var(--bone-2)}
.person-back .k{font-family:var(--pixel);font-size:9.5px;letter-spacing:.14em;color:var(--bone-3)}
.person-flip{
  position:absolute;right:14px;bottom:14px;z-index:3;
  font-family:var(--pixel);font-size:9.5px;letter-spacing:.1em;color:var(--pc);
  border:1px solid color-mix(in srgb,var(--pc) 45%,var(--line));border-radius:100px;padding:7px 12px;
  background:rgba(8,9,10,.7);backdrop-filter:blur(6px);cursor:pointer;
}
.person-flip:hover{background:var(--pc);color:#0a0f0c}

.rail{perspective:1200px}
.reel{transform:rotateY(var(--fan,0deg)) scale(var(--sc,1));transition:transform .45s var(--ease),border-color .5s;transform-style:preserve-3d}

/* the set tilts when you move over it */
#lb .box.crt{
  max-width:1080px;background:none;border:0;overflow:visible;
  transform:perspective(1600px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .35s var(--ease);
}
#lb.vert .box.crt{max-width:min(520px,92vw)}
#lb .box.crt .crt-screen{aspect-ratio:16/9;border-radius:6% / 9%}
#lb.vert .box.crt .crt-screen{aspect-ratio:9/16}
#lb .box.crt video{max-height:none;height:100%;background:#050707}
#lb .box.crt .crt-panel{grid-template-columns:auto 1fr auto}
#lb .x{top:-14px;right:-14px;z-index:5;background:var(--bone);color:var(--void);border-color:var(--bone)}

/* ══════════════════════════════════════════════════════════════════════════
   34 · THE LOOP, REBUILT — three voices, a needle, a centre that changes
   ════════════════════════════════════════════════════════════════════════ */
.rings{width:min(520px,84vw)}
.ring-track{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 6}
.ring{fill:var(--bone-2);letter-spacing:.14em}
.r-a{font-family:var(--display);font-weight:700;font-size:15.5px;fill:var(--bone);animation-duration:48s}
.r-b{font-family:var(--serif);font-style:italic;font-size:17px;letter-spacing:.04em;fill:var(--amber);animation-duration:36s}
.r-c{font-family:var(--hand);font-weight:700;font-size:17px;letter-spacing:.02em;fill:var(--lime);animation-duration:28s}
.needle{transform-origin:210px 210px;animation:spinA 12s linear infinite}
.needle circle{fill:var(--signal);stroke:#0a0f0c;stroke-width:2}
.needle path{stroke:var(--signal);stroke-width:3;stroke-linecap:round}
.rings-core{display:grid;place-content:center;justify-items:center;gap:6px}
.rings-core .core-lab{font-size:9px;letter-spacing:.24em;color:var(--bone-3)}
.rings-core .core-word{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(30px,4vw,56px);color:var(--bone);line-height:1;letter-spacing:-.01em;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.rings-core .core-word.swap{opacity:0;transform:translateY(8px)}
.rings-core span:not(.core-lab):not(.core-word){display:none}
@media(max-width:620px){.r-a{font-size:19px}.r-b{font-size:20px}.r-c{font-size:20px}}

/* ══════════════════════════════════════════════════════════════════════════
   35 · ASCII as the contact backdrop
   ════════════════════════════════════════════════════════════════════════ */
.ascii-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55;pointer-events:none;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
  mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%)}
#contact .wrap{position:relative;z-index:2}

/* ══════════════════════════════════════════════════════════════════════════
   36 · THE CLAPPERBOARD
   ════════════════════════════════════════════════════════════════════════ */
.clap{width:clamp(170px,17vw,250px);margin-top:22px;perspective:700px;cursor:default;user-select:none}
.clap-arm{
  height:22px;display:flex;overflow:hidden;border-radius:4px 4px 0 0;
  transform-origin:left bottom;animation:clapArm 6s ease-in-out infinite;
  box-shadow:0 2px 0 #000;
}
.clap-arm i{flex:1;background:#f6f5ee;transform:skewX(-20deg)}
.clap-arm i:nth-child(2n){background:#0a0f0c}
@keyframes clapArm{
  0%,78%,100%{transform:rotateX(0deg)}
  84%        {transform:rotateX(-38deg)}
  90%        {transform:rotateX(0deg)}
  93%        {transform:rotateX(-14deg)}
}
.clap-body{
  background:#111416;border:2px solid #f6f5ee;border-top:0;border-radius:0 0 6px 6px;
  padding:10px 12px;display:grid;gap:6px;
}
.clap-row{display:flex;align-items:baseline;gap:10px;color:var(--bone)}
.clap-row span{font-size:8.5px;letter-spacing:.14em;color:var(--bone-3)}
.clap-row b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em}
.clap-row b.f-hand{font-family:var(--hand);font-weight:700;font-size:17px;color:var(--amber)}

/* pigeon retired */
.pigeon{display:none}

@media (prefers-reduced-motion:reduce){
  .stack-ring,.tag,.clap-arm,.needle,.wall.in .wall-in img{animation:none !important}
  .card,.reel{transform:none !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   37 · MORE VOICES — a variable serif with real variations, neon, 3D shade
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --fraun:'Fraunces',Georgia,serif;
  --neon:'Monoton',var(--display);
  --shade:'Bungee Shade',var(--display);
}
.f-fraun     {font-family:var(--fraun);font-variation-settings:'opsz' 144,'wght' 600,'SOFT' 0,'WONK' 0}
.f-fraun-wonk{font-family:var(--fraun);font-weight:700;font-variation-settings:'opsz' 144,'wght' 700,'SOFT' 100,'WONK' 1;letter-spacing:-.02em}
.f-fraun-it  {font-family:var(--fraun);font-style:italic;font-variation-settings:'opsz' 144,'wght' 400,'SOFT' 30,'WONK' 1}
.f-neon      {font-family:var(--neon);font-weight:400;letter-spacing:.02em}
.f-shade     {font-family:var(--shade);font-weight:400;letter-spacing:.01em}

/* where they land */
#about .sec-head h2{font-family:var(--fraun);font-variation-settings:'opsz' 144,'wght' 800,'SOFT' 100,'WONK' 1;letter-spacing:-.025em;text-transform:none;line-height:.9}
#about .sec-head h2 .sw{font-family:var(--fraun);font-style:italic;font-variation-settings:'opsz' 144,'wght' 500,'SOFT' 60,'WONK' 1;color:var(--chroma)}
#founders .sec-head h2{font-family:var(--fraun);font-variation-settings:'opsz' 144,'wght' 900,'SOFT' 0,'WONK' 0;letter-spacing:-.035em;text-transform:none;line-height:.88}
#founders .sec-head h2 .sw{font-family:var(--fraun);font-style:italic;font-variation-settings:'opsz' 144,'wght' 400,'SOFT' 0,'WONK' 1;color:var(--amber)}
.big-cta .h-xl.f-fraun-wonk{text-transform:none;letter-spacing:-.03em;line-height:.9}
.big-cta .h-xl.f-fraun-wonk .sw{font-family:var(--fraun);font-style:italic;font-variation-settings:'opsz' 144,'wght' 500,'SOFT' 100,'WONK' 1;color:var(--chroma)}
.wall-word .f-chunk{font-family:var(--shade);font-size:clamp(44px,8vw,124px);color:#f6f5ee}
.warp-run span:nth-child(2n){font-family:var(--neon);font-size:clamp(30px,5.4vw,80px);letter-spacing:.04em;animation:none;transform:none}
.ticker-run span:nth-child(7n){font-family:var(--neon);letter-spacing:.04em;text-transform:uppercase}
.ticker-run span:nth-child(11n){font-family:var(--fraun);font-style:italic;font-variation-settings:'opsz' 32,'wght' 500,'WONK' 1;text-transform:none;font-size:14px;letter-spacing:0}
.sec-head .lab{font-family:var(--pixel)}
#skills .sec-head h2{font-family:var(--fraun);font-variation-settings:'opsz' 144,'wght' 700,'SOFT' 40,'WONK' 0;text-transform:none;letter-spacing:-.02em;line-height:.9}

/* ══════════════════════════════════════════════════════════════════════════
   38 · HERO — sun moved off the slogan, stickers spread across the page
   ════════════════════════════════════════════════════════════════════════ */
.sunny{left:auto;right:clamp(200px,20vw,320px);top:clamp(70px,9vh,110px);bottom:auto}
@media(max-width:820px){.sunny{right:8px;top:12%}}
@media(min-width:960px){
  .t1{top:-14%;left:31%}
  .t2{bottom:34%;right:2%}
  .t3{top:42%;right:24%}
  .t4{top:-9%;right:30%}
  .t5{top:31%;right:2%;bottom:auto;left:auto}
  .t6{top:-36%;right:16%;bottom:auto;left:auto}
  .t7{top:10%;left:2%}
  .t8{top:-20%;left:72%}
  .t9{top:32%;left:-1%;bottom:auto;right:auto}
  .t10{top:58%;right:14%;bottom:auto;left:auto}
  .t11{bottom:-14%;right:24%;top:auto;left:auto}
}
/* extras that live outside the lockup, pinned to the hero corners */
.hero-in{position:relative}

/* ══════════════════════════════════════════════════════════════════════════
   39 · THE COMET — one light, travelling up through the whole site
   ════════════════════════════════════════════════════════════════════════ */
.comet{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none;mix-blend-mode:screen;opacity:.9}
@media(max-width:700px){.comet{opacity:.6}}

/* ══════════════════════════════════════════════════════════════════════════
   40 · NAV — chips, a colour each, the active one fills
   ════════════════════════════════════════════════════════════════════════ */
#nav{padding-block:12px}
#nav.stuck{padding-block:8px}
.nav-mid{gap:4px;background:rgba(8,9,10,.55);border:1px solid rgba(239,233,220,.1);border-radius:100px;padding:5px;backdrop-filter:blur(14px)}
#nav:not(.stuck) .nav-mid{background:rgba(255,255,255,.42);border-color:rgba(10,15,12,.12)}
.nav-mid a{
  display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:100px;
  font-size:10.5px;letter-spacing:.12em;border:1px solid transparent;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s,transform .3s var(--ease);
}
.nav-mid a::after{display:none}
.nav-mid a i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);flex:none;transition:transform .3s}
.nav-mid a:hover{border-color:color-mix(in srgb,var(--c) 60%,transparent);transform:translateY(-1px)}
.nav-mid a:hover i{transform:scale(1.4)}
.nav-mid a.active{background:var(--c);color:#0a0f0c;border-color:var(--c);font-weight:700}
.nav-mid a.active i{background:#0a0f0c;box-shadow:none}
#nav:not(.stuck) .nav-mid a.active{color:#0a0f0c}
.nav-cta{
  position:relative;border:0;padding:10px 18px;color:#0a0f0c;
  background:linear-gradient(110deg,var(--lime),var(--chroma),var(--amber),var(--lime));background-size:300% 100%;
  animation:ctaShift 6s linear infinite;font-weight:700;
}
@keyframes ctaShift{to{background-position:300% 0}}
.nav-cta .dot{background:#0a0f0c;box-shadow:none}
.nav-cta:hover{background:var(--bone);color:var(--void);animation:none}
#nav:not(.stuck) .nav-cta{color:#0a0f0c}
@media(max-width:1020px){
  .nav-mid{background:rgba(8,9,10,.97);border:0;border-radius:0;padding:0}
  .nav-mid a{font-size:28px;padding:10px 18px}
  .nav-mid a i{width:12px;height:12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   41 · THE CAST — characters that belong to their sections
   ════════════════════════════════════════════════════════════════════════ */
/* Cloudy — drifts across the top of the hero */
.cloudy{position:absolute;top:8%;left:-14%;width:clamp(90px,10vw,160px);z-index:4;pointer-events:none;animation:cloudDrift 46s linear infinite}
.cloudy svg{width:100%;height:auto;overflow:visible}
.cl-body{fill:#fbfaf3;stroke:#0a0f0c;stroke-width:3;stroke-linejoin:round}
.cl-eye{fill:#fff;stroke:#0a0f0c;stroke-width:2.6}
.cl-pupil{fill:#0a0f0c;animation:clBlink 5.5s steps(1) infinite}
.cl-smile{fill:none;stroke:#0a0f0c;stroke-width:3;stroke-linecap:round}
.cl-blush{fill:#ff8fa3;opacity:.7}
@keyframes cloudDrift{0%{transform:translateX(0) translateY(0)}50%{transform:translateX(62vw) translateY(-14px)}100%{transform:translateX(124vw) translateY(0)}}
@keyframes clBlink{0%,92%,100%{transform:scaleY(1)}94%,98%{transform:scaleY(.1)}}
@media(max-width:820px){.cloudy{display:none}}

/* Bolt — zips through the toolkit */
.bolt{position:absolute;right:clamp(10px,4vw,70px);top:clamp(8px,2vh,26px);width:clamp(48px,5vw,76px);z-index:3;pointer-events:none;animation:boltZip 7s cubic-bezier(.7,0,.3,1) infinite}
.bolt svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 14px rgba(255,177,74,.55))}
.bt-body{fill:#ffcf4a;stroke:#0a0f0c;stroke-width:3;stroke-linejoin:round}
.bt-shine{stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.8}
.bt-shade{fill:#0a0f0c}
.bt-grin{fill:none;stroke:#0a0f0c;stroke-width:3;stroke-linecap:round}
.bt-teeth{fill:#fff}
.bolt-say{position:absolute;left:50%;top:104%;translate:-50% 0;white-space:nowrap;color:var(--amber);font-size:9px;letter-spacing:.14em}
@keyframes boltZip{
  0%,100%{transform:translateX(0) rotate(-8deg) scale(1)}
  46%{transform:translateX(-4vw) rotate(-8deg) scale(1)}
  50%{transform:translateX(-12vw) rotate(-2deg) scaleX(1.25) scaleY(.85)}
  54%{transform:translateX(-14vw) rotate(-10deg) scale(1)}
  96%{transform:translateX(-14vw) rotate(-10deg) scale(1)}
}
@media(max-width:900px){.bolt{display:none}}
#skills{position:relative}

/* Reely — rolls along the floor of Work */
.reely{position:absolute;left:-8%;bottom:6px;width:clamp(54px,6vw,86px);z-index:3;pointer-events:none;animation:reelRoll 22s linear infinite}
.reely svg{width:100%;height:auto;overflow:visible}
.rl-spin{transform-origin:60px 60px;animation:reelSpin 1.6s linear infinite}
.rl-disc{fill:#1f2427;stroke:#f6f5ee;stroke-width:4}
.rl-hole{fill:#0a0f0c;stroke:#c3f53c;stroke-width:2.5}
.rl-hub{fill:#f6f5ee;stroke:#0a0f0c;stroke-width:3}
.rl-eye{fill:#fff;stroke:#0a0f0c;stroke-width:2.4}
.rl-pupil{fill:#0a0f0c}
.rl-smile{fill:none;stroke:#0a0f0c;stroke-width:2.6;stroke-linecap:round}
@keyframes reelRoll{0%{transform:translateX(0)}100%{transform:translateX(116vw)}}
@keyframes reelSpin{to{transform:rotate(360deg)}}
#work{overflow:hidden}

/* Luna — floats in Short form */
.luna{position:absolute;right:clamp(10px,4vw,80px);top:clamp(60px,10vh,140px);width:clamp(80px,8.5vw,130px);z-index:3;pointer-events:none;animation:lunaFloat 7s ease-in-out infinite}
.luna svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 24px rgba(255,241,180,.35))}
.ln-body{fill:#fff1b4;stroke:#0a0f0c;stroke-width:3;stroke-linejoin:round}
.ln-cap{fill:var(--violet-deep);stroke:#0a0f0c;stroke-width:3;stroke-linejoin:round}
.ln-pom{fill:#fff;stroke:#0a0f0c;stroke-width:2.6}
.ln-eye,.ln-smile{fill:none;stroke:#0a0f0c;stroke-width:3;stroke-linecap:round}
.ln-blush{fill:#ff8fa3;opacity:.7}
.ln-stars path{fill:#fff1b4;animation:lnTwinkle 2.4s ease-in-out infinite}
.ln-stars path:last-child{animation-delay:-1.2s}
.luna-say{position:absolute;left:50%;top:102%;translate:-50% 0;white-space:nowrap;font-family:var(--hand);font-weight:700;font-size:clamp(13px,1.3vw,18px);color:#fff1b4;transform:rotate(-3deg)}
@keyframes lunaFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(2deg)}}
@keyframes lnTwinkle{0%,100%{opacity:.3;scale:.7}50%{opacity:1;scale:1.15}}
@media(max-width:900px){.luna{display:none}}
#reels{position:relative}

/* Chip — the 8-bit sprite that walks the footer */
.chip-run{position:relative;height:64px;overflow:hidden;border-top:1px solid var(--line);background:#07110c}
.chip-run::before{content:'';position:absolute;inset:auto 0 0;height:8px;background:repeating-linear-gradient(90deg,#1c3a24 0 16px,#122b1a 16px 32px)}
.chip8{position:absolute;left:-40px;bottom:8px;width:4px;height:4px;animation:chipWalk 18s linear infinite}
.chip8 i{position:absolute;left:0;top:0;width:4px;height:4px;background:transparent}
/* two frames of a 12x14 sprite drawn in box-shadow pixels */
.chip8 .px{animation:chipFrame 0.5s steps(1) infinite;
  box-shadow:
   16px 0 #ff3a17,20px 0 #ff3a17,24px 0 #ff3a17,28px 0 #ff3a17,
   12px 4px #ff3a17,16px 4px #ff3a17,20px 4px #ff3a17,24px 4px #ff3a17,28px 4px #ff3a17,32px 4px #ff3a17,36px 4px #ff3a17,
   12px 8px #ffd7a8,16px 8px #ffd7a8,20px 8px #0a0f0c,24px 8px #ffd7a8,28px 8px #ffd7a8,32px 8px #0a0f0c,36px 8px #ffd7a8,
   12px 12px #ffd7a8,16px 12px #ffd7a8,20px 12px #ffd7a8,24px 12px #ffd7a8,28px 12px #ffd7a8,32px 12px #ffd7a8,36px 12px #ffd7a8,
   16px 16px #ffd7a8,20px 16px #ff8fa3,24px 16px #ffd7a8,28px 16px #ff8fa3,32px 16px #ffd7a8,
   12px 20px #c3f53c,16px 20px #c3f53c,20px 20px #c3f53c,24px 20px #c3f53c,28px 20px #c3f53c,32px 20px #c3f53c,36px 20px #c3f53c,
   8px 24px #c3f53c,12px 24px #c3f53c,16px 24px #0a0f0c,20px 24px #c3f53c,24px 24px #c3f53c,28px 24px #c3f53c,32px 24px #0a0f0c,36px 24px #c3f53c,40px 24px #c3f53c,
   8px 28px #ffd7a8,12px 28px #c3f53c,16px 28px #c3f53c,20px 28px #c3f53c,24px 28px #c3f53c,28px 28px #c3f53c,32px 28px #c3f53c,36px 28px #c3f53c,40px 28px #ffd7a8,
   16px 32px #3a7bd5,20px 32px #3a7bd5,24px 32px #3a7bd5,28px 32px #3a7bd5,32px 32px #3a7bd5,
   16px 36px #3a7bd5,20px 36px #3a7bd5,28px 36px #3a7bd5,32px 36px #3a7bd5,
   12px 40px #0a0f0c,16px 40px #0a0f0c,20px 40px #0a0f0c,28px 40px #0a0f0c,32px 40px #0a0f0c,36px 40px #0a0f0c}
.chip8 .px2{opacity:0;animation:chipFrame2 0.5s steps(1) infinite;
  box-shadow:
   16px 0 #ff3a17,20px 0 #ff3a17,24px 0 #ff3a17,28px 0 #ff3a17,
   12px 4px #ff3a17,16px 4px #ff3a17,20px 4px #ff3a17,24px 4px #ff3a17,28px 4px #ff3a17,32px 4px #ff3a17,36px 4px #ff3a17,
   12px 8px #ffd7a8,16px 8px #ffd7a8,20px 8px #0a0f0c,24px 8px #ffd7a8,28px 8px #ffd7a8,32px 8px #0a0f0c,36px 8px #ffd7a8,
   12px 12px #ffd7a8,16px 12px #ffd7a8,20px 12px #ffd7a8,24px 12px #ffd7a8,28px 12px #ffd7a8,32px 12px #ffd7a8,36px 12px #ffd7a8,
   16px 16px #ffd7a8,20px 16px #ff8fa3,24px 16px #ffd7a8,28px 16px #ff8fa3,32px 16px #ffd7a8,
   12px 20px #c3f53c,16px 20px #c3f53c,20px 20px #c3f53c,24px 20px #c3f53c,28px 20px #c3f53c,32px 20px #c3f53c,36px 20px #c3f53c,
   12px 24px #c3f53c,16px 24px #0a0f0c,20px 24px #c3f53c,24px 24px #c3f53c,28px 24px #c3f53c,32px 24px #0a0f0c,36px 24px #c3f53c,
   4px 28px #ffd7a8,8px 28px #c3f53c,12px 28px #c3f53c,16px 28px #c3f53c,20px 28px #c3f53c,24px 28px #c3f53c,28px 28px #c3f53c,32px 28px #c3f53c,36px 28px #c3f53c,40px 28px #c3f53c,44px 28px #ffd7a8,
   16px 32px #3a7bd5,20px 32px #3a7bd5,24px 32px #3a7bd5,28px 32px #3a7bd5,32px 32px #3a7bd5,
   12px 36px #3a7bd5,16px 36px #3a7bd5,32px 36px #3a7bd5,36px 36px #3a7bd5,
   8px 40px #0a0f0c,12px 40px #0a0f0c,16px 40px #0a0f0c,32px 40px #0a0f0c,36px 40px #0a0f0c,40px 40px #0a0f0c}
@keyframes chipFrame {0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes chipFrame2{0%,49%{opacity:0}50%,100%{opacity:1}}
@keyframes chipWalk{0%{left:-60px}100%{left:calc(100% + 20px)}}
.chip-say{position:absolute;right:var(--gut);top:50%;translate:0 -50%;color:var(--lime);font-size:10px;letter-spacing:.24em;animation:pressStart 1.2s steps(1) infinite}
@keyframes pressStart{0%,60%{opacity:1}61%,100%{opacity:.15}}

@media (prefers-reduced-motion:reduce){
  .cloudy,.bolt,.reely,.rl-spin,.luna,.ln-stars path,.chip8,.chip8 .px,.chip8 .px2,.chip-say,.nav-cta{animation:none !important}
}

/* nav labels must read on the pale hero */
#nav:not(.stuck) .nav-mid a{color:#0a0f0c;font-weight:600}
#nav:not(.stuck) .nav-mid a:hover{color:#0a0f0c}

/* ══════════════════════════════════════════════════════════════════════════
   42 · HERO — carousel gone, stickers pushed up into the empty sky
   ════════════════════════════════════════════════════════════════════════ */
.stack{display:none}
@media(min-width:960px){
  .t1{top:-58%;left:6%;bottom:auto;right:auto}
  .t2{top:-66%;right:10%;bottom:auto;left:auto}
  .t3{top:-10%;left:14%;bottom:auto;right:auto}
  .t4{top:-46%;right:30%;bottom:auto;left:auto}
  .t5{top:31%;right:2%;bottom:auto;left:auto}
  .t6{top:-36%;right:16%;bottom:auto;left:auto}
  .t7{top:10%;left:2%;bottom:auto;right:auto}
  .t8{top:-80%;left:46%;bottom:auto;right:auto}
  .t9{top:32%;left:-1%;bottom:auto;right:auto}
  .t10{top:-22%;right:2%;bottom:auto;left:auto}
  .t11{bottom:-14%;right:24%;top:auto;left:auto}
}
.sunny{right:clamp(60px,8vw,120px);top:clamp(64px,8vh,100px)}

/* typewriter */
.hero-copy .caret{display:inline-block;width:2px;height:1em;background:var(--ink);margin-left:2px;vertical-align:-.15em;animation:caret .9s steps(1) infinite}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ══════════════════════════════════════════════════════════════════════════
   43 · CINEMATIC 3D — titles tilt in, numbers flip, tiles lean, wall has depth
   ════════════════════════════════════════════════════════════════════════ */
.sec-head{perspective:1200px}
.js .sec-head h2.rv{transform:rotateX(22deg) translateY(34px);transform-origin:50% 100%;opacity:0}
.js .sec-head h2.rv.in{transform:none;opacity:1;transition:transform 1.1s var(--ease-out),opacity .9s var(--ease-out)}
.facts{perspective:900px}
.js .fact .n{transform:rotateX(90deg);transform-origin:50% 100%;opacity:0;transition:transform .9s var(--ease-out) .15s,opacity .6s .15s}
.js .fact.in .n{transform:none;opacity:1}
.soft{perspective:900px}
.sw-tile{transition:background .45s var(--ease),transform .4s var(--ease);transform-style:preserve-3d}
.sw-tile:hover{transform:rotateX(6deg) rotateY(-7deg) translateZ(10px)}
.wall{perspective:1400px}
.wall-in{transform-style:preserve-3d}
.wall-in img{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--r)) translateZ(var(--z,0px))}
.wall.settled .wall-in img{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--r)) translateZ(var(--z,0px))}
.svc{perspective:1200px}
.svc-i{transform-style:preserve-3d;transition:background .5s var(--ease),transform .5s var(--ease)}
.svc-i:hover{transform:translateZ(14px) rotateX(3deg)}

/* ══════════════════════════════════════════════════════════════════════════
   44 · BOLT — redrawn, silent, roaming the toolkit
   ════════════════════════════════════════════════════════════════════════ */
.bolt{
  position:absolute;left:8%;top:8%;width:clamp(44px,4.6vw,70px);z-index:3;pointer-events:none;
  animation:boltRoam 14s ease-in-out infinite;
}
.bolt svg{width:100%;height:auto;overflow:visible}
.bt-glow{fill:#ffcf4a;filter:blur(10px);opacity:.55;animation:boltPulse 1.4s ease-in-out infinite}
.bt-body{fill:#ffcf4a;stroke:#0a0f0c;stroke-width:3.4;stroke-linejoin:round}
.bt-rim{stroke:#fff;stroke-width:3.2;stroke-linecap:round;opacity:.85}
.bt-eye{fill:#fff;stroke:#0a0f0c;stroke-width:2.6}
.bt-pupil{fill:#0a0f0c}
.bt-grin{fill:none;stroke:#0a0f0c;stroke-width:3.2;stroke-linecap:round}
.bt-zaps path{fill:none;stroke:#ffcf4a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:zapBlink .5s steps(1) infinite}
.bt-zaps path:nth-child(2){animation-delay:-.17s}.bt-zaps path:nth-child(3){animation-delay:-.33s}
@keyframes zapBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes boltPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.12)}}
@keyframes boltRoam{
  0%  {transform:translate(0,0) rotate(-10deg)}
  18% {transform:translate(22vw,-4vh) rotate(6deg)}
  22% {transform:translate(24vw,-3vh) rotate(-14deg) scaleX(1.2) scaleY(.85)}
  40% {transform:translate(56vw,10vh) rotate(8deg)}
  44% {transform:translate(55vw,12vh) rotate(-6deg) scaleX(.9) scaleY(1.15)}
  62% {transform:translate(80vw,-2vh) rotate(12deg)}
  80% {transform:translate(38vw,22vh) rotate(-8deg)}
  100%{transform:translate(0,0) rotate(-10deg)}
}
@media(max-width:900px){.bolt{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   45 · PIXEL SPRITES — built from strings in cc.js, two frames each
   ════════════════════════════════════════════════════════════════════════ */
.pxc{position:absolute;z-index:3;pointer-events:none;width:4px;height:4px;image-rendering:pixelated}
.pxc i{position:absolute;left:0;top:0;width:4px;height:4px}
.pxc i:first-child{animation:pxA var(--fps,.6s) steps(1) infinite}
.pxc i:last-child{animation:pxB var(--fps,.6s) steps(1) infinite}
@keyframes pxA{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pxB{0%,49%{opacity:0}50%,100%{opacity:1}}
/* the cat sits on the top edge of the skills block, tail flicking */
.px-cat{right:6%;margin-top:-66px;--fps:1.1s;transform:scale(1.25);transform-origin:top left}
.skills-wrap{position:relative}
/* the drone patrols the short-form section */
.px-drone{left:-80px;top:26%;--fps:.12s;animation:droneFly 20s linear infinite;transform:scale(1.4)}
@keyframes droneFly{0%{left:-80px;margin-top:0}25%{margin-top:-30px}50%{margin-top:10px}75%{margin-top:-24px}100%{left:calc(100% + 40px);margin-top:0}}
/* the slime bounces in the letter field */
.px-slime{left:12%;bottom:18%;--fps:.7s;animation:slimeHop 2.2s ease-in-out infinite;transform:scale(1.6);transform-origin:bottom left}
@keyframes slimeHop{0%,100%{margin-bottom:0}40%{margin-bottom:26px}}
/* the kid with the flashlight, walking the interlude */
.px-kid{left:6%;bottom:60px;--fps:.5s;transform:scale(1.8);transform-origin:bottom left;animation:kidWalk 26s linear infinite}
@keyframes kidWalk{0%{left:4%}100%{left:80%}}
.px-kid .beam{
  position:absolute;left:52px;top:14px;width:260px;height:70px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,244,200,.55),rgba(255,244,200,0));
  clip-path:polygon(0 42%,100% 0,100% 100%,0 58%);opacity:.7;animation:beamFlicker .35s steps(2) infinite;
}
@keyframes beamFlicker{0%{opacity:.7}50%{opacity:.55}100%{opacity:.7}}
@media(max-width:900px){.px-drone,.px-kid .beam{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   46 · TAPEY & POP
   ════════════════════════════════════════════════════════════════════════ */
.tapey{position:absolute;right:clamp(10px,4vw,70px);top:clamp(30px,6vh,90px);width:clamp(110px,11vw,170px);z-index:3;pointer-events:none;animation:tapeyWalk 3s ease-in-out infinite}
.tapey svg{width:100%;height:auto;overflow:visible}
.tp-body{fill:#1d1f22;stroke:#f6f5ee;stroke-width:3}
.tp-label{fill:#f6f5ee;stroke:#0a0f0c;stroke-width:2}
.tp-text{font-family:var(--pixel);font-size:11px;fill:#0a0f0c;letter-spacing:.06em}
.tp-reel{fill:#0a0f0c;stroke:#c3f53c;stroke-width:3;transform-origin:center;animation:reelSpin 1.4s linear infinite}
.tp-reel:nth-of-type(2){animation-direction:reverse}
.tp-hub{fill:#f6f5ee}
.tp-window{fill:#2b2f34;stroke:#f6f5ee;stroke-width:2}
.tp-eye{fill:#fff;stroke:#0a0f0c;stroke-width:2}
.tp-smile{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.tp-legs path{fill:none;stroke:#f6f5ee;stroke-width:4;stroke-linecap:round}
.tp-leg{transform-origin:50% 112px}
.tp-leg.l1{animation:pgLeg 1.5s ease-in-out infinite}.tp-leg.l2{animation:pgLeg 1.5s ease-in-out infinite reverse}
@keyframes tapeyWalk{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}
.tapey-say{position:absolute;left:50%;top:102%;translate:-50% 0;white-space:nowrap;font-family:var(--hand);font-weight:700;font-size:clamp(13px,1.3vw,18px);color:var(--amber);transform:rotate(-2deg)}
#testimonials{position:relative}
@media(max-width:900px){.tapey{display:none}}

.pop{position:absolute;right:clamp(10px,4vw,70px);top:0;width:clamp(70px,7vw,110px);z-index:3;pointer-events:none;animation:popBob 3.2s ease-in-out infinite}
.pop svg{width:100%;height:auto;overflow:visible}
.pp-kernels circle{fill:#fff7d6;stroke:#0a0f0c;stroke-width:2.4;transform-origin:center;animation:popKernel 1.6s ease-in-out infinite}
.pp-kernels circle:nth-child(2){animation-delay:-.4s}.pp-kernels circle:nth-child(3){animation-delay:-.8s}.pp-kernels circle:nth-child(4){animation-delay:-1.2s}.pp-kernels circle:nth-child(5){animation-delay:-.2s}
@keyframes popKernel{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.12)}}
.pp-bucket{fill:#ff3a17;stroke:#0a0f0c;stroke-width:3;stroke-linejoin:round}
.pp-stripe{fill:none;stroke:#fff;stroke-width:8;opacity:.9}
.pp-band{fill:#fff;stroke:#0a0f0c;stroke-width:2.6}
.pp-eye{fill:#fff;stroke:#0a0f0c;stroke-width:2.6}
.pp-pupil{fill:#0a0f0c}
.pp-smile{fill:none;stroke:#0a0f0c;stroke-width:3;stroke-linecap:round}
@keyframes popBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
#clients{position:relative}
@media(max-width:900px){.pop{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   47 · UPSIDE RIGHT — the interlude
   ════════════════════════════════════════════════════════════════════════ */
.upside{
  position:relative;overflow:hidden;background:#060203;color:#f6f5ee;
  padding:clamp(120px,16vw,220px) 0 clamp(150px,18vw,260px);
  background-image:radial-gradient(70% 60% at 50% 40%,rgba(120,0,10,.35),transparent 70%);
}
.letterbox{position:absolute;left:0;right:0;height:clamp(28px,5vh,60px);background:#000;z-index:4}
.lb-top{top:0;box-shadow:0 2px 0 rgba(255,255,255,.04)}
.lb-bot{bottom:0;box-shadow:0 -2px 0 rgba(255,255,255,.04)}
.spores{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.9) 0 1.2px,transparent 1.6px),
    radial-gradient(circle,rgba(255,200,200,.7) 0 .9px,transparent 1.3px),
    radial-gradient(circle,rgba(255,255,255,.5) 0 .7px,transparent 1.1px);
  background-size:190px 210px,140px 170px,90px 120px;
  animation:sporesRise 40s linear infinite;
}
@keyframes sporesRise{to{background-position:0 -840px,40px -680px,-30px -480px}}
.upside .wrap{position:relative;z-index:3;display:grid;gap:clamp(18px,3vh,32px);justify-items:start}
.upside .lab{color:#ff5a5a}
.st-title{
  margin:0;font-family:var(--fraun);font-variation-settings:'opsz' 144,'wght' 900,'SOFT' 0,'WONK' 0;
  font-size:clamp(56px,11vw,180px);line-height:.86;letter-spacing:-.03em;text-transform:uppercase;
  perspective:900px;display:flex;flex-wrap:wrap;gap:.2em;
}
.st-title span{display:inline-block}
.st-red{
  color:#ff2a2a;
  text-shadow:0 0 10px #ff2a2a,0 0 38px rgba(255,0,0,.75),
    1px 1px 0 #5a0000,2px 2px 0 #5a0000,3px 3px 0 #4a0000,4px 4px 0 #4a0000,5px 5px 0 #3a0000,6px 6px 0 #3a0000,7px 7px 0 #2a0000,8px 8px 0 #2a0000;
  animation:neonFlicker 7s steps(1) infinite;
}
@keyframes neonFlicker{0%,88%,90%,94%,100%{opacity:1}89%,93%{opacity:.35}96%{opacity:.7}}
.st-flip{
  color:#f6f5ee;transform:rotateX(180deg);transform-origin:50% 50%;
  transition:transform 1.4s cubic-bezier(.2,.9,.2,1.1);
  text-shadow:0 0 22px rgba(255,255,255,.18);
}
.st-title.in .st-flip{transform:rotateX(0deg)}
.st-copy{margin:0;max-width:52ch;font-size:clamp(15px,1.3vw,19px);line-height:1.6;color:rgba(246,245,238,.72)}

/* the bulb wall */
.wall-lights{position:relative;width:100%;padding:28px 0 46px}
.wire{position:absolute;left:0;right:0;top:12px;width:100%;height:60px;overflow:visible}
.wire path{fill:none;stroke:#2a2a2a;stroke-width:3}
.bulbs{position:relative;display:flex;justify-content:space-between;gap:6px}
.bulb{display:grid;justify-items:center;gap:10px;flex:1;min-width:0}
.bulb .glass{
  width:clamp(14px,1.6vw,22px);height:clamp(22px,2.6vw,36px);border-radius:50% 50% 55% 55% / 40% 40% 60% 60%;
  background:var(--bc);opacity:.22;position:relative;transition:opacity .2s,box-shadow .2s;
}
.bulb .glass::before{content:'';position:absolute;left:50%;top:-8px;width:8px;height:9px;translate:-50% 0;background:#2a2a2a;border-radius:2px 2px 0 0}
.bulb.on .glass{opacity:1;box-shadow:0 0 12px var(--bc),0 0 34px var(--bc),0 0 60px color-mix(in srgb,var(--bc) 60%,transparent)}
.bulb .ch{font-family:var(--fraun);font-variation-settings:'wght' 700,'opsz' 48;font-size:clamp(13px,1.5vw,22px);color:rgba(246,245,238,.22);transition:color .2s,text-shadow .2s;text-transform:uppercase}
.bulb.on .ch{color:#fff;text-shadow:0 0 14px var(--bc)}
.bulb.space .glass{visibility:hidden}
.st-note{color:#ff8a8a}
@media(max-width:640px){.bulb .ch{font-size:11px}.bulbs{gap:2px}}

@media (prefers-reduced-motion:reduce){
  .bolt,.bt-glow,.bt-zaps path,.pxc i,.px-drone,.px-slime,.px-kid,.px-kid .beam,.tapey,.tp-reel,.tp-leg,.pop,.pp-kernels circle,
  .spores,.st-red,.hero-copy .caret{animation:none !important}
  .js .sec-head h2.rv,.js .fact .n{transform:none;opacity:1}
}

/* ══════════════════════════════════════════════════════════════════════════
   48 · WORK IS THE UPSIDE — the examples live under the title
   ════════════════════════════════════════════════════════════════════════ */
#work.upside{padding:clamp(110px,14vw,200px) 0 clamp(90px,10vw,150px);color:var(--bone)}
#work.upside .sec-head{margin-bottom:clamp(20px,3vw,40px)}
#work.upside .wall-lights{margin-bottom:clamp(36px,5vw,70px)}
#work.upside .filters,#work.upside .grid{position:relative;z-index:3}
#work.upside .wrap{display:block}
.st-copy{margin-top:0}
.st-red:empty::after{content:'';display:inline-block;width:.06em;height:.8em;background:#ff2a2a;vertical-align:-.05em;box-shadow:0 0 12px #ff2a2a;animation:caret .8s steps(1) infinite}
.st-red .tcaret{display:inline-block;width:.06em;height:.8em;background:#ff2a2a;margin-left:.04em;vertical-align:-.05em;box-shadow:0 0 12px #ff2a2a;animation:caret .8s steps(1) infinite}

/* bulbs blink once they are lit */
.bulb.on .glass{animation:twinkle var(--tw,1.5s) ease-in-out infinite;animation-delay:var(--td,0s)}
@keyframes twinkle{0%,100%{opacity:1;filter:brightness(1)}50%{opacity:.55;filter:brightness(.7)}}
.wall-lights{padding-bottom:64px}

/* the car drives the wire; its lamp lights the bulbs it passes */
.px-car{left:-140px;bottom:0;--fps:.16s;transform:scale(1.9);transform-origin:bottom left;animation:carDrive 14s linear infinite;z-index:4}
@keyframes carDrive{0%{left:-140px}100%{left:calc(100% + 40px)}}
.px-car .lamp{
  position:absolute;left:100%;top:14px;width:190px;height:44px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,240,180,.75),rgba(255,240,180,0));
  clip-path:polygon(0 40%,100% 0,100% 100%,0 60%);animation:beamFlicker .3s steps(2) infinite;
}
/* the tree stands at the end of the wire, lights alternating */
.px-tree{right:-18px;bottom:-6px;--fps:.9s;transform:scale(2);transform-origin:bottom right;z-index:2;filter:drop-shadow(0 0 10px rgba(195,245,60,.35))}
@media(max-width:900px){.px-car{transform:scale(1.4)}.px-tree{transform:scale(1.5)}.px-car .lamp{width:120px}}
.px-kid{display:none}

/* ══════════════════════════════════════════════════════════════════════════
   49 · MORE OF THE CAST — flashy ones
   ════════════════════════════════════════════════════════════════════════ */
#about,#services,#social{position:relative}
/* UFO crosses About with a tractor beam */
.px-ufo{left:-120px;top:clamp(40px,8vh,110px);--fps:.28s;transform:scale(1.7);transform-origin:top left;animation:ufoFly 24s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(120,183,255,.6))}
@keyframes ufoFly{0%{left:-120px;margin-top:0}20%{margin-top:-18px}45%{margin-top:12px}70%{margin-top:-10px}100%{left:calc(100% + 40px);margin-top:0}}
.px-ufo .tractor{
  position:absolute;left:8px;top:100%;width:48px;height:120px;pointer-events:none;
  background:linear-gradient(180deg,rgba(120,183,255,.45),rgba(120,183,255,0));
  clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);animation:beamFlicker .4s steps(2) infinite;
}
/* rocket launches across Services */
.px-rocket{left:6%;bottom:8%;--fps:.14s;transform:scale(1.8) rotate(28deg);transform-origin:center;animation:rocketGo 9s cubic-bezier(.3,0,.6,1) infinite;filter:drop-shadow(0 0 12px rgba(255,177,74,.7))}
@keyframes rocketGo{0%{left:6%;bottom:6%;opacity:0}6%{opacity:1}80%{left:88%;bottom:86%;opacity:1}86%{opacity:0}100%{left:6%;bottom:6%;opacity:0}}
/* ghost drifts around the managed account */
.px-ghost{right:clamp(20px,6vw,100px);top:clamp(20px,5vh,60px);--fps:.6s;transform:scale(1.7);transform-origin:top right;animation:ghostFloat 6s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(255,255,255,.55));opacity:.92}
@keyframes ghostFloat{0%,100%{transform:scale(1.7) translate(0,0)}33%{transform:scale(1.7) translate(-26px,-18px)}66%{transform:scale(1.7) translate(18px,10px)}}
/* butterfly flutters in the letter field */
.px-fly{right:14%;top:22%;--fps:.18s;transform:scale(1.6);transform-origin:center;animation:flyPath 11s ease-in-out infinite;z-index:3;filter:drop-shadow(0 0 10px rgba(176,123,255,.7))}
@keyframes flyPath{0%,100%{translate:0 0}25%{translate:-60px -30px}50%{translate:-120px 10px}75%{translate:-50px 40px}}
/* twinkles: little stars seeded into the dark sections */
.px-star{--fps:.5s;transform:scale(1.3);filter:drop-shadow(0 0 8px rgba(255,207,74,.9));animation:starTwinkle var(--st,2.2s) ease-in-out infinite;animation-delay:var(--sd,0s);opacity:.9}
@keyframes starTwinkle{0%,100%{opacity:.25;transform:scale(1) rotate(0deg)}50%{opacity:1;transform:scale(1.6) rotate(45deg)}}
@media(max-width:900px){.px-ufo .tractor,.px-rocket{display:none}}

@media (prefers-reduced-motion:reduce){
  .px-car,.px-car .lamp,.px-ufo,.px-ufo .tractor,.px-rocket,.px-ghost,.px-fly,.px-star,.bulb.on .glass,.st-red .tcaret{animation:none !important}
}

/* keep the last bulb clear of the tree */
#work .bulbs{padding-right:clamp(96px,9.5vw,136px)}
#work .wire{right:clamp(96px,9.5vw,136px);width:auto}

/* ══════════════════════════════════════════════════════════════════════════
   50 · HERO WORLD — the fonts you sent
   ════════════════════════════════════════════════════════════════════════ */

/* fonts you sent, where you will see them */
.est{text-transform:none;font-size:clamp(12px,1vw,15px);letter-spacing:0;color:rgba(10,15,12,.7)}
.est b{font-variation-settings:'opsz' 32,'wght' 700,'WONK' 1}
.place .city{font-family:var(--chunk);font-variation-settings:normal;font-weight:400;letter-spacing:.01em;font-size:clamp(15px,1.7vw,24px)}
.tst q{font-family:var(--fraun);font-variation-settings:'opsz' 48,'wght' 500,'SOFT' 40,'WONK' 0;font-size:clamp(18px,1.7vw,25px);line-height:1.38}
.tst q .hl{font-style:italic;font-variation-settings:'opsz' 48,'wght' 600,'SOFT' 60,'WONK' 1}
.card-body h3{font-family:var(--chunk);font-variation-settings:normal;font-weight:400;letter-spacing:0;font-size:clamp(18px,1.9vw,28px)}
.reel-body h4{font-family:var(--groove);font-weight:400;letter-spacing:0;font-size:17px}
.mg-body h3,.cclient h3{font-family:var(--chunk);font-variation-settings:normal;font-weight:400;letter-spacing:0}
.person-body h3{font-family:var(--fraun);font-variation-settings:'opsz' 144,'wght' 800,'SOFT' 20,'WONK' 0;text-transform:none;letter-spacing:-.02em}
.person-body h3 .sw{font-family:var(--fraun);font-style:italic;font-variation-settings:'opsz' 144,'wght' 500,'WONK' 1}

/* ══════════════════════════════════════════════════════════════════════════
   51 · THE WORLDS — one creature each
   ════════════════════════════════════════════════════════════════════════ */
/* Upside Down: the old car, the dead tree */
.px-car{transform:scale(2.4);--fps:.2s}
.px-car .lamp{left:100%;top:22px;width:230px;height:40px}
.px-tree{right:-30px;bottom:-4px;transform:scale(2.4);filter:none;--fps:1.6s;opacity:.95}
@media(max-width:900px){.px-car{transform:scale(1.6)}.px-tree{transform:scale(1.6)}}
#work .bulbs{padding-right:clamp(120px,11vw,160px)}
#work .wire{right:clamp(120px,11vw,160px)}

/* Services: the flying car crosses above the grid */
.px-fcar{left:-140px;top:clamp(20px,4vh,60px);--fps:.14s;transform:scale(2);transform-origin:top left;animation:fcarFly 18s linear infinite;filter:drop-shadow(0 8px 14px rgba(120,183,255,.45))}
@keyframes fcarFly{0%{left:-140px;margin-top:0}30%{margin-top:-14px}60%{margin-top:12px}100%{left:calc(100% + 60px);margin-top:0}}
#contact{position:relative;overflow:hidden}
@media(max-width:900px){.px-fcar{display:none}}

@media (prefers-reduced-motion:reduce){
  .px-fcar{animation:none !important}
}

/* keep the est. line clear of the seal */
.hero-head .est{margin-right:clamp(150px,13vw,190px)}

/* ══════════════════════════════════════════════════════════════════════════
   52 · THE MULTIVERSE — your pixel cast, alive
   One clipped, click-through layer per world; every character is the
   uploaded art itself, moved by the behaviour engine in cc.js.
   ════════════════════════════════════════════════════════════════════════ */
#work,#founders,#copy,#field{position:relative}
#clients.pad-sm{padding-bottom:clamp(120px,10vw,150px)}
#work.upside{padding-bottom:clamp(130px,15vw,210px)}   /* room under the grid for the Upside Down cast, above the letterbox bar */
.crit-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3;contain:layout paint}
#hero .crit-layer{z-index:4}
.crit{position:absolute;left:0;top:0;opacity:0;will-change:transform;transform-origin:50% 100%;pointer-events:auto;cursor:grab;touch-action:none}
.crit.held{cursor:grabbing;z-index:60}
.crit-tag,.crit-say,.crit-fx,.crit .thread{pointer-events:none}
.crit.in{opacity:1;animation:critIn .6s cubic-bezier(.2,1.5,.4,1) both}
@keyframes critIn{0%{scale:0 0}55%{scale:1.12 .88}100%{scale:1 1}}
.crit-body{position:absolute;inset:0;transform-origin:50% 100%;filter:drop-shadow(0 8px 6px rgba(0,0,0,.28))}
/* the rig: each part is a window onto the same image, hinged at its joint */
.rig{position:absolute;left:0;top:0;transform-origin:0 0}
.grp{position:absolute;left:0;top:0}
.part{position:absolute;backface-visibility:hidden;will-change:transform}
.crit-body img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.crit[style*="--glow"] .crit-body{filter:drop-shadow(0 8px 6px rgba(0,0,0,.28)) drop-shadow(0 0 14px var(--glow))}
#hero .crit-body{filter:drop-shadow(0 6px 4px rgba(10,15,12,.22))}

/* the game HUD: a nameplate when you get close, a bubble when they talk */
.crit-tag{
  position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 6px;display:grid;gap:2px;text-align:center;white-space:nowrap;
  font-family:var(--pixel);font-size:9px;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;
  color:#fff;background:rgba(8,9,10,.92);border:2px solid #fff;padding:5px 8px 4px;box-shadow:3px 3px 0 rgba(0,0,0,.35);
  opacity:0;transition:opacity .25s,translate .25s;
}
.crit-tag b{font-weight:400;color:var(--lime)}
.crit-tag small{font-size:8px;color:rgba(255,255,255,.66);text-transform:none;letter-spacing:.04em}
.crit.near .crit-tag,.crit.intro .crit-tag{opacity:1;translate:-50% 0}
.crit-say{
  position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 0;width:max-content;max-width:210px;
  font-family:var(--pixel);font-size:10px;line-height:1.35;letter-spacing:.02em;text-align:center;
  color:#0a0f0c;background:#fff;border:2px solid #0a0f0c;padding:6px 9px 5px;box-shadow:3px 3px 0 rgba(0,0,0,.35);
  opacity:0;scale:.6;transform-origin:50% 100%;transition:opacity .18s,scale .25s cubic-bezier(.2,1.6,.4,1);
}
.crit-say::after{content:'';position:absolute;left:50%;top:100%;translate:-50% 0;border:7px solid transparent;border-top-color:#0a0f0c;border-bottom:0}
.crit-say::before{content:'';position:absolute;left:50%;top:calc(100% - 3px);translate:-50% 0;border:6px solid transparent;border-top-color:#fff;border-bottom:0;z-index:1}
.crit.talk .crit-say{opacity:1;scale:1}
.crit.talk .crit-tag{opacity:0}
/* each world talks in its own typeface */
#hero .crit-say{font-family:var(--hand);font-weight:700;font-size:17px;letter-spacing:0;border-radius:12px 12px 12px 3px}
#founders .crit-say{font-family:var(--fraun);font-style:italic;font-variation-settings:'opsz' 32,'wght' 500,'SOFT' 30,'WONK' 1;font-size:14px;letter-spacing:0}
#reels .crit-say{font-family:var(--groove);font-size:12px;letter-spacing:0}
#testimonials .crit-say{font-family:var(--chunk);font-size:11px;letter-spacing:0}
#field .crit-say,#work .crit-say,#contact .crit-say{text-transform:uppercase}

/* dust on the heavy ones, sparks on the casters */
.crit-fx{position:absolute;inset:0;overflow:visible;pointer-events:none}
.crit-fx i{position:absolute;display:block;width:8px;height:8px}
.crit-fx .puff{background:rgba(255,255,255,.6);border-radius:2px;animation:puffUp .6s ease-out forwards}
#hero .crit-fx .puff{background:rgba(10,15,12,.28)}
@keyframes puffUp{0%{opacity:.9;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--dx,0),-22px) scale(1.6)}}
.crit-fx .spk{width:6px;height:6px;background:var(--c,#ffcf4a);box-shadow:0 0 8px var(--c,#ffcf4a);rotate:45deg;animation:spkUp .9s ease-out forwards}
@keyframes spkUp{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(0,var(--dy,-30px)) scale(.2)}}
.crit .thread{position:absolute;left:50%;bottom:100%;width:2px;height:0;translate:-50% 0;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.55))}

/* the Upside Down: your car, as uploaded — it drives right to left, its lamp ahead of it,
   stops under the sign for a beat, then carries on */
.px-car.car-real{
  position:absolute;width:auto;height:auto;left:auto;right:-280px;bottom:0;transform:none;z-index:4;
  animation:carDriveL 17s linear infinite;filter:drop-shadow(0 10px 8px rgba(0,0,0,.55));
}
.px-car.car-real svg{display:block;height:clamp(64px,7.5vw,106px);width:auto;overflow:visible}
.px-car.car-real .car-body{animation:carBounce .5s steps(2) infinite}
.px-car.car-real .rim{animation:wheelSpin 17s linear infinite;transform-origin:0 0}
@keyframes wheelSpin{0%{transform:rotate(0)}42%{transform:rotate(-1800deg)}54%{transform:rotate(-1800deg)}100%{transform:rotate(-3600deg)}}
.px-car.car-real .headlamp{filter:drop-shadow(0 0 5px #fff4c8)}
.px-car.car-real .exhaust{animation:exCycle 17s linear infinite}
.px-car.car-real .ex{fill:rgba(225,225,225,.55);transform-box:fill-box;transform-origin:center;animation:exPuff 1.1s ease-out infinite}
.px-car.car-real .e2{animation-delay:.36s}.px-car.car-real .e3{animation-delay:.72s}
@keyframes exPuff{0%{opacity:.7;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(26px,-9px) scale(1.9)}}
@keyframes exCycle{0%,41%{opacity:1}43%,53%{opacity:0}55%,100%{opacity:1}}
@keyframes carBounce{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes carDriveL{0%{right:-280px}42%{right:50%}54%{right:50%}100%{right:calc(100% + 60px)}}
.px-car.car-real .lamp{
  left:auto;right:calc(100% - 12px);top:auto;bottom:24px;width:250px;height:46px;
  background:linear-gradient(270deg,rgba(255,240,180,.8),rgba(255,240,180,0));
  clip-path:polygon(100% 40%,0 0,0 100%,100% 60%);
}

/* the fonts you sent, one more time where headings carry a world */
#copy .sec-head h2{font-family:var(--groove);font-variation-settings:normal;font-weight:400;letter-spacing:0;line-height:.96;text-transform:none}
#testimonials .sec-head h2{font-family:var(--fraun);font-variation-settings:'opsz' 144,'wght' 800,'SOFT' 50,'WONK' 1;text-transform:none;letter-spacing:-.025em;line-height:.9}

@media(max-width:700px){.crit-tag{display:none}}
@media (prefers-reduced-motion:reduce){
  .crit.in{animation:none}.crit-fx{display:none}
  .px-car.car-real,.px-car.car-real img{animation:none !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   53 · WORLDS — the light chaser, crayon, golden hour, vehicles, level tags
   ════════════════════════════════════════════════════════════════════════ */
/* the light chaser on the landing page */
.human{
  position:absolute;left:66%;top:5%;z-index:2;translate:-50% 0;
  height:min(70%,60vw);aspect-ratio:600/760;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 66%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 66%,rgba(0,0,0,0) 100%);
  transform:translate(var(--hx,0px),var(--hy,0px)) rotate(var(--hr,0deg));transform-origin:50% 100%;will-change:transform;
}
.human svg{width:100%;height:100%;overflow:visible;animation:humanBreathe 5.5s ease-in-out infinite;transform-origin:50% 100%}
@keyframes humanBreathe{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.012) translateY(-3px)}}
.human .h-refl{animation:lensSweep 6.5s ease-in-out infinite}
@keyframes lensSweep{0%,100%{transform:translateX(-70px) skewX(-20deg)}50%{transform:translateX(80px) skewX(-20deg)}}
.human .h-lights{transform:translate(var(--gx,0px),var(--gy,0px))}
.human .h-rim{animation:rimPulse 4s ease-in-out infinite}
@keyframes rimPulse{0%,100%{opacity:.82}50%{opacity:1}}
.human .h-glow{animation:glowBreathe 6s ease-in-out infinite}
@keyframes glowBreathe{0%,100%{opacity:.7}50%{opacity:1}}

/* crayon: waxy, rough-edged notes drawn over the photos and headings */
.cray-note{position:absolute;pointer-events:none;z-index:4;font-family:var(--hand);font-weight:700;color:#ff4a1c;filter:url(#crayon)}
.cray-note svg{display:block;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.cray-note span{display:block;white-space:nowrap;font-size:clamp(16px,1.5vw,24px);line-height:1;transform:rotate(-4deg)}
.hero-cray{left:47%;top:84%;width:clamp(110px,10vw,150px);z-index:2}
.hero-cray svg{width:100%;transform:rotate(-6deg)}
.hero-cray span{margin-top:-4px;text-align:right}
.sec-head{position:relative}
.tst-cray{right:8px;top:-46px;width:max-content;color:#ff8fa3;text-align:center}
.tst-cray svg{width:58px;margin:0 auto}
.tst-cray span{font-size:15px;color:var(--amber);margin-top:2px}
.cta-cray{left:calc(50% + clamp(150px,23vw,340px));top:34%;width:max-content;color:var(--lime)}
.cta-cray svg{width:110px}
.cta-cray span{margin-top:-8px;margin-left:60px;font-size:22px}
.reel-cray{right:12px;top:-32px;color:#b07bff;width:max-content;max-width:100%}
.reel-cray svg{width:104px}
.person-cray{position:absolute;left:12px;bottom:12px;width:min(64%,260px);z-index:3;fill:none;stroke:#fff1b4;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:url(#crayon);pointer-events:none}
.person-cray text{fill:#fff1b4;stroke:none;font-family:var(--hand);font-weight:700;font-size:30px}
.person-cray .ul{stroke:#ff4a1c}
@media(max-width:959px){.hero-cray,.tst-cray,.reel-cray,.cta-cray{display:none}
  .human{left:auto;right:-6%;translate:0 0;top:2%;height:min(44%,78vw)}
  .word .l-b,.slogan{text-shadow:0 0 14px rgba(246,245,238,.95),0 0 28px rgba(246,245,238,.85)}}

/* golden hour: the pixel sunset behind the last call */
.sunset-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}
.sunset-fade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#08090a 0%,rgba(8,9,10,.55) 14%,rgba(8,9,10,0) 32%,rgba(8,9,10,0) 58%,rgba(8,9,10,.72) 82%,#08090a 100%)}
#contact .big-cta .dsp{text-shadow:0 2px 0 rgba(8,9,10,.6),0 10px 40px rgba(8,9,10,.7)}
#contact .cta-sub,#contact .contact-meta{position:relative;z-index:2}
#contact .lab{text-shadow:0 1px 0 rgba(8,9,10,.8)}

/* vehicles built from the two-frame pixel sprites */
.rigpx{position:absolute;left:0;top:0;transform-origin:0 0}
.rigpx i{position:absolute;left:0;top:0;width:4px;height:4px}
.rigpx .f1{animation:pxA var(--fps,.3s) steps(1) infinite}
.rigpx .f2{animation:pxB var(--fps,.3s) steps(1) infinite}
.rigpx .tractor{position:absolute;left:8px;top:100%;width:48px;height:150px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(180deg,rgba(120,183,255,.5),rgba(120,183,255,0));clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.crit.beam .tractor{opacity:1;animation:beamFlicker .4s steps(2) infinite}
.crit.rec .crit-body::after{content:'';position:absolute;right:-8px;top:-8px;width:7px;height:7px;border-radius:50%;background:#ff3a17;box-shadow:0 0 8px #ff3a17;animation:recBlink .6s steps(2) infinite}
@keyframes recBlink{0%,49%{opacity:1}50%,100%{opacity:.15}}
.k-vehicle .crit-body{filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}

/* level tags */
.lab .world{color:var(--lime);opacity:.9;font-weight:400;letter-spacing:.12em}
#hero .lab .world{color:var(--violet-deep)}

/* the social heading in the wonky serif */
.soc-h{text-transform:none;letter-spacing:-.03em;line-height:.9}

@media (prefers-reduced-motion:reduce){
  .human svg,.human .h-refl,.human .h-rim,.human .h-glow,.px-car.car-real .car-body,.px-car.car-real .rim,.px-car.car-real .ex,.px-car.car-real .exhaust,.rigpx .f1,.rigpx .f2{animation:none !important}
}

/* the figure owns the lower right: buttons sit under the copy, the seal and stickers clear the face */
@media(min-width:960px){
  .hero-bottom{grid-template-columns:1fr;max-width:min(64%,900px);justify-items:start;row-gap:14px}
  .hero-copy{max-width:42ch}
  .hero-foot{justify-content:flex-start;gap:16px 48px}
  .place .ww{margin-right:clamp(280px,29vw,430px)}
}
@media(min-width:960px){.hero-head .est{margin-right:clamp(300px,30vw,440px)}}
@media(min-width:960px){
  .seal{right:auto;left:60%;top:56%}
  .t2{top:-66%;right:auto;left:58%}
  .t6{top:-36%;right:auto;left:66%}
  .t10{top:24%;right:auto;left:72%}
  .t5{top:50%;right:auto;left:62%}            /* Drone floats right of the llama's head */
  .t11{right:3%}
}
.hero-cray{color:#ff3a17}
.hero-cray span{font-size:clamp(18px,1.7vw,27px)}

/* a real photograph takes over the figure when assets/hero-human.png exists */
.human-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0%;display:none;filter:contrast(1.03) saturate(1.06)}
.human.has-photo .human-photo{display:block}
.human.has-photo svg{display:none}
.human::before{content:'';position:absolute;left:50%;top:14%;width:130%;aspect-ratio:1;translate:-50% 0;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,177,74,.32),rgba(255,177,74,0) 60%)}
.human.has-photo::before{display:none}
/* everything else orbits the figure: the seal, the note and the right-hand stickers move to its sides */
@media(min-width:960px){
  .seal{left:auto;right:2%;top:56%}
  .hero-cray{left:auto;right:5%;top:76%}
  .hero-cray svg{transform:rotate(-6deg) scaleX(-1)}
  .hero-cray span{text-align:left}
  .t4{top:-46%;right:auto;left:30%}
  .t10{top:24%;right:auto;left:80%}
  .hero-head .est{margin-right:clamp(150px,12vw,180px);margin-left:auto}
  .hero-head{justify-content:flex-start;gap:clamp(16px,2vw,32px)}
}

/* the title makes room for the face: a touch smaller, with a soft light halo so it reads over the dark hoodie */
@media(min-width:960px){
  .word{font-size:clamp(52px,10.8vw,176px)}
  .word .l-b,.slogan{text-shadow:0 0 18px rgba(246,245,238,.95),0 0 34px rgba(246,245,238,.8)}
  .t6{top:-36%;right:3%;left:auto}
  .t10{top:24%;right:auto;left:87%}
  .t4{top:-46%;right:auto;left:33%}
  .t2{top:-66%;right:auto;left:18%}
  .t8{top:-80%;right:auto;left:40%}
}

/* ══════════════════════════════════════════════════════════════════════════
   54 · THE LANDING PAGE, TWO WAYS — bright studio (default) or after-dark
   Switch with body.hero-dark, or ?hero=dark / ?hero=light on the URL.
   ════════════════════════════════════════════════════════════════════════ */
body.hero-dark #hero{--ink:#f6f5ee;background:#08090a}
body.hero-dark .wash{background:
  radial-gradient(84% 56% at 50% 118%, #0e3a22 0%, rgba(8,9,10,0) 68%),
  radial-gradient(40% 34% at 6% 8%, rgba(109,40,217,.38), transparent 72%)}
body.hero-dark .bloom{opacity:.26}
body.hero-dark .glow i{opacity:.32}
body.hero-dark .hero-grid{background-image:linear-gradient(to right,rgba(246,245,238,.08) 0 1px,transparent 1px)}
body.hero-dark .brk{color:rgba(246,245,238,.62)}
body.hero-dark .brk.dim{color:rgba(246,245,238,.46)}
body.hero-dark .est{color:rgba(246,245,238,.72)}
body.hero-dark .pill-live{background:#f6f5ee;color:#08090a}
body.hero-dark .tag:not(.hot):not(.go){background:#f6f5ee;color:#08090a;box-shadow:0 8px 22px -10px rgba(0,0,0,.7)}
body.hero-dark .tag:hover{background:var(--violet) !important;color:#120a1e !important}
body.hero-dark .seal{background:#f6f5ee;color:#08090a;box-shadow:0 14px 34px -14px rgba(0,0,0,.8)}
body.hero-dark .seal b{color:#0f9d58}
body.hero-dark .place .rule{background:rgba(246,245,238,.22)}
body.hero-dark .place .ww{color:rgba(246,245,238,.6)}
body.hero-dark .hero-copy{color:rgba(246,245,238,.74)}
body.hero-dark .btn-solid{background:#f6f5ee;color:#08090a;border-color:#f6f5ee}
body.hero-dark .btn-line{border-color:rgba(246,245,238,.32);color:rgba(246,245,238,.82)}
body.hero-dark .hero-foot{border-top-color:rgba(246,245,238,.14)}
body.hero-dark .vhs{color:rgba(246,245,238,.72);background:rgba(246,245,238,.06);border-color:rgba(246,245,238,.16)}
body.hero-dark .word .l-b,body.hero-dark .slogan{text-shadow:0 0 18px rgba(8,9,10,.92),0 0 36px rgba(8,9,10,.85)}
body.hero-dark .dd-1,body.hero-dark .dd-4{color:var(--violet)}
body.hero-dark .dd-6{color:#22e07a}
body.hero-dark #hero .mk{filter:brightness(1.7)}
body.hero-dark #hero .crit-fx .puff{background:rgba(255,255,255,.5)}
body.hero-dark #hero .crit-body{filter:drop-shadow(0 8px 6px rgba(0,0,0,.45))}
body.hero-dark .hero-cray{color:var(--amber)}
body.hero-dark .human.has-photo::before{display:none}
body.hero-dark #nav:not(.stuck) .brand .txt{color:#f6f5ee}
body.hero-dark #nav:not(.stuck) .brand .txt small{color:rgba(246,245,238,.5)}
body.hero-dark #nav:not(.stuck) .nav-mid{background:rgba(8,9,10,.55);border-color:rgba(239,233,220,.1)}
body.hero-dark #nav:not(.stuck) .nav-mid a{color:rgba(246,245,238,.82)}
body.hero-dark #nav:not(.stuck) .nav-mid a:hover{color:#fff}
body.hero-dark #nav:not(.stuck) .nav-mid a.active{color:#0a0f0c}
body.hero-dark #nav:not(.stuck) .burger{border-color:rgba(246,245,238,.28);color:#f6f5ee}
body.hero-dark .ticker{border-top-color:rgba(246,245,238,.1)}

/* the llama: big, centred, head in the middle of the title */
.human{left:50%;top:-1%;height:min(100%,82vw);aspect-ratio:var(--ha,600/760);--ha:1100/1628}
.human.has-photo::before{display:none}
.human-photo{object-position:50% 0%}
@media(min-width:960px){
  .seal{left:auto;right:2%;top:50%}
  .hero-cray{left:auto;right:5%;top:74%}
  .t2{top:-56%;left:auto;right:14%}
  .t4{top:-2%;right:auto;left:64%}             /* Travel joins the gap column between the two llamas */
  .t6{top:-36%;right:12%;left:auto}
  .t8{top:-12%;right:auto;left:72%}
  /* the REC timecode takes its own line under the pill, clear of the llama's cheek */
  .hero-head::after{content:'';flex-basis:100%;height:0;order:4}
  .hero-head .vhs{order:5;margin-right:auto}
  .t10{top:24%;right:auto;left:86%}
  .word{font-size:clamp(52px,10.8vw,176px)}
}
@media(max-width:959px){
  .human{left:auto;right:-6%;translate:0 0;top:1%;height:min(46%,76vw)}
}

/* between the phone menu and full desktop the nav gets tight: compact chips so nothing pushes past the edge */
@media(min-width:1021px) and (max-width:1240px){
  .nav-mid{gap:2px;padding:4px}
  .nav-mid a{padding:7px 9px;font-size:9.5px;letter-spacing:.06em;gap:6px}
  .nav-cta{padding:9px 13px;font-size:9.5px}
  .brand .txt small{display:none}
}

/* a twinkle or a drawn mark may sit right at a section's edge: clip sideways only, never up or down */
section:not(#hero){overflow-x:clip}

/* on phones the llama owns the top right, so the sun moves down beside the stickers */
@media(max-width:820px){.sunny{right:10px;top:19%;left:auto;bottom:auto}}

/* ══════════════════════════════════════════════════════════════════════════
   55 · THE LLAMA, ANCHORED — static, centred on the title, chin just above the first line
   ════════════════════════════════════════════════════════════════════════ */
.lockup .word,.lockup .slogan,.lockup .tag{position:relative;z-index:1}
.hero-head,.place,.hero-bottom{position:relative;z-index:2}
@media(min-width:960px){.lockup .tag{position:absolute}}
.human{
  position:absolute;left:50%;right:auto;top:auto;bottom:-1%;
  height:min(80%,64vw);aspect-ratio:var(--ha);translate:-70% 0;transform:none !important;z-index:2;   /* the head clears the title; neck and hoodie run behind the type */   /* the head (at 70% of the frame) sits on the page's centre line, ears just under CHROMA */
  -webkit-mask-image:none;mask-image:none;pointer-events:none;
}
.human svg{animation:none}
.human-photo{filter:none;object-position:50% 100%}
@media(max-width:959px){
  .human{left:auto;right:-2%;translate:0 0;top:29%;bottom:auto;height:26%}
}

/* ══════════════════════════════════════════════════════════════════════════
   56 · THE LOUD LANDING PAGE — chroma green, black type, nothing quiet about it
   ════════════════════════════════════════════════════════════════════════ */
body.hero-loud #hero{--ink:#0a0f0c;background:#00d563}
body.hero-loud .wash{background:
  radial-gradient(70% 60% at 18% 0%, rgba(195,245,60,.6), rgba(195,245,60,0) 62%),
  radial-gradient(60% 55% at 100% 100%, rgba(0,140,80,.55), rgba(0,140,80,0) 62%)}
body.hero-loud .bloom{opacity:.18}
body.hero-loud .glow i{opacity:.22}
body.hero-loud .hero-grid{background-image:linear-gradient(to right,rgba(10,15,12,.1) 0 1px,transparent 1px)}
body.hero-loud .word .l-a{filter:drop-shadow(0 4px 0 rgba(10,15,12,.3))}
body.hero-loud .word .l-b,body.hero-loud .slogan{text-shadow:none}
body.hero-loud .tag.go{background:var(--violet-deep);color:#fff}
body.hero-loud .tag.go:hover{background:var(--ink);color:#fff}
body.hero-loud .seal b{color:var(--lime)}
body.hero-loud #nav:not(.stuck) .nav-cta{background:#0a0f0c;color:#c3f53c;animation:none}
body.hero-loud #nav:not(.stuck) .nav-cta .dot{background:#c3f53c;box-shadow:0 0 8px #c3f53c}
body.hero-loud #nav:not(.stuck) .nav-cta:hover{background:var(--violet-deep);color:#fff}
body.hero-loud .btn-solid{background:#0a0f0c;color:#c3f53c;border-color:#0a0f0c}
body.hero-loud .btn-line{border-color:rgba(10,15,12,.5);color:#0a0f0c}
body.hero-loud .pill-live i{background:#c3f53c}
body.hero-loud .dd-2{color:var(--violet-deep)}
body.hero-loud .dd-6{color:#0a0f0c}
body.hero-loud .hero-cray{color:#0a0f0c}
body.hero-loud #hero .crit-fx .puff{background:rgba(10,15,12,.3)}
body.hero-loud #nav:not(.stuck) .nav-mid{background:rgba(255,255,255,.5);border-color:rgba(10,15,12,.14)}
body.hero-loud .ticker{background:#0a0f0c}

/* loud look: type that crosses the hoodie keeps a green halo so it never sinks into the violet */
body.hero-loud .word .l-b,body.hero-loud .slogan,body.hero-loud .place .city,body.hero-loud .place .ww,body.hero-loud .hero-copy,body.hero-loud .hero-foot .brk{
  text-shadow:0 0 2px #00d563,0 0 6px #00d563,0 0 14px #00d563,0 0 26px rgba(0,213,99,.9)}
body.hero-loud .btn-line{background:#00d563;border-color:#0a0f0c;color:#0a0f0c}
body.hero-loud .btn-line:hover{background:#0a0f0c;color:#c3f53c}
body.hero-loud .place .rule{background:rgba(10,15,12,.35)}
body.hero-loud #nav:not(.stuck) .nav-cta{color:#c3f53c}
body.hero-loud #nav:not(.stuck) .nav-cta:hover{background:var(--violet-deep);color:#fff;border-color:var(--violet-deep)}
body.hero-loud .cray-note.hero-cray{color:#0a0f0c}

/* short screens: the title block tightens so the stickers never climb into the nav */
@media(min-width:960px) and (max-height:950px){
  .word{font-size:clamp(52px,9.6vw,150px)}
  .hero-in{gap:clamp(12px,2vh,24px)}
}
@media(min-width:960px) and (max-height:820px){
  .word{font-size:clamp(48px,8.6vw,128px)}
  .t4{top:-74%}.t9{top:46%}.t7{top:2%}          /* the block is shorter here, so the stacked pairs spread out */
  .vhs{display:none}.t1{top:-64%;left:6%}      /* the timecode goes; Aftermovies sits above the pill */
  .t6{top:-18%;right:8%}                        /* Nightlife drops under the est. line */
  .t4{top:2%;left:58%;right:auto}.t3{top:-72%;left:64%;right:auto}   /* short screens: Sport above the muzzle line, Travel left of Recaps */
  .seal{top:-14%}                                /* the seal clears the second llama's quiff */
  .slogan{font-size:clamp(22px,3vw,44px)}
  .hero-in{gap:clamp(10px,1.6vh,20px);padding-top:clamp(64px,8vh,90px)}
}
/* phones: the hoodie melts into the green instead of ending on a straight edge */
@media(max-width:959px){
  .human{-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
}

/* the white-and-green look: the small text that crosses the llama keeps a bone halo */
body:not(.hero-dark):not(.hero-loud) .place .ww,body:not(.hero-dark):not(.hero-loud) .place .city,body:not(.hero-dark):not(.hero-loud) .hero-copy,body:not(.hero-dark):not(.hero-loud) .hero-foot .brk{text-shadow:0 0 4px #f6f5ee,0 0 10px #f6f5ee,0 0 18px rgba(246,245,238,.9)}

/* the outline button sits on the hoodie's shoulder on laptops: give it a bone fill */
body:not(.hero-dark):not(.hero-loud) .btn-line{background:rgba(246,245,238,.86)}

/* phones: the drawn circle and the small violet star stay off the llama's face */
@media(max-width:959px){
  #hero .mk-layer svg:nth-child(2){display:none}
  .dd-4{top:60%;right:4%}
}

/* ══════════════════════════════════════════════════════════════════════════
   57 · THE LLAMA OVER THE TITLE — in front of CHROMA, behind Chasers and everything else
   ════════════════════════════════════════════════════════════════════════ */
.lockup .word .l-a{position:relative;z-index:1}
.lockup .word .l-b{position:relative;z-index:3}
.lockup .slogan{z-index:3}
.lockup .tag{z-index:4}
.lockup .human{
  --hh:min(100svh,80vw);                                   /* as tall as the landing section */
  position:absolute;left:50%;right:auto;top:calc(var(--hh) * -.24);bottom:auto;   /* the jaw (24% down the image) lands on the CHROMA line */
  height:var(--hh);aspect-ratio:var(--ha);translate:-70% 0;transform:none !important;z-index:0;   /* behind every line of type */
  -webkit-mask-image:none;mask-image:none;pointer-events:none;
}
@media(max-width:959px){
  .lockup .human{left:auto;right:-7%;translate:0 0;top:22%;bottom:auto;height:29svh;
    -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
}

/* ══════════════════════════════════════════════════════════════════════════
   58 · THE SECOND CHASER — lower right, facing the first, looking up the other way
   ════════════════════════════════════════════════════════════════════════ */
#hero > .human.two{
  --hh:min(104svh,84vw);--ha2:1100/1957;                  /* as big as the first: both heads come out the same width */
  left:auto;right:-2%;translate:0 0;top:auto;bottom:calc(var(--hh) * -.45);   /* the hoodie collar sits on the fold; the mohawk stays on screen */
  height:var(--hh);aspect-ratio:var(--ha2);z-index:2;transform:none !important;
  -webkit-mask-image:none;mask-image:none;pointer-events:none;
}
#hero > .human.two svg{display:none}
@media(min-width:960px){
  .seal{left:auto;right:0;top:-6%}                       /* the seal climbs above his quiff */
  .t10{top:14%;right:auto;left:76%}                      /* Social tucks under Recaps */
  .t11{bottom:auto;top:90%;right:auto;left:64%}          /* Events sits in the gap between the two */
  .hero-cray{right:30%;top:78%}                          /* the note points at the pair */
}
@media(max-width:959px){#hero > .human.two{display:none}}   /* phones keep one chaser */

/* short screens, final say (after section 58): the seal clears the quiff, Travel clears the jaw */
@media(min-width:960px) and (max-height:820px){
  .seal{top:-16%}
  .t4{top:6%}
}

/* the second chaser's mohawk needs the top-right corner: the seal climbs, Nightlife slides left on short screens */
@media(min-width:960px){
  .seal{top:-40%}
  .t10{top:-26%;left:64%;right:auto}                     /* Social above Travel, in the column between the two llamas */
  .t11{top:90%;left:60%;right:auto}                      /* Events on the first llama's shoulder side */
  .hero-cray{right:32%}                                  /* the note stays clear of the second llama's jaw */
}
@media(min-width:960px) and (max-height:820px){
  .seal{top:-40%;right:-4%}.t6{right:8%}
  .t4{top:8%;left:56%}.t10{top:34%;left:60%}.t5{top:62%;left:52%}.t11{top:90%;left:52%}
  .hero-cray{right:36%}
}

/* ══════════════════════════════════════════════════════════════════════════
   59 · TWO HEADS, ONE HEIGHT — the orange chaser rises to the purple one's level
   ════════════════════════════════════════════════════════════════════════ */
.lockup .human.two{
  --hh:min(104svh,84vw);--ha2:1100/1957;
  position:absolute;left:auto;right:-6.5%;translate:0 0;transform:none !important;
  top:calc(min(100svh,80vw) * -.24);bottom:auto;             /* the same head-top line as the first llama */
  height:var(--hh);aspect-ratio:var(--ha2);z-index:0;
  -webkit-mask-image:none;mask-image:none;pointer-events:none;
}
.lockup .human.two svg{display:none}
#hero > .human.two{display:none}
.est-foot{display:none}
@media(min-width:960px){
  /* the top-right quadrant is his now: everything that lived there moves into the column between the two, or onto his shoulder */
  .sunny{left:62%;right:auto;top:clamp(62px,7vh,90px);bottom:auto}
  .hero-head .est{display:none}
  .est-foot{display:inline;margin-left:auto}
  .seal{left:auto;right:0;top:70%}
  .t6{top:-56%;left:60%;right:auto;bottom:auto}          /* Nightlife */
  .t8{top:-30%;left:62%;right:auto;bottom:auto}          /* Recaps */
  .t4{top:-12%;left:62%;right:auto;bottom:auto}          /* Travel */
  .t10{top:8%;left:62%;right:auto;bottom:auto}           /* Social */
  .t2{top:26%;left:60%;right:auto;bottom:auto}           /* Corporate */
  .t5{top:46%;left:62%;right:auto;bottom:auto}           /* Drone */
  .t11{top:90%;left:58%;right:auto;bottom:auto}          /* Events */
  .hero-cray{right:36%;top:78%}
}
@media(min-width:960px) and (max-height:820px){
  /* laptops: both llamas a notch smaller so the column between them has room */
  .lockup .human{--hh:min(100svh,60vw)}
  .lockup .human.two{--hh:min(104svh,60vw);top:calc(min(100svh,60vw) * -.24)}
  .seal{right:-4%;top:70%}
  .t6{top:-64%;left:60%}.t8{top:-38%;left:62%}.t4{top:-12%;left:62%}.t10{top:14%;left:62%}.t2{top:40%;left:60%}.t5{top:66%;left:62%}.t11{top:96%;left:58%}
  .t3{top:-72%;left:34%}                                  /* Sport tucks by the first llama's ear line */
}
@media(max-width:959px){.lockup .human.two{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   60 · PROOF FIRST — hero → reels → logos → results → reviews → work; two "work with us" rows
   ════════════════════════════════════════════════════════════════════════ */
.cta-row{
  margin-top:clamp(36px,5vw,72px);padding:clamp(22px,3vw,40px) clamp(22px,3.4vw,46px);
  border:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden;
  display:flex;justify-content:space-between;align-items:center;gap:22px 40px;flex-wrap:wrap;
}
.cta-row::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 160% at 0% 50%,rgba(0,213,99,.16),transparent 70%)}
.cta-row-txt{display:grid;gap:10px;position:relative}
.cta-row-h{margin:0;font-size:clamp(24px,2.6vw,40px);line-height:1;letter-spacing:-.03em;color:var(--bone)}
.cta-row-h .sw{color:var(--chroma)}
.cta-row-acts{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.cta-row .btn-ghost{margin-top:0}
.btn-go{background:var(--chroma);color:#0a0f0c;border:1px solid var(--chroma)}
.btn-go:hover{background:var(--lime);border-color:var(--lime);transform:translateY(-2px)}

/* the hero carries a longer promise now: the slogan stays on one line, the copy runs wider, the sun rises in the corner */
@media(min-width:960px){
  .lockup .slogan{white-space:nowrap;font-size:clamp(24px,3.5vw,54px);max-width:none}
  .hero-copy{max-width:60ch;font-size:clamp(13.5px,1vw,15.5px);line-height:1.55}
  .sunny{left:auto;right:3%;top:clamp(70px,8vh,96px)}
  .t2{left:57.5%}                                        /* Corporate clears the orange muzzle */
}
@media(min-width:960px) and (max-height:820px){
  .lockup .slogan{font-size:clamp(22px,3vw,44px)}
  .t3{top:-84%;left:22%}                                 /* Sport above the purple ear tips */
}

@media(min-width:960px) and (min-height:821px){.t1{left:17%;right:auto}}   /* tall screens: Aftermovies steps out from behind the cloud */

/* the work-with-us band closes the social-proof run, so its row needs no extra top gap */
.cta-band{border-block:1px solid var(--line);background:var(--void-2)}
.cta-band .cta-row{margin-top:0}

/* ══════════════════════════════════════════════════════════════════════════
   61 · A SHORTER LANDING — the hero gives up a little height, the studio pitch is next
   ════════════════════════════════════════════════════════════════════════ */
@media(min-width:960px){
  #hero{min-height:94svh}
  .hero-in{padding-block:clamp(70px,8.5vh,100px) clamp(16px,2.4vh,32px);gap:clamp(14px,2.2vh,26px)}
}
/* the studio block sits right under the hero: give it a touch less top air so it reads as a continuation */
#about{padding-top:clamp(30px,3.6vw,56px)}

/* ══════════════════════════════════════════════════════════════════════════
   62 · COMPACT LANDING — the name and the two chasers, and not much taller
   the llamas shrink ~28%, so the section no longer needs a whole screen
   ════════════════════════════════════════════════════════════════════════ */
@media(min-width:960px){
  #hero{min-height:72svh}
  .hero-in{padding-block:clamp(66px,8vh,92px) clamp(14px,2vh,26px);gap:clamp(12px,1.8vh,22px)}
  .hero-bottom{grid-template-columns:1fr}          /* the promise line is gone; the buttons sit alone */

  .lockup .human{--hh:min(72svh,58vw)}             /* was min(100svh,80vw) */
  .lockup .human.two{--hh:min(75svh,60vw);top:calc(min(72svh,58vw) * -.24)}
}
@media(min-width:960px) and (max-height:820px){
  #hero{min-height:78svh}
  .lockup .human{--hh:min(72svh,58vw)}
  .lockup .human.two{--hh:min(75svh,58vw);top:calc(min(72svh,58vw) * -.24)}
}

/* ══════════════════════════════════════════════════════════════════════════
   63 · COMPACT HERO, TUNED — clear the nav, keep the stickers off the title's top edge
   ════════════════════════════════════════════════════════════════════════ */
@media(min-width:960px){
  .hero-in{padding-block:clamp(90px,10.5vh,120px) clamp(14px,2vh,26px)}   /* the heads and the top row clear the nav again */
  .t6{top:-30%;left:60%}          /* Nightlife drops out from under the nav */
  .t8{top:-8%;left:62%}           /* Recaps follows it down */
  .t4{top:12%;left:62%}           /* Travel */
  .t10{top:30%;left:62%}          /* Social */
  .t2{top:48%;left:60%}           /* Corporate */
  .t5{top:66%;left:62%}           /* Drone */
  .t11{top:86%;left:58%}          /* Events */
  .t1{top:-40%;left:20%}          /* Aftermovies steps right, off the brand */
}
@media(min-width:960px) and (max-height:820px){
  .hero-in{padding-block:clamp(80px,9vh,104px) clamp(12px,1.6vh,22px)}
  .t6{top:-34%;left:60%}.t8{top:-10%;left:62%}.t4{top:12%;left:62%}.t10{top:32%;left:62%}.t2{top:52%;left:60%}.t5{top:70%;left:62%}.t11{top:90%;left:58%}
  .t3{top:-58%;left:24%}
}

@media(min-width:960px){.cloudy{top:4%;left:-16%;width:clamp(84px,8.5vw,132px)}}   /* compact hero: a smaller cloud drifts across the top-left corner */

/* ══════════════════════════════════════════════════════════════════════════
   64 · COMPACT HERO ON SHORT LAPTOPS — more breathing room, stickers respaced
   ════════════════════════════════════════════════════════════════════════ */
@media(min-width:960px) and (max-height:820px){
  #hero{min-height:86svh}
  .hero-in{padding-block:clamp(74px,8.5vh,100px) clamp(12px,1.6vh,22px)}
  .t1{top:-24%;left:16%}          /* Aftermovies — top-left, clear of the nav */
  .t3{top:-46%;left:30%}          /* Sport sits over the title, off the llama face */
  .t6{top:-30%;left:60%}          /* Nightlife starts the column below the nav */
  .t8{top:-6%;left:62%}           /* Recaps */
  .t4{top:18%;left:62%}           /* Travel */
  .t10{top:42%;left:62%}          /* Social */
  .t2{top:66%;left:59%}           /* Corporate */
  .t5{top:90%;left:62%}           /* Drone */
  .t11{top:112%;left:57%}         /* Events, lowest in the gap */
}

/* ══════════════════════════════════════════════════════════════════════════
   65 · TIGHTER — a smaller hero and less air between every section
   ════════════════════════════════════════════════════════════════════════ */
@media(min-width:960px) and (min-height:821px){
  #hero{min-height:66svh}
  .hero-in{padding-block:clamp(80px,9vh,104px) clamp(12px,1.6vh,22px);gap:clamp(10px,1.5vh,18px)}
  .lockup .human{--hh:min(66svh,54vw)}
  .lockup .human.two{--hh:min(69svh,56vw);top:calc(min(66svh,54vw) * -.24)}
}

/* ══════════════════════════════════════════════════════════════════════════
   66 · PROOF DENSITY — a result under every logo, a number above every quote
   ════════════════════════════════════════════════════════════════════════ */
.logo-cell{flex:none;display:grid;justify-items:center;gap:8px;margin-inline:clamp(6px,.8vw,12px)}
.logo-cell .logo{margin-inline:0}
.logo-note{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-3);white-space:nowrap;
}
.logo-cell:hover .logo-note{color:var(--chroma)}

.tst-metric{display:grid;gap:4px;margin-bottom:-6px}
.tst-metric b{
  font-size:clamp(26px,3vw,44px);font-weight:900;letter-spacing:-.04em;line-height:1;
  color:var(--tc);font-variant-numeric:tabular-nums;
}
.tst-metric span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   67 · THE GATE + THE QUESTIONS — qualification columns and an FAQ
   ════════════════════════════════════════════════════════════════════════ */
.fit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px)}
@media(max-width:820px){.fit-grid{grid-template-columns:1fr}}
.fit-col{
  border:1px solid var(--line);background:var(--panel);padding:clamp(22px,2.6vw,36px);
  position:relative;overflow:hidden;transition:border-color .5s var(--ease);
}
.fit-col.yes{--fc:var(--chroma)}
.fit-col.no{--fc:var(--signal)}
.fit-col:hover{border-color:color-mix(in srgb,var(--fc) 45%,var(--line))}
.fit-col::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 120% at 0% 0%,color-mix(in srgb,var(--fc) 12%,transparent),transparent 62%)}
.fit-h{
  display:flex;align-items:center;gap:12px;position:relative;
  font-family:var(--mono);font-size:clamp(10px,.82vw,11.5px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fc);margin-bottom:22px;
}
.fit-mark{
  width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--fc) 50%,var(--line));font-size:12px;
}
.fit-col ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative}
.fit-col li{
  position:relative;padding-left:24px;font-size:clamp(14px,1.08vw,16.5px);line-height:1.5;
  color:var(--bone-2);font-weight:400;
}
.fit-col li::before{
  content:'';position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--fc);opacity:.8;
}
.fit-col.no li{color:var(--bone-3)}

.faq{display:grid;gap:10px;max-width:960px}
.qa{border:1px solid var(--line);background:var(--panel);transition:border-color .45s var(--ease)}
.qa[open],.qa:hover{border-color:color-mix(in srgb,var(--chroma) 40%,var(--line))}
.qa summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,28px);
  font-size:clamp(15px,1.25vw,19px);font-weight:700;letter-spacing:-.01em;color:var(--bone);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{
  width:18px;height:18px;flex:none;position:relative;transition:transform .35s var(--ease);
}
.qa summary i::before,.qa summary i::after{
  content:'';position:absolute;inset:0;margin:auto;background:var(--chroma);
}
.qa summary i::before{width:100%;height:1.5px}
.qa summary i::after{width:1.5px;height:100%;transition:opacity .3s}
.qa[open] summary i{transform:rotate(90deg)}
.qa[open] summary i::after{opacity:0}
.qa p{
  margin:0;padding:0 clamp(18px,2vw,28px) clamp(18px,2vw,26px);
  font-size:clamp(14px,1.08vw,16.5px);line-height:1.62;color:var(--bone-2);max-width:74ch;font-weight:400;
}

/* ══════════════════════════════════════════════════════════════════════════
   68 · WHAT WE SELL, UP FRONT — four lines directly under the studio pitch
   ════════════════════════════════════════════════════════════════════════ */
.svc-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(24px,3vw,44px);
}
@media(max-width:900px){.svc-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-strip{grid-template-columns:1fr}}
.svcs{
  background:var(--panel);padding:clamp(18px,2vw,26px);display:grid;gap:8px;align-content:start;
  transition:background .45s var(--ease);position:relative;
}
.svcs::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sc);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.svcs:hover{background:var(--panel-2)}
.svcs:hover::after{transform:scaleX(1)}
.svcs-no{font-family:var(--pixel);font-size:10px;letter-spacing:.18em;color:var(--sc)}
.svcs-name{font-family:var(--chunk);font-size:clamp(16px,1.35vw,21px);letter-spacing:0;color:var(--bone);line-height:1.1}
.svcs-copy{font-size:clamp(12.5px,.96vw,14.5px);line-height:1.5;color:var(--bone-3);font-weight:400}
.svcs:hover .svcs-copy{color:var(--bone-2)}

/* three numbers, and the line that says where they came from */
.facts{grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){.facts{grid-template-columns:1fr}}
.facts-note{
  margin:12px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--bone-3);line-height:1.8;max-width:80ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   69 · ONE CHASER — the second llama is gone; the tags fan out across the space he left
   ════════════════════════════════════════════════════════════════════════ */
.human.two{display:none !important}

@media(min-width:960px){
  .t6{top:-32%;left:58%}          /* Nightlife */
  .t8{top:-22%;left:74%}          /* Recaps, clear of the star doodle */
  .t4{top:6%;  left:57%}          /* Travel */
  .t10{top:22%;left:77%}          /* Social */
  .t2{top:44%; left:58%}          /* Corporate */
  .t5{top:60%; left:76%}          /* Drone */
  .t11{top:82%;left:60%}          /* Events */
  .seal{left:auto;right:1%;top:44%}
  .hero-cray{right:26%;top:80%}
}
@media(min-width:960px) and (max-height:820px){
  .t6{top:-36%;left:58%}
  .t8{top:-18%;left:77%}
  .t4{top:4%;  left:57%}
  .t10{top:24%;left:76%}
  .t2{top:48%; left:58%}
  .t5{top:66%; left:75%}
  .t11{top:88%;left:60%}
  .seal{right:1%;top:40%}
}

/* ══════════════════════════════════════════════════════════════════════════
   70 · TAGS IN ORBIT — the industry bubbles ring the CHROMA CHASERS wordmark
   three across the top, five down the right of the title, three down the left
   ════════════════════════════════════════════════════════════════════════ */
@media(min-width:960px){
  #hero .tag{right:auto;bottom:auto}
  .t1{top:-26%;left:12%}          /* Aftermovies — top left, clear of the pill */
  .t3{top:-36%;left:28%}          /* Sport — top centre, clear of the visor */
  .t6{top:-26%;left:57%}          /* Nightlife — top right */
  .t8{top:0%;  left:62%}          /* Recaps */
  .t4{top:22%; left:64%}          /* Travel */
  .t10{top:44%;left:62%}          /* Social */
  .t2{top:64%; left:58%}          /* Corporate */
  .t11{top:80%;left:55%}          /* Events — clear of the slogan, which ends further left */
  .t7{top:6%;  left:74%}          /* Photography — second right column, off the wordmark */
  .t9{top:30%; left:75%}          /* Copywriting */
  .t5{top:54%; left:78%}          /* Drone */
  .seal{left:auto;right:2%;top:70%}
}
@media(min-width:960px) and (max-height:820px){
  .t1{top:-26%;left:26%}
  .t3{top:-52%;left:12%}
  .t6{top:-30%;left:56%}
  .t8{top:-4%; left:62%}
  .t4{top:24%; left:64%}
  .t10{top:52%;left:62%}
  .t2{top:76%; left:58%}
  .t11{top:96%;left:54%}
  .t7{top:4%;  left:74%}
  .t9{top:32%; left:75%}
  .t5{top:60%; left:78%}
  .seal{right:2%;top:68%}
}

/* ══════════════════════════════════════════════════════════════════════════
   71 · ONE STUDIO SECTION — the four services named in the hero and under the pitch
   ════════════════════════════════════════════════════════════════════════ */
.hero-svc{
  position:relative;z-index:3;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5em;
  font-family:var(--mono);font-size:clamp(10.5px,.98vw,13.5px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
}
.hero-svc i{font-style:normal;color:var(--chroma);font-size:1.15em;line-height:0}
body:not(.hero-dark):not(.hero-loud) .hero-svc{text-shadow:0 0 4px #f6f5ee,0 0 10px #f6f5ee,0 0 18px rgba(246,245,238,.9)}
body.hero-dark .hero-svc{color:rgba(246,245,238,.82)}

/* the "four things" beat inside the studio section */
.svc-head{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,54px);align-items:end;
  margin:clamp(30px,4vw,58px) 0 clamp(16px,2.2vw,28px);
}
@media(max-width:900px){.svc-head{grid-template-columns:1fr;gap:12px}}
.svc-head h3{margin:0;color:var(--bone);line-height:.92}
.svc-head p{
  margin:0;max-width:60ch;color:var(--bone-2);font-weight:400;
  font-size:clamp(13.5px,1.05vw,16px);line-height:1.55;
}
/* the numbers sit between the services and the process, so give them a little air */
#about .facts{margin-top:clamp(28px,3.6vw,52px)}
#about .proc{margin-top:clamp(30px,4vw,58px)}

/* ══════════════════════════════════════════════════════════════════════════
   72 · THE STORYBRAND HERO — outcome first, the studio name in the nav, the llama in the light
   ════════════════════════════════════════════════════════════════════════ */
/* the nav brand becomes the wordmark */
.brand .txt{font-family:var(--fraun);font-variation-settings:'opsz' 36,'wght' 700,'SOFT' 30,'WONK' 0;font-size:clamp(15px,1.3vw,20px);letter-spacing:-.015em;text-transform:none;line-height:1;color:var(--bone)}
.brand .txt small{font-family:var(--mono);font-size:8px;letter-spacing:.24em;text-transform:uppercase;margin-top:4px}
body:not(.hero-dark) #nav:not(.stuck) .brand .txt{color:var(--bone)}

@media(min-width:960px){#hero{min-height:70svh}}
.hero-in.sb{
  padding:clamp(88px,10.5vh,118px) var(--gut) clamp(18px,2.4vh,30px);
  gap:clamp(12px,1.8vh,22px);
}
.sb .vhs,.sb ~ .hero-cray,#hero .hero-cray{display:none}

.sb-txt{
  position:relative;z-index:3;display:grid;gap:clamp(12px,1.7vh,20px);
  max-width:min(680px,50%);align-content:end;
}
.sb-eyebrow{
  font-family:var(--mono);font-size:clamp(10px,.8vw,12px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(10,15,12,.64);display:flex;flex-wrap:wrap;gap:.5em;align-items:center;
}
.sb-eyebrow i{font-style:normal;color:var(--chroma);font-size:1.25em;line-height:0}
.sb-hl{margin:0;text-wrap:balance}
.sb-a,.sb-b{display:block}
.sb-a{
  font-family:var(--fraun);font-weight:600;font-variation-settings:'opsz' 144,'wght' 640,'SOFT' 40,'WONK' 0;
  font-size:clamp(38px,5.2vw,78px);line-height:.98;letter-spacing:-.025em;color:var(--ink);
}
.sb-b{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(42px,5.8vw,88px);line-height:.98;letter-spacing:-.015em;color:var(--violet-deep);
}
.sb-sub{
  margin:0;max-width:46ch;font-size:clamp(14.5px,1.1vw,17.5px);line-height:1.55;
  color:rgba(10,15,12,.78);font-weight:400;
}
.sb-kick{
  font-family:var(--hand);font-weight:700;font-size:clamp(17px,1.5vw,24px);color:var(--violet-deep);
  display:inline-block;transform:rotate(-2deg);transform-origin:left center;margin-top:2px;
}
body:not(.hero-dark):not(.hero-loud) .sb-sub,
body:not(.hero-dark):not(.hero-loud) .sb-eyebrow,
body:not(.hero-dark):not(.hero-loud) .sb-kick{text-shadow:0 0 4px #f6f5ee,0 0 10px #f6f5ee,0 0 18px rgba(246,245,238,.9)}
body.hero-dark .sb-a{color:var(--bone)} body.hero-dark .sb-sub{color:rgba(246,245,238,.74)} body.hero-dark .sb-eyebrow{color:rgba(246,245,238,.6)}

/* the llama: a direct child of the section, so it is anchored to the section itself */
#hero > .human.sb-llama{
  --hh:min(86svh,60vw);
  position:absolute;left:auto;right:2%;top:clamp(46px,5.5vh,66px);bottom:auto;
  height:var(--hh);aspect-ratio:var(--ha);translate:0 0;transform:none !important;z-index:1;
  -webkit-mask-image:none;mask-image:none;pointer-events:none;
}
#hero > .human.sb-llama svg{display:none}
@media(min-width:960px) and (max-height:820px){#hero > .human.sb-llama{--hh:min(88svh,52vw)}}
@media(max-width:959px){
  #hero > .human.sb-llama{--hh:min(56vw,340px);right:-5%;top:auto;bottom:0;
    -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
  .hero-in.sb{padding-bottom:clamp(120px,34vw,220px)}
}

/* the sun sits in the empty top-right corner of the llama image, where he is looking */
@media(min-width:960px){.sunny{left:auto;right:1.5%;top:clamp(52px,6vh,72px);bottom:auto}}

/* the tags: one layer over the whole section, smaller, scattered, never on the words or the visor */
.sb-tags{position:absolute;inset:0;z-index:4;pointer-events:none}
.sb-tags .tag,.sb-tags .seal{pointer-events:auto;position:absolute;right:auto;bottom:auto}
.sb-tags .tag{font-size:clamp(8.5px,.66vw,10px);padding:6px 11px;letter-spacing:.1em}
@media(min-width:960px){
  .sb-tags .t1{top:12%;left:26%}        /* Aftermovies — top band, right of the pill */
  .sb-tags .t3{top:12%;left:39%}        /* Sport */
  .sb-tags .t7{top:14%;left:57%}        /* Photography — top of the gap */
  .sb-tags .t6{top:31%;left:55%}        /* Nightlife — the gap column */
  .sb-tags .t8{top:47%;left:57%}        /* Recaps */
  .sb-tags .t4{top:63%;left:55%}        /* Travel */
  .sb-tags .t9{top:79%;left:57%}        /* Copywriting */
  .sb-tags .t10{top:52%;left:70%}       /* Social — on the hoodie */
  .sb-tags .t2{top:70%;left:74%}        /* Corporate */
  .sb-tags .t11{top:87%;left:66%}       /* Events */
  .sb-tags .t5{top:40%;left:91%}        /* Drone — far right, beside the neck */
  .sb-tags .seal{left:auto;right:2.5%;top:64%}
}
@media(max-width:959px){
  .sb-tags{position:relative;inset:auto;display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--gut) 16px;z-index:4}
  .sb-tags .tag{position:static;transform:none !important}
  .sb-tags .seal{display:none}
}

/* 72b · hero tune — wordmark readable on the light hero, sun off the visor, top tags under the nav, cloud below the brand */
.brand .txt{color:inherit}
body:not(.hero-dark) #nav:not(.stuck) .brand .txt{color:inherit}
@media(min-width:960px){
  .cloudy{top:14%;left:-16%}
  .sunny{left:66%;right:auto;top:clamp(76px,8.6vh,96px);bottom:auto}
  .sb-tags .t1,.sb-tags .t3,.sb-tags .t7{top:clamp(78px,9.5vh,98px)}
}

/* 72c · the wordmark follows the nav's state: ink on the light hero, bone once the bar is dark or scrolled */
body:not(.hero-dark) #nav:not(.stuck) .brand .txt{color:var(--ink)}
body:not(.hero-dark) #nav:not(.stuck) .brand .txt small{color:rgba(10,15,12,.55)}
#nav.stuck .brand .txt,body.hero-dark .brand .txt{color:var(--bone)}
#nav.stuck .brand .txt small,body.hero-dark .brand .txt small{color:var(--bone-3)}
/* the cloud drifts behind the pill, the text and the llama — a background element now */
@media(min-width:960px){.cloudy{top:12%;z-index:0}}

/* 72d · --ink only exists inside #hero, so the nav wordmark needs the literal colour */
body:not(.hero-dark) #nav:not(.stuck) .brand .txt{color:#0a0f0c}
body:not(.hero-dark) #nav:not(.stuck) .brand .txt small{color:rgba(10,15,12,.55)}
/* phones: the five accent tags flow in a row under the copy (the same five the old phone layout showed) */
@media(max-width:959px){
  .sb-tags .tag.t1,.sb-tags .tag.t3,.sb-tags .tag.t5,.sb-tags .tag.t7,.sb-tags .tag.t9{display:inline-flex !important}
  .sb-tags{padding-top:4px}
}

/* ══════════════════════════════════════════════════════════════════════════
   73 · THE CONVERSION PASS
   H1 = the dream outcome, big (OFFSET: condensed caps with a copperplate capital dropped in).
   H2 = guide the scanner (same signature). Paragraphs = plain, readable sans. One button, everywhere.
   ════════════════════════════════════════════════════════════════════════ */
:root{--swash:'Pinyon Script',cursive}

/* the swash capital */
.swc{
  font-family:var(--swash);font-weight:400;font-style:normal;text-transform:none;letter-spacing:0;
  font-variation-settings:normal;font-size:1.34em;line-height:0;display:inline-block;
  vertical-align:-.07em;margin:0 -.03em 0 -.02em;
}

/* ── HERO ── */
.hero-in.hx{align-self:center}
.hx-txt{position:relative;z-index:3;display:grid;gap:clamp(12px,1.7vh,20px);max-width:min(720px,52%);justify-items:start}
.hx-eyebrow{
  display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);
  font-size:clamp(10px,.8vw,12px);letter-spacing:.18em;text-transform:uppercase;color:#d8360f;
}
.hx-eyebrow svg{width:12px;height:12px;fill:currentColor;flex:none}
.hx-eyebrow em{font-style:normal;color:rgba(10,15,12,.58)}
.hx-h1{
  margin:0;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 70,'wght' 820;
  font-size:clamp(44px,5.9vw,98px);line-height:.9;letter-spacing:-.012em;text-transform:uppercase;color:#0a0f0c;
}
.hx-l{display:block;white-space:nowrap}
.hx-pay{color:var(--violet-deep)}
.hx-spark{display:inline-block;width:.4em;height:.4em;vertical-align:.8em;margin-left:.1em}
.hx-spark svg{width:100%;height:100%;fill:var(--chroma);animation:hxSpin 7s linear infinite}
@keyframes hxSpin{to{transform:rotate(360deg)}}
.hx-sub{margin:0;max-width:43ch;font-size:clamp(16px,1.25vw,19.5px);line-height:1.55;color:rgba(10,15,12,.84);font-weight:400}
.hx-sub b{font-weight:700;color:#0a0f0c;background:linear-gradient(transparent 60%,rgba(195,245,60,.85) 60%);padding:0 .12em}
.hx-acts{display:flex;align-items:center;gap:clamp(16px,1.8vw,30px);flex-wrap:wrap;margin-top:6px}
.hx-micro{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;
  font-family:var(--mono);font-size:clamp(10px,.78vw,11.5px);letter-spacing:.08em;text-transform:uppercase;color:rgba(10,15,12,.7);
}
.hx-micro li{display:inline-flex;align-items:center;gap:6px}
.hx-micro svg{width:14px;height:14px;fill:none;stroke:#0f9d58;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
body:not(.hero-dark):not(.hero-loud) .hx-sub,
body:not(.hero-dark):not(.hero-loud) .hx-micro,
body:not(.hero-dark):not(.hero-loud) .hx-eyebrow{text-shadow:0 0 4px #f6f5ee,0 0 10px #f6f5ee,0 0 18px rgba(246,245,238,.9)}
body.hero-dark .hx-h1{color:var(--bone)} body.hero-dark .hx-sub{color:rgba(246,245,238,.78)}

/* the stage: the llama rises from below the fold; proof is pinned around him */
.hx-stage{position:absolute;top:0;right:0;bottom:0;width:min(51%,780px);z-index:4;pointer-events:none}
.hx-stage .hx-llama{
  --hh:min(96svh,64vw);
  position:absolute;left:auto;right:3%;top:auto;bottom:calc(var(--hh) * -.34);
  height:var(--hh);width:auto;aspect-ratio:1100/1628;translate:0 0;transform:none !important;
  -webkit-mask-image:none;mask-image:none;z-index:1;pointer-events:none;
}
.hx-stage .hx-llama svg{display:none}
@media (prefers-reduced-motion:no-preference){
  .hx-stage .hx-llama{animation:hxRise 1.6s cubic-bezier(.16,1,.3,1) .1s both}
  .hx-card{animation:hxFloat 7s ease-in-out infinite}
}
@keyframes hxRise{from{translate:0 110px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes hxFloat{50%{translate:0 -7px}}

.hx-card{
  position:absolute;z-index:3;pointer-events:auto;margin:0;color:#0a0f0c;text-align:left;
  background:rgba(252,251,246,.88);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(10,15,12,.12);border-radius:18px;padding:12px 14px;
  box-shadow:0 22px 44px -20px rgba(10,15,12,.5),inset 0 1px 0 rgba(255,255,255,.8);
}
.hx-ig{left:0;top:24%;display:flex;align-items:center;gap:12px;width:min(248px,34%)}
.hx-ig img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.hx-ig b{display:block;font-family:var(--display);font-weight:900;font-variation-settings:'wdth' 80,'wght' 900;font-size:27px;line-height:1;letter-spacing:-.02em}
.hx-ig span{display:block;font-size:11.5px;line-height:1.35;color:rgba(10,15,12,.68);margin-top:3px}
.hx-quote{left:2%;top:57%;width:min(236px,32%);animation-delay:-2.4s}
.hx-quote q{display:block;quotes:none;font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.1;color:#0a0f0c}
.hx-quote figcaption{display:flex;align-items:center;gap:8px;margin-top:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(10,15,12,.62)}
.hx-quote figcaption img{width:24px;height:24px;border-radius:50%;object-fit:cover;background:#111;flex:none}
.hx-team{
  right:2%;bottom:clamp(74px,10vh,104px);display:flex;align-items:center;gap:12px;
  padding:10px 16px 10px 10px;cursor:pointer;animation-delay:-4.2s;
  background:rgba(10,15,12,.92);color:#f6f5ee;border-color:rgba(255,255,255,.14);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.hx-team:hover{transform:scale(1.04) !important}
.hx-team:focus-visible{outline:3px solid var(--chroma);outline-offset:4px}
.hx-team .faces{display:flex;flex:none}
.hx-team .faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid #0a0f0c;filter:grayscale(1) contrast(1.05)}
.hx-team .faces img + img{margin-left:-12px}
.hx-team .who{display:grid;gap:1px}
.hx-team b{font-size:13.5px;font-weight:700;letter-spacing:-.005em}
.hx-team .who > span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,245,238,.6)}
.hx-team em{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#c3f53c}
.hx-team em svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.hx-team:hover em svg{transform:translateX(3px)}

/* the sun sits where he is looking; the doodles that landed on the words go */
@media(min-width:960px){
  .sunny{left:auto;right:3%;top:clamp(62px,7vh,80px);bottom:auto}
  #hero .dd-1,#hero .dd-3{display:none}
}
.hx-clock{display:inline-flex;align-items:center;gap:8px}
.hx-clock b{font-variant-numeric:tabular-nums}
.hx-dot{width:7px;height:7px;border-radius:50%;background:#e8283f;flex:none}
@media (prefers-reduced-motion:no-preference){.hx-dot{animation:hxPulse 2s infinite}}
@keyframes hxPulse{0%{box-shadow:0 0 0 0 rgba(232,40,63,.55)}70%{box-shadow:0 0 0 8px rgba(232,40,63,0)}100%{box-shadow:0 0 0 0 rgba(232,40,63,0)}}

@media(max-width:959px){
  .hx-txt{max-width:none}
  .hx-h1{font-size:clamp(38px,12vw,64px)}
  .hx-stage{top:auto;left:auto;width:66%;height:54%}
  .hx-stage .hx-llama{--hh:min(84vw,400px);right:-6%;bottom:calc(var(--hh) * -.28)}
  .hx-card{display:none}
  .hero-in.hx{padding-bottom:clamp(190px,50vw,280px)}
}

/* ── THE BUTTON: a lime sticker with a hard shadow, a spinning spark and a shine that sweeps across ── */
.btn-art{
  --bg:#c3f53c;--fg:#0a0f0c;--sh:#0a0f0c;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.65em;cursor:pointer;
  min-height:56px;padding:.95em 1.6em .95em 1.25em;border:2px solid var(--fg);border-radius:999px;
  background:var(--bg);color:var(--fg);white-space:nowrap;
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 78,'wght' 820;
  font-size:clamp(13.5px,1vw,16px);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:5px 5px 0 var(--sh);transform:rotate(-1.6deg);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s var(--ease),background .25s;
}
.btn-art::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%) no-repeat;
  background-size:260% 100%;background-position:130% 0;transition:background-position .8s var(--ease);
}
.btn-art:hover{transform:rotate(0) translate(-2px,-3px);box-shadow:8px 9px 0 var(--sh)}
.btn-art:hover::after{background-position:-30% 0}
.btn-art:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--sh);transition-duration:.08s}
.btn-art:focus-visible{outline:3px solid var(--violet-deep);outline-offset:5px}
.btn-art .ba-spark{display:inline-grid;width:1.15em;height:1.15em;flex:none}
.btn-art .ba-spark svg{width:100%;height:100%;fill:currentColor}
@media (prefers-reduced-motion:no-preference){
  .btn-art .ba-spark{animation:hxSpin 6s linear infinite}
  .btn-art:hover .ba-spark{animation-duration:1.1s}
}
.btn-art .sp{position:absolute;width:15px;height:15px;pointer-events:none;opacity:0;transform:scale(0);transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.btn-art .sp svg{width:100%;height:100%;fill:var(--violet-deep)}
.btn-art .s1{top:-13px;right:12%}
.btn-art .s2{bottom:-11px;left:9%;width:11px;height:11px}
.btn-art .s2 svg{fill:#e8283f}
.btn-art:hover .sp{opacity:1;transform:scale(1) rotate(90deg)}
section:not(#hero) .btn-art{--sh:#b07bff}
section:not(#hero) .btn-art .s1 svg{fill:#c3f53c}

/* the second button: a word with a hand-drawn underline that redraws itself */
.btn-scribble{
  position:relative;display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:.3em .1em;
  font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 88,'wght' 720;
  font-size:clamp(14.5px,1.08vw,17px);color:#0a0f0c;
}
.btn-scribble .ar{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn-scribble .scrib{position:absolute;left:0;right:1.4em;bottom:.15em;width:auto;height:.5em;overflow:visible}
.btn-scribble .scrib path{fill:none;stroke:var(--violet-deep);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:0;opacity:.5;transition:opacity .3s}
.btn-scribble:hover .scrib path,.btn-scribble:focus-visible .scrib path{opacity:1;animation:scribDraw .6s var(--ease) both}
.btn-scribble:hover .ar{transform:translate(3px,3px)}
.btn-scribble:focus-visible{outline:2px solid var(--violet-deep);outline-offset:4px;border-radius:4px}
@keyframes scribDraw{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}

/* ── TRUST BAR (directly under the hero) ── */
.trust .clients-head{display:grid;gap:10px;justify-items:start;margin-bottom:clamp(14px,2vw,26px)}
.trust-h{
  margin:0;font-family:var(--fraun);font-weight:500;font-variation-settings:'opsz' 96,'wght' 500,'SOFT' 30,'WONK' 0;
  font-size:clamp(22px,2.3vw,34px);line-height:1.1;letter-spacing:-.015em;color:var(--bone);
}
.trust-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--chroma)}

/* ── THE SIGNATURE H2 ── */
.hx-h2{
  margin:18px 0 0;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 70,'wght' 820;
  font-size:clamp(40px,6.2vw,94px);line-height:.9;letter-spacing:-.012em;text-transform:uppercase;color:var(--bone);text-wrap:balance;
}
.hx-h2 .swc{color:var(--chroma)}

/* ── PROOF: every review beside the work that earned it ── */
.proof .vid-tst{margin-bottom:clamp(14px,1.8vw,22px)}
.tst{--tp:clamp(22px,2.6vw,36px);padding:var(--tp)}
.tst.has-work{align-content:start}
.tst.has-work::before{display:none}
.tst-work{
  position:relative;display:block;width:calc(100% + var(--tp) * 2);margin:calc(var(--tp) * -1) calc(var(--tp) * -1) 6px;
  aspect-ratio:16/9;overflow:hidden;cursor:pointer;background:#000;border-bottom:1px solid var(--line);padding:0;
}
.tst-work img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tst-work:hover img{transform:scale(1.045)}
.tst-play{
  position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  display:grid;place-items:center;background:#c3f53c;border:2px solid #0a0f0c;box-shadow:4px 4px 0 #0a0f0c;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.tst-play svg{width:24px;height:24px;fill:#0a0f0c;margin-left:3px}
.tst-work:hover .tst-play{transform:scale(1.12) rotate(-6deg)}
.tst-work-k{
  position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 10px;border-radius:100px;
}
.tst-work:focus-visible{outline:3px solid var(--chroma);outline-offset:-3px}
.tst-body{display:grid;gap:18px}
.vt-stats{display:flex;flex-wrap:wrap;gap:8px}
.vt-stat{
  display:inline-flex;align-items:baseline;gap:7px;padding:7px 12px;border:1px solid var(--line);border-radius:100px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-3);
}
.vt-stat b{font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--bone)}

/* ── HOW IT WORKS: three steps ── */
.plan{--g:clamp(16px,2.4vw,40px);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g)}
@media(max-width:860px){.plan{grid-template-columns:1fr}}
.pl{
  --pc:var(--chroma);position:relative;display:grid;gap:12px;align-content:start;
  padding:clamp(24px,2.6vw,36px);border:1px solid color-mix(in srgb,var(--pc) 34%,var(--line));border-radius:22px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 9%,var(--panel)),var(--panel) 55%);
}
.pl:nth-child(2){--pc:var(--amber)}
.pl:nth-child(3){--pc:var(--violet)}
.pl-no{font-family:var(--groove);font-size:clamp(48px,4.6vw,74px);line-height:.9;color:var(--pc);letter-spacing:-.01em}
.pl-h{margin:0;font-family:var(--fraun);font-weight:600;font-variation-settings:'opsz' 72,'wght' 620,'SOFT' 30,'WONK' 0;font-size:clamp(21px,1.9vw,28px);line-height:1.1;letter-spacing:-.015em;color:var(--bone)}
.pl-p{margin:0;max-width:40ch;font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.6;color:var(--bone-2);font-weight:400}
.pl-tag{
  justify-self:start;margin-top:4px;padding:6px 11px;border-radius:100px;border:1px solid color-mix(in srgb,var(--pc) 50%,var(--line));
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--pc);
}
.pl-arrow{
  --aw:clamp(34px,3vw,52px);position:absolute;top:44px;right:calc(var(--g) / -2 - var(--aw) / 2);width:var(--aw);z-index:2;
  fill:none;stroke:var(--bone-3);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
@media(max-width:860px){.pl-arrow{display:none}}
.plan-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(26px,3.4vw,50px)}
.plan-note{font-family:var(--hand);font-weight:700;font-size:clamp(18px,1.5vw,23px);color:#c3f53c;transform:rotate(-2deg)}

/* ── VALUE PROPS (inside the services section) ── */
.values{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:clamp(22px,3vw,40px);
}
@media(max-width:900px){.values{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.values{grid-template-columns:1fr}}
.val{background:var(--panel);padding:clamp(18px,2vw,26px);display:grid;gap:8px;align-content:start}
.val .ic{width:26px;height:26px;color:var(--chroma)}
.val:nth-child(2) .ic{color:var(--amber)} .val:nth-child(3) .ic{color:var(--ice)} .val:nth-child(4) .ic{color:var(--violet)}
.val b{font-size:clamp(15px,1.15vw,17.5px);font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--bone)}
.val span{font-size:clamp(13.5px,.98vw,15px);line-height:1.5;color:var(--bone-2)}

/* ── REELS IN ORBIT ── */
.cg{--cw:200px;--stage:520px;position:relative;margin-top:clamp(6px,1.4vw,18px)}
.cg-stage{
  position:relative;height:var(--stage);perspective:2000px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.cg-ring{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cg-item{
  position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:9/16;
  margin-left:calc(var(--cw) / -2);margin-top:calc(var(--cw) * 8 / -9);padding:0;cursor:pointer;
}
.cg-item.is-back{pointer-events:none}
.cg-card{
  position:absolute;inset:0;overflow:hidden;border-radius:20px;background:#111;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -22px rgba(0,0,0,.85);
}
.cg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cg-cap{
  position:absolute;left:0;right:0;bottom:0;display:grid;gap:3px;padding:48px 14px 14px;text-align:left;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.86));opacity:calc((var(--f,1) - .55) * 2.4);
}
.cg-cap b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.cg-cap em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.78}
.cg-play{
  position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:#c3f53c;border:2px solid #0a0f0c;opacity:calc((var(--f,1) - .6) * 2.6);
}
.cg-play svg{width:14px;height:14px;fill:#0a0f0c;margin-left:2px}
.cg-item:focus-visible .cg-card{outline:3px solid var(--chroma);outline-offset:3px}
.cg-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px}
.cg-btn{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--bone);cursor:pointer;
  background:var(--panel);border:1px solid var(--line);transition:background .25s,border-color .25s,color .25s,transform .25s;
}
.cg-btn:hover{background:#c3f53c;border-color:#c3f53c;color:#0a0f0c;transform:scale(1.06)}
.cg-btn:focus-visible{outline:3px solid var(--chroma);outline-offset:3px}
.cg-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cg-count{min-width:76px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--bone-3)}
.cg-hint{margin:10px 0 0;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3)}

/* the closer repeats the promise */
.big-cta .cta-slogan{font-size:clamp(36px,6.4vw,104px);line-height:.95}

@media (prefers-reduced-motion:reduce){
  .hx-spark svg,.btn-art .ba-spark,.hx-card,.hx-stage .hx-llama{animation:none}
}

/* 73b · hero tune — tidier swash capitals, even line gaps, the review card clears the headline */
.swc{font-size:1.18em;vertical-align:-.05em;margin:0 -.02em 0 -.01em}
.hx-h1{font-size:clamp(44px,5.6vw,94px)}
.hx-spark{vertical-align:baseline;position:relative;top:-.62em;line-height:0}
.hx-quote{left:7%;top:60%}
@media(min-width:960px){
  .sunny{top:clamp(80px,8.8vh,100px)}
  .hero-foot .est-foot{display:none}
}

/* 73c · the signature H2 wins over the older per-section heading fonts */
.sec-head h2.hx-h2{
  font-family:var(--display);font-variation-settings:'wdth' 70,'wght' 820;font-weight:800;
  text-transform:uppercase;letter-spacing:-.012em;line-height:.9;
}
@media(min-width:960px){.sunny{right:1.2%;top:clamp(74px,8.2vh,92px);width:clamp(56px,6vw,94px)}}

/* 73d · the closer's descenders clear the city line */
.big-cta .cta-slogan{padding-bottom:.14em}

/* 73e · phones: the eyebrow reads as one line of text, not two columns */
@media(max-width:959px){
  .hx-eyebrow{display:block;line-height:1.7}
  .hx-eyebrow svg{display:inline-block;vertical-align:-1px;margin-right:.5em}
}

/* 73f · an ID-level older rule set the testimonials heading in Fraunces; the signature needs the ID too */
#testimonials .sec-head h2.hx-h2,#plan .sec-head h2.hx-h2,#reels .sec-head h2.hx-h2{
  font-family:var(--display);font-variation-settings:'wdth' 70,'wght' 820;font-weight:800;
  text-transform:uppercase;letter-spacing:-.012em;line-height:.9;
}

/* ══════════════════════════════════════════════════════════════════════════
   74 · THE NAV, REINVENTED — [bracketed] links with a lime marker that slides to the active one,
   a swash wordmark in the centre (OFFSET), a live Rotterdam clock and a mini sticker button.
   Scrolled: it lifts into a floating dark capsule. Phones: a full-screen menu.
   ════════════════════════════════════════════════════════════════════════ */
#nav{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;
  top:0;left:0;right:0;padding:14px var(--gut);border:1px solid transparent;border-radius:0;box-shadow:none;
  transition:top .45s var(--ease),left .45s var(--ease),right .45s var(--ease),padding .45s var(--ease),
             background .45s,border-color .45s,border-radius .45s,box-shadow .45s;
}
#nav.stuck{
  top:10px;left:clamp(10px,2vw,28px);right:clamp(10px,2vw,28px);padding:8px 10px 8px 16px;border-radius:20px;
  background:rgba(10,12,14,.76);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border-color:rgba(239,233,220,.12);box-shadow:0 18px 44px -20px rgba(0,0,0,.7);
}

.nav-x{position:relative;display:flex;align-items:center;gap:clamp(0px,.45vw,8px);justify-self:start;isolation:isolate}
.nav-x a{
  position:relative;display:inline-flex;align-items:center;padding:8px 5px;white-space:nowrap;
  font-family:var(--mono);font-size:clamp(9.5px,.74vw,11px);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(10,15,12,.74);transition:color .25s var(--ease);
}
.nav-x a::before,.nav-x a::after{
  display:inline-block;color:rgba(10,15,12,.3);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),color .25s;
}
.nav-x a::before{content:'['}
.nav-x a::after{content:']'}
.nav-x a span{padding:0 .18em}
.nav-x a:hover{color:#0a0f0c}
.nav-x a:hover::before{transform:translateX(-4px) rotate(-10deg);color:#d8360f}
.nav-x a:hover::after{transform:translateX(4px) rotate(10deg);color:#d8360f}
.nav-x a.active,.nav-x a.active::before,.nav-x a.active::after{color:#0a0f0c}
.nav-x a:focus-visible{outline:2px solid var(--violet-deep);outline-offset:2px;border-radius:4px}
.nav-blob{
  position:absolute;left:0;top:50%;z-index:-1;height:24px;margin-top:-12px;border-radius:7px;
  width:var(--bw,0px);background:#c3f53c;opacity:var(--bo,0);
  transform:translateX(var(--bx,0px)) rotate(-2.5deg);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),width .55s cubic-bezier(.34,1.56,.64,1),opacity .3s;
}
.nav-x-cta{display:none}
@media(min-width:1021px){
#nav.stuck .nav-x a{color:rgba(239,233,220,.74)}
#nav.stuck .nav-x a::before,#nav.stuck .nav-x a::after{color:rgba(239,233,220,.28)}
#nav.stuck .nav-x a:hover{color:#f6f5ee}
#nav.stuck .nav-x a:hover::before,#nav.stuck .nav-x a:hover::after{color:#c3f53c}
#nav.stuck .nav-x a.active,#nav.stuck .nav-x a.active::before,#nav.stuck .nav-x a.active::after{color:#0a0f0c}
}

/* the wordmark: condensed caps with a copperplate capital, like the headline */
#nav .bw-brand{justify-self:center;display:inline-flex;align-items:flex-start;gap:5px;color:#0a0f0c;transition:color .3s}
.bw{
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 70,'wght' 820;
  font-size:clamp(17px,1.4vw,22px);letter-spacing:.01em;text-transform:uppercase;line-height:1;white-space:nowrap;
}
.bw .swc{color:var(--violet-deep);font-size:1.42em;vertical-align:-.12em;margin:0 -.04em 0 .02em}
.bw-spark{display:inline-grid;width:11px;height:11px;margin-top:-3px;color:#d8360f}
.bw-spark svg{width:100%;height:100%;fill:currentColor}
@media (prefers-reduced-motion:no-preference){
  .bw-spark{animation:hxSpin 7s linear infinite}
  .bw-brand:hover .bw-spark{animation-duration:1s}
}
#nav .bw-brand:focus-visible{outline:2px solid var(--violet-deep);outline-offset:6px;border-radius:4px}
#nav.stuck .bw-brand{color:#f6f5ee}
#nav.stuck .bw .swc{color:#c3f53c}

.nav-r{justify-self:end;display:flex;align-items:center;gap:clamp(10px,1.2vw,18px)}
.nav-clock{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,15,12,.6);
}
.nav-clock i{width:7px;height:7px;border-radius:50%;background:#e8283f;flex:none}
@media (prefers-reduced-motion:no-preference){.nav-clock i{animation:hxPulse 2s infinite}}
.nav-clock b{font-weight:400;color:#0a0f0c;font-variant-numeric:tabular-nums}
#nav.stuck .nav-clock{color:rgba(239,233,220,.52)}
#nav.stuck .nav-clock b{color:#f6f5ee}

/* the mini sticker button */
.nav-btn{
  position:relative;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;min-height:40px;
  padding:9px 15px 9px 12px;border:2px solid #0a0f0c;border-radius:999px;background:#c3f53c;color:#0a0f0c;
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 78,'wght' 820;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:3px 3px 0 #0a0f0c;transform:rotate(-2deg);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s var(--ease);
}
.nav-btn:hover{transform:rotate(0) translate(-1px,-2px);box-shadow:5px 6px 0 #0a0f0c}
.nav-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #0a0f0c;transition-duration:.08s}
.nav-btn:focus-visible{outline:3px solid var(--violet-deep);outline-offset:4px}
.nb-spark{display:inline-grid;width:13px;height:13px}
.nb-spark svg{width:100%;height:100%;fill:currentColor}
@media (prefers-reduced-motion:no-preference){.nb-spark{animation:hxSpin 6s linear infinite}.nav-btn:hover .nb-spark{animation-duration:1s}}
#nav.stuck .nav-btn{box-shadow:3px 3px 0 #b07bff}
#nav.stuck .nav-btn:hover{box-shadow:5px 6px 0 #b07bff}

/* the burger: a sticker too, whose two lines cross into an X */
#nav .burger{
  display:none;align-items:center;gap:9px;min-height:44px;padding:9px 14px;cursor:pointer;position:relative;z-index:3;
  border:2px solid #0a0f0c;border-radius:999px;background:#f6f5ee;color:#0a0f0c;box-shadow:3px 3px 0 #0a0f0c;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
#nav .burger b{font-weight:400}
#nav .burger:focus-visible{outline:3px solid var(--violet-deep);outline-offset:4px}
.bg-lines{position:relative;display:inline-block;width:16px;height:10px}
.bg-lines i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.bg-lines i:first-child{top:1px}
.bg-lines i:last-child{top:7px}
#nav .burger.is-open .bg-lines i:first-child{top:4px;transform:rotate(45deg)}
#nav .burger.is-open .bg-lines i:last-child{top:4px;transform:rotate(-45deg)}

@media(max-width:1239px){.nav-clock{display:none}}
@media(max-width:1020px){
  #nav{grid-template-columns:1fr auto}
  #nav .bw-brand{justify-self:start;position:relative;z-index:3}
  .nav-btn{display:none}
  #nav .burger{display:inline-flex}
  /* the menu: full-screen, huge condensed links, numbered in lime */
  .nav-x{
    position:fixed;inset:0;z-index:2;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
    padding:96px var(--gut) 40px;background:#0a0c0e;counter-reset:nx;
    opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s;
  }
  .nav-x.open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
  .nav-x a{
    counter-increment:nx;padding:6px 0;color:#f6f5ee;
    font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 70,'wght' 820;
    font-size:clamp(38px,11vw,66px);letter-spacing:-.005em;line-height:1;
    opacity:0;transform:translateY(26px);transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s,color .25s;
  }
  .nav-x a::before{
    content:counter(nx, decimal-leading-zero);align-self:flex-start;margin:.55em 14px 0 0;transform:none !important;
    font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;color:#c3f53c;
  }
  .nav-x a::after{content:none}
  .nav-x a:hover,.nav-x a.active,.nav-x a.active::before{color:#c3f53c}
  .nav-x.open a{opacity:1;transform:none}
  .nav-x.open a:nth-of-type(2){transition-delay:.04s}
  .nav-x.open a:nth-of-type(3){transition-delay:.08s}
  .nav-x.open a:nth-of-type(4){transition-delay:.12s}
  .nav-x.open a:nth-of-type(5){transition-delay:.16s}
  .nav-x.open a:nth-of-type(6){transition-delay:.2s}
  .nav-x .nav-x-cta{display:inline-flex;margin-top:26px}
  .nav-blob{display:none}
  /* nothing on the bar may create a containing block while the menu is open, or the menu would be clipped to the bar */
  body.menu-open #nav{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.menu-open #nav .bw-brand{color:#f6f5ee}
  body.menu-open #nav .bw .swc{color:#c3f53c}
  body.menu-open #nav .burger{background:#c3f53c}
}

/* ══ THE HERO IMAGE: a real account we run, on a real phone ══ */
.hx-glow{
  position:absolute;left:50%;top:50%;width:min(94%,660px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,207,74,.5) 0%,rgba(195,245,60,.32) 32%,rgba(176,123,255,.16) 55%,transparent 70%);
}
.hx-phone{
  position:absolute;left:50%;top:50%;margin:0;width:clamp(200px,18vw,284px);padding:9px;border-radius:46px;
  translate:-50% -47%;rotate:-5deg;z-index:2;
  background:linear-gradient(150deg,#3b3f45 0%,#0d0e10 26%,#16181b 70%,#3a3e43 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 50px 90px -34px rgba(10,15,12,.72),0 24px 40px -24px rgba(10,15,12,.5);
}
.hx-screen{position:relative;overflow:hidden;border-radius:37px;background:#fff}
.hx-screen img{display:block;width:100%;height:auto}
.hx-island{position:absolute;left:50%;top:17px;width:31%;height:21px;translate:-50% 0;border-radius:20px;background:#050506}
@media (prefers-reduced-motion:no-preference){.hx-phone{animation:hxPhoneIn 1.4s cubic-bezier(.16,1,.3,1) .1s both}}
@keyframes hxPhoneIn{from{transform:translateY(90px);opacity:0}to{transform:none;opacity:1}}

.hx-card{z-index:3}
.hx-ig{left:1%;top:15%;width:auto;display:block;padding:12px 16px 12px 15px}
.hx-ig b,.hx-views b{
  display:block;font-family:var(--display);font-weight:900;font-variation-settings:'wdth' 80,'wght' 900;
  font-size:clamp(24px,2vw,30px);line-height:1;letter-spacing:-.02em;color:#0a0f0c;
}
.hx-ig span,.hx-views span{display:block;margin-top:4px;font-size:11.5px;line-height:1.35;color:rgba(10,15,12,.68)}
.hx-point{position:absolute;width:62px;height:31px;fill:none;stroke:#0a0f0c;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.hx-ig .hx-point{right:-60px;top:12px}
.hx-views{right:0;top:47%;padding:12px 16px;animation-delay:-3.1s}
.hx-views .hx-point{left:-60px;top:4px}
.hx-quote{left:0;top:63%}
.hx-team{right:1%;bottom:clamp(60px,8.5vh,92px)}

@media(max-width:959px){
  .hx-stage{top:auto;left:0;right:0;bottom:0;width:auto;height:clamp(230px,62vw,390px);overflow:hidden}
  .hx-phone{top:22px;translate:-50% 0;width:clamp(180px,50vw,270px)}
  .hx-glow{top:62%}
  .hx-card{display:none}
  .hero-in.hx{padding-bottom:clamp(250px,66vw,410px)}
  #hero .hero-foot{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE TURN — a pinned scroll stage. The llama rises, then turns in real 3D (WebGL, the original art given depth)
   to look back at you, the work flies in around him and the story plays line by line. position:sticky, never a lock.
   ════════════════════════════════════════════════════════════════════════ */
#turn{position:relative;height:300svh;background:#07080a;overflow:visible}
#turn .turn-pin{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;isolation:isolate}
.turn-sky{position:absolute;inset:0;z-index:0;background:radial-gradient(80% 70% at 50% 110%,rgba(109,40,217,.32),transparent 70%),#07080a}
.turn-marq{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,3vh,40px);pointer-events:none;overflow:hidden}
.tm-row{white-space:nowrap;will-change:transform}
.tm-row span{
  display:inline-block;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 70,'wght' 820;
  font-size:clamp(78px,15vw,250px);line-height:.86;letter-spacing:-.01em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.4px rgba(239,233,220,.15);
}
.tm-b span{-webkit-text-stroke-color:rgba(195,245,60,.2)}
.turn-works{position:absolute;inset:0;z-index:2;perspective:1300px;pointer-events:none}
.tw{
  position:absolute;left:50%;top:46%;margin:0;width:clamp(92px,10.5vw,168px);aspect-ratio:9/16;border-radius:14px;
  overflow:hidden;opacity:0;background:#111;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85);will-change:transform,opacity;
}
.tw img{width:100%;height:100%;object-fit:cover}
.tw figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:24px 10px 9px;color:#fff;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
}
.turn-rig{position:absolute;left:50%;bottom:-7svh;z-index:3;height:min(94svh,76vw);aspect-ratio:1100/1700;perspective:1500px;will-change:transform}
.turn-card{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
/* the 3D llama: a canvas 18% bigger than the rig on every side, so he has room to turn; the flat image is the fallback */
.tf-3d{position:absolute;left:-18%;top:-18%;width:136%;height:136%;visibility:hidden;pointer-events:none}
.turn-rig.has-3d .tf-3d{visibility:visible}
.turn-rig.has-3d .turn-card{visibility:hidden}
.tf{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.turn-scrim{position:absolute;left:0;right:0;bottom:0;height:48%;z-index:4;pointer-events:none;background:linear-gradient(transparent,rgba(7,8,10,.55) 42%,rgba(7,8,10,.9))}
.turn-copy{position:absolute;inset:0;z-index:5;pointer-events:none}
.tl{
  position:absolute;left:50%;bottom:clamp(70px,12vh,128px);width:min(92vw,1100px);margin:0;text-align:center;opacity:0;
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 70,'wght' 820;text-transform:uppercase;
  font-size:clamp(34px,5.4vw,90px);line-height:.92;letter-spacing:-.012em;color:#f6f5ee;
  text-shadow:0 8px 40px rgba(0,0,0,.55);will-change:opacity,transform,filter;
}
.tl em{font-style:normal;color:#c3f53c}
.tl3{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 .34em}
.tl3 i{font-style:normal;color:#c3f53c;font-size:.46em}
.tl4{bottom:clamp(40px,6.5vh,80px);display:grid;justify-items:center;gap:14px}
.tl4-h{margin:0;font:inherit;font-size:clamp(60px,9.4vw,156px);line-height:.84}
.tl4-h .swc{color:#c3f53c}
.tl4-p{
  margin:0;max-width:46ch;font-family:var(--display);font-weight:400;font-variation-settings:normal;text-transform:none;
  letter-spacing:0;font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:rgba(246,245,238,.86);text-shadow:none;
}
.turn-hint{
  position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(246,245,238,.72);transition:opacity .4s;
}
.turn-hint svg{width:14px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){.turn-hint svg{animation:turnBob 1.6s ease-in-out infinite}}
@keyframes turnBob{50%{transform:translateY(5px)}}
.turn-bar{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:6;background:rgba(255,255,255,.1)}
.turn-bar i{display:block;height:100%;background:linear-gradient(90deg,#c3f53c,#00d563);transform:scaleX(0);transform-origin:left}
@media(max-width:759px){
  #turn{height:260svh}
  .turn-rig{height:min(76svh,124vw);bottom:-4svh}
  .tl{font-size:clamp(30px,9.4vw,48px);bottom:clamp(58px,10vh,96px)}
  .tl4-h{font-size:clamp(52px,16vw,84px)}
  .tw{width:clamp(66px,19vw,108px)}
  .tm-row span{font-size:clamp(64px,24vw,140px)}
}
/* reduced motion: no pin, just the finished picture — him facing you, the work around him, your turn */
#turn.turn-static{height:auto}
#turn.turn-static .turn-pin{position:relative;height:auto;min-height:100svh}
#turn.turn-static .tl1,#turn.turn-static .tl2,#turn.turn-static .tl3,#turn.turn-static .turn-hint{display:none}

/* ══ THE MAP LINE — "How it works" is the map: a dotted route that inks itself in lime as you scroll ══ */
#plan .wrap{position:relative}
.map-line{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
#plan .sec-head,#plan .plan,#plan .plan-cta{position:relative;z-index:1}
.ml-ghost{fill:none;stroke:rgba(239,233,220,.2);stroke-width:2;stroke-dasharray:1 12;stroke-linecap:round}
.ml-draw{fill:none;stroke:#c3f53c;stroke-width:clamp(7px,.85vw,12px);stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 14px rgba(195,245,60,.3))}
.ml-tip{fill:#fff;filter:drop-shadow(0 0 7px #c3f53c) drop-shadow(0 0 2px #c3f53c);transition:opacity .3s}
#plan.has-map .pl-arrow{display:none}

/* 74b · the founders move up, so the 27.3K card points at an uncovered reel tile */
@media(min-width:960px){
  .hx-team{right:1%;top:25%;bottom:auto}
  .hx-views{right:1.5%;top:auto;bottom:clamp(50px,7vh,74px)}
}

/* 74c · phones: the menu fills the screen (justify-self:start shrink-wraps a fixed grid child) */
@media(max-width:1020px){.nav-x{justify-self:stretch;align-self:stretch;width:auto}}

/* ══════════════════════════════════════════════════════════════════════════
   75 · THE PLAN — one offer, one price, the promise stamped on it
   ════════════════════════════════════════════════════════════════════════ */
.offer{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:stretch}
@media(max-width:900px){.offer{grid-template-columns:1fr}}
.offer-card{
  position:relative;overflow:hidden;display:grid;gap:clamp(18px,2.2vw,28px);justify-items:start;
  padding:clamp(24px,3vw,44px);border-radius:26px;border:1px solid rgba(195,245,60,.38);
  background:radial-gradient(90% 70% at 0% 0%,rgba(195,245,60,.12),transparent 60%),var(--panel);
}
.oc-top{display:grid;gap:10px;width:100%}
.oc-name{
  justify-self:start;padding:7px 13px;border-radius:100px;background:#c3f53c;color:#0a0f0c;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
.oc-price{display:flex;align-items:flex-end;gap:14px}
.oc-price b{
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 70,'wght' 820;
  font-size:clamp(64px,7.4vw,118px);line-height:.84;letter-spacing:-.02em;color:var(--bone);
}
.oc-price span{padding-bottom:.55em;font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
.oc-terms{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c3f53c}
.oc-list{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 28px}
@media(max-width:640px){.oc-list{grid-template-columns:1fr}}
.oc-list li{display:flex;gap:10px;align-items:flex-start;font-size:clamp(14.5px,1.06vw,16.5px);line-height:1.45;color:var(--bone-2)}
.oc-list b{color:var(--bone);font-weight:700}
.oc-list svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:#c3f53c;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.oc-promise{
  display:flex;align-items:center;gap:18px;width:100%;padding:16px 18px;border-radius:18px;
  background:rgba(195,245,60,.05);border:1px dashed rgba(195,245,60,.45);
}
.oc-promise p{margin:0;font-size:14.5px;line-height:1.55;color:var(--bone-2)}
.oc-promise p b{display:block;margin-bottom:2px;color:var(--bone);font-size:16px}
.oc-stamp{width:88px;height:88px;flex:none;overflow:visible}
.st-ring{fill:#c3f53c}
.st-txt{font-family:var(--mono);font-size:8.3px;letter-spacing:1.35px;font-weight:700;fill:#0a0f0c}
.st-7{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 70,'wght' 820;font-size:36px;fill:#0a0f0c}
.st-spin{transform-origin:50px 50px}
@media (prefers-reduced-motion:no-preference){.st-spin{animation:hxSpin 16s linear infinite}}
@media(max-width:520px){.oc-promise{flex-direction:column;align-items:flex-start}}
.offer-alt{
  display:grid;gap:12px;align-content:start;padding:clamp(22px,2.6vw,36px);border-radius:26px;
  background:var(--panel);border:1px solid var(--line);
}
.oa-k{justify-self:start;font-family:var(--hand);font-weight:700;font-size:23px;color:#ffb14a;transform:rotate(-2deg)}
.oa-name{margin:0;font-family:var(--fraun);font-weight:600;font-variation-settings:'opsz' 72,'wght' 620,'SOFT' 30,'WONK' 0;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.015em;color:var(--bone)}
.oa-price{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-3)}
.oa-price b{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 78,'wght' 820;font-size:40px;letter-spacing:-.02em;color:var(--bone)}
.offer-alt p{margin:0;font-size:15px;line-height:1.55;color:var(--bone-2)}
.offer-alt .btn-scribble{justify-self:start;color:var(--bone)}
.offer-alt .btn-scribble .scrib path{stroke:#c3f53c}
.offer-fine{margin:16px 0 0;max-width:92ch;font-family:var(--mono);font-size:10.5px;line-height:1.7;letter-spacing:.05em;color:var(--bone-3)}

/* 75b · the recap card shows a recap; the hero promise sits on three lines */
.oa-work{position:relative;display:block;width:100%;margin-top:6px;aspect-ratio:16/9;overflow:hidden;border-radius:16px;cursor:pointer;padding:0;background:#000;border:1px solid var(--line)}
.oa-work img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.oa-work:hover img{transform:scale(1.045)}
.oa-work:hover .tst-play{transform:scale(1.12) rotate(-6deg)}
.oa-work:focus-visible{outline:3px solid var(--chroma);outline-offset:3px}
@media(min-width:960px){.hx-sub{max-width:52ch}}

/* 75c · laptops: the six links tighten so they never touch the wordmark; the founders card steps out of the busy hero */
@media(min-width:1021px) and (max-width:1239px){
  .nav-x{gap:0}
  .nav-x a{padding:8px 2px;font-size:9.5px;letter-spacing:.09em}
  .nav-x a span{padding:0 .1em}
}
@media(min-width:960px) and (max-width:1299px){.hx-team{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   76 · THE CENTERED HERO — the structure Northstar, Folio, Vertex and SalesHook share:
   a category pill, the headline, one subheading (what · for whom · how · the promise), two buttons,
   three checks, then the proof rising out of the bottom edge like a product shot.
   ════════════════════════════════════════════════════════════════════════ */
/* 76a · the accent capital: Instrument Serif italic. Pinyon's S and T read as J ("Jeen", "Jurn"); the wordmark keeps Pinyon */
:root{--swash:'Instrument Serif',Georgia,serif}
.swc{font-style:italic;font-size:1.16em;vertical-align:-.03em;margin:0 .01em 0 -.015em}
.bw .swc{font-family:'Pinyon Script',cursive;font-style:normal}

#hero.hc{display:flex;flex-direction:column;min-height:0}
#hero.hc .hero-in.hc-in{display:block;width:100%;max-width:none;margin:0;padding:clamp(84px,10.4vh,114px) var(--gut) 0}
#hero.hc .hx-txt{max-width:none;margin:0 auto;justify-items:center;text-align:center;gap:clamp(12px,1.8vh,20px)}
.hc-pill{
  display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:5px 12px 5px 5px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid rgba(10,15,12,.12);box-shadow:0 10px 26px -16px rgba(10,15,12,.4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:clamp(10px,.8vw,11.5px);line-height:1.3;letter-spacing:.12em;text-transform:uppercase;
  color:#0a0f0c;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s;
}
.hc-pill:hover{transform:translateY(-1px);box-shadow:0 14px 30px -16px rgba(10,15,12,.5)}
.hc-pill:focus-visible{outline:3px solid var(--chroma);outline-offset:3px}
.hc-live{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:#0a0f0c;color:#f6f5ee;white-space:nowrap}
.hc-live i{width:7px;height:7px;border-radius:50%;background:#22e07a;box-shadow:0 0 0 3px rgba(34,224,122,.28)}
.hc-cat{text-align:left}
.hc-cat b{font-weight:700;color:#b42a0a}
.hc-cat em{font-style:normal;color:rgba(10,15,12,.66)}
.hc-chev{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.hc-pill:hover .hc-chev{transform:translateX(3px)}
#hero.hc .hx-h1{text-align:center;font-size:clamp(42px,5.7vw,98px)}
@media(min-width:760px){#hero.hc .hx-h1 .hx-l:not(.hx-pay){display:inline-block}}
#hero.hc .hx-sub{max-width:62ch;margin:0 auto;font-size:clamp(16px,1.28vw,20px);text-wrap:balance}
#hero.hc .hx-spark{top:-.3em}   /* centered lines: a spark raised above OUT. would land on CHOSEN. */
#hero.hc .hx-acts{justify-content:center}
#hero.hc .hx-micro{justify-content:center}
/* the stage: the phone stands on the hero's bottom edge and rises as you scroll */
#hero.hc .hx-stage.hc-stage{
  position:relative;inset:auto;z-index:2;flex:none;width:min(1120px,100%);margin:clamp(18px,3vh,34px) auto 0;
  height:clamp(230px,33vh,330px);overflow:hidden;pointer-events:none;
}
#hero.hc .hc-stage .hx-phone{top:16px;translate:-50% calc(0px - var(--rise,0px));rotate:-4deg;width:clamp(214px,18.5vw,282px)}
#hero.hc .hc-stage .hx-glow{top:74%;width:min(54%,470px)}   /* small enough to sit inside the stage, so its edge is never clipped */
#hero.hc .hc-stage .hx-ig{left:auto;right:calc(50% + clamp(150px,13.4vw,200px));top:clamp(40px,6.4vh,66px)}
#hero.hc .hc-stage .hx-quote{left:auto;right:calc(50% + clamp(196px,17vw,262px));top:auto;bottom:16px}
#hero.hc .hc-stage .hx-views{right:auto;left:calc(50% + clamp(160px,14.4vw,214px));top:clamp(92px,13vh,132px);bottom:auto}
#hero.hc .hc-stage .hx-team{right:auto;left:calc(50% + clamp(206px,19vw,300px));top:14px;bottom:auto;pointer-events:auto}
#hero.hc .cloudy{z-index:1}
#hero.hc .dd-5,#hero.hc .dd-6{display:none}
#hero.hc .hero-foot{margin-top:0}
@media(max-width:759px){
  .hc-cat b{display:none}
  .hc-pill{gap:8px;padding-right:10px}
  #hero.hc .hx-acts{flex-direction:column;gap:12px}
  #hero.hc .hx-stage.hc-stage{height:clamp(200px,30vh,260px);margin-top:14px}
  #hero.hc .sunny{top:auto;bottom:clamp(96px,15vh,140px);right:10px;width:46px}   /* beside the phone, clear of the headline */
}

/* 76b · pre-delivery checks (ui-ux-pro-max): text at 4.5:1 or better, 44px touch targets on phones */
:root{--bone-3:#8a857c}   /* the small grey labels on the dark panels were 3.35:1; now about 5:1 */
.brk.dim{color:rgba(10,15,12,.62)}
body.hero-dark .brk.dim{color:rgba(246,245,238,.66)}
.hc-pill{min-height:44px}
@media(max-width:759px){
  #nav .bw-brand{padding-block:14px;margin-block:-14px}
  .chip{min-height:44px;display:inline-flex;align-items:center}
  .person-ig,.person-flip{min-height:44px;display:inline-flex;align-items:center}
  .person-flip{min-width:44px;justify-content:center}
  #socials a{min-height:44px;display:inline-flex;align-items:center}
  .cm .v a{display:inline-block;padding-block:14px;margin-block:-14px}
}
.sw-mark,.sw-who{color:color-mix(in srgb,var(--tc) 68%,#fff)}   /* dark brand colours stay legible on the dark tiles */

/* 77 · site-config switches: data-cfg-if / data-cfg-unless set [hidden], which must beat any class display */
[data-cfg-if][hidden],[data-cfg-unless][hidden]{display:none !important}

/* ══════════════════════════════════════════════════════════════════════════
   78 · THE PLAN, v2 — the free pilot first (full width), then the plan and the recap; prices switchable in site-config.js
   ════════════════════════════════════════════════════════════════════════ */
#offer .hx-h2 .swash-word{font-family:var(--swash);font-style:italic;text-transform:none;font-weight:400;font-variation-settings:normal;letter-spacing:0;white-space:nowrap;color:var(--chroma)}
.pilot{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:start;
  margin:0 0 clamp(14px,2vw,28px);padding:clamp(22px,3vw,40px);border-radius:26px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(195,245,60,.16),rgba(0,213,99,.06) 45%,transparent 70%),var(--panel);border:2px solid #c3f53c;
}
@media(max-width:900px){.pilot{grid-template-columns:1fr}}
.pilot-k{display:inline-block;padding:7px 13px;border-radius:100px;background:#c3f53c;color:#0a0f0c;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.pilot-h{margin:14px 0 6px;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;text-transform:uppercase;font-size:clamp(28px,3.2vw,48px);line-height:.95;letter-spacing:-.01em;color:var(--bone);text-wrap:balance}
.pilot-worth{display:inline-block;margin-bottom:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c3f53c}
.pilot-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.pilot-list li{display:flex;gap:10px;align-items:flex-start;font-size:clamp(14.5px,1.06vw,16.5px);line-height:1.45;color:var(--bone-2)}
.pilot-list b{color:var(--bone)}
.pilot-list svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:#c3f53c;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pilot-side{display:grid;gap:14px;align-content:start}
.pilot-side p{margin:0;font-size:15px;line-height:1.6;color:var(--bone-2)}
.pilot-side p b{color:var(--bone)}
.pilot-cta{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin-top:6px;padding-top:16px;border-top:1px dashed rgba(195,245,60,.4)}
.pilot-left{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-2)}
.pilot-left b{font-family:var(--display);font-size:26px;letter-spacing:0;color:#c3f53c;margin-right:4px}
.oc-from{align-self:flex-end;padding-bottom:.55em;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
.oc-price-tbd b{font-size:clamp(34px,3.6vw,56px);line-height:.95;text-transform:uppercase}
.oa-price-tbd b{font-size:24px;text-transform:uppercase;line-height:1.05}
.oc-more{margin:-6px 0 0;font-size:14px;color:var(--bone-3)}
.offer-fine{margin-top:16px;display:grid;gap:4px}
.offer-fine p{margin:0;max-width:96ch;font-family:var(--mono);font-size:10.5px;line-height:1.7;letter-spacing:.05em;color:var(--bone-3)}

/* ══════════════════════════════════════════════════════════════════════════
   79 · THE THREAD — one lime line through the whole site, drawn by your scroll (thread() in cc.js)
   It sits above the section backgrounds and under the nav, the llama stage and the pop-ups.
   ════════════════════════════════════════════════════════════════════════ */
.thread{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:3;overflow:visible}
.th-shade{fill:none;stroke:rgba(10,15,12,.45);stroke-width:clamp(9px,1vw,15px);stroke-linecap:round;stroke-linejoin:round}
.th-draw{fill:none;stroke:#c3f53c;stroke-width:clamp(5px,.62vw,9px);stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(195,245,60,.35))}
.th-tip{fill:#fff;filter:drop-shadow(0 0 7px #c3f53c) drop-shadow(0 0 2px #c3f53c);transition:opacity .3s}
@media(max-width:759px){.th-shade{stroke-width:6px}.th-draw{stroke-width:3.5px}}
#turn{position:relative;z-index:4}          /* the thread passes under the pinned llama stage */
#plan .pl-arrow{display:block}

/* ══════════════════════════════════════════════════════════════════════════
   80 · 08 — SELECTED WORK, "upside right": a pinned reel; each project flips from upside down to the right way up
   ════════════════════════════════════════════════════════════════════════ */
#work.work-flip{overflow:visible;overflow-x:clip;padding-bottom:0;color:var(--bone)}
#work .hx-h2 .swash-word{font-family:var(--swash);font-style:italic;text-transform:none;font-weight:400;font-variation-settings:normal;letter-spacing:0;color:#ff5a5a}
.flip-reel{position:relative;z-index:4}          /* the thread passes under the pinned reel */
.fr-pin{position:sticky;top:0;height:100svh;min-height:520px;display:flex;align-items:center;overflow:hidden;perspective:1600px;background:var(--void,#08090a)}
.fr-track{display:flex;gap:clamp(18px,3vw,48px);align-items:center;padding:0 5vw;will-change:transform}
.fr-card{
  --up:1;flex:none;width:min(62vw,820px);display:grid;gap:14px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;
  transform-style:preserve-3d;will-change:transform;transform-origin:50% 45%;
}
.fr-media{position:relative;display:block;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);filter:grayscale(calc(1 - var(--up))) brightness(calc(.45 + .55 * var(--up)))}
.fr-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.fr-card:hover .fr-media img{transform:scale(1.04)}
.fr-card .tst-play{position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:var(--up)}
.fr-info{display:grid;gap:4px;opacity:calc(var(--up) * var(--up))}
.fr-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cc,#c3f53c)}
.fr-name{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;text-transform:uppercase;font-size:clamp(24px,2.6vw,40px);line-height:.95;color:var(--bone)}
.fr-meta,.fr-roles{font-size:14px;color:var(--bone-2)}
.fr-roles{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)}
.fr-card:focus-visible{outline:none}
.fr-card:focus-visible .fr-media{outline:3px solid #c3f53c;outline-offset:4px}
.fr-ui{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(18px,4vh,40px);display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2)}
.fr-count b{color:#c3f53c;font-size:18px}
.fr-now{flex:1;color:var(--bone)}
.fr-bar{width:min(240px,30vw);height:3px;background:rgba(255,255,255,.14)}
.fr-bar i{display:block;height:100%;background:linear-gradient(90deg,#c3f53c,#00d563);transform:scaleX(0);transform-origin:left}
@media(max-width:759px){
  .fr-card{width:80vw}
  .fr-name{font-size:24px}
  .fr-ui .fr-now{display:none}
}
/* reduced motion: no pin, a plain swipeable row, every project the right way up */
.flip-reel.static{height:auto !important}
.flip-reel.static .fr-pin{position:relative;height:auto;min-height:0;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 0 60px}
.flip-reel.static .fr-card{scroll-snap-align:center}
.flip-reel.static .fr-ui{display:none}
@media(min-width:960px){#hero.hc .sunny{top:clamp(92px,11vh,118px)}}   /* clear of the nav bar even at the top of its bob */

/* ══════════════════════════════════════════════════════════════════════════
   81 · THE SPLIT HERO — headline + CTA left, the "One moment, six lives" phone right (the brief: 1366x768 shows the button;
   decoration = the sun + two stars; the loop is the only motion; phones: headline first, phone below)
   ════════════════════════════════════════════════════════════════════════ */
#hero.hs{display:flex;flex-direction:column;min-height:0}
#hero.hs .hero-in.hs-in{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(20px,3vw,56px);
  width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(78px,10vh,104px) var(--gut) clamp(12px,2vh,26px);
}
.hs-txt{position:relative;z-index:3;display:grid;gap:clamp(10px,1.6vh,18px);justify-items:start}
#hero.hs .hx-h1{font-size:clamp(40px,5.2vw,86px);line-height:.9}
#hero.hs .hx-l{display:block}
.hs-word{font-family:var(--swash);font-style:italic;font-weight:400;font-variation-settings:normal;text-transform:none;letter-spacing:0;font-size:1.08em;line-height:0}
#hero.hs .hx-sub{max-width:46ch;font-size:clamp(15.5px,1.2vw,19px)}
#hero.hs .hx-sub b{font-weight:700;color:#0a0f0c;background:linear-gradient(transparent 60%,rgba(195,245,60,.85) 60%);padding:0 .1em}
#hero.hs .hx-acts{display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap;margin-top:4px}
.hs-proof{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:#0a0f0c;text-decoration:underline;text-decoration-color:rgba(109,40,217,.5);text-underline-offset:5px;text-decoration-thickness:2px}
.hs-proof svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.hs-proof:hover svg{transform:translate(2px,2px)}
.hs-proof:focus-visible{outline:3px solid var(--chroma);outline-offset:3px;border-radius:6px}
#hero.hs .hx-micro{gap:6px 16px}
/* the stage: the phone, with the three cards around it */
#hero.hs .hs-stage{position:relative;inset:auto;width:auto;height:clamp(440px,min(72vh,52vw),640px);z-index:2;pointer-events:none}
#hero.hs .hs-phone{position:absolute;left:50%;top:50%;translate:-50% -50%;rotate:-3deg;width:clamp(230px,min(19vw,35vh),300px);animation:none}
#hero.hs .hl-screen{aspect-ratio:9/19.5;background:#0a0f0c}
.hl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hl-ov{position:absolute;inset:0;pointer-events:none}
.hl-steps{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase}
.hl-steps li{padding:3px 5px;border-radius:99px;color:rgba(255,255,255,.6);background:rgba(10,15,12,.45)}
.hl-steps li.on{color:#0a0f0c;background:#c3f53c}
#hero.hs .hx-card{animation:none;pointer-events:auto}
#hero.hs .hx-ig{left:0;right:auto;top:12%}
#hero.hs .hx-ig .hx-point{right:-58px;top:16px}
#hero.hs .hx-quote{left:-2%;right:auto;top:auto;bottom:10%}
#hero.hs .hx-quote q{quotes:"\201C" "\201D"}
#hero.hs .hx-quote q::before{content:open-quote}
#hero.hs .hx-quote q::after{content:close-quote}
#hero.hs .hx-team{left:auto;right:0;top:6%;bottom:auto}
/* decoration: the sun and two stars, all still */
#hero.hs .cloudy,#hero.hs .dd-1,#hero.hs .dd-3,#hero.hs .dd-5,#hero.hs .dd-6,#hero.hs .hero-cray{display:none}
#hero.hs .dd-2{top:8%;right:47%}
#hero.hs .dd-4{top:auto;bottom:12%;right:3%}
#hero.hs .sunny{left:auto;right:clamp(12px,2vw,34px);top:auto;bottom:clamp(40px,8vh,80px);width:clamp(52px,4.6vw,78px)}
#hero.hs .bloom,#hero.hs .glow i,#hero.hs .sunny,#hero.hs .sun-rays,#hero.hs .cl-pupil,#hero.hs .hx-spark svg,#hero.hs .btn-art .ba-spark,#hero.hs .hx-phone{animation:none !important}
#nav .bw-spark svg,#nav .bw-spark,#nav .nb-spark,#nav .nav-clock i{animation:none !important}
#hero.hs .hero-foot{margin-top:0}
@media(max-width:959px){
  #hero.hs .hero-in.hs-in{grid-template-columns:1fr;padding-bottom:8px}
  #hero.hs .hs-stage{height:clamp(420px,120vw,560px)}
  #hero.hs .hs-phone{width:clamp(210px,58vw,270px);rotate:0deg}
  #hero.hs .hx-quote{display:none}
  #hero.hs .hx-ig,#hero.hs .hx-team{display:none}
  #hero.hs .dd-2{top:6%;right:8%}
  #hero.hs .sunny{bottom:auto;top:calc(100% - 150px);width:44px}
  #hero.hs .hero-foot{display:none}
}
@media(min-width:960px) and (max-height:800px){          /* 1366x768 laptops: the button stays above the fold */
  #hero.hs .hero-in.hs-in{padding-top:78px}
  #hero.hs .hx-h1{font-size:clamp(40px,4.6vw,70px)}
  #hero.hs .hs-stage{height:min(76vh,600px)}
}
/* 81b · cards hug the phone's edges without covering the screen */
#hero.hs .hx-ig{left:-1%;top:16%}
#hero.hs .hx-quote{left:-3%;bottom:7%}
#hero.hs .hx-team{right:-3%;left:auto;top:auto;bottom:26%}
#hero.hs .dd-2{top:17%;right:49%}

/* ══════════════════════════════════════════════════════════════════════════
   82 · ONE MOMENT, SIX LIVES — the overlays on the hero phone (heroLoop() in cc.js). Sized in cqw so they scale with the phone.
   "Film set meets social feed": crop marks, timecode, grain; the post and inbox are generic, no platform logos.
   ════════════════════════════════════════════════════════════════════════ */
.hl-screen{container-type:inline-size;isolation:isolate}
.hl-ov{z-index:2;font-family:var(--display);color:#f6f5ee}
.hl-ov > *{position:absolute;inset:0}
.hl-grain{opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:120px}
.hl-vf .c,.hl-shot .c{position:absolute;width:9cqw;height:9cqw;border:solid #f6f5ee;border-width:0}
.hl-vf .tl,.hl-shot .tl{left:6cqw;top:12cqw;border-left-width:2px;border-top-width:2px}
.hl-vf .tr,.hl-shot .tr{right:6cqw;top:12cqw;border-right-width:2px;border-top-width:2px}
.hl-vf .bl,.hl-shot .bl{left:6cqw;bottom:16cqw;border-left-width:2px;border-bottom-width:2px}
.hl-vf .br,.hl-shot .br{right:6cqw;bottom:16cqw;border-right-width:2px;border-bottom-width:2px}
.hl-shot .c{border-color:#c3f53c}
.hl-rec{position:absolute;left:8cqw;top:15cqw;display:flex;align-items:center;gap:1.8cqw;padding:1cqw 2.4cqw;border-radius:99px;background:rgba(10,15,12,.72);font-family:var(--mono);font-size:3.6cqw;letter-spacing:.1em}
.hl-rec b{width:2.6cqw;height:2.6cqw;border-radius:50%;background:#ff3b30}
.hl-rec em{font-style:normal;color:#c3f53c}
.hl-cross{position:absolute;left:50%;top:50%;width:6cqw;height:6cqw;translate:-50% -50%;background:linear-gradient(#f6f5ee,#f6f5ee) center/100% 1px no-repeat,linear-gradient(#f6f5ee,#f6f5ee) center/1px 100% no-repeat;opacity:.7}
.hl-af{position:absolute;left:52%;top:57%;width:30cqw;height:22cqw;border:2px solid #f6f5ee;border-radius:3px;opacity:0;transition:border-color .12s}
.hl-af.lock{border-color:#c3f53c;box-shadow:0 0 0 1px rgba(195,245,60,.4)}
.hl-exif{position:absolute;left:50%;bottom:19cqw;translate:-50% 0;white-space:nowrap;padding:1.2cqw 3cqw;border-radius:99px;background:rgba(246,245,238,.92);font-family:var(--mono);font-size:3.3cqw;letter-spacing:.06em;color:#0a0f0c}
.hl-exif{text-shadow:none}
.hl-shot .hl-exif{background:none}
.hl-chip{position:absolute;top:15cqw;padding:1cqw 2.6cqw;border-radius:99px;font-family:var(--mono);font-size:3.4cqw;letter-spacing:.12em;text-transform:uppercase}
.hl-graded{left:6cqw;background:#c3f53c;color:#0a0f0c}
.hl-raw{right:6cqw;background:rgba(10,15,12,.7);color:#f6f5ee}
.hl-cap p{position:absolute;left:6cqw;top:13cqw;right:40cqw;margin:0;font-weight:800;font-variation-settings:'wdth' 80,'wght' 820;font-size:6.6cqw;line-height:1.22}
.hl-txt{background:#0a0f0c;box-shadow:0 0 0 1.4cqw #0a0f0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#f6f5ee}
.hl-caret{display:inline-block;width:.6cqw;height:1.05em;margin-left:1.2cqw;vertical-align:-.15em;background:#c3f53c}
/* the post */
.hp-top{position:absolute;left:0;right:0;top:12cqw;display:flex;align-items:center;gap:2.4cqw;padding:0 5cqw;font-size:3.8cqw}
.hp-top b{flex:1;font-weight:700}
.hp-av{width:7.5cqw;height:7.5cqw;border-radius:50%;background:#0a0f0c;box-shadow:0 0 0 .7cqw #c3f53c}
.hp-rail{position:absolute;right:4cqw;top:52%;display:grid;gap:5cqw}
.hp-rail span{display:grid;place-items:center;width:10cqw;height:10cqw;border-radius:50%;background:rgba(10,15,12,.45)}
.hp-rail svg,.hp-burst svg,.hp-floats svg{width:62%;height:62%;fill:none;stroke:#f6f5ee;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hp-heart.on svg{fill:#c3f53c;stroke:#c3f53c}
.hp-burst{position:absolute;left:50%;top:45%;width:30cqw;height:30cqw;opacity:0}
.hp-burst svg{width:100%;height:100%;fill:#f6f5ee;stroke:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.hp-floats i{position:absolute;right:6cqw;top:50%;width:6cqw;height:6cqw;opacity:0}
.hp-floats svg{width:100%;height:100%;fill:#c3f53c;stroke:none}
.hp-floats i:nth-child(even) svg{fill:#f6f5ee}
.hp-com{position:absolute;left:5cqw;right:20cqw;bottom:29cqw;display:grid;gap:2cqw;justify-items:start}
.hp-com span{display:flex;align-items:center;gap:1.8cqw;padding:1.4cqw 3cqw;border-radius:99px;background:rgba(246,245,238,.92);color:#0a0f0c;font-family:var(--body,system-ui);font-size:3.6cqw;opacity:0}
.hp-com span i{width:3.6cqw;height:3.6cqw;border-radius:50%;background:#6d28d9}
.hp-com span:nth-child(2) i{background:#00d563}
.hp-cap{position:absolute;left:5cqw;right:18cqw;bottom:18cqw;margin:0;font-family:var(--body,system-ui);font-size:3.7cqw;line-height:1.35;text-shadow:0 1px 6px rgba(0,0,0,.6)}
/* the inbox */
.hl-mail{background:#f6f5ee;color:#0a0f0c;overflow:hidden}
.hm-list{position:absolute;inset:0;padding:14cqw 5cqw 0;display:grid;align-content:start;gap:2.6cqw}
.hm-h{font-size:6cqw;font-weight:800;font-variation-settings:'wdth' 80,'wght' 820;margin-bottom:1cqw}
.hm-row{position:relative;display:grid;gap:.6cqw;padding:3cqw 3.4cqw 3cqw 6.4cqw;border-radius:3cqw;background:#fff;border:1px solid rgba(10,15,12,.08);font-family:var(--body,system-ui)}
.hm-row.tap{background:#eaffc2}
.hm-dot{position:absolute;left:2.4cqw;top:4.2cqw;width:2cqw;height:2cqw;border-radius:50%;background:#6d28d9}
.hm-from{font-size:3.6cqw;font-weight:700}
.hm-sub{font-size:3.4cqw}
.hm-pre{font-size:3.1cqw;color:rgba(10,15,12,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-sk{height:14cqw;background:linear-gradient(90deg,rgba(10,15,12,.07) 0 40%,transparent 40%) 6.4cqw 3.4cqw/60% 2.2cqw no-repeat,linear-gradient(90deg,rgba(10,15,12,.05) 0 60%,transparent 60%) 6.4cqw 8cqw/80% 2cqw no-repeat,#fff}
.hm-open{position:absolute;inset:0;background:#f6f5ee;padding:14cqw 5cqw 0;display:grid;align-content:start;gap:2cqw;transform:translateX(104%)}
.hm-open .hm-from{font-family:var(--body,system-ui);font-size:3.4cqw;color:rgba(10,15,12,.6)}
.hm-subj{font-size:6.4cqw;line-height:1.05;font-weight:800;font-variation-settings:'wdth' 80,'wght' 820}
.hm-open img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 20%;border-radius:3cqw}
.hm-opened{justify-self:start;padding:1.4cqw 3.4cqw;border-radius:99px;background:#c3f53c;font-family:var(--mono);font-size:3.4cqw;letter-spacing:.08em;opacity:0}
/* the seam: the lime panel, in step with the one baked into the video */
.hl-wipe{inset:auto 0;top:100%;bottom:0;background:#c3f53c;box-shadow:0 -1.8cqw 0 #6d28d9}
.hl-ov > .hl-vf,.hl-ov > .hl-shot,.hl-ov > .hl-edit,.hl-ov > .hl-cap,.hl-ov > .hl-post,.hl-ov > .hl-mail{visibility:hidden}
.hl-steps{z-index:3}
/* reduced motion / no autoplay: the poster with the finished caption */
.hl-still .hl-cap{visibility:visible !important}
.hl-still .hl-wipe,.hl-still .hl-vf{display:none}
/* 82b · the cards frame the phone without covering its screen (the post's icons live on its right edge) */
#hero.hs .hs-phone{left:46%}
#hero.hs .hx-ig{left:-6%;top:8%}
#hero.hs .hx-quote{left:-8%;bottom:4%}
#hero.hs .hx-team{right:-15%;bottom:5%}
/* 82c · the sun takes the empty top-right; on phones one star is enough */
#hero.hs .sunny{top:clamp(92px,13vh,130px);bottom:auto;right:clamp(14px,2.4vw,40px)}
@media(max-width:959px){#hero.hs .dd-2{display:none} #hero.hs .sunny{top:auto;bottom:clamp(60px,12vh,110px);right:10px}}
/* 82d · the founders card, compact, inside the frame and clear of the screen */
#hero.hs .hx-team{right:-1%;bottom:12%}
#hero.hs .hx-team .who > span{display:none}
#hero.hs .hx-team{right:auto;left:-9%;top:44%;bottom:auto}   /* 82e · left, between the 142K card and the quote: the loop draws nothing there */
@media(min-width:960px) and (max-width:1299px){#hero.hs .hx-team{display:none}}
/* 82f · a compact founders card in the hero */
#hero.hs .hx-team{gap:9px;padding:8px 12px 8px 9px;left:-11%}
#hero.hs .hx-team .faces img{width:30px;height:30px}
#hero.hs .hx-team b{font-size:12px}
#hero.hs .hx-team em{font-size:8.5px;letter-spacing:.1em;margin-top:1px}

/* ══════════════════════════════════════════════════════════════════════════
   83 · the brief's first screen: the pilot pill (dark, green dot, never animated), a clearer menu, premium script words
   ════════════════════════════════════════════════════════════════════════ */
.pw{font-family:'Pinyon Script',cursive;font-weight:400;font-style:normal;text-transform:none;letter-spacing:0;font-variation-settings:normal;
  font-size:1.32em;line-height:.7;display:inline-block;padding:0 .06em;vertical-align:-.06em}
#hero.hs .hs-word.pw{font-size:1.36em;padding-right:.1em}
.hx-h2 .pw,.tl4-h .pw{color:var(--chroma)}
.tl4-h .pw{color:#c3f53c}
.hc-pill.hp-pilot{gap:10px;padding:10px 16px 10px 14px;background:#0a0f0c;border-color:#0a0f0c;color:#f6f5ee;
  font-size:clamp(10.5px,.82vw,12px);letter-spacing:.1em;box-shadow:0 10px 26px -14px rgba(10,15,12,.55);cursor:pointer}
.hc-pill.hp-pilot .hp-dot{width:8px;height:8px;border-radius:50%;background:#22e07a;box-shadow:0 0 0 3px rgba(34,224,122,.28);flex:none}
.hc-pill.hp-pilot:hover{background:#1b2420}
button.hc-pill.hp-pilot{font-family:var(--mono);text-transform:uppercase;border:0}
/* the menu: bigger, darker, one line */
/* desktop only: at <=1020px these beat the full-screen menu rules and painted 12px near-black links on the dark panel */
@media(min-width:1021px){
#nav .nav-x a{font-size:12px;letter-spacing:.12em;color:#0a0f0c;font-weight:700;padding:9px 8px}
#nav .nav-x a span{padding:0 .2em}
#nav.stuck .nav-x a{color:#f6f5ee}
#nav .nav-x a.active{color:#0a0f0c}
}
@media(min-width:1021px) and (max-width:1239px){#nav .nav-x a{font-size:10.5px;padding:8px 4px;letter-spacing:.08em}}
/* less air between the menu and the pill (the brief: everything visible at 1366x768 and 390x844) */
#hero.hs .hero-in.hs-in{padding-top:clamp(70px,9vh,92px)}
@media(max-width:959px){
  #hero.hs .hero-in.hs-in{padding-top:74px;gap:14px}
  .hc-pill.hp-pilot{min-height:44px}
  #hero.hs .hx-h1{font-size:clamp(38px,11.5vw,54px)}
}

/* ══════════════════════════════════════════════════════════════════════════
   84 · PLANS (the brief): pilot price line, grouped services, no-price line, the "need more" row
   ════════════════════════════════════════════════════════════════════════ */
.pilot-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-top:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2)}
.pilot-price s{font-family:var(--display);font-size:clamp(20px,2vw,28px);letter-spacing:0;color:var(--bone-3);text-decoration-thickness:2px}
.pilot-price b{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;font-size:clamp(40px,4.4vw,64px);line-height:.9;letter-spacing:-.02em;color:#c3f53c}
.pilot-lead{margin:14px 0 0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono);color:var(--bone-2)}
.pilot-lead + .pilot-list{margin-top:8px}
.oc-noprice{margin:0;max-width:34ch;font-family:var(--display);font-weight:500;font-variation-settings:normal;font-size:clamp(17px,1.35vw,20px);line-height:1.4;letter-spacing:0;text-transform:none;color:var(--bone)}
.offer-alt .oc-noprice{font-size:17px}
.oc-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;width:100%}
@media(max-width:640px){.oc-groups{grid-template-columns:1fr}}
.ocg-k{display:block;margin-bottom:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#c3f53c}
.ocg .oc-list{grid-template-columns:1fr;gap:8px}
.offer-more{display:grid;gap:8px;margin-top:clamp(16px,2vw,26px);padding:16px 20px;border-radius:18px;border:1px dashed var(--line)}
.offer-more p{margin:0;font-size:15px;line-height:1.6;color:var(--bone-2)}
.lnk{padding:0;border:0;background:none;color:#c3f53c;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:24px}
.lnk:focus-visible{outline:3px solid #c3f53c;outline-offset:2px;border-radius:4px}

/* 85 · THE FORMS */
#pop .pop-card{max-height:min(92vh,860px);overflow:auto}
.pop-sub{margin:6px 0 12px;font-size:15px;line-height:1.5;color:var(--bone-2)}
.pop-sub b{color:#c3f53c}
.cc-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.cc-form[hidden]{display:none}
.cc-form .ff:has(textarea),.cc-form .ff-send,.cc-form .form-note{grid-column:1 / -1}
@media(max-width:560px){.cc-form{grid-template-columns:1fr}}
.ff{display:grid;gap:5px}
.ff label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-2)}
.ff label em{font-style:normal;color:#c3f53c}
.ff input,.ff select,.ff textarea{width:100%;min-height:44px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--bone);font:inherit;font-size:15px}
.ff select option{color:#0a0f0c}
.ff textarea{min-height:70px;resize:vertical}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-color:#c3f53c;box-shadow:0 0 0 3px rgba(195,245,60,.25)}
.ff [aria-invalid="true"]{border-color:#ff6b6b}
.ff-err{min-height:0;font-size:12.5px;color:#ff8a8a}
.form-note{margin:0;font-size:14px;color:#c3f53c;min-height:1em}
.pop-alt{margin:14px 0 0;font-size:13px;color:var(--bone-3)}
.pop-alt a{color:var(--bone-2)}

/* 86 · THE GRADE — before/after */
.gs{display:grid;gap:14px}
.gs-stage{--x:50%;position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;cursor:ew-resize;touch-action:pan-y;user-select:none}
.gs-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.gs-b{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.gs-line{position:absolute;top:0;bottom:0;left:var(--x);width:3px;translate:-50% 0;background:#f6f5ee;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.gs-line i{position:absolute;left:50%;top:50%;width:44px;height:44px;translate:-50% -50%;border-radius:50%;background:#c3f53c;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.gs-line i::before,.gs-line i::after{content:'';position:absolute;top:50%;width:0;height:0;border:6px solid transparent;translate:0 -50%}
.gs-line i::before{left:8px;border-right-color:#0a0f0c}
.gs-line i::after{right:8px;border-left-color:#0a0f0c}
.gs-lab{position:absolute;top:14px;padding:6px 12px;border-radius:99px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.gs-lab-b{left:14px;background:rgba(10,15,12,.72);color:#f6f5ee}
.gs-lab-a{right:14px;background:#c3f53c;color:#0a0f0c}
.gs-range{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.gs-stage:has(.gs-range:focus-visible){outline:3px solid #c3f53c;outline-offset:3px}
.gs-tabs{display:flex;flex-wrap:wrap;gap:8px}
.gs-tab{min-height:44px;padding:8px 16px;border-radius:99px;border:1px solid var(--line);background:none;color:var(--bone-2);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.gs-tab[aria-pressed="true"]{background:#c3f53c;border-color:#c3f53c;color:#0a0f0c}

/* 87 · WHO WE WORK WITH */
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
@media(max-width:760px){.who{grid-template-columns:1fr}}
.who-card{display:grid;grid-template-rows:auto 1fr;border-radius:24px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.who-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.who-body{display:grid;gap:10px;align-content:start;padding:clamp(18px,2.4vw,30px)}
.who-body h3{margin:0;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;text-transform:uppercase;font-size:clamp(22px,2.2vw,32px);line-height:1;color:var(--bone)}
.who-body p{margin:0;font-size:15.5px;line-height:1.6;color:var(--bone-2)}
.who-body .btn-scribble{justify-self:start;color:var(--bone)}
.who-body .btn-scribble .scrib path{stroke:#c3f53c}
footer .f-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px}
footer .f-who b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
footer .f-who a{color:var(--bone-2)}

/* 88 · UPSIDE RIGHT: the Stranger Things head is back; every project on one screen, each flipping upright as it scrolls in */
#work.upside .st-copy{color:rgba(246,245,238,.9)}
.wgrid{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);perspective:1400px}
@media(max-width:900px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.wgrid{grid-template-columns:1fr}}
.wg-card{--up:1;display:grid;gap:10px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;
  transform:rotateX(calc((1 - var(--up)) * 180deg));transform-origin:50% 40%;transform-style:preserve-3d;will-change:transform}
.wg-media{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#111;border:1px solid rgba(255,80,80,.28);
  box-shadow:0 20px 50px -26px rgba(255,40,40,.45);filter:grayscale(calc(1 - var(--up))) brightness(calc(.5 + .5 * var(--up)))}
.wg-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.wg-card:hover .wg-media img{transform:scale(1.05)}
.wg-card .tst-play{position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:var(--up)}
.wg-info{display:grid;gap:3px;opacity:var(--up)}
.wg-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#ff7a7a}
.wg-name{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);line-height:1;color:#f6f5ee}
.wg-meta{font-size:13.5px;color:rgba(246,245,238,.78)}
.wg-card:focus-visible{outline:none}
.wg-card:focus-visible .wg-media{outline:3px solid #ff5a5a;outline-offset:3px}

/* 85b · the forms sit on the light pop-up card: dark ink, white fields */
#pop .pop-card{max-width:600px}
#pop .pop-sub{color:#3a403c}
#pop .pop-sub b{color:#0a0f0c;background:linear-gradient(transparent 58%,#c3f53c 58%)}
#pop .ff label{color:#2f3531}
#pop .ff label em{color:#b3261e}
#pop .ff input,#pop .ff select,#pop .ff textarea{background:#fff;color:#0a0f0c;border-color:rgba(10,15,12,.22)}
#pop .ff input:focus,#pop .ff select:focus,#pop .ff textarea:focus{border-color:#0a0f0c;box-shadow:0 0 0 3px rgba(195,245,60,.9)}
#pop .ff [aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
#pop .ff-err{color:#b3261e;font-weight:600}
#pop .form-note{color:#1d5b2a;font-weight:600}
#pop .pop-alt{color:#4a504c}
#pop .pop-alt a{color:#0a0f0c}

/* 89 · the menu: wordmark left, the six links centred, the call button right, so nothing ever overlaps */
@media(min-width:1021px){
  #nav{grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,1.6vw,28px)}
  #nav .bw-brand{justify-self:start}
  #nav .nav-x{justify-self:center}
  #nav .nav-r{justify-self:end}
}
@media(min-width:1021px) and (max-width:1439px){.nav-clock{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   90 · /INDUSTRY — same system, calmer: one drone loop, three columns, the pilot, four steps
   ════════════════════════════════════════════════════════════════════════ */
#hero.ind{min-height:0}
#hero.ind .hero-in.hs-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);padding-bottom:clamp(20px,4vh,44px)}
.ind-eyebrow{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:8px 16px 8px 14px;border-radius:99px;background:#0a0f0c;color:#f6f5ee;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.ind-eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:#22e07a;box-shadow:0 0 0 3px rgba(34,224,122,.28)}
#hero.ind .ind-h1{font-size:clamp(36px,4.4vw,72px);line-height:.95;max-width:14ch;text-wrap:balance}
.ind-vid{position:relative;z-index:2;margin:0;border-radius:22px;overflow:hidden;background:#0a0f0c url(assets/industry-loop-poster.jpg) center/cover;aspect-ratio:16/9;
  box-shadow:0 40px 80px -36px rgba(10,15,12,.55),0 0 0 1px rgba(10,15,12,.12);rotate:1.2deg}
.ind-vid video{width:100%;height:100%;object-fit:cover;display:block}
.ind-vid figcaption{position:absolute;left:14px;bottom:12px;padding:6px 12px;border-radius:99px;background:rgba(10,15,12,.66);color:#f6f5ee;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
#hero.ind .hero-foot{flex-wrap:wrap;gap:6px 18px}
@media(max-width:959px){
  #hero.ind .hero-in.hs-in{grid-template-columns:1fr}
  .ind-vid{rotate:0deg}
}
.ind-for{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
@media(max-width:860px){.ind-for{grid-template-columns:1fr}}
.if-card{display:grid;gap:10px;align-content:start;padding:clamp(20px,2.4vw,30px);border-radius:22px;background:var(--panel);border:1px solid var(--line)}
.if-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#c3f53c}
.if-card h3{margin:0;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;text-transform:uppercase;font-size:clamp(22px,2vw,30px);line-height:1;color:var(--bone)}
.if-card p{margin:0;font-size:15.5px;line-height:1.6;color:var(--bone-2)}
.if-card .if-ex{font-size:14px;color:var(--bone-2);border-top:1px dashed var(--line);padding-top:10px}
.if-ex b{display:block;margin-bottom:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);font-weight:400}
.ind-pilot-h{font-size:clamp(24px,2.4vw,36px);max-width:22ch}
.pilot-worth{margin:6px 0 0;font-size:14px;color:var(--bone-2)}
.ind-offer .oc-list{grid-template-columns:1fr}
.ind-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin:0 0 clamp(20px,3vw,34px);padding:0;list-style:none;counter-reset:none}
@media(max-width:960px){.ind-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ind-steps{grid-template-columns:1fr}}
.ind-steps li{display:grid;gap:8px;align-content:start;padding:clamp(18px,2vw,26px);border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.is-n{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;font-size:clamp(34px,3.2vw,48px);line-height:1;color:#c3f53c}
.ind-steps h3{margin:0;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);color:var(--bone)}
.ind-steps p{margin:0;font-size:15px;line-height:1.6;color:var(--bone-2)}
.ind-work{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.ind-work{grid-template-columns:1fr}}
.ind-work .wg-media{border-color:var(--line);box-shadow:none;filter:none}
.ind-work .wg-cat{color:#c3f53c}
.ind-final{text-align:center}
.ind-final-h{margin:18px 0 0;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;text-transform:uppercase;font-size:clamp(40px,6vw,96px);line-height:.92;color:var(--bone)}
.ind-final-h .pw{color:#c3f53c}
.ind-final-cta{display:flex;justify-content:center;margin-top:clamp(20px,3vw,34px)}
.ind-final .cta-sub{margin-top:18px}

/* ══════════════════════════════════════════════════════════════════════════
   91 · THE TRAILER — the hero's 16:9 box; overlays in cqw so they scale with it
   ════════════════════════════════════════════════════════════════════════ */
#hero.hs .ht-stage{height:auto;display:grid;gap:12px;align-content:center;pointer-events:auto;padding:26px 0 30px}
.ht-box{position:relative;margin:0;aspect-ratio:16/9;width:100%;border-radius:18px;overflow:hidden;container-type:inline-size;
  background:#0a0f0c url(assets/hero-trailer-poster.jpg?v=3) center/cover;rotate:-1deg;
  box-shadow:0 44px 90px -40px rgba(10,15,12,.6),0 0 0 1px rgba(10,15,12,.14)}
.ht-box .hl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ht-ov{position:absolute;inset:0;pointer-events:none;font-family:var(--mono);color:#f6f5ee}
.ht-ov > *{position:absolute}
.ht-grain{inset:-50%;opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:htGrain .5s steps(4) infinite}
@keyframes htGrain{25%{translate:-3% 2%}50%{translate:2% -3%}75%{translate:-2% -1%}}
.hl-still .ht-grain{animation:none}
.ht-c{width:3.2cqw;height:3.2cqw;border:0 solid rgba(246,245,238,.85)}
.ht-c.tl{left:1.5%;top:2.6%;border-width:2px 0 0 2px}.ht-c.tr{right:1.5%;top:2.6%;border-width:2px 2px 0 0}
.ht-c.bl{left:1.5%;bottom:2.6%;border-width:0 0 2px 2px}.ht-c.br{right:1.5%;bottom:2.6%;border-width:0 2px 2px 0}
.ht-tc{right:4.2%;bottom:5.4%;display:flex;align-items:center;gap:.6cqw;font-size:1.35cqw;letter-spacing:.1em;color:rgba(246,245,238,.85)}
.ht-tc b{width:1cqw;height:1cqw;border-radius:50%;background:#ff3b3b;animation:htBlink 1s steps(2) infinite}
.ht-tc em{font-style:normal}
@keyframes htBlink{50%{opacity:0}}
.ht-chip{left:4.4%;top:5.2%;display:grid;gap:.4cqw;justify-items:start;opacity:0;transform:translateY(-.6cqw);transition:opacity .18s,transform .18s}
.ht-chip.on{opacity:1;transform:none}
.ht-chip-k{display:inline-flex;align-items:center;gap:.7cqw;padding:.55cqw 1.2cqw;border-radius:99px;background:#c3f53c;color:#0a0f0c;font-weight:700;font-size:1.9cqw;letter-spacing:.08em;text-transform:uppercase}
.ht-rec{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#ff3b3b}
.ht-rec[hidden]{display:none}
.ht-chip-s{padding:.2cqw .8cqw;border-radius:6px;background:rgba(10,15,12,.6);font-size:1.3cqw;letter-spacing:.08em;text-transform:uppercase}
.ht-slate{left:3.3%;bottom:5.5%;font-size:1.35cqw;letter-spacing:.14em;color:rgba(246,245,238,.85)}
.ht-slogan{left:54%;top:22%;width:40%;display:grid;font-size:6.4cqw;line-height:.92;color:#f6f5ee;text-transform:uppercase;text-shadow:0 .4cqw 2.4cqw rgba(0,0,0,.45)}
.ht-slogan span{display:block;transform-origin:0 100%}
.ht-slogan .sw{color:#c3f53c;font-style:normal}
.ht-brk{border:0;visibility:hidden}
.ht-brk.on{visibility:visible}
.ht-brk i{position:absolute;width:22%;height:14%;border:1.5px solid #c3f53c}
.ht-brk i:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px}.ht-brk i:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0}
.ht-brk i:nth-child(3){left:0;bottom:0;border-width:0 0 1.5px 1.5px}.ht-brk i:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.ht-exif{left:3.3%;bottom:5.5%;font-size:1.4cqw;letter-spacing:.08em;padding:.3cqw .8cqw;border-radius:6px;background:rgba(10,15,12,.55);visibility:hidden}
.ht-pill{top:13%;padding:.45cqw 1.1cqw;border-radius:99px;background:rgba(10,15,12,.72);color:#f6f5ee;font-weight:700;font-size:1.8cqw;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;visibility:hidden}
.ht-final,.ht-flat{transform:translateX(-100%)}
.ht-graded,.ht-final{background:#c3f53c;color:#0a0f0c}
.ht-exif.on,.ht-pill.on,.ht-comp.on,.ht-post.on,.ht-card.on,.ht-mail.on,.ht-words.on,.ht-booked.on{visibility:visible}
.ht-comp{left:17.7%;top:72%;width:64.6%;min-height:13%;display:grid;align-content:center;padding:1cqw 1.8cqw;border-radius:12px;background:rgba(10,15,12,.85);border:1px solid #c3f53c;visibility:hidden}
.ht-comp b{position:absolute;left:0;top:-2.6cqw;font-size:1.2cqw;letter-spacing:.14em;color:#c3f53c}
.ht-comp p{margin:0;font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 90,'wght' 600;font-size:3cqw;line-height:1.2;color:#f6f5ee}
.ht-caret{display:inline-block;width:.25cqw;height:3cqw;margin-left:.2cqw;vertical-align:-.4cqw;background:#c3f53c}
.ht-post{left:50.31%;top:5.93%;width:23.33%;height:88.15%;visibility:hidden;font-family:var(--display);color:#fff}
.ht-post svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hp-top{position:absolute;left:6%;right:6%;top:3%;display:flex;justify-content:space-between;align-items:center;font-size:1.6cqw;font-weight:700}
.hp-top svg{width:1.8cqw;height:1.8cqw}
.hp-rail{position:absolute;left:84%;top:52%;display:grid;gap:2.2cqw}
.hp-rail span{display:block;width:2.1cqw;height:2.1cqw}
.hp-heart.lit svg{fill:#c3f53c;stroke:#c3f53c}
.hp-burst{position:absolute;left:50%;top:48%;width:9cqw;height:9cqw;opacity:0}
.hp-burst svg{fill:#c3f53c;stroke:none;filter:drop-shadow(0 .4cqw 1.2cqw rgba(0,0,0,.4))}
.hp-bot{position:absolute;left:6%;right:14%;bottom:3.5%;display:grid;gap:.6cqw}
.hp-who{display:flex;align-items:center;gap:.6cqw;font-size:1.3cqw}
.hp-who i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#c3f53c;flex:none}
.hp-who em{font-style:normal;padding:.1cqw .6cqw;border:1px solid rgba(255,255,255,.8);border-radius:5px;font-size:1.1cqw}
.hp-audio{font-size:1.1cqw;opacity:.85}
.ht-card{left:5%;top:52%;width:39%;padding:1.4cqw 1.8cqw;border-radius:14px;background:rgba(246,245,238,.95);color:#0a0f0c;font-family:var(--display);visibility:hidden}
.ht-card b{display:block;font-weight:700;font-size:1.7cqw}
.ht-card p{margin:.3cqw 0 0;font-weight:600;font-size:2.5cqw;line-height:1.15}
.ht-mail{left:57%;top:27%;width:37%;padding:1.4cqw 1.6cqw;border-radius:14px;background:rgba(246,245,238,.96);color:#0a0f0c;box-shadow:0 20px 40px rgba(0,0,0,.5);font-family:var(--display);visibility:hidden}
.hm-h{display:block;margin-bottom:.8cqw;font-family:var(--mono);font-size:1.3cqw;letter-spacing:.1em;text-transform:uppercase;color:#5b615d}
.hm-row{position:relative;display:grid;grid-template-columns:1fr auto;gap:.2cqw .8cqw;padding-left:2.2cqw}
.hm-dot,.hm-ok{position:absolute;left:0;top:.5cqw;width:1.2cqw;height:1.2cqw;border-radius:50%;transition:opacity .2s}
.hm-dot{background:#6d28d9}
.hm-ok{font-style:normal;font-size:1.2cqw;line-height:1.2cqw;color:#0a0f0c;background:#c3f53c;text-align:center;opacity:0}
.hm-row.read .hm-dot{opacity:0}.hm-row.read .hm-ok{opacity:1}
.hm-from{font-weight:700;font-size:1.9cqw}
.hm-now{font-family:var(--mono);font-size:1.2cqw;color:#5b615d}
.hm-sub{grid-column:1 / -1;font-weight:700;font-size:2.2cqw;line-height:1.15}
.hm-pre{grid-column:1 / -1;font-size:1.75cqw;line-height:1.3;color:#4a504c}
.hm-row.read .hm-from,.hm-row.read .hm-sub{font-weight:600}
.ht-words{left:50%;top:50%;display:grid;justify-items:center;line-height:.86;text-shadow:0 8px 40px rgba(0,0,0,.6);visibility:hidden}
.ht-words span{display:block}
.ht-words .w1{font-family:'Bowlby One',var(--display),sans-serif;font-size:9.5cqw;color:#f6f5ee}
.ht-words .w2{font-family:'Bagel Fat One',var(--display),sans-serif;font-size:11.5cqw;color:#c3f53c;margin-top:-.08em}
.ht-words .w3{font-family:'Silkscreen',var(--mono),monospace;font-size:2.6cqw;letter-spacing:.3em;color:var(--amber,#ffb14a);margin-top:.6cqw}
.ht-booked{left:50%;top:50%;visibility:hidden;white-space:nowrap}
.ht-booked span{display:block;padding:.15em .4em;background:#6d28d9;color:#f6f5ee;font-size:5.6cqw;line-height:1.05;text-transform:uppercase}
.ht-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.ht-steps li{padding:5px 10px;border-radius:99px;border:1px solid rgba(10,15,12,.18);color:rgba(10,15,12,.72);background:rgba(246,245,238,.7);transition:background .2s,color .2s,border-color .2s}
.ht-steps li.on{background:#0a0f0c;border-color:#0a0f0c;color:#c3f53c}
/* the wireframe's two cards, pinned to the box's corners */
#hero.hs .ht-stage .hx-card{position:absolute;animation:none}
#hero.hs .ht-stage .hx-ig{left:-5%;right:auto;top:0;bottom:auto}
#hero.hs .ht-stage .hx-views{left:auto;right:-3%;top:auto;bottom:6px}
.hx-views{display:grid;gap:2px;padding:12px 16px;border-radius:16px;background:#fff;box-shadow:0 18px 40px -20px rgba(10,15,12,.45);rotate:2deg}
.hx-views b{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;font-size:26px;line-height:1;color:#0a0f0c}
.hx-views span{font-size:12.5px;line-height:1.3;color:#3a403c}
@media(max-width:959px){
  #hero.hs .ht-stage{padding:10px 0 4px}
  .ht-box{rotate:0deg}
  #hero.hs .ht-stage .hx-card{position:static;rotate:0deg}
  #hero.hs .ht-stage{grid-template-columns:1fr 1fr}
  .ht-box,.ht-steps{grid-column:1 / -1}
}

/* 91b · the trailer's type is the headline's; the cards sit under the box so nothing on the film is covered; the sun peeks from behind */
.ht-slogan,.ht-booked span{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;letter-spacing:-.005em}
.ht-slogan .pw{color:#c3f53c;font-size:1.3em;line-height:.6;text-transform:none;padding-left:.04em}
.ht-cards{display:flex;justify-content:center;align-items:stretch;gap:14px;flex-wrap:wrap}
#hero.hs .ht-cards .hx-card{position:static;inset:auto;animation:none;margin:0}
#hero.hs .ht-cards .hx-ig{rotate:-2deg}
#hero.hs .ht-cards .hx-views{rotate:1.5deg}
#hero.hs .ht-stage{position:relative;z-index:3}
#hero.hs .sunny{z-index:1}
@media(max-width:959px){ #hero.hs .ht-stage{grid-template-columns:1fr} .ht-cards{justify-content:flex-start} }
@media(max-width:959px){
  #hero.hs .ht-cards .hx-ig{display:block}
  .ht-steps{gap:4px}
  .ht-steps li{padding:4px 7px;font-size:9.5px;letter-spacing:.08em}
}

/* 92 · premium script everywhere: the accent words use the wordmark's Pinyon, whole words only, in the colour the old accent had */
.dsp .pw{color:var(--chroma)}
.cta-row-h .pw{color:var(--chroma)}
#about .sec-head h2 .pw{color:var(--chroma)}
#founders .sec-head h2 .pw{color:var(--amber)}
.pop-card h3 .pw{color:var(--violet);font-size:1.25em}
.h-lg .pw{font-size:1.25em;line-height:.8}
.h-lg .pw{font-size:1.08em}
#about .sec-head h2{font-size:clamp(34px,5.8vw,86px)}
#about .sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
footer .f-who a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.lnk{min-height:44px;display:inline-flex;align-items:center}

/* 91c · the verified trailer layout: slogan in the empty sky, sub-labels inline, small labels never under 10px, inbox clear of the speaker */
.ht-slogan{left:55%;top:8%}
.ht-chip{display:flex;align-items:center;gap:.8cqw}
.ht-chip-s{font-size:max(10px,1.3cqw)}
.ht-slate{font-size:max(10px,1.35cqw)}
.ht-tc{font-size:max(10px,1.35cqw)}
.ht-exif{font-size:max(10px,1.4cqw);background:rgba(10,15,12,.7);border-radius:8px}
.ht-comp b{font-size:max(10px,1.2cqw);top:calc(-1 * max(14px,2.4cqw))}
.hm-h{font-size:max(10px,1.3cqw)}
.ht-mail{left:62%;width:34%}
.ht-words{mix-blend-mode:screen}
.ht-words .w3{margin-top:.5em}

/* ══════════════════════════════════════════════════════════════════════════
   93 · TEXT ON DARK: warm bone instead of grey, weight 450, one lime marker for the key phrase
   WCAG ratios, in this order: #0b0d0c · #111415 · #121517 panel · #171b1d panel-2 · #2e391d (the pilot card's lime corner)
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --text-hi:#f6f1e6;          /* bold words, <mark>, key phrases   17.3 · 16.4 · 16.3 · 15.4 · 10.8 */
  --text:#e4dfd2;             /* body copy (was #a9a396 grey)      14.7 · 13.9 · 13.8 · 13.0 ·  9.2 */
  --bone-2:#cdc7b8;           /* secondary: chips, captions, nav   11.6 · 11.0 · 10.9 · 10.3 ·  7.3 */
  --bone-3:#a6a195;           /* muted: mono labels, meta          7.6 ·  7.2 ·  7.1 ·  6.7 ·  4.7 */
  --text-w:450;               /* body weight on dark: 400 looks thin next to cream; 450 is punchier (Archivo is variable 400-900) */
  --mark:rgba(195,245,60,.24);/* the lime marker band behind <mark>; --text-hi on it: 9.6 void · 8.4 panel · 7.9 panel-2 */
}
/* every paragraph and list on the dark panels: cream, not grey, and a touch heavier (thin text blooms away on black) */
.body-lg,.body,.qa p,.svc-head p,.svc-i p,.step p,.cclient-what,.person-bio,.person-back p,.mg-blurb,.pl-p,.val span,
.fit-col.yes li,.oc-list li,.oc-promise p,.offer-alt p,.offer-more p,.pilot-list li,.pilot-side p,.who-body p,
.if-card p,.if-card .if-ex,.ind-steps p,.pop-sub{color:var(--text);font-weight:var(--text-w)}
:is(.body-lg,.body,.qa p,.svc-head p,.svc-i p,.step p,.cclient-what,.person-bio,.person-back p,.mg-blurb,.pl-p,.val span,
.fit-col li,.oc-list li,.oc-promise p,.offer-alt p,.offer-more p,.pilot-list li,.pilot-side p,.who-body p,
.if-card p,.ind-steps p,.pop-sub) :is(b,strong){color:var(--text-hi);font-weight:700}
/* the one vibrant accent: a lime marker under the key phrase. One per section, never a whole sentence, never inside the pilot card */
mark{
  color:var(--text-hi);font-weight:700;padding:0 .1em;margin:0 -.02em;
  background:linear-gradient(transparent 50%,var(--mark) 50%);                    /* the tint: lower half of the line */
  text-decoration:underline 2px #c3f53c;text-underline-offset:.2em;text-decoration-skip-ink:none;   /* the marker's hard edge */
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
#hero mark{color:#0a0f0c;text-decoration:none;background:linear-gradient(transparent 60%,rgba(195,245,60,.85) 60%)}
/* the light hero: solid ink instead of 84% alpha (11.6:1 -> 14.7:1 on #f6f5ee), same weight as the dark copy */
body:not(.hero-dark) .hx-sub{color:#1c231e;font-weight:var(--text-w);text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════════════════
   94 · THE PILOT PRICE: "worth €450" in mono caps, struck once by a red marker when the card reveals,
   then a big lime €0 with a "free pilot" stamp. Same markup on /industry (worth part hidden while industryPilotWorth is null).
   Replaces .pilot-price / .pilot-price s / .pilot-price b from section 84 (safe to append: every rule below out-ranks them).
   ════════════════════════════════════════════════════════════════════════ */
.pilot-price.pp{display:grid;justify-items:start;gap:8px;margin-top:18px;font-family:var(--mono);text-transform:uppercase;color:var(--bone-2)}
.pilot-price .pp-worth{display:inline-flex;align-items:baseline;gap:.7em;font-size:11px;letter-spacing:.2em;color:var(--bone-3)}
.pilot-price .pp-was{position:relative;display:inline-block;font-family:var(--mono);font-size:20px;line-height:1;font-weight:700;letter-spacing:.04em;
  color:var(--text);text-decoration:none}
.pp-strike{position:absolute;left:-.28em;top:52%;width:calc(100% + .56em);max-width:none;height:1.3em;translate:0 -50%;overflow:visible;pointer-events:none}
.pp-strike path{fill:none;stroke:var(--signal);stroke-linecap:round;stroke-linejoin:round}
.pp-s1{stroke-width:3.4;stroke-dasharray:116 116;stroke-dashoffset:0}               /* 116 = the path's length, the pen goes right */
.pp-s2{stroke-width:2;stroke-dasharray:98 98;stroke-dashoffset:0;opacity:.6}         /* 98: the quick return pass, the pen comes back */
.js .pilot:not(.in) .pp-s1{stroke-dashoffset:116}
.js .pilot:not(.in) .pp-s2{stroke-dashoffset:98}
.pilot.in .pp-s1{transition:stroke-dashoffset .46s cubic-bezier(.55,0,.35,1) .6s}
.pilot.in .pp-s2{transition:stroke-dashoffset .3s cubic-bezier(.55,0,.35,1) 1.04s}
.pilot-price .pp-now{display:inline-flex;align-items:flex-start;gap:14px}
.pilot-price .pp-zero{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;
  font-size:clamp(60px,6vw,96px);line-height:.8;letter-spacing:-.02em;color:#c3f53c;text-shadow:0 0 36px rgba(195,245,60,.22)}
.pp-tag{display:inline-flex;align-items:center;gap:6px;margin-top:.35em;padding:6px 10px 5px 8px;border:1.5px solid #c3f53c;border-radius:7px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;line-height:1;color:#c3f53c;white-space:nowrap;rotate:-6deg;transform-origin:0 50%}
.pp-tag svg{width:10px;height:10px;fill:currentColor;flex:none}
.pilot-price .pp-spots{display:inline-flex;align-items:center;gap:9px;margin-top:4px;font-size:11.5px;letter-spacing:.12em;color:var(--bone-2)}
.pp-spots::before{content:'';width:7px;height:7px;border-radius:50%;background:#22e07a;box-shadow:0 0 0 3px rgba(34,224,122,.22);flex:none}
@media (forced-colors:active){.pp-strike path{stroke:CanvasText}.pp-tag{border-color:CanvasText}}
/* 95 · the new order's joints: the two copywriting cases, the fit lists inside "Who it's for", the toolkit strip under the founders, the little "next" links */
.case{display:grid;gap:clamp(12px,1.6vw,20px);margin-top:clamp(28px,4vw,56px);padding-top:clamp(20px,2.6vw,32px);border-top:1px dashed var(--line)}
.case-k{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.case-n{padding:5px 11px;border-radius:99px;background:#c3f53c;color:#0a0f0c;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.case-t{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2)}
.case-h{margin:0;font-size:clamp(28px,3.6vw,52px);line-height:1;color:var(--bone)}
.case-h .pw{color:var(--chroma)}
.case .vid-tst,.case .managed,.case #copyClient{margin-top:0}
.case-attr{margin:0;font-size:13.5px;line-height:1.5;color:var(--bone-3);font-style:italic}
.case-close{margin-top:clamp(24px,3vw,40px);padding:16px 20px;border-radius:18px;border:1px dashed var(--line)}
.case-close p{margin:0;font-size:16px;line-height:1.6;color:var(--text)}
.fit-wrap{margin-top:clamp(28px,4vw,52px);display:grid;gap:16px}
.fit-sub{margin:0;font-size:clamp(24px,2.6vw,38px);line-height:1.05;color:var(--bone)}
.tool-strip{margin-top:clamp(28px,4vw,52px);display:grid;gap:14px}
.tool-line{margin:0;max-width:70ch;font-size:15.5px;line-height:1.6;color:var(--text)}
.tool-line b{color:var(--text-hi)}
.tool-strip .soft{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.tool-strip .sw-tile{flex:0 0 clamp(150px,16vw,210px);scroll-snap-align:start}
.f-intro{display:grid;gap:12px;align-content:end}
.f-intro p{margin:0}
.next-link{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:#c3f53c;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.next-link:focus-visible,.tl4-pilot:focus-visible,.cta-pilot:focus-visible{outline:3px solid #c3f53c;outline-offset:3px;border-radius:6px}
.cg .next-link{justify-self:center}
.plan-cta .next-link{margin-left:8px}
.tl4-pilot{margin-top:4px;min-height:44px;padding:0;border:0;background:none;color:#c3f53c;font:inherit;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.cta-lead{margin:10px auto 0;max-width:46ch;text-align:center;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:var(--text)}
.cta-pilot{display:block;margin:10px auto 0;min-height:44px;padding:0 6px;border:0;background:none;color:#c3f53c;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
/* 95b · the closing lines sit on ink plates so they read over the pixel sunset */
#contact .cta-lead,#contact .cta-pilot{position:relative;z-index:2;display:table;margin:14px auto 0;padding:9px 16px;border-radius:12px;background:rgba(8,9,10,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#contact .cta-lead{color:#f6f1e6}
#contact .cta-pilot{margin-top:10px;color:#c3f53c}

/* ══════════════════════════════════════════════════════════════════════════
   96 · THE TRAILER SPEAKS: one plain line per service in one place, hand-drawn marks + notes pointing at the proof
   ════════════════════════════════════════════════════════════════════════ */
.ht-open{left:4.4%;bottom:13%;display:grid;justify-items:start;gap:.35cqw;visibility:hidden}
.ht-open.on{visibility:visible}
.ht-open .r1,.ht-open .r2{display:block;padding:.12em .26em .06em;border-radius:6px;background:rgba(10,15,12,.84);
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;text-transform:uppercase;font-size:5cqw;line-height:1;color:#f6f5ee}
.ht-open i{display:inline-block;font-style:normal;opacity:0;transform-origin:50% 80%}
.ht-open .lime{color:#c3f53c}
.ht-slrow{left:4.4%;bottom:4.5%;display:flex;align-items:flex-end;gap:.6cqw;visibility:hidden}
.ht-slrow.on{visibility:visible}
.ht-slrow .ht-slate{position:static;font-size:max(10px,1.35cqw);letter-spacing:.14em;color:rgba(246,245,238,.88)}
.ht-slarrow{width:5.6cqw;height:2.5cqw;overflow:visible;margin-bottom:.2cqw}
.ht-note{position:absolute;white-space:nowrap;font-family:'Caveat',cursive;font-weight:700;font-size:max(18px,4cqw);line-height:1.05;color:#c3f53c;opacity:0;
  text-shadow:0 0 .05em #0a0f0c,0 0 .1em #0a0f0c,0 0 .18em rgba(10,15,12,.85),0 .05em .35em rgba(10,15,12,.6);pointer-events:none}
.ht-note.sl{position:static;rotate:-3deg}
.ht-sk{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ht-sk path,.ht-slarrow path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1}
.ht-sk .sk,.ht-slarrow path{opacity:0}
.ht-sk .sk-u{stroke:rgba(10,15,12,.55);stroke-width:17}
.ht-sk .sk-l{stroke:#c3f53c;stroke-width:9}
.ht-sk .sk-ring path{vector-effect:non-scaling-stroke}
.ht-sk .sk-ring .sk-u{stroke-width:6}.ht-sk .sk-ring .sk-l{stroke-width:3.2}
.ht-slarrow .sk-u{stroke:rgba(10,15,12,.55);stroke-width:7}
.ht-slarrow .sk-l{stroke:#c3f53c;stroke-width:3.6}
.ht-cap{left:4.4%;bottom:12%;display:grid;justify-items:start;gap:.8cqw;visibility:hidden}
.ht-cap.on{visibility:visible}
.ht-cap .ht-chip{position:static;opacity:0;transform:none}
.ht-cap .ht-chip.on{opacity:1}
.ht-line{display:flex;align-items:baseline;gap:.26em;padding:.16em .38em .12em;border-radius:6px;background:rgba(10,15,12,.82);
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;text-transform:uppercase;font-size:4.2cqw;line-height:1.02;letter-spacing:-.005em;color:#f6f5ee}
.ht-mask{position:relative;display:block;height:1.08em;overflow:hidden}
.ht-ph{position:absolute;left:0;top:0;white-space:nowrap}
.ht-ph b{color:#c3f53c;font-weight:inherit}
.ht-comp{left:38%;top:16%;width:58%;min-height:12%}
.ht-pay{left:50%;white-space:nowrap;visibility:hidden;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;text-transform:uppercase;
  font-size:6.4cqw;line-height:1;color:#f6f5ee;text-shadow:0 .5cqw 2.5cqw rgba(0,0,0,.75);transform-origin:50% 50%}
.ht-pay.on{visibility:visible}
.ht-pay1{top:7.6%}
.ht-pay2{top:70.5%;color:#c3f53c}
.ht-stick{left:50%;top:62.5%;display:flex;align-items:center;gap:1.2cqw;padding:.9cqw 1.6cqw;border:2px solid #0a0f0c;border-radius:1.2cqw;background:#c3f53c;color:#0a0f0c;
  box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.35);font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;text-transform:uppercase;
  visibility:hidden;transform-origin:50% 50%}
.ht-stick.on{visibility:visible}
.ht-stick .st-k{font-size:3cqw;line-height:1}
.ht-stick .st-was{position:relative;font-size:3cqw;line-height:1;opacity:.72}
.ht-stick .st-was svg{position:absolute;left:-12%;top:-10%;width:124%;height:120%;overflow:visible}
.st-s{fill:none;stroke:#6d28d9;stroke-width:6;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.ht-stick .st-zero{display:inline-block;font-size:4.6cqw;font-weight:900;line-height:1}
.ht-words{mix-blend-mode:normal}
@media(max-width:620px){ .ht-note{font-size:max(15px,4cqw)} }
.ht-sk .sk{stroke-dashoffset:1}
.ht-sk .sk path{stroke-dashoffset:inherit}
@container (max-width: 520px){ .ht-tc{display:none} }

/* 97 · review fixes */
.upside .st-copy{position:relative;z-index:3}
#contact .lab{position:relative;z-index:2}
#contact .cta-sub{position:relative;z-index:2;display:table;margin:12px auto 0;padding:6px 12px;border-radius:10px;background:rgba(8,9,10,.72)}
#contact .cta-go{position:relative;z-index:2;display:flex;justify-content:center;margin-top:18px}
#contact .contact-meta{position:relative;z-index:2}
#contact .contact-meta .cm{padding:12px 14px;border-radius:12px;background:rgba(8,9,10,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ht-steps li small{font-size:.86em;opacity:.8;text-transform:none;letter-spacing:.02em}
/* the case: the creator's own words next to his numbers, one card */
#social.case{grid-template-columns:1fr}
@media(min-width:960px){
  #social.case{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:start;column-gap:clamp(16px,2vw,28px)}
  #social.case .case-k,#social.case .case-h{grid-column:1 / -1}
  #social.case .vid-tst{grid-template-columns:1fr}
}
#social.case .vid-tst .result-svc{display:none}
/* trailer */
.ht-slrow .ht-slate{padding:.25em .5em;border-radius:4px;background:rgba(10,15,12,.82)}
.ht-words .w3{font-size:max(12px,3.4cqw);color:#f6f5ee;background:rgba(10,15,12,.8);padding:.2em .5em;border-radius:4px;letter-spacing:.2em}
.ht-stick .st-was{opacity:1;color:#0a0f0c;font-size:3.4cqw}
.st-s{stroke-width:2.5}
.ht-end .ht-tc{color:#0a0f0c}
.ht-end .ht-c{border-color:rgba(10,15,12,.5)}
.hm-pre{font-size:max(10px,1.75cqw)}
@container (max-width: 520px){
  .ht-mail{left:58%;width:39%}
  .hm-sub{font-size:max(12px,2.2cqw)}
  .hm-from{font-size:max(10px,1.9cqw)}
  .hm-pre,.hm-now{display:none}
  .ht-slrow{left:6%;bottom:6%}
  .st-s{stroke-width:2}
}
#hero.hs .sunny{z-index:5}
@media(max-width:959px){ #hero.hs .sunny{display:none} }
#social.case .managed h3{font-size:clamp(26px,2.6vw,40px);overflow-wrap:anywhere}
#social.case .managed .breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}

/* 98 · second review round */
/* headings, badges and eyebrows always sit above the thread (z 3); the closing lines too */
.sec-head{z-index:4}
#contact .big-cta,#contact .cta-lead,#contact .cta-go,#contact .cta-pilot,#contact .cta-sub,#contact .contact-meta{z-index:5}
#contact .cta-sub{background:rgba(8,9,10,.9);color:var(--bone-2)}
/* Services header stacks on phones like every other section */
@media(max-width:860px){ #about .sec-head{grid-template-columns:1fr} }
/* eyebrows wrap cleanly: the world tag drops to its own line */
@media(max-width:600px){ .lab{flex-wrap:wrap;row-gap:4px} .lab .world{flex-basis:100%;white-space:nowrap} }
/* twinkles never sit on words: gutters on desktop, none on phones */
@media(max-width:759px){ .px-star{display:none} }
/* the flip grid: a card shows its caption only once it is (nearly) upright */
.wg-card{transform-origin:50% 50%}
.wg-media,.wg-info{backface-visibility:hidden}
.wg-info{opacity:clamp(0,calc(var(--up) * 3 - 2),1)}
/* the pilot price: one clean pen stroke through the middle; the old price readable under it */
.pp-s2{display:none}
.pp-s1{stroke-width:2.6}
.pp-strike{top:50%}
.pilot-price .pp-was{font-size:24px;color:var(--bone-2)}
/* the pill fits one line on small phones */
/* founder cards: the flip button never covers the last lines */
@media(max-width:759px){ .person-body{padding-bottom:72px} }
/* FAQ: open shows a minus, not a bar */
.qa[open] summary i{transform:rotate(180deg)}
/* inline links keep their tap area without inflating the line */
.offer-more .lnk,.case-close .lnk{display:inline;min-height:0;padding-block:12px;margin-block:-12px}
/* the smallest mono text is readable on phones */
@media(max-width:759px){ .offer-fine p,.person-kit{font-size:12.5px;letter-spacing:.02em;line-height:1.6;color:var(--bone-2)} }
/* violet marks stay off the stacked creator case on phones */
@media(max-width:959px){ #social > .mk-layer{display:none} }
/* trailer: chips and pills never under 10px; mobile layout clears the card and plates */
.ht-pill{font-size:max(10px,1.8cqw)}
.ht-chip-k{font-size:max(10px,1.9cqw)}
.ht-rec{width:max(6px,1.1cqw);height:max(6px,1.1cqw)}
@container (max-width: 520px){ .ht-mail{top:9%} .ht-open{bottom:17%} .ht-slrow .ht-slate{letter-spacing:.08em} }
/* the sun sits beside the cards, clear of the film */
#hero.hs .sunny{z-index:1;top:auto;bottom:clamp(64px,10vh,104px);right:clamp(16px,3vw,44px)}

/* 99 · performance: CSS loops pause while their block is off screen (see offscreenPause() in cc.js) */
.js body > :not(.inview):not(#nav):not(.grain),.js body > :not(.inview):not(#nav):not(.grain) *,
.js body > :not(.inview):not(#nav):not(.grain) *::before,.js body > :not(.inview):not(#nav):not(.grain) *::after{animation-play-state:paused!important}
#lb:not(.open) *,#lb:not(.open) *::before,#lb:not(.open) *::after{animation:none!important}
/* 99b · fewer layers: the browser promotes these on its own while they actually move */
.mk,.wg-card,.tw,.tl,.tm-row,.bloom{will-change:auto!important}
/* the trailer's per-frame overlay updates stay inside the box (no page-wide layout) */
.ht-box{contain:layout paint}
.ht-ov{contain:strict}

/* 99d · the reading bar moves with transform (no layout per scroll) */
#prog{width:100% !important;transform-origin:0 50%;transform:scaleX(0);will-change:transform}

/* 99e · phones: no full-screen blended grain and no live blur behind glass panels (each forces the whole screen to recompose every scroll frame) */
@media (max-width:759px){
  .grain{display:none!important}
  *,*::before,*::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  #nav.stuck{background:rgba(8,9,10,.95)}
}

/* pilot spots full (site-config …PilotFull): the waitlist state gets an amber dot instead of the green one */
.hc-pill.hp-pilot.is-full .hp-dot,.pp-spots.is-full::before{background:#ffb14a;box-shadow:0 0 0 3px rgba(255,177,74,.28)}
.hc-pill.hp-pilot.is-full{text-align:left;line-height:1.35}

/* change 7 · industry: two equal offers (recruitment film + company and project films), stacked on phones; the real-estate pointer card */
@media(min-width:901px){.ind-offer{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ind-offer .offer-card{grid-template-rows:auto 1fr auto;align-content:stretch}
a.if-card.if-more{text-decoration:none;color:inherit;border-style:dashed;background:transparent;transition:border-color .2s}
a.if-card.if-more:hover,a.if-card.if-more:focus-visible{border-color:#c3f53c}
.if-more .if-go{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c3f53c}

/* change 9 (v2): the three cities as glowing type, no bubbles; --pc = the city's brand colour */
.cities{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 0;vertical-align:middle;font:700 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.city-pill{display:inline-flex;align-items:center;gap:7px;color:var(--pc,#00d563);white-space:nowrap;
  text-shadow:0 0 10px color-mix(in srgb,var(--pc,#00d563) 70%,transparent),0 0 24px color-mix(in srgb,var(--pc,#00d563) 35%,transparent)}
.city-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pc,#00d563);flex:none;
  box-shadow:0 0 6px var(--pc,#00d563),0 0 14px var(--pc,#00d563)}
.city-pill + .city-pill{margin-left:0}
.city-pill::after{content:"×";margin:0 12px;color:currentColor;opacity:.35;text-shadow:none}
.city-pill::after{color:#f6f5ee}
.cities-rest{color:rgba(246,245,238,.72);text-shadow:0 0 12px rgba(246,245,238,.35);font-weight:500}
/* light backgrounds (hero strip, pop-up card): deeper ink versions of the same colours, softer glow */
#hero .cities .city-pill,#pop .cities .city-pill{color:color-mix(in srgb,var(--pc) 58%,#0a0f0c);
  text-shadow:0 0 12px color-mix(in srgb,var(--pc) 55%,transparent)}
#hero .cities .city-pill::after,#pop .cities .city-pill::after{color:#0a0f0c}
#hero .cities-rest,#pop .cities-rest{color:rgba(10,15,12,.62);text-shadow:0 0 10px rgba(255,255,255,.9)}
#hero .cities .city-pill::before,#pop .cities .city-pill::before{box-shadow:0 0 5px var(--pc),0 0 10px color-mix(in srgb,var(--pc) 60%,transparent)}

/* change 5 · /realestate: the hero loop (own class: .ind-vid carries the industry poster), the five videos, the inline guide form, the proof case */
.re-vid{position:relative;z-index:2;margin:0;border-radius:22px;overflow:hidden;background:#0a0f0c url(assets/proj-drone.jpg) center/cover;aspect-ratio:16/9;
  box-shadow:0 40px 80px -36px rgba(10,15,12,.55),0 0 0 1px rgba(10,15,12,.12)}
.re-vid video{width:100%;height:100%;object-fit:cover;display:block}
.re-vid figcaption{position:absolute;left:14px;bottom:12px;padding:6px 12px;border-radius:99px;background:rgba(10,15,12,.66);color:#f6f5ee;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.re-five .if-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c3f53c}
.re-guide{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media(min-width:961px){.re-guide{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.re-guide-txt{display:grid;gap:clamp(14px,1.6vw,20px);align-content:start}
.re-guide-h{margin:0;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 74,'wght' 820;text-transform:uppercase;font-size:clamp(28px,3.2vw,48px);line-height:1;color:var(--bone);text-wrap:balance}
.re-bullets{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.re-bullets li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:15.5px;line-height:1.6;color:var(--text)}
.re-bullets svg{width:18px;height:18px;margin-top:3px;fill:none;stroke:#c3f53c;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.re-guide-card{display:grid;gap:14px;padding:clamp(20px,2.6vw,32px);border-radius:22px;background:var(--panel);border:1px solid var(--line)}
.re-guide-intro{margin:0;font-size:15px;line-height:1.55;color:var(--text)}
.re-guide-form{grid-template-columns:1fr}
.re-guide-form .ff-send .btn-art{width:100%;justify-content:center}
.cc-form.sent .ff,.cc-form.sent .ff-send,.cc-form.sent .form-note{display:none}
.form-done{grid-column:1 / -1;display:grid;gap:12px}
.form-done[hidden]{display:none}
.form-done p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text)}
.form-done a{color:#c3f53c;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.re-case-body{margin:0;max-width:70ch;font-size:clamp(15.5px,1.2vw,18px);line-height:1.6;color:var(--text)}
.re-samples-intro{margin:clamp(28px,4vw,52px) 0 clamp(16px,2vw,24px);max-width:70ch;font-size:15.5px;line-height:1.6;color:var(--text)}
.re-final-sub{margin:clamp(26px,3vw,36px) auto 0;max-width:52ch;font-size:clamp(15.5px,1.2vw,18px);line-height:1.55;color:var(--text)}

/* change 6 · guide.html: the distraction-free landing page for the free real estate guide (no nav: the wordmark sits in its own .guide-brand) */
body.guide{min-height:100svh;display:flex;flex-direction:column}
.guide-top{width:100%;box-sizing:border-box;padding-block:clamp(20px,3vw,34px) 0}
.guide-brand{display:inline-flex;align-items:flex-start;gap:5px;color:var(--bone)}
.guide-brand .bw .swc{color:var(--violet)}
.guide-brand:focus-visible{outline:2px solid var(--violet);outline-offset:6px;border-radius:4px}
.guide-main{flex:1;display:flex;align-items:center;padding-block:clamp(28px,6vw,80px) clamp(40px,6vw,88px)}
.guide-main .re-guide{width:100%;box-sizing:border-box}
.guide-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#c3f53c}
body.guide .re-guide-h{font-size:clamp(32px,4.2vw,60px)}
body.guide .btn-art{--sh:#b07bff}   /* the same violet offset shadow the buttons get in the other pages' sections */
.guide-foot{width:100%;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-block:20px 28px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.form-done a.btn-art{justify-self:start;text-decoration:none;color:var(--fg);font-weight:800}
.form-done a:not(.btn-art){word-break:break-word}

/* ══ change 8 · "Industries" in the menu: a quiet two-link panel on desktop, a labelled group in the phone menu ══ */
.nav-grp{position:relative;display:inline-flex;align-items:center}
.nav-grp-t{
  appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;cursor:pointer;
  position:relative;display:inline-flex;align-items:center;padding:9px 8px;white-space:nowrap;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#0a0f0c;transition:color .25s var(--ease);
}
.nav-grp-t span{padding:0 .2em}
.nav-grp-t::before,.nav-grp-t::after{display:inline-block;color:rgba(10,15,12,.3);transition:transform .45s cubic-bezier(.34,1.56,.64,1),color .25s}
.nav-grp-t::before{content:'['}
.nav-grp-t::after{content:']'}
.nav-car{width:9px;height:6px;margin:0 .1em 0 .05em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.nav-grp:hover .nav-grp-t::before,.nav-grp.open .nav-grp-t::before{transform:translateX(-4px) rotate(-10deg);color:#d8360f}
.nav-grp:hover .nav-grp-t::after,.nav-grp.open .nav-grp-t::after{transform:translateX(4px) rotate(10deg);color:#d8360f}
.nav-grp:hover .nav-car,.nav-grp.open .nav-car,.nav-grp:focus-within .nav-car{transform:rotate(180deg)}
.nav-grp-t:focus-visible{outline:2px solid var(--violet-deep);outline-offset:2px;border-radius:4px}
#nav.stuck .nav-grp-t{color:#f6f5ee}
#nav.stuck .nav-grp-t::before,#nav.stuck .nav-grp-t::after{color:rgba(239,233,220,.28)}
#nav.stuck .nav-grp:hover .nav-grp-t::before,#nav.stuck .nav-grp:hover .nav-grp-t::after,
#nav.stuck .nav-grp.open .nav-grp-t::before,#nav.stuck .nav-grp.open .nav-grp-t::after{color:#c3f53c}
@media(min-width:1021px){
  .nav-sub{
    position:absolute;top:100%;left:50%;z-index:5;min-width:236px;margin-top:8px;padding:8px;
    display:grid;gap:2px;border-radius:16px;
    background:rgba(10,12,14,.92);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid rgba(239,233,220,.12);box-shadow:0 18px 44px -20px rgba(0,0,0,.7);
    opacity:0;visibility:hidden;transform:translate(-50%,-4px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s;
  }
  .nav-sub::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}  /* hover bridge */
  .nav-grp:hover .nav-sub,.nav-grp:focus-within .nav-sub,.nav-grp.open .nav-sub{
    opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s var(--ease),transform .2s var(--ease);
  }
  #nav .nav-x .nav-sub a{
    display:flex;padding:11px 12px;border-radius:10px;font-size:11px;letter-spacing:.12em;color:rgba(246,245,238,.86);
  }
  #nav .nav-x .nav-sub a::before,#nav .nav-x .nav-sub a::after{content:none}
  #nav .nav-x .nav-sub a:hover,#nav .nav-x .nav-sub a:focus-visible{background:rgba(246,245,238,.08);color:#c3f53c}
  #nav .nav-x .nav-sub a[aria-current="page"]{color:#c3f53c}
}
@media(min-width:1021px) and (max-width:1239px){.nav-grp-t{font-size:10.5px;padding:8px 4px;letter-spacing:.08em}}
@media(max-width:1020px){
  .nav-x{overflow-y:auto;justify-content:flex-start;padding-top:max(96px,calc(50vh - 290px))}
  .nav-grp{flex-direction:column;align-items:flex-start;width:100%;margin-top:8px}
  #nav .nav-x .nav-grp-t{cursor:default;padding:6px 0 2px;font-weight:400;font-size:11px;letter-spacing:.14em;color:rgba(246,245,238,.5)}
  .nav-grp-t::before,.nav-grp-t::after,.nav-car{display:none}
  .nav-sub{display:flex;flex-direction:column;align-items:flex-start;padding-left:22px}
  .nav-x .nav-sub a{font-size:clamp(26px,7.4vw,46px);white-space:normal;max-width:100%}
  .nav-x .nav-sub a[aria-current="page"]{color:#c3f53c}
}

/* change 8 · homepage "Who it's for": three cards */
@media(min-width:1021px){#who .who{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:761px) and (max-width:1020px){#who .who .who-card:last-child{grid-column:1 / -1}#who .who .who-card:last-child img{aspect-ratio:21/9}}

/* 100 · homepage hero: industry chooser (every visitor picks their page in two seconds) */
.hx-pick{margin:18px 0 22px}
.hx-pick-q{display:block;font:600 11px/1.2 var(--mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:rgba(10,15,12,.62);margin-bottom:10px}
.hx-pick-row{display:flex;flex-wrap:wrap;gap:8px}
.hx-pick-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px 10px 16px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1.5px solid #0a0f0c;color:#0a0f0c;font-weight:700;font-size:15px;line-height:1.1;text-decoration:none;
  box-shadow:inset 5px 0 0 var(--pc);transition:background .2s,transform .2s,box-shadow .2s}
.hx-pick-b svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hx-pick-b:hover,.hx-pick-b:focus-visible{background:var(--pc);transform:translateY(-2px);box-shadow:0 4px 0 #0a0f0c}
.hx-pick-b:focus-visible{outline:2px solid #0a0f0c;outline-offset:3px}
@media(max-width:520px){.hx-pick-row{flex-direction:column;align-items:stretch}.hx-pick-b{justify-content:space-between;font-size:15px}}

/* 101 · homepage CTA hierarchy: the quiet "Rather talk first? Book a call" link under/next to every primary button */
.cta-alt{background:none;border:0;padding:6px 2px;font:500 14.5px/1.3 var(--sans,inherit);color:inherit;opacity:.82;cursor:pointer;text-align:left}
.cta-alt span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;font-weight:700}
.cta-alt:hover,.cta-alt:focus-visible{opacity:1}
.cta-alt:hover span{text-decoration-color:#c3f53c}
.cta-alt:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
#hero .cta-alt{color:#0a0f0c}
.tl4-alt{display:block;margin:12px auto 0;color:#f6f5ee}
.plan-cta .cta-alt,.row-alt{color:inherit}
.oc-alt{justify-self:start;margin-top:-6px}
.cta-final-alt{display:table;margin:14px auto 0;color:#f6f5ee;text-align:center;opacity:1;background:rgba(8,9,10,.78);padding:8px 16px;border-radius:10px;position:relative;z-index:5}
.cta-final-alt span{text-decoration-color:#c3f53c}

/* 102 · lead magnet pop-up (#lm): same card as #pop, light fields */
.lm{position:fixed;inset:0;z-index:170;display:grid;place-items:center;padding:clamp(16px,4vw,48px);background:rgba(6,9,7,.62);
  backdrop-filter:blur(10px);opacity:0;transition:opacity .32s var(--ease)}
.lm[hidden]{display:none}
.lm.open{opacity:1}
.lm .lm-card{max-width:560px;max-height:min(92vh,760px);overflow:auto;transform:translateY(14px) scale(.985);transition:transform .38s var(--ease-out)}
.lm.open .lm-card{transform:none}
.lm-step{display:grid;gap:14px}
.lm-step[hidden]{display:none}
.lm h3{margin:0;color:#0a0f0c;font-size:clamp(28px,3.4vw,40px);line-height:.94}
.lm h3.lm-title{font-size:clamp(22px,2.6vw,30px);line-height:1.02;padding-right:30px}
.lm-sub,.lm-desc{margin:0;font-size:15px;line-height:1.55;color:#3a403c}
.lm-picks{display:grid;gap:8px;margin-top:4px}
.lm-picks .hx-pick-b{justify-content:space-between;width:100%;background:#fff}
.lm-back{justify-self:start;background:none;border:0;padding:0;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(10,15,12,.6);cursor:pointer}
.lm-back:hover{color:#0a0f0c}
.lm-back[hidden]{display:none}
.lm .cc-form{grid-template-columns:1fr}
.lm .ff label{color:#2f3531}
.lm .ff label em{color:#b3261e}
.lm .ff input{background:#fff;color:#0a0f0c;border-color:rgba(10,15,12,.22)}
.lm .ff input:focus{border-color:#0a0f0c;box-shadow:0 0 0 3px rgba(195,245,60,.9)}
.lm .ff [aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
.lm .ff-err{color:#b3261e;font-weight:600}
.lm .form-note{color:#1d5b2a;font-weight:600}
.lm .form-done p{color:#0a0f0c}
.lm .form-done a{color:#0a0f0c;text-decoration-color:#7ec51f}
.lm .lm-x:focus-visible,.lm .lm-pick:focus-visible{outline:2px solid #0a0f0c;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.lm,.lm .lm-card{transition:none}}