/* WaldeComms v1. Tokens from site-starter-kit components/tokens, palette swapped to the deck. */
@font-face{font-family:'Archivo Black';src:url(../fonts/archivo-black.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Archivo';src:url(../fonts/archivo.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{--t:#11D5CA;--i2:#2a2b30;--white:#fff;--y:#F6E83B;--p:#FF2E88;--m:#A9F1DF;--i:#101114;--c:#F5F0E6;--cy:#3EC6F0;--hd:'Archivo Black','Arial Black',Impact,sans-serif;--bd:'Archivo',Inter,system-ui,sans-serif;--sr:Georgia,'DejaVu Serif',serif;--w:min(1240px,92vw)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c);color:var(--i);font:400 17px/1.55 var(--bd);overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--p);outline-offset:3px}
.wrap{width:var(--w);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skiplink{position:absolute;left:-999px;top:0;background:var(--i);color:var(--y);padding:.6em 1em;z-index:200}.skiplink:focus{left:8px}
/* grain */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.06;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 baseFrequency='.85'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ---- tape-label component (new) ---- */
.tape{display:inline-block;font:400 1em/1 var(--hd);text-transform:uppercase;padding:.14em .32em .1em;background:var(--i);color:var(--y);transform:rotate(var(--r,-2deg));box-shadow:.08em .08em 0 rgba(16,17,20,.18);position:relative}
.tape::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.05) 6px 7px);pointer-events:none}
.tape--p{background:var(--p);color:var(--i)}.tape--y{background:var(--y);color:var(--i)}.tape--m{background:var(--m);color:var(--i)}.tape--c{background:var(--c);color:var(--i)}
.tape-stack{display:flex;flex-direction:column;align-items:flex-start;gap:.06em}
.tape-stack .tape:nth-child(2){margin-left:.5em;--r:1.5deg}.tape-stack .tape:nth-child(3){margin-left:1.1em;--r:-1deg}
.js .tape-in{clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.js .tape-in.is-in{clip-path:inset(0 0 0 0)}
/* header (starter site-header, simplified) */
.hdr{position:sticky;top:0;z-index:50;background:rgba(245,240,230,.92);backdrop-filter:blur(8px);border-bottom:3px solid var(--i)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.hdr .logo img{width:157px;height:44px;max-width:none}
.nav{display:none;gap:1.4rem;align-items:center}
.nav a{font:400 14px var(--hd);text-transform:uppercase;text-decoration:none;letter-spacing:.02em;padding:.3em 0;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--p)}
.btn{display:inline-flex;align-items:center;gap:.5em;font:400 15px/1 var(--hd);text-transform:uppercase;background:var(--i);color:var(--y);text-decoration:none;padding:.95em 1.3em;border:0;cursor:pointer;box-shadow:5px 5px 0 var(--p);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--p)}
.btn--p{background:var(--p);color:var(--i);box-shadow:5px 5px 0 var(--i)}.btn--p:hover{box-shadow:8px 8px 0 var(--i)}
.btn--sm{font-size:13px;padding:.75em 1em}
.hdr-cta{display:flex;gap:.6rem;align-items:center}
@media(min-width:960px){.nav{display:flex}}
/* sections */
section{position:relative}
.sec{padding:clamp(64px,10vw,140px) 0}
.kick{font:700 13px var(--bd);letter-spacing:.18em;text-transform:uppercase}
h1,h2,h3{font-family:var(--hd);font-weight:400;text-transform:uppercase;line-height:.95;margin:0 0 .4em;letter-spacing:-.01em}
h2{font-size:clamp(36px,6.5vw,88px)}h3{font-size:clamp(22px,2.6vw,32px)}
.lead{font-size:clamp(18px,1.9vw,24px);max-width:38em}
.bg-y{background:var(--y)}.bg-m{background:var(--m)}.bg-i{background:var(--i);color:var(--c)}.bg-p{background:var(--p)}
/* hero */
.hero{min-height:calc(100svh - 64px);background:var(--y);display:grid;align-items:center;overflow:hidden;padding:6vh 0 0}
.hero .wrap{display:grid;gap:2rem;grid-template-columns:1fr;align-items:end}
.hero h1{font-size:clamp(34px,6.2vw,100px);margin:0}
.hero h1 .tape{margin:.04em 0}
.hero .sub{font-weight:700;font-size:clamp(16px,1.6vw,21px);max-width:30em;margin:1.4rem 0}
.hero .me{width:min(78vw,520px);justify-self:center;filter:drop-shadow(12px 12px 0 var(--i));align-self:end}
.hero .ctas{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hero .ctas .link{font-weight:700}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.35fr .9fr}.hero{padding:0}}
/* noise-headline (new): RGB echo layers + jitter */
.noise-h{position:relative;display:inline-block}
.noise-h .ch{display:inline-block;transition:transform .15s}
.noise-h.loud .ch{animation:jit .14s steps(2) infinite}
.noise-h.loud{text-shadow:var(--nx,3px) 0 var(--p),calc(var(--nx,3px)*-1) 0 var(--cy)}
@keyframes jit{0%{transform:translate(0,0)}50%{transform:translate(var(--jx,1px),var(--jy,-1px))}}
.ripple{position:fixed;pointer-events:none;border:3px solid var(--p);border-radius:50%;width:20px;height:20px;margin:-10px 0 0 -10px;z-index:80;animation:rip .9s ease-out forwards}
@keyframes rip{to{transform:scale(9);opacity:0;border-width:1px}}
/* marquee (kit pattern) */
.mq{overflow:hidden;background:var(--i);color:var(--y);border-block:3px solid var(--i);padding:.7em 0}
.mq__t{display:flex;gap:2.5em;width:max-content;animation:mq 30s linear infinite;font:400 clamp(18px,2.4vw,30px) var(--hd);text-transform:uppercase}
.mq__t span:nth-child(even){color:var(--p)}
@keyframes mq{to{transform:translateX(-50%)}}
/* scrub reveal */
.scrub{font:400 clamp(34px,7vw,104px)/.98 var(--hd);text-transform:uppercase}
.scrub .w{opacity:var(--o,1)}
/* stats band (kit stats-band) */
.stb{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:3px solid var(--i)}
.stb>div{padding:2rem 1.2rem;border-bottom:3px solid var(--i)}
@media(min-width:700px){.stb>div{border-right:3px solid var(--i)}.stb>div:last-child{border-right:0}}
.stb__n{font:400 clamp(44px,6vw,80px)/1 var(--hd)}
.stb__l{font-weight:700;margin-top:.5rem}
/* horizontal scroll strip */
.hs{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem 4vw 2rem;scrollbar-width:thin}
.hs .card{flex:0 0 min(82vw,460px);scroll-snap-align:start}
/* collage card w/ flip (case-study explorer) */
.card{position:relative;display:block;text-decoration:none;perspective:1200px;aspect-ratio:16/11}
.card__in{position:absolute;inset:0;transition:transform .6s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.card:hover .card__in,.card:focus-visible .card__in{transform:rotateY(180deg)}
.card__f,.card__b{position:absolute;inset:0;backface-visibility:hidden;border:3px solid var(--i);overflow:hidden;box-shadow:8px 8px 0 var(--i)}
.card__f img{width:100%;height:100%;object-fit:cover}
.card__f .tape{position:absolute;left:12px;bottom:14px;font-size:clamp(18px,2vw,26px);max-width:90%}
.card__f .tag{position:absolute;right:10px;top:10px;background:var(--c);font:700 12px var(--bd);text-transform:uppercase;letter-spacing:.1em;padding:.3em .6em;border:2px solid var(--i)}
.card__b{transform:rotateY(180deg);background:var(--y);padding:1.4rem;display:flex;flex-direction:column;justify-content:space-between}
.card:nth-child(3n+2) .card__b{background:var(--m)}.card:nth-child(3n) .card__b{background:var(--p)}
.card__b b{font:400 clamp(26px,3vw,40px)/1 var(--hd);text-transform:uppercase}
.card__b span{font-weight:700}
@media(hover:none){.card:hover .card__in{transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 2rem}
.chip{font:400 14px var(--hd);text-transform:uppercase;background:var(--c);border:3px solid var(--i);padding:.55em .9em;cursor:pointer;color:var(--i)}
.chip[aria-pressed=true]{background:var(--i);color:var(--y)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:2rem}
.grid .card[hidden]{display:none}
.card.fx{animation:pop .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{transform:scale(.9) rotate(-2deg);opacity:0}}
/* case study page */
.cs-hero{background:var(--y);padding:clamp(40px,8vw,100px) 0}
.cs-hero h1{font-size:clamp(40px,8vw,112px)}
.cs-steps{display:grid;gap:2rem}
@media(min-width:900px){.cs-steps{grid-template-columns:1fr 1fr}}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.2rem}
.wall button{padding:0;border:3px solid var(--i);background:var(--c);cursor:zoom-in;transform:rotate(var(--r,0deg));box-shadow:6px 6px 0 var(--i);transition:transform .25s}
.wall button:hover{transform:rotate(0) scale(1.03)}
.wall img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:var(--pos,center)}
.lb{position:fixed;inset:0;background:rgba(16,17,20,.94);display:none;place-items:center;z-index:120;padding:4vw}
.lb.open{display:grid}.lb img{max-height:86vh;width:auto;border:4px solid var(--y)}
.lb button{position:absolute;top:16px;right:16px}
.next{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
/* services */
.svc{display:grid;gap:2rem}@media(min-width:900px){.svc{grid-template-columns:1fr 1fr}}
.panel{border:3px solid var(--i);box-shadow:10px 10px 0 var(--i);padding:clamp(1.4rem,3vw,2.6rem)}
.panel details{border-top:2px solid var(--i);padding:.8rem 0}
.panel summary{font:400 20px var(--hd);text-transform:uppercase;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.panel summary::after{content:"+"}.panel details[open] summary::after{content:"−"}
.panel summary::-webkit-details-marker{display:none}
.tl{list-style:none;padding:0;margin:0;display:grid;gap:1rem;counter-reset:s}
@media(min-width:800px){.tl{grid-template-columns:repeat(4,1fr)}}
.tl li{counter-increment:s;border-top:6px solid var(--p);padding-top:1rem}
.tl li::before{content:"0" counter(s);font:400 44px var(--hd);display:block}
/* team */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:2rem}
.tm{border:3px solid var(--i);padding:1.2rem;box-shadow:8px 8px 0 var(--i);transition:transform .35s cubic-bezier(.3,1.5,.5,1);background:var(--m);transform:rotate(var(--r,0))}
.tm:nth-child(2){background:var(--y);--r:1.2deg}.tm:nth-child(3){background:var(--p);--r:-1deg}.tm:nth-child(4){background:var(--c);--r:.8deg}.tm:nth-child(5){--r:-1.4deg}
.tm:hover,.tm:focus-within{transform:rotate(0) translateY(-6px)}
.tm img{width:100%;aspect-ratio:1;object-fit:cover;border:3px solid var(--i);filter:grayscale(1) contrast(1.1);transition:filter .3s}
.tm:hover img,.tm:focus-within img{filter:none}
.tm h3{margin:1rem 0 .3rem;font-size:22px}
.tm .role{font:700 12px var(--bd);letter-spacing:.14em;text-transform:uppercase}
.tm .line{font-weight:800;margin:.5rem 0}
.tm .flag{display:inline-block;margin-top:.6rem}
/* Turn up the volume: one quote, one punch. Native vertical gestures stay available. */
.volume{background:var(--i);color:var(--c);overflow:clip}
.volume h2{color:var(--y);max-width:12ch}
.volume__layout{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:clamp(24px,4vw,60px);align-items:center}
.volume__art{width:100%;max-width:360px;justify-self:center;filter:drop-shadow(8px 8px 0 var(--p))}
.volume__deck{min-width:0}
.volume__stage{display:grid;cursor:pointer;touch-action:pan-y}
.volume__quote{grid-area:1/1;margin:0;padding:clamp(22px,3vw,42px);background:var(--y);color:var(--i);border:3px solid var(--i);box-shadow:8px 8px 0 var(--p)}
.volume__quote[hidden]{display:block;visibility:hidden;pointer-events:none}
.volume__quote:nth-child(3n+2){background:var(--m)}.volume__quote:nth-child(3n){background:var(--p);box-shadow:8px 8px 0 var(--m)}
.volume__quote blockquote{margin:0;font:400 clamp(24px,2.7vw,38px)/1.15 var(--hd);letter-spacing:-.02em}
.volume__quote figcaption{margin-top:1.6rem;font:700 16px/1.4 var(--bd)}
.volume__quote figcaption span{display:block;font-weight:400}
.volume__quote.slap{animation:volume-slap .55s both}
@keyframes volume-slap{0%{opacity:0;transform:translate3d(-45px,15px,0) scale(1.12) rotate(-5deg)}45%{opacity:1;transform:scale(.97) rotate(2deg)}65%{transform:scale(1.02) rotate(-1.5deg)}82%{transform:rotate(.7deg)}100%{opacity:1;transform:none}}
.volume__controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.8rem}
.volume__count{font:700 14px var(--bd)}
.volume__meter{height:16px;margin-top:1.5rem;background:repeating-linear-gradient(90deg,transparent 0 10px,var(--i) 10px 14px),var(--m);overflow:hidden}
.volume__fill{height:100%;background:var(--p);transform:scaleX(0);transform-origin:left;will-change:transform}
.volume__hint{font-size:14px}
.case-quote{margin:1.5rem 0;padding:1.5rem;background:var(--y);color:var(--i);border:3px solid var(--i)}
.case-quote blockquote{margin:0;font:400 21px/1.4 var(--hd)}.case-quote figcaption{margin-top:1rem}
@media(max-width:700px){.volume__layout{grid-template-columns:minmax(0,1fr)}.volume__art{max-width:190px}.volume__quote blockquote{font-size:clamp(23px,6vw,32px)}}
/* contact */
.big-link{font:400 clamp(26px,5vw,64px)/1.05 var(--hd);text-transform:uppercase;text-decoration:none;border-bottom:6px solid var(--p);word-break:break-word}
.form{display:grid;gap:1rem;max-width:640px}
.form label{font-weight:800;display:grid;gap:.35rem}
.form input,.form textarea,.form select{font:inherit;padding:.8em;border:3px solid var(--i);background:var(--white);border-radius:0}
.sticky-cta{position:fixed;right:14px;bottom:14px;z-index:70}
@media(min-width:960px){.sticky-cta{display:none}}
/* footer */
.ftr{background:var(--i);color:var(--c);padding:4rem 0 6rem}
.ftr a{color:var(--c)}
.ftr .wrap{display:grid;gap:2rem}@media(min-width:800px){.ftr .wrap{grid-template-columns:1.4fr 1fr 1fr}}
.ftr nav{display:grid;gap:.4rem}
.ftr small{opacity:.8}
/* reveal */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv,.js .tape-in{opacity:1;transform:none;clip-path:none}.mq__t{animation:none}.card:hover .card__in{transform:none}}
.ftr a.btn--p{color:var(--i)}.ftr a.btn{text-decoration:none}
.noise-h .wd{display:inline-block;white-space:nowrap}
.wall img{height:auto}@media(min-width:900px){.wall{grid-template-columns:1fr 1fr}}
/* Clip horizontal artwork without creating an intermediate vertical scroll container. */
html{overflow-x:clip}
/* viewport-fit: Niki never taller than the screen; hero fits short/tall viewports */
img[src*="niki-"]:not([src*="logo-niki"]):not(.i-figure):not(.i-lockup):not(.volume__art){max-height:min(80vh,100%);max-height:min(80dvh,100%);object-fit:contain;height:auto}
.hero{min-height:calc(100dvh - 64px)}
.hero h1{font-size:clamp(28px,min(6.2vw,9.5dvh),100px)}
.hero .tape{max-width:100%}
.hero .me{width:auto;max-width:min(78vw,520px);max-height:min(80dvh,calc(100dvh - 96px))}
@media(max-width:899px){.hero h1{font-size:clamp(28px,7.4vw,64px)}.hero .me{max-height:min(60dvh,560px)}}
.volume__art{max-height:min(70dvh,520px);width:auto}
/* DESIGN-RULES audit (site-starter-kit DESIGN-RULES.md) */
body{overflow-wrap:break-word}                                   /* rule 5 */
.sec p:not([class]){max-width:62ch}                               /* rule 2 */
h2{font-size:clamp(32px,min(6.5vw,11dvh),88px)}                   /* rules 10,13 */
.btn,.chip{min-height:44px}                          /* rule 21 */
.nav a{min-height:44px;display:inline-flex;align-items:center}
.hdr .wrap{height:var(--hdr,64px)}
@media(max-width:599px){.sec{padding:clamp(56px,14vw,72px) 0}}     /* rule 6 */
.mq{display:flex;align-items:center}.mq__t{flex:1}.mq__pause{flex:none;min-width:44px;min-height:44px;margin-inline:8px;background:var(--y);color:var(--i);border:2px solid var(--i);font:700 14px var(--bd);cursor:pointer}.mq.is-paused .mq__t,.mq:hover .mq__t,.mq:focus-within .mq__t{animation-play-state:paused}
summary{min-height:44px;display:flex;align-items:center}
/* hero fit v2: centred columns, Niki sized by viewport height, never cropped */
img[src*="niki-"]:not([src*="logo-niki"]):not(.i-figure):not(.i-lockup):not(.volume__art){max-height:80vh;max-height:80dvh}
.hero{align-items:center;padding-block:clamp(16px,3dvh,40px)}
.hero .wrap{align-items:center}
.hero .me{height:min(72dvh,640px);width:auto;max-width:100%;max-height:none;align-self:center}
@media(max-width:899px){.hero .me{height:min(52dvh,480px)}}
.hero h1{font-size:clamp(28px,min(5.2vw,7.2dvh),92px)}
.hero .sub{margin:1rem 0}
@media(max-width:899px){.hero h1{font-size:clamp(28px,7.4vw,60px)}}
/* coverage wall v2: deck page once + real clipping cards */
.wall{display:block}
.wall__deck{display:block;width:100%;max-width:980px;margin:0 auto 2rem;padding:0;border:3px solid var(--i);background:var(--c);cursor:zoom-in;box-shadow:6px 6px 0 var(--i);transform:none}
.wall__deck img{width:100%;height:auto;aspect-ratio:auto}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:24px}
.clip{background:var(--c);border:3px solid var(--i);box-shadow:6px 6px 0 var(--i);transform:rotate(var(--r));display:flex;flex-direction:column}
.clip__img{margin:0;position:relative}.clip__img img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:3px solid var(--i)}
.clip__img figcaption{position:absolute;right:6px;bottom:6px;font:700 11px var(--bd);background:var(--i);color:var(--c);padding:2px 6px}
.clip__b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.clip__o{margin:0;font:700 13px var(--bd);letter-spacing:.12em;text-transform:uppercase;color:var(--i);background:var(--y);align-self:flex-start;padding:2px 8px}
.clip__h{margin:0;font:400 clamp(18px,1.6vw,22px)/1.15 var(--hd);text-transform:none;letter-spacing:0}
.clip__d{margin:0;font:400 15px var(--bd)}
.clip__a{margin-top:auto;font:700 16px var(--bd);min-height:44px;display:inline-flex;align-items:center}
@media(prefers-reduced-motion:reduce){.clip{transform:none}}
/* volume box v2: smaller, fits viewport beside Niki */
.volume__layout{grid-template-columns:minmax(0,.8fr) minmax(0,640px);justify-content:center}
.volume__quote{max-width:640px;max-height:calc(100dvh - 220px);overflow:auto;padding:clamp(18px,2.4vw,32px)}
.volume__quote blockquote{font-size:clamp(20px,2vw,30px);line-height:1.2;overflow-wrap:break-word}
.volume__quote figcaption{margin-top:1rem;font-size:15px}
.volume__art{max-height:min(60dvh,460px)}
@media(max-width:700px){.volume__quote blockquote{font-size:clamp(19px,5.2vw,24px)}.volume__quote{max-height:none}.volume__art{max-height:30dvh}}
img.volume__art[src]{max-height:min(60dvh,460px);width:auto;max-width:100%}
@media(max-width:700px){img.volume__art[src]{max-height:30dvh}}

/* senior review fixes */
.mq{position:relative;display:block;padding-right:64px}.mq__t{flex:none;width:max-content}.mq__t span{white-space:nowrap}
.mq__pause{position:absolute;right:8px;top:50%;transform:translateY(-50%);margin:0}
.stb__n{font-size:clamp(36px,min(4.6vw,8dvh),68px);overflow-wrap:normal;word-break:keep-all;white-space:nowrap}
.stb>div{min-width:0}
.cs-steps{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));align-items:start}
.stb--side{border-top:3px solid var(--i);grid-template-columns:1fr}.stb--side>div{border-right:0!important;padding:1.2rem 0}
.cs-side .case-quote{margin-top:1.5rem}
.cs-hero{padding:clamp(40px,7dvh,88px) 0}
.tape-stack .tape{max-width:100%}
.noise-h,.tape-stack{max-width:100%}
@media(max-width:600px){.cs-hero h1{font-size:clamp(30px,9vw,44px)}}
/* team: no orphan card */
@media(min-width:1000px){.team{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.2rem}}
/* work grid: 7 cards fill complete rows */
@media(min-width:1060px){#cases{grid-template-columns:repeat(3,minmax(0,1fr))}#cases>.card:first-child{grid-column:span 2}}
/* clip cards without image: outlet panel instead of blank space */
.clip:not(:has(.clip__img))::before{content:attr(data-outlet);display:flex;align-items:flex-end;aspect-ratio:16/9;padding:16px;background:var(--i);color:var(--y);font:400 clamp(20px,2vw,28px)/1 var(--hd);text-transform:uppercase;border-bottom:3px solid var(--i)}
/* services accordion: readable summaries */
.panel summary{font:400 18px var(--hd);text-transform:uppercase}
.stb__n{white-space:normal;font-size:clamp(30px,min(3.2vw,7dvh),60px)}
.stb--side .stb__n{font-size:clamp(36px,4vw,60px)}

/* mobile menu v2: solid full-screen overlay */
.mnav-open{min-height:44px;min-width:44px;font:400 14px var(--hd);text-transform:uppercase;background:var(--y);color:var(--i);padding:.6em .9em;border:2px solid var(--i);cursor:pointer}
.mmenu{position:fixed;inset:0;z-index:300;background:var(--i);color:var(--c);display:flex;flex-direction:column;padding:16px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain}
.mmenu{display:none!important}.mmenu:target,.mmenu.is-open{display:flex!important}
.mmenu__top{display:flex;justify-content:space-between;align-items:center;min-height:56px;margin-bottom:24px}
.mmenu__top img{background:var(--c);padding:4px;width:auto;height:40px}
.mmenu__close{min-height:48px;min-width:48px;padding:0 16px;background:var(--y);color:var(--i);border:0;font:400 16px var(--hd);text-transform:uppercase;cursor:pointer}
.mmenu nav{display:flex;flex-direction:column}
.mmenu nav a{display:flex;align-items:center;min-height:56px;font:400 clamp(24px,7.5vw,32px)/1.1 var(--hd);text-transform:uppercase;color:var(--c);text-decoration:none;border-bottom:2px solid var(--i2)}
.mmenu nav a[aria-current]{color:var(--y)}
.mmenu nav a:focus-visible,.mmenu__close:focus-visible{outline:3px solid var(--m);outline-offset:3px}
.mmenu__cta{margin-top:28px;align-self:flex-start}
html.menu-open,html.menu-open body{overflow:hidden}
html.menu-open body::before{display:none}
@media(min-width:960px){.mnav-open,.mmenu{display:none!important}}

.mnav-open{position:relative;z-index:200;display:inline-flex;align-items:center;gap:10px;min-height:48px;min-width:48px;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.burger{display:inline-flex;flex-direction:column;gap:4px}.burger i{display:block;width:20px;height:3px;background:var(--i)}
.mmenu__close{display:inline-flex;align-items:center;text-decoration:none}
html.menu-open body{position:fixed;left:0;right:0;width:100%}
@media(min-width:960px){.mmenu:target,.mmenu.is-open{display:none!important}}
/* marquee: names never wrap */
.mq__t{display:flex;width:max-content;white-space:nowrap;flex-wrap:nowrap}
.mq__t span{white-space:nowrap;flex-shrink:0;flex:none}
@media(max-width:600px){.mq__t span{font-size:clamp(16px,5vw,22px)}}

/* team flip cards */
.tm{padding:0;background:none!important;border:0;box-shadow:none;perspective:1400px}
.tm__in{display:grid;transition:transform .7s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d;height:100%}
.tm__f{grid-area:1/1;border:3px solid var(--i);box-shadow:8px 8px 0 var(--i);padding:1.2rem;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;background:var(--m)}
.tm:nth-child(2) .tm__front{background:var(--y)}.tm:nth-child(3) .tm__front{background:var(--p)}.tm:nth-child(4) .tm__front{background:var(--c)}
.tm__back{transform:rotateY(180deg);background:var(--i);color:var(--c)}
.tm__back .role{color:var(--y)}
.tm__bio{font-size:16px;line-height:1.5;margin:.6rem 0 1rem}
.tm__acts{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tm__acts a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;background:var(--y);color:var(--i);font:700 16px var(--bd);text-decoration:none}
.tm__flip{align-self:flex-start;margin-top:auto;min-height:44px;padding:0 14px;background:var(--i);color:var(--c);border:2px solid var(--i);font:700 15px var(--bd);cursor:pointer}
.tm__front .flag{align-self:flex-start;margin-bottom:12px}
.tm__back .tm__flip{margin-top:0;background:transparent;border-color:var(--c)}
.tm.is-flipped .tm__in{transform:rotateY(180deg)}
@media(hover:hover) and (pointer:fine){.tm:not(.is-pinned):hover .tm__in{transform:rotateY(180deg)}}
.tm__flip:focus-visible,.tm__acts a:focus-visible{outline:3px solid var(--p);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tm__in{transition:none;transform:none!important}.tm__f{transition:opacity .2s;backface-visibility:visible}.tm__back{transform:none;opacity:0;visibility:hidden}.tm.is-flipped .tm__back,.tm:hover .tm__back{opacity:1;visibility:visible}.tm.is-flipped .tm__front,.tm:hover .tm__front{opacity:0}}

/* fit-to-viewport pass */
@media(min-width:600px){.sec{padding:clamp(48px,min(7vw,9dvh),110px) 0}}
.strip{position:relative}
.strip__nav{display:flex;gap:12px;justify-content:flex-end;margin-top:-.5rem;margin-bottom:1rem}
.strip__btn{min-width:48px;min-height:48px;background:var(--y);color:var(--i);border:3px solid var(--i);box-shadow:4px 4px 0 var(--i);font:700 22px var(--bd);cursor:pointer}
.strip__btn:disabled{opacity:.35;cursor:default}
.strip__btn:focus-visible{outline:3px solid var(--p);outline-offset:3px}
.hs .card{flex:0 0 min(82vw,460px,calc((100dvh - 330px)*16/11))}
.clips.hs{display:flex;grid-template-columns:none;padding:1rem 4px 1.6rem}
.clips.hs>*{flex:0 0 min(80vw,320px);scroll-snap-align:start}
.clips.hs .wall__deck{flex-basis:min(84vw,520px,calc((100dvh - 330px)*1.6));margin:0;align-self:flex-start}
.clip__img img{max-height:min(22dvh,180px);width:100%;object-fit:cover}
.clip__b{padding:14px 16px}.clip__h{font-size:clamp(17px,1.5vw,20px)}
.volume.sec{padding:clamp(40px,7dvh,80px) 0}
.volume h2{margin-bottom:.6rem}
.volume__quote{max-height:calc(100dvh - 300px)}
.volume__controls{margin-top:1rem}.volume__meter{margin-top:1rem}
@media(max-width:899px){.hero .me{height:min(34dvh,340px)}.hero{min-height:0;padding-block:24px 0}}
@media(max-width:700px){.cs-hero img[src*="niki-"]{max-height:30dvh;width:auto!important}.ftr{padding:2.5rem 0 5rem}.ftr .wrap{gap:1.2rem}.bg-i.sec{padding-block:48px}}

.hero img.me[src]{max-height:min(34dvh,340px)!important;height:auto!important;width:auto!important}
@media(min-width:900px){.hero img.me[src]{max-height:min(72dvh,640px)!important}}
@media(max-width:700px){.cs-hero img[src*="niki-"][src]{max-height:28dvh!important;width:auto!important;height:auto!important}}
.hs .card{flex-basis:min(82vw,460px,calc((100dvh - 430px)*16/11))}
.clips.hs .wall__deck{flex-basis:min(84vw,460px,calc((100dvh - 400px)*1.6))}
.clip__h{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.clip__img img{max-height:min(18dvh,150px)}
.clips.hs{align-items:flex-start}
.clips.hs .wall__deck img{aspect-ratio:1467/826!important;height:auto!important;max-height:none;object-fit:cover}
.sec:has(> .strip) h2.tape-stack{font-size:clamp(30px,min(4.4vw,7dvh),64px)}
.sec:has(> .strip) .wrap p{margin:.4rem 0 0}
.hs{padding-bottom:1.2rem}
.hs .card{flex-basis:min(82vw,460px,calc((100dvh - 460px)*16/11))}
.team{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))!important;gap:28px}
@media(min-width:1000px){.team{grid-template-columns:repeat(6,1fr)!important}.team .tm{grid-column:span 2}.team .tm:nth-child(4){grid-column:2/span 2}}
.tm img{aspect-ratio:4/3;object-position:50% 25%}

/* ===== SIZE TOKENS: one scale for every page (DESIGN-RULES.md "Size tokens") ===== */
:root{
 --fs-h1:clamp(30px,min(5.2vw,7.2dvh),72px);
 --fs-h2:clamp(28px,min(4vw,6.4dvh),56px);
 --fs-h3:clamp(18px,1.6vw,22px);
 --fs-lead:clamp(18px,1.6vw,21px);
 --fs-body:17px;--lh-body:1.55;
 --fs-small:13px;
 --sec-pad:clamp(56px,min(7vw,9dvh),96px);
 --btn-h:48px;--btn-fs:15px;
 --card-w:min(84vw,360px);
 --niki-hero:min(60dvh,560px);
 --hdr-h:67px;--logo-h:44px;
}
@media(max-width:899px){:root{--niki-hero:min(30dvh,280px)}}
h1,.hero h1,.cs-hero h1{font-size:var(--fs-h1)!important}
section h2,.volume h2,.sec:has(> .strip) h2.tape-stack{font-size:var(--fs-h2)!important}
section h3,.tm h3,.clip__h{font-size:var(--fs-h3)!important}
p.lead,.hero .sub{font-size:var(--fs-lead)!important}
p.kick,.role,.tm .role{font-size:var(--fs-small)!important}
body{font-size:var(--fs-body);line-height:var(--lh-body)}
section.sec,.volume.sec{padding-top:var(--sec-pad)!important;padding-bottom:var(--sec-pad)!important}
a.btn,button.btn{min-height:var(--btn-h);height:var(--btn-h);font-size:var(--btn-fs)!important;display:inline-flex;align-items:center}
.hero img.me[src],.cs-hero img[src*="niki-"][src]{height:var(--niki-hero)!important;max-height:none!important;width:auto!important}
.hs .card,.grid .card,#cases .card{flex:0 0 var(--card-w)!important;width:var(--card-w);grid-column:auto!important}
.grid,#cases{grid-template-columns:repeat(auto-fill,var(--card-w))!important;justify-content:center}
.hdr{height:var(--hdr-h)}.logo img{height:var(--logo-h)}
.clips.hs .wall__deck{flex-basis:min(84vw,440px,calc((100dvh - 420px)*1.6))}.clip__img img{max-height:min(16dvh,140px)}
.clip__h{-webkit-line-clamp:3!important}.clip__b{padding:12px 14px}

@media(max-width:599px){.hdr-cta .btn[data-cta]{display:none}}
.cs-hero img[src*="niki-"]{justify-self:center}

/* punk paint-splash header */
.hdr{background:var(--i) url("../img/hdr-splat.svg?v=a4e741a7") center/cover no-repeat!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:0!important;color:var(--c)}
.hdr::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;background:url("../img/hdr-drip.svg?v=dd2f68cd") 0 0/100% 100% no-repeat;pointer-events:none}
.nav a{color:var(--c);background:var(--i);padding:.3em .55em!important;border-bottom-width:3px}
.nav a:hover,.nav a[aria-current]{border-color:var(--p);color:var(--y)}
.hdr .logo img{background:var(--c);padding:3px 5px;box-shadow:3px 3px 0 var(--p)}
.hdr .btn--sm{box-shadow:3px 3px 0 var(--m)}
.mnav-open{box-shadow:3px 3px 0 var(--p)}
.hdr .logo img{object-fit:contain;box-sizing:border-box}

.card__f,.card__b{-webkit-backface-visibility:hidden}
.card__in,.tm__in{-webkit-transform-style:preserve-3d}
.big-link{font-size:clamp(20px,6.4vw,64px);overflow-wrap:anywhere;word-break:normal}
@media(max-width:599px){.big-link{font-size:clamp(18px,5.6vw,26px)}}
/* WebKit ignores backface-visibility in some stacks: hide the back face outright until the card is turned (swap at the half-way point) */
.card__b,.tm__back{visibility:hidden;transition:visibility 0s .3s}
.card__f,.tm__front{transition:visibility 0s .3s}
.card:hover .card__b,.card:focus-visible .card__b,.tm.is-flipped .tm__back{visibility:visible}
.card:hover .card__f,.card:focus-visible .card__f,.tm.is-flipped .tm__front{visibility:hidden}
@media(hover:hover) and (pointer:fine){.tm:not(.is-pinned):hover .tm__back{visibility:visible}.tm:not(.is-pinned):hover .tm__front{visibility:hidden}}
@media(hover:none){.card:hover .card__b{visibility:hidden}.card:hover .card__f{visibility:visible}}
@media(prefers-reduced-motion:reduce){.card__b,.tm__back,.card__f,.tm__front{transition:none}}
.big-link{font-size:clamp(18px,3.4vw,44px);overflow-wrap:normal;word-break:normal;white-space:nowrap}
@media(max-width:599px){.big-link{font-size:clamp(16px,5.2vw,24px)}}
/* ===== Niki feedback, 30 Oct 2026 ===== */
/* 1 header: calmer. Plain ink + drip edge only; nav in the body font, not bold */
.hdr{background:var(--i)!important}
.nav a{font:500 15px/1 var(--bd)!important;text-transform:none!important;letter-spacing:0;background:none;padding:.3em .1em!important}
.nav a:hover,.nav a[aria-current]{color:var(--t);border-color:var(--t)}
.hdr .logo img{width:56px!important;height:56px!important;background:none!important;padding:0!important;box-shadow:none!important;border:0!important;object-fit:contain}
.mmenu__top img{width:48px;height:48px;background:none!important;padding:0}
.ftr img[src*="logo-teal"]{width:80px;height:80px}
.hdr .btn--sm{box-shadow:none}
.mnav-open{box-shadow:none}
/* 4 hero: Niki noticeably smaller */
:root{--niki-hero:min(44dvh,400px)}
@media(max-width:899px){:root{--niki-hero:min(24dvh,220px)}}
/* 6 CTA band: thinner, teal not pink, keep the flash tapes */
.cta-band{background:var(--t);color:var(--i)}
section.sec.cta-band{padding-top:clamp(32px,5dvh,56px)!important;padding-bottom:clamp(32px,5dvh,56px)!important}
.cta-band .lead{margin:.6rem 0 1rem}
.volume__layout{grid-template-columns:minmax(0,760px)!important;justify-content:center}
/* 7 contact: calmer */
.contact-hero{background:var(--c)}
.contact-hero h1{font-family:var(--bd);font-weight:800;text-transform:none;letter-spacing:-.01em}
.contact-hero .big-link{font:600 clamp(18px,2.4vw,30px)/1.2 var(--bd);text-transform:none;border-bottom:3px solid var(--t)}
/* 9 services: smaller blocks, five of them */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.svc-card{border:3px solid var(--i);box-shadow:6px 6px 0 var(--i);padding:20px 22px;background:var(--y)}
.svc-card:nth-child(5n+2){background:var(--m)}.svc-card:nth-child(5n+3){background:var(--t)}.svc-card:nth-child(5n+4){background:var(--c)}.svc-card:nth-child(5n){background:var(--white)}
.svc-card h3{font-size:var(--fs-h3)!important;margin:0 0 .5rem}
.svc-card p{margin:0;font-size:16px;line-height:1.5}
/* 10 recent work: names unbolded + smaller, stat boxes smaller */
.card__f .tape{font:500 clamp(14px,1.3vw,17px)/1.2 var(--bd)!important;text-transform:none;letter-spacing:0;padding:.35em .6em}
.stb__n{font-size:clamp(22px,min(2.2vw,5dvh),34px)!important}
.stb__l{font-size:14px;line-height:1.4}
.stb>div{padding:14px 16px!important}
.card__b b{font-size:clamp(20px,2vw,28px)}
/* 11 media impact slot */
.media-impact video,.video-slot{width:min(100%,960px);aspect-ratio:16/9;display:block;border:3px solid var(--i);box-shadow:8px 8px 0 var(--t);background:var(--i)}
.video-slot{display:grid;place-items:center;color:var(--c);font:600 18px var(--bd)}