/* ==========================================================================
   VANTA LABS — poster stock. Saturated colour worlds, liquid edges,
   oversized condensed caps, hard borders. No dependencies.
   ========================================================================== */

:root{
  --paper:#f2ede3; --paper-2:#e9e2d4; --paper-3:#fbf8f2;
  --ink:#0a0a0a; --ink-2:#2b2721; --muted:#6e6657;
  --blue:#2a3bdb; --verm:#f4511e; --sun:#f2b705;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,monospace;
  --hand:"Caveat",cursive;
  --wrap:1200px; --gut:clamp(18px,4.5vw,44px);
  --sec:clamp(72px,10vw,140px);
  --bw:2px; --shadow:5px 5px 0 var(--ink); --shadow-lg:8px 8px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.62;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
code{font-family:var(--mono);font-size:.9em;background:rgba(10,10,10,.1);padding:1px 5px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);position:relative;z-index:2}

.kick{font-family:var(--mono);font-size:clamp(10px,1.08vw,12px);text-transform:uppercase;letter-spacing:.17em;color:var(--blue)}
.kick--on{color:rgba(251,248,242,.76)}
.kick--ink{color:rgba(10,10,10,.6)}

/* ---- oversized poster type ---- */
.mega{margin:0;display:flex;flex-direction:column;gap:clamp(0px,.3vw,6px)}
.mega--c{align-items:center;text-align:center}
.mega__l{display:block;white-space:nowrap;font-variation-settings:"wdth" 80,"wght" 900;
  text-transform:uppercase;font-size:clamp(50px,13.2vw,196px);line-height:.82;letter-spacing:-.025em;will-change:transform}
.mega__l--out{color:transparent;-webkit-text-stroke:clamp(1.5px,.22vw,3.5px) var(--ink)}
.mega__l--fill{color:var(--verm)}
.mega__l--on{color:var(--paper-3)}
.mega__l--outw{color:transparent;-webkit-text-stroke:clamp(1.5px,.22vw,3.5px) var(--paper-3)}
.big{font-variation-settings:"wdth" 84,"wght" 900;text-transform:uppercase;
  font-size:clamp(32px,5.4vw,70px);line-height:.92;letter-spacing:-.018em;margin-top:14px}

/* ---- ticker / strip ---- */
.tick,.strip{overflow:hidden;white-space:nowrap;border-block:var(--bw) solid var(--ink)}
.tick{background:var(--ink);color:var(--paper-3);border-top:0}
.strip{background:var(--blue);color:var(--paper-3);padding-block:12px}
.tick__t,.strip__t{display:flex;width:max-content;animation:slide 32s linear infinite}
.strip__t{animation-duration:26s}
.tick__t>div,.strip__t>div{display:flex;align-items:center;flex:none}
.tick span,.strip span{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;padding:9px 18px}
.strip span{font-size:clamp(13px,1.5vw,18px);font-family:var(--display);font-variation-settings:"wdth" 86,"wght" 800;padding:0 16px}
.tick i,.strip i{font-style:normal;opacity:.5;font-size:10px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---- header ---- */
.hdr{position:sticky;top:0;z-index:70;background:var(--paper);border-bottom:var(--bw) solid var(--ink)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:12px}
.logo{display:inline-flex;align-items:center;gap:10px}
.logo b{font-variation-settings:"wdth" 84,"wght" 900;text-transform:uppercase;font-size:20px;letter-spacing:-.01em}
.logo b em{font-style:normal;color:var(--blue)}
.logo--on b{color:var(--paper-3)}
.logo__chrome{width:34px;height:26px;border:var(--bw) solid currentColor;display:flex;align-items:flex-start;gap:3px;padding:4px}
.logo__chrome i{width:4px;height:4px;border-radius:50%;background:currentColor}
.nav{display:flex;gap:24px}
.nav a{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.11em}
.nav a:hover{color:var(--blue)}
.burger{display:none;border:var(--bw) solid var(--ink);background:var(--paper);padding:8px 10px;cursor:pointer}
.burger i{display:block;width:18px;height:2px;background:var(--ink);margin:3.5px 0}

.btn{display:inline-block;border:var(--bw) solid var(--ink);padding:11px 20px;background:var(--paper-3);
  font-variation-settings:"wdth" 88,"wght" 800;text-transform:uppercase;font-size:13px;letter-spacing:.02em;
  box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn--lg{padding:15px 26px;font-size:15px}
.btn--blue{background:var(--blue);color:var(--paper-3)}
.btn--sun{background:var(--sun)}
.btn--ghost{background:transparent}
.btn--outline{background:transparent;color:var(--paper-3);border-color:var(--paper-3);box-shadow:5px 5px 0 var(--blue)}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,110px)}
.hero__in{display:flex;flex-direction:column;gap:clamp(20px,3vw,34px)}
.blob{position:absolute;z-index:0;pointer-events:none;border-radius:58% 42% 37% 63%/48% 55% 45% 52%}
.blob--1{background:var(--blue);opacity:.15;width:min(44vw,540px);aspect-ratio:1;right:-10vw;top:-8vw;animation:morph 19s ease-in-out infinite}
.blob--2{background:var(--verm);opacity:.17;width:min(34vw,420px);aspect-ratio:1;left:-9vw;bottom:-12vw;animation:morph 24s ease-in-out infinite reverse}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(18px,3vw,44px);align-items:end;margin-top:6px}
.lede{font-size:clamp(16px,1.35vw,19px);max-width:52ch}
.lede em{font-style:italic;color:var(--blue)}
.hero__act{display:flex;gap:12px;flex-wrap:wrap}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px;border-top:var(--bw) solid var(--ink);padding-top:16px}
.trust li{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;border:var(--bw) solid var(--ink);padding:6px 11px;background:var(--paper-2)}
.scribble{font-family:var(--hand);font-size:clamp(17px,1.9vw,23px);color:var(--blue);transform:rotate(-2.5deg);margin-top:4px}
.stk{position:absolute;z-index:4;font-family:var(--mono);font-weight:700;font-size:clamp(9px,1.05vw,12px);
  text-transform:uppercase;letter-spacing:.1em;background:var(--sun);color:var(--ink);
  border:var(--bw) solid var(--ink);padding:9px 14px;box-shadow:var(--shadow)}
.stk--hero{right:0;top:-6px;transform:rotate(7deg)}
.stk--a{left:clamp(10px,4vw,70px);top:clamp(70px,9vw,130px);transform:rotate(-7deg)}
.stk--b{right:clamp(10px,4vw,70px);bottom:clamp(70px,9vw,130px);transform:rotate(6deg);background:var(--blue);color:var(--paper-3)}

/* ---- sections + liquid edges ---- */
.sec{position:relative;overflow:hidden;padding-block:var(--sec)}
.wave{position:absolute;top:-1px;left:0;width:100%;height:clamp(26px,3.6vw,56px);display:block;z-index:3;pointer-events:none}
.wave--paper{fill:var(--paper)} .wave--blue{fill:var(--blue)} .wave--verm{fill:var(--verm)}
.wave--sun{fill:var(--sun)} .wave--ink{fill:var(--ink)}
.sec--blue{background:var(--blue);color:var(--paper-3)}
.sec--verm{background:var(--verm);color:var(--ink)}
.sec--sun{background:var(--sun);color:var(--ink)}
.sec--paper{background:var(--paper)}
.sec--ink{background:var(--ink);color:var(--paper-3)}
.head{margin-bottom:clamp(30px,4.4vw,58px)}

/* ---- cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.card{background:var(--paper-3);color:var(--ink);border:var(--bw) solid var(--ink);padding:22px;box-shadow:var(--shadow-lg);transition:transform .14s,box-shadow .14s}
.card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--sun)}
.card__n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--verm);margin-bottom:12px}
.card h3{font-variation-settings:"wdth" 86,"wght" 800;text-transform:uppercase;font-size:21px;margin-bottom:7px}
.card p{font-size:15px;color:var(--ink-2)}

/* ---- rank slab ---- */
.slabby{text-align:center}
.slabby .kick{margin-bottom:clamp(18px,2.6vw,34px)}
.pills{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(7px,1.2vw,14px);margin-top:clamp(26px,3.6vw,46px);padding-inline:var(--gut)}
.pills span{font-family:var(--mono);font-size:clamp(9px,1vw,11px);text-transform:uppercase;letter-spacing:.13em;border:var(--bw) solid var(--ink);padding:7px 13px}
.note{max-width:56ch;margin:clamp(22px,3vw,34px) auto 0;padding-inline:var(--gut);font-size:clamp(15px,1.25vw,17px)}
.note--on{color:rgba(251,248,242,.82)}

/* ---- steps ---- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:var(--bw) solid var(--ink);background:var(--ink)}
.steps li{background:var(--sun);padding:26px 22px;display:flex;flex-direction:column;gap:7px}
.steps li+li{border-left:var(--bw) solid var(--ink)}
.steps b{font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.steps h3{font-variation-settings:"wdth" 86,"wght" 800;text-transform:uppercase;font-size:20px}
.steps p{font-size:14.5px;color:var(--ink-2);flex:1}
.steps span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;border-top:var(--bw) solid var(--ink);padding-top:9px}

/* ---- work window ---- */
.win{border:var(--bw) solid var(--ink);background:var(--paper-3);box-shadow:var(--shadow-lg)}
.win__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:var(--bw) solid var(--ink);background:var(--paper-2)}
.win__bar i{width:10px;height:10px;border:var(--bw) solid var(--ink);border-radius:50%}
.win__bar span{margin-left:10px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:var(--bw) solid var(--ink);transition:background .12s}
.row:hover{background:var(--sun)}
.row span{font-variation-settings:"wdth" 88,"wght" 800;font-size:clamp(14px,1.5vw,18px);display:flex;flex-direction:column}
.row small{font-family:var(--mono);font-weight:400;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:3px}
.row b{font-variation-settings:"wdth" 84,"wght" 900;font-size:clamp(19px,2.3vw,28px);display:flex;align-items:baseline;gap:6px}
.row b em{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.win__tot{display:flex;align-items:baseline;gap:10px;padding:16px 18px;background:var(--ink);color:var(--paper-3)}
.win__tot b{font-variation-settings:"wdth" 84,"wght" 900;font-size:clamp(26px,3.4vw,42px)}
.win__tot span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.13em;opacity:.7}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(22px,3vw,38px)}
.stats div{border:var(--bw) solid var(--ink);padding:20px;background:var(--paper-2)}
.stats b{display:block;font-variation-settings:"wdth" 84,"wght" 900;font-size:clamp(30px,3.8vw,48px);line-height:1}
.stats div:nth-child(2) b{color:var(--blue)} .stats div:nth-child(3) b{color:var(--verm)}
.stats span{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.11em;margin-top:7px;color:var(--muted)}

/* ---- cta / footer ---- */
.cta{text-align:center}
.cta .kick{margin-bottom:clamp(18px,2.6vw,32px)}
.cta__act{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,3.6vw,44px)}
.foot{background:var(--ink);color:var(--paper-3);padding-block:clamp(44px,6vw,72px) 26px}
.foot__in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
.foot__in>div>p{margin-top:14px;font-size:14px;color:#a3a39b;max-width:34ch}
.foot h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#80807a;margin-bottom:12px}
.foot__in a:not(.logo){display:block;padding:5px 0;font-size:14px}
.foot__in a:not(.logo):hover{color:var(--sun)}
.foot__bot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:2px solid #272723;margin-top:32px;padding-top:18px;
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:#80807a}

/* ---- responsive ---- */
@media(max-width:960px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps li+li{border-left:0}
  .steps li:nth-child(even){border-left:var(--bw) solid var(--ink)}
  .steps li:nth-child(-n+2){border-bottom:var(--bw) solid var(--ink)}
  .hero__grid{grid-template-columns:1fr;align-items:start}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot__in{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .nav{display:none} .burger{display:block}
  .hdr .btn--blue{display:none}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps li:nth-child(even){border-left:0}
  .steps li:not(:last-child){border-bottom:var(--bw) solid var(--ink)}
  .foot__in{grid-template-columns:1fr}
  .stk--a,.stk--b,.stk--hero{display:none}
  .row{flex-direction:column;align-items:flex-start;gap:7px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tick__t,.strip__t,.blob{animation:none}
  .mega__l{transform:none!important}
}

/* ---- mobile nav panel ---- */
@media(max-width:680px){
  .nav.is-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:var(--bw) solid var(--ink);padding:8px var(--gut) 14px}
  .nav.is-open a{padding:11px 0;border-bottom:1px solid rgba(10,10,10,.12)}
}


/* ---- boot intro ---- */
.boot{display:none}
.booting{overflow:hidden}
.booting .boot{display:flex;position:fixed;inset:0;z-index:999;background:var(--ink);
  align-items:center;justify-content:center;padding:var(--gut);transition:opacity .5s ease,visibility .5s}
.boot.is-done{opacity:0;visibility:hidden;pointer-events:none}
.boot__win{width:min(620px,100%);border:var(--bw) solid var(--paper-3);background:#121210;box-shadow:8px 8px 0 var(--blue)}
.boot__bar{display:flex;align-items:center;gap:6px;padding:10px 13px;border-bottom:var(--bw) solid var(--paper-3)}
.boot__bar i{width:10px;height:10px;border-radius:50%;border:var(--bw) solid var(--paper-3)}
.boot__bar i:first-child{background:var(--verm);border-color:var(--verm)}
.boot__bar i:nth-child(2){background:var(--sun);border-color:var(--sun)}
.boot__bar span{margin-left:10px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#8d8d85}
.boot__code{margin:0;padding:20px;font-family:var(--mono);font-size:clamp(11px,1.35vw,14px);line-height:1.85;
  color:var(--paper-3);min-height:232px;white-space:pre-wrap;word-break:break-word}
.boot__code .ok{color:var(--sun)}
.boot__code .cmd{color:var(--blue-l,#7d8bff)}
.boot__code .go{color:var(--verm)}
.boot__cur{display:inline-block;width:9px;height:1.05em;background:var(--sun);vertical-align:-2px;animation:blink .9s step-end infinite}
@keyframes blink{50%{opacity:0}}
.boot__skip{position:absolute;right:var(--gut);bottom:var(--gut);background:transparent;border:var(--bw) solid #55554f;
  color:#9a9a92;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.13em;padding:8px 13px;cursor:pointer}
.boot__skip:hover{border-color:var(--paper-3);color:var(--paper-3)}
@media(prefers-reduced-motion:reduce){.booting .boot{display:none}.booting{overflow:auto}}

/* ---- faq ---- */
.sec--paper2{background:var(--paper-2)}
.wave--paper2{fill:var(--paper-2)}
.note--l{margin-left:0;margin-right:auto;padding-inline:0;max-width:52ch;text-align:left;margin-top:16px}
.faq{border:var(--bw) solid var(--ink);background:var(--paper-3);box-shadow:var(--shadow-lg)}
.faq details{border-bottom:var(--bw) solid var(--ink)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;display:flex;align-items:center;gap:14px;
  font-variation-settings:"wdth" 86,"wght" 800;text-transform:uppercase;font-size:clamp(14px,1.55vw,18px);
  letter-spacing:-.005em;transition:background .12s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:20px;font-weight:400;line-height:1;flex:none}
.faq details[open] summary{background:var(--sun)}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:var(--sun)}
.faq details>div{padding:4px 22px 22px;max-width:70ch}
.faq details>div p+p{margin-top:12px}
.faq details>div p{font-size:15.5px;color:var(--ink-2)}
@media(max-width:680px){.faq summary{padding:15px 16px}.faq details>div{padding:4px 16px 18px}}

/* ---- print grain: makes flat colour read as stock, not screen ---- */
.grain{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.055;
  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- blobs: actually liquid ---- */
.blob--1{opacity:.22}
.blob--2{opacity:.2}
.blob--3{position:absolute;z-index:0;pointer-events:none;background:var(--sun);opacity:.26;
  width:min(20vw,230px);aspect-ratio:1;right:14vw;bottom:-4vw;
  border-radius:52% 48% 61% 39%/44% 58% 42% 56%;animation:morph 16s ease-in-out infinite}
@keyframes morph{
  0%,100%{border-radius:58% 42% 37% 63%/48% 55% 45% 52%;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  33%{border-radius:36% 64% 58% 42%/63% 36% 64% 37%;transform:translate3d(0,0,0) rotate(16deg) scale(1.12)}
  66%{border-radius:68% 32% 26% 74%/36% 68% 32% 64%;transform:translate3d(0,0,0) rotate(-12deg) scale(.93)}
}
.blob{transition:translate .5s cubic-bezier(.2,.7,.3,1)}

/* ---- hero entrance: clip-wipe, no transform conflict with drift ---- */
.js .mega__l{clip-path:inset(0 0 108% 0)}
.ready .mega__l,.no-boot .mega__l{animation:wipe .78s cubic-bezier(.19,.86,.24,1) forwards}
.ready .mega__l:nth-child(2),.no-boot .mega__l:nth-child(2){animation-delay:.1s}
.ready .mega__l:nth-child(3),.no-boot .mega__l:nth-child(3){animation-delay:.2s}
@keyframes wipe{to{clip-path:inset(0 0 -12% 0)}}

/* ---- scroll reveals ---- */
[data-rise]{opacity:0;transform:translateY(20px);transition:opacity .62s cubic-bezier(.2,.75,.3,1),transform .62s cubic-bezier(.2,.75,.3,1)}
[data-rise].in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .grain{display:none}
  .blob--3{animation:none}
  .mega__l{clip-path:none!important;animation:none!important}
  [data-rise]{opacity:1!important;transform:none!important;transition:none}
}

/* ---- work: case posters ---- */
.work{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.9vw,24px)}
.case{display:block;border:var(--bw) solid var(--ink);background:var(--paper-3);box-shadow:var(--shadow-lg);
  overflow:hidden;transition:transform .15s,box-shadow .15s}
.case:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--blue)}
.case img{width:100%;height:auto;display:block;border-bottom:var(--bw) solid var(--ink)}
.case__m{padding:15px 18px;position:relative;display:flex;flex-direction:column;gap:3px}
.case__d{font-variation-settings:"wdth" 88,"wght" 800;font-size:clamp(14px,1.5vw,17px);padding-right:92px}
.case__s{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.case__n{position:absolute;right:18px;top:14px;font-variation-settings:"wdth" 84,"wght" 900;
  font-size:clamp(20px,2.4vw,30px);line-height:1;display:flex;align-items:baseline;gap:5px}
.case__n em{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.case--wide{grid-column:span 2}
.case--wide img{max-height:290px;object-fit:cover;object-position:center}
.work__tot{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:clamp(14px,1.9vw,24px);
  padding:18px 22px;background:var(--ink);color:var(--paper-3);border:var(--bw) solid var(--ink)}
.work__tot b{font-variation-settings:"wdth" 84,"wght" 900;font-size:clamp(28px,3.6vw,46px);line-height:1}
.work__tot span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.13em;opacity:.72}

/* ---- engagement tiers ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.tier{position:relative;border:var(--bw) solid var(--ink);background:var(--paper-3);padding:24px 22px;box-shadow:var(--shadow-lg)}
.tier--mid{background:var(--blue);color:var(--paper-3)}
.tier__k{font-variation-settings:"wdth" 84,"wght" 900;text-transform:uppercase;font-size:clamp(24px,2.8vw,34px);line-height:1}
.tier__w{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;margin-top:7px;color:var(--verm)}
.tier--mid .tier__w{color:var(--sun)}
.tier__d{font-size:15px;margin-top:12px;color:var(--ink-2)}
.tier--mid .tier__d{color:rgba(251,248,242,.85)}
.tier ul{list-style:none;margin-top:16px;border-top:var(--bw) solid var(--ink)}
.tier--mid ul{border-color:rgba(251,248,242,.4)}
.tier li{font-size:14px;padding:9px 0 9px 18px;position:relative;border-bottom:1px solid rgba(10,10,10,.14)}
.tier--mid li{border-bottom-color:rgba(251,248,242,.22)}
.tier li:last-child{border-bottom:0}
.tier li::before{content:"→";position:absolute;left:0;opacity:.55}
.tier__tag{position:absolute;top:-13px;right:16px;background:var(--sun);color:var(--ink);border:var(--bw) solid var(--ink);
  font-family:var(--mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;padding:5px 10px}

/* ---- studio ---- */
.studio{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(22px,3.2vw,48px);align-items:start}
.studio__txt p{font-size:clamp(15.5px,1.3vw,18px);color:rgba(251,248,242,.84);max-width:56ch}
.studio__txt p+p{margin-top:16px}
.studio__f{list-style:none;border:var(--bw) solid var(--paper-3)}
.studio__f li{padding:15px 18px;border-bottom:var(--bw) solid var(--paper-3)}
.studio__f li:last-child{border-bottom:0}
.studio__f b{display:block;font-variation-settings:"wdth" 86,"wght" 800;text-transform:uppercase;font-size:17px}
.studio__f span{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:#9a9a92;margin-top:4px}

@media(max-width:960px){
  .tiers{grid-template-columns:1fr}
  .studio{grid-template-columns:1fr}
}
@media(max-width:680px){
  .work{grid-template-columns:1fr}
  .case--wide{grid-column:span 1}
  .case__d{padding-right:76px}
}

/* ---- testimonials (styles ready; markup stays commented until quotes are real) ---- */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.voice{border:var(--bw) solid var(--ink);background:var(--paper-3);padding:24px 22px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;margin:0}
.voice--hl{background:var(--sun)}
.voice blockquote{margin:0;font-variation-settings:"wdth" 92,"wght" 600;font-size:clamp(16px,1.5vw,19px);line-height:1.38}
.voice blockquote::before{content:"“";display:block;font-size:52px;line-height:.6;margin-bottom:10px;color:var(--verm)}
.voice--hl blockquote::before{color:var(--blue)}
.voice figcaption{border-top:var(--bw) solid var(--ink);padding-top:12px}
.voice figcaption b{display:block;font-variation-settings:"wdth" 88,"wght" 800;text-transform:uppercase;font-size:14px}
.voice figcaption span{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin-top:4px}
@media(max-width:960px){.voices{grid-template-columns:1fr}}

/* ---- header adapts to the colour world behind it ---- */
.hdr{transition:background .35s ease,border-color .35s ease,color .35s ease}
.hdr--dark{background:var(--ink);border-bottom-color:var(--ink)}
.hdr--dark .logo b{color:var(--paper-3)}
.hdr--dark .logo__chrome{color:var(--paper-3)}
.hdr--dark .nav a{color:var(--paper-3)}
.hdr--dark .nav a:hover{color:var(--sun)}
.hdr--dark .burger{background:transparent;border-color:var(--paper-3)}
.hdr--dark .burger i{background:var(--paper-3)}
.hdr--dark .btn--blue{box-shadow:4px 4px 0 var(--paper-3)}

/* ---- scroll progress ---- */
.prog{position:absolute;left:0;bottom:-2px;height:3px;width:100%;transform:scaleX(var(--sp,0));
  transform-origin:0 50%;background:var(--blue);z-index:5;pointer-events:none}
.hdr--dark .prog{background:var(--sun)}

/* ---- magnetic ---- */
.btn,.stk{will-change:transform}
.mag{transition:translate .25s cubic-bezier(.2,.7,.3,1)}

/* ---- scramble ---- */
.scr{font-variant-ligatures:none}

@media(prefers-reduced-motion:reduce){
  .hdr{transition:none}
  .mag{transition:none;translate:none!important}
  .prog{display:none}
}

/* hero: all three lines solid */
.mega__l--blue{color:var(--blue)}

/* ---- typography pass: serif accents, tighter display, calmer body ---- */
.mega__l{letter-spacing:-.032em}
.big{letter-spacing:-.024em}
body{line-height:1.66;letter-spacing:-.003em}
.lede{font-size:clamp(17px,1.45vw,20.5px);line-height:1.58}
.lede em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.16em;letter-spacing:0;color:var(--blue)}
.note{line-height:1.62}
.note em,.studio__txt em,.faq details>div em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1.12em;letter-spacing:0}
.card p,.steps p,.faq details>div p{letter-spacing:-.002em}
.kick{font-weight:700}
.case__d{letter-spacing:-.012em}
.faq summary{letter-spacing:-.012em}

/* ---- multi-page: page heads ---- */
.pagehead{padding-block:clamp(44px,6vw,82px) clamp(34px,4.6vw,62px)}
.pagehead .kick{margin-bottom:clamp(14px,2vw,22px)}
.pagehead .lede{margin-top:clamp(20px,2.8vw,32px);max-width:56ch}
.mega--pg .mega__l{font-size:clamp(42px,9.6vw,136px)}
.more{margin-top:clamp(24px,3.2vw,40px)}
.nav a[aria-current="page"]{color:var(--blue)}
.nav a[aria-current="page"]::after{content:"";display:block;height:2px;background:var(--blue);margin-top:3px}
.hdr--dark .nav a[aria-current="page"]{color:var(--sun)}
.hdr--dark .nav a[aria-current="page"]::after{background:var(--sun)}
.tier ul{margin-top:14px}

/* ---- big type must always fit the screen ---- */
.slabby .mega__l{font-size:clamp(22px,9.2vw,130px)}
.mega__l{max-width:100%}
@media(max-width:560px){
  .mega__l{font-size:clamp(30px,12vw,80px)}
  .slabby .mega__l{font-size:clamp(20px,11vw,64px)}
  .stk--a,.stk--b,.stk--hero{display:none}
}

/* ---- failsafes: content must survive a JS failure ---- */
@keyframes boot-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.booting .boot{animation:boot-failsafe 0s 6s forwards}
@keyframes clip-failsafe{to{clip-path:none}}
.js .mega__l{animation:clip-failsafe 0s 5s forwards}
.ready .mega__l,.no-boot .mega__l{animation:wipe .78s cubic-bezier(.19,.86,.24,1) forwards,clip-failsafe 0s 5s forwards}