/* Self-hosted fonts (no calls to Google: faster, and nothing to declare in the privacy policy) */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin.woff2') format('woff2-variations'),url('../fonts/archivo-latin.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-ext.woff2') format('woff2-variations'),url('../fonts/archivo-latin-ext.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Big Shoulders Display';src:url('../fonts/big-shoulders-display-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin.woff2') format('woff2-variations'),url('../fonts/fraunces-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
/* Mammoth v5
   Layout: a calm 12-column page on cream and white; black sections grow from inset cards to full bleed
   as they arrive; the engraved mammoths live only on black. Colour is for accents: frames, badges,
   hand-drawn marks. Serif (New Spirit) for the words that matter, condensed caps for punch,
   a solid grotesk for everything else. */
:root{
  --paper:#EFE7DA; --white:#FFFFFF; --ink:#121110; --black:#000000; --cream:#DBCCB5;
  --blue:#2C46D9; --butter:#F2C84B; --lilac:#B9A6F0; --coral:#F28C6E; --mint:#8FD0AE;
  --bg:var(--paper); --fg:var(--ink); --soft:rgba(18,17,16,.64); --line:rgba(18,17,16,.18); --accent:var(--ink); --on-accent:var(--paper); --pop:var(--blue);
  --serif:'new-spirit','Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
  --pad:clamp(16px,3.4vw,48px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.2,.9,.3,1.35);
  color-scheme:light;
}
/* light grounds follow the body so the page eases between cream and white */
body{background:var(--bg);color:var(--fg);transition:background-color .7s var(--ease),color .7s var(--ease)}
body[data-theme="white"]{--bg:var(--white)}
/* dark sections always paint themselves, so the mammoths never sit on the wrong ground */
.dark{--bg:var(--black);--fg:var(--paper);--soft:rgba(239,231,218,.66);--line:rgba(239,231,218,.2);--accent:var(--butter);--on-accent:var(--ink);--pop:var(--butter);background:var(--black);color:var(--fg)}
.dark.grow{clip-path:inset(0 calc((1 - var(--g,1)) * var(--pad)) round calc((1 - var(--g,1)) * 36px))}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--sans);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
::selection{background:var(--butter);color:var(--ink)}
a{color:inherit}
img,video{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pop);outline-offset:4px;border-radius:4px}
.wrap{max-width:1360px;margin:0 auto;padding-left:max(var(--gl),var(--pad));padding-right:max(var(--gr),var(--pad))}
.sec{padding-block:clamp(88px,10vw,148px)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px}
.skip:focus{left:16px}

/* type */
.cond{font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;letter-spacing:-.005em}
.srf{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;letter-spacing:-.02em}
.pair{margin:0;font-size:clamp(44px,5.8vw,88px);line-height:.92;text-wrap:balance}
.pair-hero{font-size:clamp(52px,7.2vw,110px);max-width:11ch}
.pair-hero .ln{display:block;overflow:hidden;padding-bottom:.04em}
.pair-sm{font-size:clamp(30px,2.7vw,40px);line-height:.95}
.kicker{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.01em;margin:0 0 16px}
.kicker::before{content:"";flex:0 0 18px;height:2px;background:currentColor;border-radius:2px}
.statement{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(30px,3.4vw,50px);line-height:1.18;letter-spacing:-.015em;margin:0;text-wrap:pretty}
.lede{font-size:clamp(18px,1.45vw,20px);line-height:1.55;margin:0;max-width:34em}
.label{font-size:14px;color:var(--soft);margin:0;font-variant-numeric:tabular-nums}
.h-3{font-family:var(--sans);font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.02em;margin:0}

/* links and buttons */
.roll{position:relative;display:inline-flex;overflow:hidden;text-decoration:none;line-height:1.2;vertical-align:bottom}
.roll > span{display:block;transition:transform .45s var(--ease)}
.roll > span + span{position:absolute;left:0;right:0;top:100%}
a:hover .roll > span,a:focus-visible .roll > span,button:hover .roll > span,.roll:hover > span{transform:translateY(-100%)}
.btn{--bx:0px;--by:0px;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--sans);text-decoration:none;border:1.5px solid currentColor;background:transparent;color:inherit;cursor:pointer;white-space:nowrap;transform:translate(var(--bx),var(--by));transition:background-color .3s,color .3s,border-color .3s,transform .35s var(--ease)}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-solid{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-solid:hover{background:var(--pop);border-color:var(--pop);color:var(--white)}
.dark .btn-solid:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.arr{display:inline-grid;place-items:center;width:28px;height:28px;margin-left:-10px;border-radius:50%;background:var(--on-accent);color:var(--accent);transition:transform .45s var(--spring)}
.btn:not(.btn-solid) .arr{background:var(--fg);color:var(--bg)}
.arr svg{width:15px;height:15px}
.btn:hover .arr{transform:rotate(-45deg)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* floating bar */
.bar-wrap{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 14px);z-index:50;padding-left:max(var(--gl),var(--pad));padding-right:max(var(--gr),var(--pad));pointer-events:none;transition:transform .5s var(--ease)}
.bar-wrap.hide{transform:translateY(-140%)}
.bar{pointer-events:auto;position:relative;max-width:1264px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px;padding:0 10px 0 20px;border-radius:16px;background:var(--ink);color:var(--paper);box-shadow:0 10px 30px rgba(18,17,16,.16);transition:background-color .5s var(--ease),color .5s var(--ease)}
body[data-theme="ink"] .bar{background:var(--paper);color:var(--ink)}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:27px;letter-spacing:-.02em;text-decoration:none}
.logo img{width:34px;height:auto;transition:transform .5s var(--spring)}
.logo:hover img{transform:rotate(-14deg) scale(1.1)}
.nav{display:flex;gap:30px;font-size:16px;font-weight:500}
.nav a{padding:10px 0;text-decoration:none}
.bar .btn{min-height:44px;padding:0 18px;font-size:15px;background:var(--paper);color:var(--ink);border-color:var(--paper)}
body[data-theme="ink"] .bar .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bar .btn:hover{background:var(--butter);border-color:var(--butter);color:var(--ink)}
.bar .arr{background:var(--ink);color:var(--paper)}
body[data-theme="ink"] .bar .arr{background:var(--paper);color:var(--ink)}
.menu-btn{display:none;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid currentColor;background:none;cursor:pointer;font-weight:600;font-size:15px}
.bar-progress{position:absolute;left:16px;right:16px;bottom:-1px;height:2px;pointer-events:none}
.bar-progress i{position:absolute;inset:0;background:var(--butter);border-radius:2px;transform-origin:0 50%;transform:scaleX(var(--p,0))}
.bar-progress img{position:absolute;bottom:-8px;width:26px;left:calc(var(--p,0) * (100% - 26px));transform:rotate(calc(var(--p,0) * 720deg));opacity:0;transition:opacity .3s}
.bar-progress.on img{opacity:1}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:80;background:var(--black);color:var(--paper);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 24px) var(--gr) calc(env(safe-area-inset-bottom,0px) + 24px) var(--gl);overflow:auto}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-top .menu-btn{display:inline-flex;align-items:center}
.menu nav{display:flex;flex-direction:column;gap:6px;margin-top:40px}
.menu nav a{font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;font-size:clamp(48px,14vw,84px);line-height:1;text-decoration:none}
.menu-stk{width:140px;margin-top:auto;align-self:flex-end;rotate:-8deg}

/* hero */
.hero{padding-top:calc(env(safe-area-inset-top,0px) + 136px)}
.hero-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px 64px;align-items:end}
.hero-side{display:flex;flex-direction:column;gap:28px;padding-bottom:8px}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.stage{position:relative;margin-top:clamp(48px,6vw,80px)}
.strip{display:grid;grid-template-columns:1.1fr .9fr 1.1fr .9fr;gap:clamp(12px,2vw,28px);align-items:start}
.frame{position:relative}
.frame > img,.frame > video{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;background:#000}
.frame:nth-child(2),.frame:nth-child(4){margin-top:clamp(28px,5vw,72px)}
.hint{margin:22px 0 0;font-size:14px;color:var(--soft)}
.hint b{color:var(--fg);font-weight:600}

/* stickers */
.stk{position:absolute;z-index:6;width:clamp(96px,10vw,150px);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.stk > *{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 2px rgba(18,17,16,.28));transition:transform .25s var(--ease),filter .25s}
.stk svg{overflow:visible}
.stk:hover > *{transform:scale(1.05) rotate(-3deg)}
.stk.dragging{cursor:grabbing;z-index:40}
.stk.dragging > *{transform:scale(1.12);filter:drop-shadow(0 18px 14px rgba(18,17,16,.3))}
html.motion .stk.slap > *{animation:slap .55s var(--spring) both;animation-delay:var(--d,0s)}
@keyframes slap{0%{opacity:0;transform:scale(1.9) rotate(12deg)}60%{opacity:1;transform:scale(.92)}100%{opacity:1;transform:none}}
.stk.placed{width:clamp(80px,8vw,120px)}

/* client marquee */
.clients{padding-block:clamp(48px,6vw,72px) clamp(56px,7vw,88px)}
.clients .label{margin-bottom:16px}
.marq{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq ul{flex:0 0 auto;display:flex;align-items:center;gap:28px;margin:0;padding:0 28px 0 0;list-style:none;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(22px,2.3vw,32px);letter-spacing:-.01em;white-space:nowrap}
.marq img{width:28px;height:auto}
html.motion .marq ul{animation:marq 60s linear infinite}
.marq:hover ul{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}
html:not(.motion) .marq{mask-image:none;-webkit-mask-image:none}
html:not(.motion) .marq ul{flex-wrap:wrap;white-space:normal;padding-left:max(var(--gl),var(--pad))}
html:not(.motion) .marq ul + ul{display:none}

/* hand-drawn marks */
.mk{position:relative;white-space:nowrap}
.mk svg{position:absolute;pointer-events:none;overflow:visible}
.mk path,.mk ellipse{fill:none;stroke:var(--c,var(--butter));stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mk-under svg{left:-2%;width:104%;bottom:-.24em;height:.32em}
.mk-ring svg{left:-8%;top:-18%;width:116%;height:136%}
.mk-strike svg{left:-2%;width:104%;top:38%;height:.36em}
.mk-dash path{stroke-dasharray:9 11}
html.motion .mk svg{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease) .2s}
html.motion .mk.on svg{clip-path:inset(0 0 0 0)}
.doodle{display:inline-block;width:.62em;height:.62em;vertical-align:.45em;margin-left:.06em}
.doodle path{fill:none;stroke:var(--c,var(--coral));stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
html.motion .doodle{transform:scale(0) rotate(-30deg);transition:transform .6s var(--spring) .7s}
html.motion .doodle.on{transform:none}

/* intro */
.intro{position:relative;overflow:hidden}
.intro .wrap{position:relative;z-index:1}
.intro-copy{max-width:min(64%,840px)}
.facts{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--line);font-size:16px;max-width:560px}
.facts li{padding:13px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px}
.facts span:last-child{color:var(--soft);text-align:right}
.giant{position:absolute;pointer-events:none;width:min(1060px,74vw);aspect-ratio:1/1;object-fit:cover;right:-20vw;top:50%;margin-top:calc(min(1060px,74vw) / -2);transform:translate3d(0,var(--gy,0px),0)}

/* section heads */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,56px)}
.sec-head .label{max-width:24em}

/* playground */
.play{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px 72px;align-items:center}
.pit{position:relative;height:clamp(360px,34vw,460px);border-radius:20px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden;touch-action:pan-y}
body[data-theme="white"] .pit{background:var(--paper)}
.pit.live{touch-action:none}
.pit ul{list-style:none;margin:0;padding:22px;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.pit.live ul{padding:0}
.chip{display:inline-flex;align-items:center;white-space:nowrap;min-height:46px;padding:0 20px;border-radius:999px;font-size:17px;font-weight:500;color:var(--ink);border:1.5px solid var(--ink);user-select:none;-webkit-user-select:none}
.chip:nth-child(5n+1){background:var(--butter)}.chip:nth-child(5n+2){background:var(--white)}.chip:nth-child(5n+3){background:var(--coral)}.chip:nth-child(5n+4){background:var(--mint)}.chip:nth-child(5n){background:var(--lilac)}
.pit.live .chip{position:absolute;left:0;top:0;cursor:grab;will-change:transform}
.pit-note{position:absolute;right:16px;bottom:12px;font-size:13px;color:var(--soft);pointer-events:none}

/* work deck */
.deck{position:relative;height:calc(100vh * 3.6)}
.deck-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.6vh,28px);overflow:hidden;padding-block:96px 28px}
.deck-head{text-align:center}
.deck-stage{position:relative;width:min(860px,84vw);aspect-ratio:16/10;max-height:54vh;margin:0 auto}
.deck-card{position:absolute;inset:0;display:block;text-decoration:none;color:var(--ink);background:var(--frame);border-radius:4px;transform-origin:50% 120%;will-change:transform;box-shadow:0 22px 50px rgba(0,0,0,.45)}
.deck-card.light{color:var(--white)}
.deck-media{position:absolute;inset:14px 14px 88px;background:#000;overflow:hidden;border-radius:2px}
.deck-media video{width:100%;height:100%;object-fit:contain;transform:scale(1.3)}
.deck-ph{position:absolute;left:14px;top:12px;font-size:13px;color:rgba(239,231,218,.62)}
.deck-cap{position:absolute;left:18px;right:18px;bottom:0;height:88px;display:flex;align-items:center;gap:20px}
.deck-client{font-size:clamp(28px,3.4vw,48px);line-height:1;flex:0 0 auto}
.deck-title{font-weight:500;font-size:clamp(14px,1.2vw,17px);line-height:1.2;flex:1 1 auto;min-width:0}
.deck-svc{font-size:13px;opacity:.8;flex:0 0 auto;text-align:right;max-width:12em}
.deck-foot{display:flex;justify-content:center;align-items:center;gap:24px}
.deck-count{font-size:15px;color:var(--soft);font-variant-numeric:tabular-nums}
.deck-count b{color:var(--fg);font-weight:600}

/* services fan */
.fan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-top:8px}
.fan-card{position:relative;rotate:var(--r);perspective:1400px;transition:rotate .5s var(--spring),translate .5s var(--spring);z-index:1}
.fan-card:hover,.fan-card:focus-within{rotate:0deg;translate:0 -12px;z-index:5}
.fan-inner{position:relative;aspect-ratio:3/4.1;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.fan-card.flipped .fan-inner{transform:rotateY(180deg)}
.fan-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--frame);padding:12px;border-radius:4px;display:flex;flex-direction:column;color:var(--ink);box-shadow:0 14px 30px rgba(18,17,16,.16)}
.fan-card.light .fan-face{color:var(--white)}
.fan-art{flex:1 1 auto;min-height:0;background:var(--paper);border-radius:2px;display:grid;place-items:center;padding:16px}
.fan-art img{width:84%;height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(18,17,16,.25));transition:transform .6s var(--spring)}
.fan-card:hover .fan-art img{transform:rotate(-6deg) scale(1.06)}
.fan-band{padding:14px 6px 2px}
.fan-band p{margin:6px 0 0;font-size:14px;line-height:1.3}
.fan-flip{align-self:flex-start;display:inline-flex;align-items:center;min-height:40px;margin:2px 6px 0;padding:0;background:none;border:0;font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.fan-back{transform:rotateY(180deg);padding:22px 20px 12px;gap:10px}
.fan-back ul{list-style:none;margin:4px 0 0;padding:0;font-size:15px}
.fan-back li{padding:6px 0;border-bottom:1px solid color-mix(in srgb,currentColor 28%,transparent)}
.fan-back dl{display:flex;gap:28px;margin:4px 0 0;font-size:15px}
.fan-back dt{opacity:.75}.fan-back dd{margin:0;font-weight:600}
.fan-actions{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;font-weight:600}
.fan-actions a{text-underline-offset:4px}
.fan-actions .fan-flip{margin:0}

/* process */
.travel{position:relative;height:calc(100vh * 2.8)}
.travel-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3.5vh,40px);overflow:hidden;padding-top:72px}
.track{display:flex;gap:clamp(24px,3vw,48px);padding-left:max(var(--gl),var(--pad));will-change:transform}
.step{flex:0 0 clamp(280px,32vw,440px);display:flex;flex-direction:column;gap:12px}
.step-media{aspect-ratio:1/1;overflow:hidden}
.step-media video{width:100%;height:100%;object-fit:contain;transform:scale(1.2)}
.step p{margin:0;max-width:30em}
.step .label{color:var(--butter)}
.trail{position:relative;height:28px;margin:0 max(var(--gr),var(--pad)) 0 max(var(--gl),var(--pad))}
.trail::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed var(--line)}
.trail img{position:absolute;top:-22px;width:60px;left:calc(var(--t,0) * (100% - 60px))}

/* studio */
.studio{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px 88px;align-items:center}
.snaps{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding:36px 28px 16px}
.snap{position:relative;margin:0;background:var(--white);padding:12px 12px 0;box-shadow:0 18px 40px rgba(18,17,16,.16);transition:rotate .5s var(--spring),translate .5s var(--spring)}
.snap-a{grid-column:1 / span 6;rotate:-4deg;z-index:2}
.snap-b{grid-column:6 / span 6;margin-top:84px;rotate:3.5deg;z-index:1}
.snap:hover{rotate:0deg;translate:0 -8px;z-index:3}
.snap-img{aspect-ratio:4/5;background:#D9D0C2;display:grid;place-items:center;font-size:14px;color:var(--ink)}
.snap figcaption{font-family:var(--serif);font-weight:500;font-variation-settings:"SOFT" 100;font-size:15px;padding:11px 4px 14px;color:var(--ink)}
.badge{position:absolute;z-index:4;width:clamp(92px,8.5vw,124px);transition:transform .5s var(--spring)}
.badge svg{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 2px rgba(18,17,16,.25))}
.snap:hover .badge{transform:rotate(-10deg) scale(1.08)}
.snap-stk{position:absolute;width:clamp(84px,8vw,120px);z-index:4;rotate:12deg;filter:drop-shadow(0 3px 2px rgba(18,17,16,.28))}
.studio .pair{font-size:clamp(40px,5vw,76px)}

/* quotes */
.quotes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:40px 64px;align-items:start}
.ring{width:150px;height:150px;position:relative}
.ring svg{width:100%;height:100%}
html.motion .ring svg{animation:turn 22s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.ring img{position:absolute;left:25%;top:22%;width:50%}
.q-stage{display:grid}
.q{grid-area:1/1;margin:0;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s .6s;visibility:hidden}
.q.on{opacity:1;transform:none;visibility:visible;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.q blockquote{margin:0;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(28px,3.2vw,46px);line-height:1.16;letter-spacing:-.015em}
.q figcaption{margin-top:22px;font-size:16px}
.q-ctrl{display:flex;gap:10px;align-items:center;margin-top:32px}
.q-ctrl button{width:48px;height:48px;border-radius:50%;border:1.5px solid currentColor;background:none;font-size:18px;cursor:pointer;transition:background-color .3s,color .3s}
.q-ctrl button:hover{background:var(--fg);color:var(--bg)}
.q-count{font-size:15px;color:var(--soft);min-width:48px;text-align:center;font-variant-numeric:tabular-nums}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px 80px;align-items:start}
.contact-art{width:min(400px,80%);margin-top:40px;aspect-ratio:4/5;object-fit:cover}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:8px;font-size:15px}
.form input,.form textarea{font:inherit;font-size:17px;color:inherit;background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:10px 0;border-radius:0;transition:border-color .3s}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--butter)}
.form fieldset{border:0;margin:0;padding:0}
.form legend{font-size:15px;margin-bottom:12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);font-size:16px;transition:background-color .25s,color .25s,border-color .25s}
.opt input:checked + span{background:var(--butter);color:var(--ink);border-color:var(--butter)}
.opt input:focus-visible + span{outline:3px solid var(--butter);outline-offset:3px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.status{margin:0;font-size:16px}
.alt{display:flex;flex-direction:column;gap:16px;margin-top:32px;font-size:17px}
.copy{display:inline;background:none;border:0;padding:0;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:5px}
.copied{font-size:13px;background:var(--butter);color:var(--ink);padding:3px 10px;border-radius:999px;margin-left:8px;display:inline-block;rotate:-4deg}
.clock{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--soft);font-variant-numeric:tabular-nums}
.dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--mint);animation:pulse 2.4s infinite}
.dot.off{background:var(--cream);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(143,208,174,.6)}70%{box-shadow:0 0 0 10px rgba(143,208,174,0)}100%{box-shadow:0 0 0 0 rgba(143,208,174,0)}}
.charge{position:fixed;left:0;bottom:6vh;width:clamp(180px,22vw,300px);z-index:70;pointer-events:none;transform:translateX(-120%)}
.charge.go{animation:charge 1.6s cubic-bezier(.5,0,.4,1) forwards}
@keyframes charge{to{transform:translateX(110vw)}}

/* footer: a floor of mammoths */
.ftr{padding-top:clamp(72px,8vw,112px)}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:40px}
.ftr-top nav{display:flex;flex-direction:column;gap:10px;font-size:17px}
.ftr-top nav a{text-decoration:none;align-self:flex-start}
.ftr-top nav .label{margin-bottom:6px}
.ftr-cta .pair{font-size:clamp(40px,5vw,72px)}
.floor{position:relative;height:clamp(220px,22vw,300px);margin-top:48px;border-bottom:1px solid var(--line);overflow:hidden}
.floor-list{list-style:none;margin:0;padding:0;height:100%;display:flex;align-items:flex-end;justify-content:space-around;gap:12px}
.floor-list li{width:clamp(80px,11vw,160px);user-select:none;-webkit-user-select:none}
.floor-list img{width:100%;height:auto;pointer-events:none}
.floor.live .floor-list li{position:absolute;left:0;top:0;cursor:grab;will-change:transform}
.floor-note{position:absolute;right:0;top:8px;font-size:13px;color:var(--soft)}
.ftr-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-block:24px 32px;font-size:14px;color:var(--soft)}
.up{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:underline;text-underline-offset:4px;color:inherit;font-size:14px}

/* spinning badge */
.spin{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));width:108px;height:108px;z-index:45;display:block;transition:transform .5s var(--spring),opacity .4s}
.spin svg{width:100%;height:100%;transform:rotate(var(--spin,0deg))}
.spin img{position:absolute;left:24%;top:22%;width:52%;transition:transform .5s var(--spring)}
.spin:hover{transform:scale(1.08)}
.spin:hover img{transform:rotate(-14deg)}
.spin.away{opacity:0;transform:scale(.6);pointer-events:none}

/* cursor */
.cur{position:fixed;left:0;top:0;z-index:90;pointer-events:none;display:none}
html.fine .cur{display:block}
.cur-ring{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--fg);display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background-color .3s}
.cur-ring span{font-size:13px;font-weight:600;color:var(--ink);opacity:0;transition:opacity .2s}
.cur.big .cur-ring{width:78px;height:78px;margin:-39px 0 0 -39px;background:var(--butter)}
.cur.big .cur-ring span{opacity:1}
.cur.on-dark .cur-ring{background:var(--paper)}
.cur.big.on-dark .cur-ring{background:var(--butter)}
.cur.hide{opacity:0}

/* reveals: only for things that start below the fold */
html.motion .rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.motion .rv.pre{opacity:0;transform:translateY(28px)}

@media (max-width:980px){
  .nav,.bar .btn{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .hero-top,.play,.contact,.quotes,.studio{grid-template-columns:minmax(0,1fr)}
  .intro-copy{max-width:none}
  .giant{width:120vw;right:-50vw;opacity:.35}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deck{height:auto}
  .deck-pin{position:static;height:auto;padding-block:88px}
  .deck-stage{aspect-ratio:auto;max-height:none;width:100%;display:flex;flex-direction:column;gap:20px;padding:0 max(var(--gr),var(--pad)) 0 max(var(--gl),var(--pad))}
  .deck-card{position:relative;inset:auto;aspect-ratio:4/4.4;transform:none !important}
  .deck-cap{flex-wrap:wrap;height:auto;padding-block:12px;row-gap:4px;align-content:center}
  .deck-media{bottom:110px}
  .deck-svc{text-align:left}
  .fan{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .travel{height:auto}
  .travel-pin{position:static;height:auto;padding-block:88px}
  .track{flex-direction:column;padding-right:max(var(--gr),var(--pad))}
  .step{flex-basis:auto}
  .step-media{max-width:420px}
  .trail{display:none}
  .ftr-top{grid-template-columns:minmax(0,1fr)}
  .form{grid-template-columns:minmax(0,1fr)}
  .ring{width:110px;height:110px}
  .spin{width:80px;height:80px}
}
@media (max-width:560px){.fan{grid-template-columns:minmax(0,1fr)}.fan-card{max-width:340px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .deck,.travel{height:auto}
  .deck-pin,.travel-pin{position:static;height:auto;padding-block:88px}
  .deck-stage{aspect-ratio:auto;max-height:none;display:grid;gap:20px}
  .deck-card{position:relative;aspect-ratio:16/10;transform:none !important}
  .track{flex-wrap:wrap}
}

/* ===== v5.1 ===== */
/* stickers: every cut-out gets a clean white die-cut edge and the same soft shadow */
.stk > img,.snap-stk,.floor-list img,.menu-stk,.fan-art img,.tile-stk,.spin img,.ring img,.svc-art img,.value-art img,.person-stk,.next-stk img,.lost-art img,.byline img{
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 4px rgba(18,17,16,.22))}
.stk > svg,.badge svg,.spin svg,.ring svg{filter:drop-shadow(0 4px 4px rgba(18,17,16,.22))}
.ring svg{width:100%;height:100%}

/* clients strip: more room to breathe */
.clients{padding-block:clamp(88px,9vw,128px) clamp(88px,9vw,128px)}
.clients .label{margin-bottom:22px}

/* intro: words on the left, the flying mammoth in its own space on the right */
.intro-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px 64px;align-items:center}
.intro-copy{max-width:none}
.intro-art{position:relative;aspect-ratio:1/1;margin-right:calc(-1 * max(var(--gr),var(--pad)))}
.intro-art video{width:100%;height:100%;object-fit:contain;transform:scale(1.18)}

/* any size: a clean list instead of the toy box */
.any{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 88px;align-items:start}
.asks{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--fg)}
.asks li{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-weight:500;font-size:clamp(18px,1.5vw,21px);line-height:1.3}
.asks li::before{content:"";flex:0 0 10px;height:10px;border-radius:50%;background:var(--c,var(--butter));box-shadow:0 0 0 1.5px var(--ink)}
.asks li:nth-child(4n+2){--c:var(--coral)}.asks li:nth-child(4n+3){--c:var(--mint)}.asks li:nth-child(4n){--c:var(--lilac)}

/* more projects: a 12-up grid */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px) clamp(14px,1.6vw,22px)}
.tile{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.tile-media{position:relative;aspect-ratio:1/1;border-radius:4px;background:var(--c);overflow:hidden;display:grid;place-items:center}
.tile-ph{position:absolute;left:12px;top:10px;font-size:12px;color:rgba(18,17,16,.7)}
.tile-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-stk{position:relative;width:58%;height:auto;opacity:0;transform:scale(.6) rotate(-14deg);transition:opacity .35s,transform .5s var(--spring)}
.tile:hover .tile-stk,.tile:focus-visible .tile-stk{opacity:1;transform:none}
html:not(.fine) .tile-stk{opacity:1;transform:none}
.tile-cap{display:flex;flex-direction:column;gap:2px}
.tile-name{font-weight:600;font-size:17px;line-height:1.25}
.tile-what{font-size:14px;color:var(--soft)}
.tile:hover .tile-name{text-decoration:underline;text-underline-offset:4px}

@media (max-width:980px){
  .intro-grid,.any{grid-template-columns:minmax(0,1fr)}
  .intro-art{max-width:420px;margin:0 auto}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== inner pages ===== */
.sec-tight{padding-block:clamp(48px,6vw,88px)}
.page-head{padding-top:calc(env(safe-area-inset-top,0px) + 136px);padding-bottom:clamp(48px,6vw,88px)}
.head-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px 64px;align-items:end}
.head-grid .lede{padding-bottom:10px}
.back,.read-more{display:inline-flex;font-weight:600;font-size:16px;text-decoration:none}
.back::before{content:"\2190";margin-right:8px}
.read-more{margin-top:20px}
.read-more::after{content:"\2192";margin-left:8px}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 36px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--fg);background:transparent;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .25s,color .25s}
.pill:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.pill.on{background:var(--fg);color:var(--bg)}
.tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile[hidden]{display:none}
.empty{padding:32px 0}
html.motion .tile,html.motion .post-card{transition:opacity .35s,transform .35s var(--ease)}
.tile.fade,.post-card.fade{opacity:0;transform:scale(.97)}

/* case study */
.case-title{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(40px,5.4vw,84px);line-height:1.02;letter-spacing:-.025em;margin:0;max-width:18ch;text-wrap:balance}
.meta-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 32px;margin:48px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:16px}
.meta-strip dt{color:var(--soft);font-size:14px}.meta-strip dd{margin:4px 0 0}
.case-hero{position:relative;margin-top:48px;border-radius:6px;padding:clamp(10px,1.4vw,18px);background:var(--frame)}
.case-hero > img,.case-hero-ph{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;background:#000;position:relative;overflow:hidden}
.case-hero-ph video{width:100%;height:100%;object-fit:contain;transform:scale(1.2)}
.case-hero .stk{width:clamp(110px,12vw,180px)}
.story{display:flex;flex-direction:column;gap:clamp(48px,6vw,80px)}
.story-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px 64px;align-items:start}
.story-h{font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;font-size:clamp(28px,2.6vw,40px);line-height:1;margin:0}
.prose{font-size:clamp(18px,1.4vw,20px);line-height:1.65;max-width:38em}
.prose p{margin:0 0 1.1em}.prose p:last-child{margin-bottom:0}
.prose h2{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(26px,2.4vw,34px);line-height:1.15;margin:1.8em 0 .5em}
.prose a{text-underline-offset:4px}
.prose img{border-radius:4px;margin:1.6em 0}
.prose blockquote{margin:1.6em 0;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:1.5em;line-height:1.2}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.g-item{margin:0}.g-item img{width:100%;border-radius:4px}
.g-wide{grid-column:1/-1}
.ph-block{background:var(--c);border-radius:4px;aspect-ratio:4/5;display:grid;place-items:center;font-size:14px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.g-wide.ph-block{aspect-ratio:16/8}
.pills{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pills li{padding:8px 18px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:17px}
.next-band{border-top:1px solid var(--line)}
.next{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:clamp(56px,7vw,96px);text-decoration:none}
.next .label{display:block}
.next-name{display:block;font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;font-size:clamp(44px,7vw,110px);line-height:.95;margin-top:8px;transition:transform .5s var(--ease)}
.next:hover .next-name{transform:translateX(16px)}
.next-stk img{width:clamp(110px,14vw,200px);transition:transform .6s var(--spring)}
.next:hover .next-stk img{transform:rotate(-12deg) scale(1.08)}

/* services page */
.svc-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px 88px;align-items:center}
.svc-art{background:var(--c);border-radius:6px;aspect-ratio:1/1;display:grid;place-items:center;padding:12%}
.svc-art img{width:100%;height:auto}
.svc-facts{display:flex;gap:48px;margin:28px 0 0}
.svc-facts dd{margin:4px 0 0;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:26px}
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tier{border:1.5px solid var(--fg);border-radius:6px;padding:28px;display:flex;flex-direction:column;gap:10px}
.tier p{margin:0}
.tier-price .srf{font-size:36px}
.faq-list{border-top:1.5px solid var(--fg)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0}
.faq summary::-webkit-details-marker{display:none}
.faq-q{font-weight:600;font-size:clamp(19px,1.6vw,23px);line-height:1.3}
.faq .plus{font-size:30px;line-height:1;transition:transform .25s var(--ease)}
.faq[open] .plus{transform:rotate(45deg)}
.faq p{margin:0 0 26px;max-width:38em}

/* about */
.about-photos{display:grid;grid-template-columns:1.2fr .9fr 1fr;gap:clamp(12px,2vw,28px);margin-top:clamp(40px,5vw,72px);align-items:start}
.about-photos .frame > img{aspect-ratio:4/5}
.about-photos .frame:nth-child(2){margin-top:56px}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px clamp(32px,5vw,80px)}
.person-photo{position:relative;aspect-ratio:4/5;border-radius:4px;background:#1F1E1C;display:grid;place-items:center;color:var(--soft);font-size:14px;max-width:520px}
.person-photo > img:first-child{width:100%;height:100%;object-fit:cover;border-radius:4px}
.person-stk{position:absolute;right:-22px;bottom:-26px;width:clamp(100px,10vw,150px);rotate:-8deg}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.value{display:flex;flex-direction:column;gap:8px}
.value-art{background:var(--c);border-radius:6px;aspect-ratio:1/1;display:grid;place-items:center;padding:14%;margin-bottom:10px}
.value-art img{width:100%;height:auto;transition:transform .6s var(--spring)}
.value:hover .value-art img{transform:rotate(-8deg) scale(1.06)}
.value p{margin:0}
.award{display:grid;grid-template-columns:minmax(0,2fr) auto;gap:32px;align-items:center;border-top:1px solid var(--line);padding-top:40px}

/* journal */
.lead-post{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px 64px;align-items:center;text-decoration:none}
.lead-media{position:relative;aspect-ratio:3/2;border-radius:6px;background:var(--c)}
.lead-media > img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.lead-media .stk{width:clamp(96px,10vw,140px)}
.lead-title{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(32px,3.6vw,54px);line-height:1.06;letter-spacing:-.02em;margin:12px 0 0;text-wrap:balance}
.lead-post:hover .lead-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
.post-card{display:flex;flex-direction:column;text-decoration:none}
.post-card[hidden]{display:none}
.post-media{position:relative;aspect-ratio:3/2;border-radius:4px;background:var(--c);overflow:hidden;transition:transform .5s var(--ease)}
.post-media img{width:100%;height:100%;object-fit:cover}
.post-card:hover .post-media{transform:rotate(-1deg) translateY(-4px)}
.post-title{font-weight:600;font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:-.01em;margin:6px 0 0;text-wrap:balance}
.post-card:hover .post-title{text-decoration:underline;text-underline-offset:4px}
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 64px;align-items:end}
.signup-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:8px;font-size:15px;flex:1 1 260px}
.field input{font:inherit;font-size:17px;padding:12px 0;border:0;border-bottom:1.5px solid var(--line);background:transparent;color:inherit}
.field input:focus{outline:none;border-bottom-color:var(--fg)}
.signup-form .status{flex-basis:100%}

/* article */
.art-head{max-width:980px}
.art-title{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(38px,5vw,76px);line-height:1.04;letter-spacing:-.025em;margin:12px 0 0;text-wrap:balance}
.byline{display:flex;align-items:center;gap:12px;margin:28px 0 0;font-weight:600;font-size:16px}
.byline img{width:44px;height:auto}
.art-cover{margin-top:48px}
.art-cover > *{display:block}
.art-cover > img{width:100%;border-radius:6px}
.art-cover:has(.tile-ph){position:relative}
.art-cover .tile-ph{position:static;display:grid;place-items:center;aspect-ratio:16/8;background:var(--c);border-radius:6px;font-size:14px}
.art-body{margin:clamp(48px,6vw,80px) auto 0;padding-bottom:clamp(40px,5vw,72px)}
.article{padding-top:calc(env(safe-area-inset-top,0px) + 136px)}

/* contact */
.contact-head{padding-bottom:clamp(72px,8vw,120px)}
.contact-list{display:flex;flex-direction:column;gap:18px;margin:40px 0 0;font-size:17px}
.contact-list dd{margin:4px 0 0}
.form-card{position:relative}
.form select{font:inherit;font-size:17px;color:inherit;background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:10px 0;border-radius:0}
.form select option{color:var(--ink)}
.form select:focus{outline:none;border-bottom-color:var(--butter)}
.form .label a{color:inherit}

/* cta band, thanks, 404 */
.cta-band{border-bottom:1px solid var(--line)}
.cta-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px 64px;align-items:end}
.cta-side{display:flex;flex-direction:column;gap:28px}
.thanks-art,.lost-art{display:flex;justify-content:center;margin-top:24px}
.thanks-art video{width:min(520px,90%);aspect-ratio:1/1;object-fit:contain;background:var(--black);border-radius:6px}
.lost-art img{width:min(360px,70%);rotate:-10deg}
html.motion .lost-art img{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-18px) rotate(6deg)}}
.deck-media img{width:100%;height:100%;object-fit:cover}

@media (max-width:980px){
  .head-grid,.svc-grid2,.story-row,.people,.lead-post,.signup,.cta-in,.award{grid-template-columns:minmax(0,1fr)}
  .meta-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers{grid-template-columns:minmax(0,1fr)}
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-photos .frame:nth-child(3){display:none}
  .svc-art{max-width:420px}
}
@media (max-width:560px){
  .posts,.gallery{grid-template-columns:minmax(0,1fr)}
  .tiles,.tiles-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .tile-name{font-size:15px}
}


/* ===== v6: one typeface per heading, more type, the fill-in-the-blanks form ===== */
/* headings: either condensed caps or the serif, never both in one line.
   sizes sit in :where() so a component class (case-title, story-h...) can always resize them */
.hd{margin:0;text-wrap:balance}
.hd-sans{font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;letter-spacing:-.005em}
.hd-serif{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;letter-spacing:-.025em}
:where(.hd-sans){font-size:clamp(44px,5.8vw,88px);line-height:.92}
:where(.hd-serif){font-size:clamp(42px,5.4vw,84px);line-height:1}
.pair-hero{font-size:clamp(50px,6.8vw,104px);line-height:.98;max-width:18ch}
.pair-hero .ln{display:block;padding-bottom:.06em}
.hd-sans.pair-sm{font-size:clamp(30px,2.7vw,40px);line-height:.95}
.studio .hd{font-size:clamp(40px,5vw,76px)}
.ftr-cta .hd{font-size:clamp(40px,5vw,72px)}
.deck-client{font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase}
.story-h.hd{font-size:clamp(26px,2.4vw,36px);line-height:1}
.next-name.hd-serif{text-transform:none;font-stretch:normal;font-size:clamp(44px,6.4vw,100px);line-height:1}
.next-sum{display:block;margin-top:14px;max-width:40ch;font-size:17px;color:var(--soft)}
.case-intro{margin-top:28px;font-size:clamp(19px,1.6vw,23px);max-width:40em}

/* letters rise in one by one, then nudge up under the pointer */
.split .w,.split-words .sw{display:inline-block;white-space:nowrap}
.split .ln{overflow:hidden}
.split .ch{display:inline-block;transition:translate .45s var(--spring),color .3s}
html.motion .split.go .ch{animation:rise .9s var(--ease) both;animation-delay:calc(var(--i) * 22ms + .05s)}
html.fine .split .ch:hover{translate:0 -.1em}
.split-words .sw{overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split-words .sw > span{display:inline-block;transition:transform .9s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.split-words.wait .sw > span{transform:translateY(110%)}

/* big type marquee */
.type-band{padding-block:clamp(36px,5vw,64px);overflow:hidden;border-block:1px solid var(--line)}
.vmarq{overflow:hidden}
.vmarq-track{display:flex;width:max-content;animation:vmarq 70s linear infinite}
@keyframes vmarq{to{transform:translate3d(-50%,0,0)}}
.vmarq[data-band-speed^="-"] .vmarq-track{animation-direction:reverse}
.vmarq-set{display:flex;align-items:center;gap:.32em;padding-right:.32em;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(60px,10.5vw,168px);line-height:1.05;letter-spacing:-.03em;white-space:nowrap}
.vm-outline{color:transparent;-webkit-text-stroke:1.5px var(--fg)}
.vm-stk{width:.72em;height:auto;flex:0 0 auto;rotate:-8deg;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 4px rgba(18,17,16,.22))}
.vm-stk:nth-of-type(even){rotate:9deg}
html:not(.motion) .vmarq{mask-image:linear-gradient(90deg,#000 80%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent)}

/* who we work with */
.mf-line{margin:0;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(40px,6.2vw,100px);line-height:1.02;letter-spacing:-.03em}
.mf-fixed{display:block}
.rotator{display:inline-block;position:relative;min-height:1.05em;transition:transform .38s var(--ease),opacity .38s;transform-origin:50% 100%;
  background:linear-gradient(transparent 58%,var(--hl,var(--butter)) 62%,var(--hl,var(--butter)) 86%,transparent 86%);padding:0 .08em;margin-left:-.08em}
.rotator.out{transform:translateY(-40%) rotateX(70deg);opacity:0}
.rotator.in{transition:none;transform:translateY(40%) rotateX(-70deg);opacity:0}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(48px,6vw,80px)}
.path{position:relative;display:flex;flex-direction:column;gap:12px;min-height:320px;padding:28px 28px 26px;border-radius:8px;border:1.5px solid var(--fg);background:transparent;text-decoration:none;color:inherit;overflow:hidden;transition:transform .5s var(--spring),box-shadow .4s}
.path::before{content:"";position:absolute;right:-48px;top:-48px;width:190px;height:190px;border-radius:50%;background:var(--c);transition:transform .6s var(--spring)}
.path img{position:absolute;right:14px;top:14px;width:110px;height:auto;rotate:8deg;transition:transform .6s var(--spring);filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 4px rgba(18,17,16,.22))}
.path-k{position:relative;font-weight:600;font-size:15px;margin-top:118px}
.path-t{position:relative;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(24px,2.2vw,32px);line-height:1.12;letter-spacing:-.015em;flex:1 1 auto}
.path-go{position:relative;font-weight:600;font-size:16px;display:inline-flex;align-items:center;gap:8px}
.path-go::after{content:"\2192"}
.path:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 22px 40px rgba(18,17,16,.12)}
.path:hover::before{transform:scale(1.25)}
.path:hover img{transform:rotate(-16deg) scale(1.1)}

/* inline call to action */
.cta-inline{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-top:clamp(56px,6vw,88px);padding:28px 0;border-block:1.5px solid var(--fg)}
.cta-inline-t{margin:0;font-size:clamp(19px,1.6vw,23px);line-height:1.35;max-width:36em}
.cta-inline-k{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:1.25em;letter-spacing:-.015em;margin-right:.2em}

/* pull quote */
.pull{position:relative;font-size:clamp(36px,5.2vw,84px);line-height:1.04;max-width:20ch;margin:0 auto;text-align:center}
.pull-wrap{text-align:center}
.pull-mark{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(110px,13vw,220px);line-height:.8;height:.42em;color:var(--c);-webkit-text-stroke:2px var(--ink)}

/* what we made */
.made-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--fg)}
.made-list li{display:flex;align-items:baseline;gap:22px;padding:18px 0;border-bottom:1px solid var(--line);font-weight:500;font-size:clamp(19px,1.6vw,23px);line-height:1.3;transition:padding .4s var(--ease)}
.made-list li:hover{padding-left:12px}
.made-n{flex:0 0 2.2em;font-size:14px;font-weight:600;color:var(--soft);font-variant-numeric:tabular-nums}
.case-hero > video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;background:#000}

/* before and after */
.ba{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#000}
.ba > img,.ba > .ph-block{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;border-radius:0}
.ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--white);box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.ba-tag{position:absolute;bottom:16px;padding:6px 14px;border-radius:999px;background:var(--white);color:var(--ink);font-size:14px;font-weight:600;pointer-events:none}
.ba-l{left:16px}.ba-r{right:16px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba:has(.ba-range:focus-visible){outline:3px solid var(--pop);outline-offset:4px}

/* contact: the form gets the room */
.contact-wide{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:48px clamp(48px,6vw,96px);align-items:start}
.contact-intro .hd{font-size:clamp(44px,5vw,76px)}

/* the form you fill in like a letter */
.madlib{--in:var(--blue);position:relative}
.dark .madlib{--in:var(--butter)}
.ml-hello{margin:0 0 10px;font-weight:600;font-size:17px;color:var(--soft)}
.ml{margin:0;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(26px,2.9vw,42px);line-height:1.62;letter-spacing:-.015em;text-wrap:pretty}
.blank{position:relative;display:inline-block;max-width:100%;vertical-align:baseline}
.blank input,.blank select{font:inherit;letter-spacing:inherit;color:var(--in);background:transparent;border:0;border-bottom:2px dashed var(--line);border-radius:0;padding:0 2px;margin:0;min-width:3ch;max-width:100%;width:8ch;line-height:1.2;transition:border-color .3s,background-color .3s;-webkit-appearance:none;appearance:none}
.blank select{padding-right:26px;cursor:pointer}
.blank select option{font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--white)}
.blank-sel::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2.5px solid var(--in);border-bottom:2.5px solid var(--in);rotate:45deg;pointer-events:none;transition:translate .3s var(--ease)}
.blank-sel:hover::after{translate:0 3px}
.blank input::placeholder{color:var(--fg);opacity:.32}
.blank input:focus,.blank select:focus{outline:none;border-bottom-style:solid;border-bottom-color:var(--in);background:color-mix(in srgb,var(--in) 12%,transparent)}
.blank.filled input,.blank.filled select{border-bottom-style:solid;border-bottom-color:color-mix(in srgb,var(--in) 55%,transparent)}
.blank.err input{border-bottom-color:var(--coral)}
html.motion .blank.err{animation:shake .45s var(--ease)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.ml-meas{position:absolute;visibility:hidden;white-space:pre;left:0;top:0;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(26px,2.9vw,42px);letter-spacing:-.015em;pointer-events:none}
.ml-more{display:flex;flex-direction:column;gap:10px;margin-top:36px;font-size:16px;font-weight:600}
.ml-more .soft{font-weight:400;color:var(--soft)}
.ml-more textarea{font:inherit;font-weight:400;font-size:17px;color:inherit;background:transparent;border:1.5px solid var(--line);border-radius:8px;padding:14px 16px;resize:vertical;min-height:96px;transition:border-color .3s}
.ml-more textarea:focus{outline:none;border-color:var(--in)}
.ml-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}
.ml-progress{display:flex;align-items:center;gap:12px;margin:0;font-size:15px;color:var(--soft)}
.ml-dots{display:flex;gap:6px}
.ml-dots i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--soft);transition:background-color .3s,border-color .3s,transform .4s var(--spring)}
.ml-dots i.on{background:var(--mint);border-color:var(--mint);transform:scale(1.2)}
.madlib.ready .ml-left{color:var(--fg);font-weight:600}
.madlib .status{margin-top:16px;min-height:1.5em}
.madlib > .label{margin-top:8px}
.madlib > .label a{color:inherit}

@media (max-width:980px){
  .contact-wide,.paths{grid-template-columns:minmax(0,1fr)}
  .path{min-height:260px}
}
@media (max-width:560px){
  .ml{line-height:1.7}
  .pull-mark{font-size:1.6em}
}
@media (prefers-reduced-motion:reduce){.vmarq-track{animation:none}}
.nw{white-space:nowrap}
.nw .blank{max-width:calc(100% - .5em)}
.deck-client{font-size:clamp(22px,2.6vw,38px);flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-title{max-width:22em}
@media (max-width:1180px){.deck-title{display:none}}
.tile-media.noimg .tile-stk{opacity:1;transform:rotate(-6deg)}
.tiles-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(16px,2vw,28px)}
.tiles-2 .tile-media{aspect-ratio:4/3}
.tiles-2 .tile-name{font-size:clamp(20px,1.7vw,24px)}
.tiles-2 .tile-what{font-size:16px;max-width:36em}
.tiles-2 .tile-stk{width:34%}
@media (max-width:560px){.tiles-2{grid-template-columns:minmax(0,1fr)}}
.g-item .ph-block{aspect-ratio:4/5}.g-wide .ph-block{aspect-ratio:16/8}
/* the pinned deck starts at the top, so there's no black gap before the heading arrives */
@media (min-width:981px){
  .deck{height:calc(100vh * 3.2)}
  .deck-pin{justify-content:flex-start;padding-top:clamp(96px,13vh,150px)}
  .deck-stage{width:min(980px,84vw);max-height:58vh}
}
.tier-price{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.015em}
.svc-facts dd{font-size:clamp(19px,1.6vw,22px);line-height:1.25;max-width:14em}
.fan-back dd{line-height:1.25}
.pay-note{margin:0;font-size:16px;padding:16px 18px;border-radius:8px;background:color-mix(in srgb,var(--mint) 35%,transparent)}
.pay-note b{font-weight:600}
.tiers > .pay-note,.tiers > .ctas{grid-column:1/-1}
@media (min-width:981px){.travel-pin{justify-content:flex-start;padding-top:clamp(110px,14vh,160px)}}

/* award sticker on the deck */
.deck-award{position:absolute;right:-26px;top:-30px;width:clamp(92px,8vw,124px);rotate:12deg;z-index:3;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3))}
.deck-award svg{width:100%;height:auto;display:block}
.meta-strip{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.meta-award dd{font-weight:600}

/* The Trade Marks */
.tm{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px clamp(48px,6vw,96px);align-items:center}
.tm-card{position:relative;border:1.5px solid var(--fg);border-radius:10px;padding:clamp(24px,3vw,40px);background:var(--bg)}
.tm-card::before{content:"";position:absolute;inset:auto 22px -12px 22px;height:12px;border-radius:0 0 10px 10px;background:#FF6700}
.tm-label{margin:0 0 14px;font-weight:600;font-size:15px;color:#C24E00}
.tm-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--fg)}
.tm-list li{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;font-size:clamp(24px,2.4vw,34px);line-height:1}
.tm-n{display:inline-grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:#FF6700;color:var(--ink);font:600 15px/1 var(--sans);text-transform:none}
.tm-foot{margin:18px 0 0;font-size:15px;color:var(--soft)}
.ftr-tm{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:48px;padding:18px 22px;border-radius:10px;border:1.5px solid var(--line);text-decoration:none;font-size:16px;transition:border-color .3s,background-color .3s}
.ftr-tm:hover{border-color:#FF6700;background:rgba(255,103,0,.08)}
.ftr-tm-k{font-weight:600;color:#FF8A3D}
.ftr-tm-go{margin-left:auto;font-size:20px;transition:transform .4s var(--spring)}
.ftr-tm:hover .ftr-tm-go{transform:translate(3px,-3px)}

/* about: how we got here */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;border-top:1.5px solid var(--fg)}
.tl{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:28px}
.tl::before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:var(--c,var(--butter));box-shadow:0 0 0 1.5px var(--ink)}
.tl:nth-child(2){--c:var(--coral)}.tl:nth-child(3){--c:var(--mint)}.tl:nth-child(4){--c:var(--lilac)}
.tl-when{font-size:clamp(38px,4vw,60px);line-height:1}
.tl-name{font-weight:600;font-size:19px;margin-top:6px}
.tl-line{font-size:16px;color:var(--soft);max-width:26em}
@media (max-width:980px){.tm{grid-template-columns:minmax(0,1fr)}.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.deck-award{right:-8px;top:-24px}}
@media (max-width:560px){.timeline{grid-template-columns:minmax(0,1fr)}}
.frame-tag{position:absolute;left:10px;bottom:10px;z-index:2;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-size:12px;font-weight:600;pointer-events:none}
/* a hand-drawn double tick: message received, by both of us */
.doodle-ticks{width:1.15em;height:.66em;vertical-align:.1em;margin-left:.18em;overflow:visible}
.doodle-ticks path{stroke-width:3.2;stroke-dasharray:1;stroke-dashoffset:0}
html.motion .doodle-ticks{transform:none;transition:none}
html.motion .doodle-ticks path{stroke-dashoffset:1;transition:stroke-dashoffset .45s var(--ease) .8s}
html.motion .doodle-ticks path + path{transition-delay:1.15s}
html.motion .doodle-ticks.on path{stroke-dashoffset:0}
/* service cards and service pages show real project work, with the mammoth pinned on */
.fan-art.has-photo{position:relative;padding:0;overflow:visible;background:#000}
.fan-art .fan-photo{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;border-radius:2px;filter:none;transition:transform .6s var(--ease)}
.fan-card:hover .fan-art .fan-photo{transform:none}
.fan-art .fan-stk{position:absolute;right:-12px;top:-16px;width:34%;height:auto;rotate:-8deg;transition:transform .6s var(--spring)}
.fan-card:hover .fan-art .fan-stk{transform:rotate(-10deg) scale(1.1)}
.svc-art.has-photo{position:relative;padding:0;overflow:visible;background:#000}
.svc-art .svc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px;filter:none}
.svc-art .svc-stk{position:absolute;right:-22px;bottom:-26px;width:34%;height:auto;rotate:-8deg}

/* The Trade Marks band: their orange, a van that drives in */
.tm-band{background:#FF6700;color:var(--ink);--fg:var(--ink);--soft:rgba(18,17,16,.72);--line:rgba(18,17,16,.25);--accent:var(--ink);--on-accent:#FF6700;--pop:var(--ink);overflow:hidden}
.tm-band .btn-solid:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.tm-band .arr{background:#FF6700;color:var(--ink)}
.tm{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.tm-h{font-size:clamp(48px,6.4vw,104px);line-height:.9}
.tm-pills{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tm-pills li{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:var(--white);font-weight:600;font-size:16px;box-shadow:0 0 0 1.5px var(--ink)}
.tm-pills .tm-n{flex:0 0 26px;height:26px;font-size:13px;background:var(--ink);color:#FF6700}
.tm-band .tm-foot{margin-top:18px;color:var(--soft)}
.tm-van{position:relative;padding-bottom:18px}
.tm-van-svg{display:block;width:100%;height:auto;overflow:visible}
.tm-road{position:absolute;left:-10%;right:-30vw;bottom:14px;height:4px;background:repeating-linear-gradient(90deg,var(--ink) 0 46px,transparent 46px 80px);opacity:.85}
.tm-sign{position:absolute;right:6%;top:-6%;z-index:2;padding:10px 18px;background:var(--ink);color:#FF6700;font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;font-size:clamp(20px,1.8vw,26px);letter-spacing:.02em;rotate:6deg;border-radius:6px;box-shadow:0 0 0 3px var(--white)}
html.motion .tm-van .tm-van-svg{transform:translateX(-70%);transition:transform 1.6s cubic-bezier(.2,.75,.25,1)}
html.motion .tm-van.on .tm-van-svg{transform:none}
html.motion .tm-van .tm-wheel{transform:rotate(-720deg);transition:transform 1.6s cubic-bezier(.2,.75,.25,1)}
html.motion .tm-van.on .tm-wheel{transform:none}
html.motion .tm-van.on .tm-body{animation:tm-bob 2.6s ease-in-out 1.6s infinite}
@keyframes tm-bob{50%{transform:translateY(-3px)}}
html.motion .tm-sign{transform:scale(0) rotate(-20deg);transition:transform .55s var(--spring) 1.5s}
html.motion .tm-van.on .tm-sign{transform:none}
.tm-van:hover .tm-body{animation-duration:.5s}
@media (max-width:980px){.tm{grid-template-columns:minmax(0,1fr)}.tm-van{max-width:560px}}
/* contact sits on white so it stands apart from the black footer; blanks get a soft fill so they read as fields */
.contact-light{background:var(--white);color:var(--ink)}
.madlib .blank input,.madlib .blank select{background:color-mix(in srgb,var(--in) 8%,transparent);border-radius:6px 6px 0 0;padding:0 .18em;border-bottom:2.5px solid color-mix(in srgb,var(--in) 55%,transparent)}
.madlib .blank select{padding-right:28px}
.madlib .blank input::placeholder{color:var(--in);opacity:.5}
.madlib .blank input:focus,.madlib .blank select:focus{background:color-mix(in srgb,var(--in) 16%,transparent);border-bottom-color:var(--in)}
.madlib .blank.filled input,.madlib .blank.filled select{background:transparent;border-bottom-color:var(--in)}
.contact-light .madlib .ml-more textarea{background:var(--paper);border-color:transparent}
.contact-light .madlib .ml-more textarea:focus{border-color:var(--in)}
a.frame{display:block;color:inherit;text-decoration:none}
a.frame > img{transition:transform .6s var(--ease)}
a.frame:hover > img{transform:scale(1.02)}
.fan-stk svg,.svc-stk svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 4px 4px rgba(18,17,16,.25))}
.fan-art .fan-stk{width:30%}
.tm-pills li{gap:10px}
.tm-pills b{font-weight:700}
.tm-what{font-weight:400;color:var(--soft);font-size:14px}

/* trades work tiles */
.tm-work-wrap{margin-top:clamp(56px,6vw,88px)}
.tm-work-k{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin:0 0 18px;padding-top:18px;border-top:1.5px solid var(--ink);font-weight:600;font-size:16px}
.tm-work-k a{text-underline-offset:4px}
.tm-work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tm-band-work .tm-work{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}
.tm-tile{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink)}
.tm-tile-media{position:relative;display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--ink);box-shadow:0 0 0 1.5px var(--ink);margin-bottom:10px}
.tm-tile-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tm-tile:hover .tm-tile-media img{transform:scale(1.04)}
.tm-tile-ph{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;color:#FF6700;font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;font-size:clamp(22px,2vw,30px);line-height:1}
.tm-tile-go{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#FF6700;color:var(--ink);font-size:17px;font-weight:700;box-shadow:0 0 0 2px var(--ink);transition:transform .4s var(--spring)}
.tm-tile:hover .tm-tile-go{transform:rotate(45deg) scale(1.1)}
.tm-tile-trade{font-size:13px;font-weight:600;color:var(--soft)}
.tm-tile-name{font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;font-size:clamp(22px,1.9vw,28px);line-height:1}
.tm-tile-line{font-size:15px;color:var(--soft)}
.tm-h-sm{font-size:clamp(40px,5vw,80px)}
.tm-note{padding-block:0}
.tm-note-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-block:28px;text-decoration:none;color:var(--ink)}
.tm-note-k{font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;font-size:clamp(22px,2vw,30px)}
.tm-note-t{font-size:17px;flex:1 1 320px}
.tm-note-go{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#FF6700;font-size:20px;transition:transform .4s var(--spring)}
.tm-note-in:hover .tm-note-go{transform:rotate(45deg)}
@media (max-width:980px){.tm-work,.tm-band-work .tm-work{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tm-work,.tm-band-work .tm-work{grid-template-columns:minmax(0,1fr)}}
.art-van{border-radius:6px;padding:clamp(28px,5vw,72px) clamp(24px,8vw,140px) clamp(20px,3vw,40px);overflow:hidden}
.art-van .tm-van{max-width:760px;margin:0 auto}
.art-tm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:2.4em;padding:22px 24px;border-radius:10px;background:#FF6700;color:var(--ink);text-decoration:none}
.art-tm > span:nth-child(2){flex:1 1 260px;font-size:17px}
.art-tm:hover .tm-note-go{transform:rotate(45deg)}
.card-van{position:absolute;inset:0;display:grid;place-items:center;padding:8% 10%;border-radius:inherit}
.card-van .tm-van{width:100%;padding:0}
.card-van .tm-van-svg{transform:none !important}

/* ===== intro: the mammoth pulls the sheet ===== */
.loader{display:none}
html.loading .loader,html.revealed .loader{display:block;position:fixed;inset:0;z-index:200;cursor:pointer}
html.revealed .loader{pointer-events:none}
html.loading{overflow:hidden}
.loader-sheet{position:absolute;inset:0 -2vw 0 0;background:#000;transform-origin:0 50%;will-change:transform;box-shadow:-30px 0 60px rgba(0,0,0,.35)}
.loader-sheet::before{content:"";position:absolute;top:0;bottom:0;left:0;width:22px;background:linear-gradient(90deg,rgba(239,231,218,.08),transparent);pointer-events:none}
.loader-word{position:absolute;left:max(var(--gl),var(--pad));top:50%;margin:0;transform:translateY(-50%);font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(56px,11vw,180px);letter-spacing:-.03em;line-height:1;color:var(--paper);overflow:hidden;padding-bottom:.08em}
.loader-word span{display:block;animation:rise .9s var(--ease) .15s both}
.loader-mammoth{position:absolute;right:4vw;top:50%;width:min(52vw,720px);aspect-ratio:1/1;object-fit:contain;margin-top:calc(min(52vw,720px) / -2);animation:loader-in .9s var(--spring) both}
@keyframes loader-in{from{opacity:0;transform:translateX(-12vw) scale(.8)}}
.loader-skip{position:absolute;right:max(var(--gr),20px);bottom:max(20px,env(safe-area-inset-bottom,0px));background:none;border:1.5px solid rgba(239,231,218,.4);color:var(--paper);border-radius:999px;padding:8px 16px;font-size:14px;cursor:pointer}
html.revealed .loader-skip{display:none}
/* hold the hero until the sheet is pulled */
html.loading .split .ch{opacity:0}
html.loading .stk.slap > *{animation-play-state:paused}
html.motion .hero .frame{transition:translate 1.1s var(--ease),opacity 1s var(--ease)}
html.motion .hero .frame:nth-child(2){transition-delay:.08s}html.motion .hero .frame:nth-child(3){transition-delay:.16s}html.motion .hero .frame:nth-child(4){transition-delay:.24s}
html.loading .hero .frame{translate:0 80px;opacity:0}
html.motion .hero-side{transition:opacity .9s var(--ease) .35s,translate .9s var(--ease) .35s}
html.loading .hero-side{opacity:0;translate:0 24px}
@media (max-width:980px){.loader-mammoth{right:-8vw;width:80vw;margin-top:-40vw;top:62%}.loader-word{top:30%}}

/* ===== WhatsApp ===== */
.wa-ico{width:17px;height:17px;display:block}
.btn-wa .wa-arr{transform:none !important}
.btn-wa:hover .wa-arr{transform:rotate(-12deg) scale(1.08) !important}
.bar .bar-wa .wa-arr{background:#25D366;color:var(--ink)}
.wa-card{margin-top:28px;padding:22px 22px 24px;border-radius:12px;background:var(--paper);border:1.5px solid var(--ink);display:flex;flex-direction:column;gap:10px;align-items:flex-start;max-width:440px}
.wa-card-k{margin:0;font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
.wa-card-k::before{content:"";width:9px;height:9px;border-radius:50%;background:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.25)}
.wa-card-t{margin:0 0 6px;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.015em}
.wa-or{margin-top:18px}
.wa-float{display:none}
@media (max-width:980px){
  .wa-float{display:inline-flex;position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:46;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;font-size:16px;box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 0 2px var(--paper);transform:translate(-50%,160%);transition:transform .5s var(--spring)}
  .wa-float .wa-ico{width:22px;height:22px;color:#25D366}
  .wa-float.on{transform:translate(-50%,0)}
  .spin{display:none}
}

/* ===== hamburger ===== */
.burger{display:none;position:relative;width:48px;height:48px;border-radius:50%;border:1.5px solid currentColor;background:none;color:inherit;cursor:pointer;padding:0}
.burger span{position:absolute;left:13px;right:13px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .45s var(--spring),top .3s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:27px}
.burger.is-x span:first-child{top:22.5px;transform:rotate(45deg)}.burger.is-x span:last-child{top:22.5px;transform:rotate(-45deg)}
.burger[aria-expanded="true"] span:first-child{top:22.5px;transform:rotate(45deg)}.burger[aria-expanded="true"] span:last-child{top:22.5px;transform:rotate(-45deg)}

/* ===== the menu ===== */
.menu-top .logo img{width:30px}
.menu nav{gap:0;margin-top:28px;border-top:1px solid rgba(239,231,218,.18)}
.menu nav a{display:flex;align-items:baseline;gap:14px;padding:10px 0 8px;border-bottom:1px solid rgba(239,231,218,.18);font-size:clamp(44px,13vw,80px);overflow:hidden}
.menu nav a[aria-current="page"] .menu-l{color:var(--butter)}
.menu-n{font-family:var(--sans);font-weight:600;font-stretch:100%;font-variation-settings:"wdth" 100;font-size:13px;letter-spacing:.04em;color:rgba(239,231,218,.55);text-transform:none;min-width:2.2em}
.menu-l{display:inline-block}
html.motion .menu.in nav a .menu-l{animation:rise .7s var(--ease) both;animation-delay:calc(var(--i) * 55ms + .05s)}
html.motion .menu.in nav a .menu-n{animation:fadein .5s var(--ease) both;animation-delay:calc(var(--i) * 55ms + .2s)}
html.motion .menu.in .menu-foot{animation:fadeup .6s var(--ease) .4s both}
html.motion .menu.in .menu-stk{animation:slap .6s var(--spring) .55s both}
@keyframes fadein{from{opacity:0}}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}}
.menu-foot{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.menu-foot .btn{align-self:flex-start}
.menu-wa .wa-arr{background:#25D366 !important;color:var(--ink) !important}
.menu-mail{margin:0;font-size:17px}
.menu-social{display:flex;flex-wrap:wrap;gap:18px;margin:0;font-size:15px;color:rgba(239,231,218,.7)}
.menu-social a{text-decoration:none}
.menu-stk{width:120px}

@media (max-width:980px){
  .bar .burger{display:block}
  .menu .burger{display:block;color:var(--paper)}
  .menu-btn{display:none !important}
  .bar{height:62px;padding:0 8px 0 16px}
  .bar .burger{width:44px;height:44px}
  .bar .burger span{left:12px;right:12px}.bar .burger span:first-child{top:16px}.bar .burger span:last-child{top:25px}
}

/* ===== mobile hero: big type, swipeable work ===== */
@media (max-width:640px){
  .hero{padding-top:calc(env(safe-area-inset-top,0px) + 112px)}
  .pair-hero{font-size:clamp(46px,13.2vw,60px);line-height:.96;max-width:none}
  .hero-top{gap:22px}
  .hero-side{gap:22px}
  .hero-side .lede{font-size:17px}
  .hero .ctas{flex-direction:column;align-items:stretch}
  .hero .ctas .btn{justify-content:center}
  .stage{margin:36px calc(-1 * max(var(--gl),var(--pad))) 0}
  .strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px max(var(--gl),var(--pad)) 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .strip::-webkit-scrollbar{display:none}
  .frame{flex:0 0 76%;scroll-snap-align:center;margin-top:0 !important}
  .frame > img{aspect-ratio:4/5}
  .frame .stk{width:96px}
  .frame:nth-child(2) .stk{display:none}
  .frame:nth-child(1) .stk{right:-4% !important;top:-6% !important}
  .frame:nth-child(4) .stk{left:auto !important;right:-2%;bottom:-4% !important}
  .stage::after{content:"Swipe for more work \2192";display:block;padding:0 max(var(--gl),var(--pad));font-size:13px;color:var(--soft)}
  .bar-wa{display:none}
}
@media (min-width:981px){.burger{display:none}}
@media (max-width:980px){.wa-float{white-space:nowrap;background:#25D366;color:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 0 2px var(--ink)}.wa-float .wa-ico{color:var(--ink)}}
.menu .menu-wa{background:var(--paper);color:var(--ink);border-color:var(--paper);min-height:56px;padding:0 24px 0 18px;font-size:17px}
.fan-art .fan-stk{width:36%;right:-14px;top:-20px}
.tile:hover .tile-photo{transform:scale(1.04)}.tile-photo{transition:transform .6s var(--ease)}

/* ===== The Trade Marks, take two: real logo, real vans ===== */
.tm-band{--tmo:#FF6E00;background:var(--tmo)}
.tm-plate{display:inline-flex;align-items:center;padding:16px 22px;border-radius:12px;background:#080707;box-shadow:0 0 0 3px #fff,0 14px 30px rgba(0,0,0,.25);rotate:-2deg;transition:rotate .5s var(--spring),transform .5s var(--spring)}
.tm-plate:hover{rotate:0deg;transform:scale(1.03)}
.tm-plate img{display:block;height:clamp(30px,3vw,44px);width:auto}
.tm-h{font-family:"Big Shoulders Display","Big Shoulders",var(--sans);font-size:clamp(48px,6vw,96px);line-height:.88;letter-spacing:0}
.tm-scene{position:relative;aspect-ratio:5/4;min-height:300px}
.tm-flagbig{position:absolute;right:2%;top:2%;width:34%;rotate:8deg;filter:drop-shadow(0 0 0 #fff) drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 12px rgba(0,0,0,.25))}
.tm-van-a{position:absolute;left:-4%;bottom:8%;width:86%;z-index:2;filter:drop-shadow(0 22px 18px rgba(0,0,0,.35))}
.tm-van-b{position:absolute;right:-6%;bottom:24%;width:58%;z-index:1;filter:drop-shadow(0 16px 14px rgba(0,0,0,.3)) brightness(.95)}
.tm-scene .tm-road{left:-20%;right:-30vw;bottom:9%}
.tm-scene .tm-sign{right:auto;left:4%;top:6%;z-index:3}
html.motion .tm-scene .tm-van-a{transform:translateX(-60vw);transition:transform 1.5s cubic-bezier(.2,.75,.25,1)}
html.motion .tm-scene .tm-van-b{transform:translateX(-80vw);transition:transform 1.8s cubic-bezier(.2,.75,.25,1) .15s}
html.motion .tm-scene.on .tm-van-a,html.motion .tm-scene.on .tm-van-b{transform:none}
html.motion .tm-scene.on .tm-van-a{animation:tm-bob 2.8s ease-in-out 1.6s infinite}
html.motion .tm-scene .tm-flagbig{transform:scale(0) rotate(-30deg);transition:transform .7s var(--spring) .9s}
html.motion .tm-scene.on .tm-flagbig{transform:none}
html.motion .tm-scene.on .tm-sign{transform:none}
html.motion .tm-scene .tm-sign{transform:scale(0) rotate(-20deg);transition:transform .55s var(--spring) 1.3s}
.ftr-tm-flag{width:44px;height:auto;align-self:center}
.card-van{background:var(--tmo,#FF6E00)}
.card-van .cv-a{position:absolute;left:4%;bottom:6%;width:82%;filter:drop-shadow(0 14px 12px rgba(0,0,0,.3))}
.card-van .cv-logo{position:absolute;right:5%;top:7%;width:26%;rotate:8deg;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)}
.art-van{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding-bottom:clamp(20px,3vw,36px)}
.art-van .av-logo{height:clamp(34px,4vw,56px);width:auto}
.art-van .av-van{width:min(760px,90%);filter:drop-shadow(0 22px 18px rgba(0,0,0,.3))}
@media (max-width:980px){.tm-scene{aspect-ratio:4/3;max-width:620px}}
.tm-h{font-size:clamp(44px,5vw,80px)}
/* trades case studies sit on white cards so the orange doesn't take over */
.tm-tile{background:var(--white);border-radius:14px;padding:12px 12px 18px;box-shadow:0 0 0 1.5px var(--ink),0 10px 24px rgba(18,17,16,.14);transition:transform .45s var(--spring),box-shadow .35s}
.tm-tile:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 0 0 1.5px var(--ink),0 18px 34px rgba(18,17,16,.2)}
.tm-tile-media{border-radius:8px;box-shadow:none}
.tm-tile-trade,.tm-tile-name,.tm-tile-line{padding:0 6px}
.tm-tile-trade{color:#C24E00}
.tm-tile-line{color:rgba(18,17,16,.66)}
.tm-work-k{border-top:0;padding:14px 18px;border-radius:999px;background:var(--ink);color:var(--paper);align-items:center}
.tm-work-k a{color:#FF8A3D}
/* contact on a warm stone grey, so it stands apart from the white quotes above and the black footer below */
.contact-light{--stone:#DEDAD3;background:var(--stone);--line:rgba(18,17,16,.2)}
.contact-light .wa-card{background:var(--white)}
.contact-light .madlib .ml-more textarea{background:var(--white)}
.contact-light .madlib .blank input,.contact-light .madlib .blank select{background:rgba(255,255,255,.6)}
.contact-light .madlib .blank input:focus,.contact-light .madlib .blank select:focus{background:var(--white)}

/* craftsman badges */
.cb{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 5px 5px rgba(18,17,16,.25))}
.stk:has(.cb) > *{filter:none}
.fan-reel,.svc-reel{position:absolute;inset:0;border-radius:2px;overflow:hidden;background:#000}
.svc-reel{border-radius:6px}
.fan-reel video,.svc-reel video{width:100%;height:100%;object-fit:cover;transform:scale(1.35)}
/* the trades work sits on black under the orange, so the orange stays a single bold block */
.tm-band-home{padding-bottom:0}
.tm-work-band{margin-top:clamp(64px,7vw,104px);background:#080707;color:var(--paper);padding-block:clamp(48px,5vw,72px) clamp(64px,7vw,96px)}
.tm-work-band .tm-work-k{background:none;padding:0 0 16px;border-bottom:1px solid rgba(239,231,218,.2);border-radius:0;margin-bottom:24px;font-size:17px}
.tm-work-band .tm-tile{box-shadow:none}
.tm-work-band .tm-tile:hover{box-shadow:0 18px 34px rgba(0,0,0,.4)}
.crest{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 6px 6px rgba(18,17,16,.28))}
.stk:has(.crest) > *{filter:none}
.stk:has(.crest){width:clamp(120px,11vw,170px)}
.deck-award{width:clamp(96px,8vw,128px)}
.card-van .cv-a{left:9%;width:82%}
.snap-img{overflow:hidden}.snap-img img{width:100%;height:100%;object-fit:cover}

/* playful stickers */
.pst{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 5px 4px rgba(18,17,16,.22))}
.stk:has(.pst) > *{filter:none}
.stk:has(.pst){width:clamp(130px,12vw,190px)}
.frame:nth-child(2) .stk:has(.pst){width:clamp(120px,10vw,160px)}
.badge:has(.pst){width:150px}

/* Word stickers: dark die-cut plates, line icons, site type */
.tg-c{font-family:var(--sans);font-weight:800;font-stretch:64%;font-variation-settings:"wdth" 64;letter-spacing:.01em}
.tg-s{font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 100;letter-spacing:-.01em}
svg.tag{display:block;width:100%;height:auto;overflow:visible}
.stk.stk-tag{width:clamp(190px,18vw,270px)}
.deck-award{width:clamp(170px,15vw,230px);right:-34px;top:-40px;rotate:8deg}
.snap .badge{width:clamp(170px,15vw,220px)}
@media (max-width:760px){.frame .stk.stk-tag{width:150px}.stk.stk-tag{width:clamp(150px,44vw,210px)}.deck-award{width:150px;right:-6px}}
@media (max-width:760px){.stk-tag[data-tag="speedy"]{bottom:-78px;right:0}}

.deck-award{width:clamp(130px,11vw,170px);right:-30px;top:-44px}
@media (max-width:760px){.deck-award{width:120px;right:-6px;top:-30px}}

/* flat stickers: no shadow, they sit straight on the work */
.stk > svg.tag-flat,.badge svg.tag-flat,.deck-award svg.tag-flat{filter:none}
.deck-award{filter:none}
.ringtag{position:relative;display:block;aspect-ratio:1}
.ringtag svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 4px rgba(18,17,16,.22))}
.ringtag img{position:absolute;left:24%;top:22%;width:52%;filter:none}
.ringtag img{left:50%;top:50%;width:54%;max-height:54%;object-fit:contain;transform:translate(-50%,-50%)}
.type-band-sm{padding-block:clamp(22px,3vw,36px)}
.type-band-sm .vmarq-set{font-size:clamp(36px,5.2vw,80px)}

/* Progress bar: the knight rides along the line as you scroll */
.bar-progress .bp-knight{position:absolute;bottom:-3px;width:54px;left:calc(var(--p,0) * (100% - 54px));opacity:0;transition:opacity .3s}
.bar-progress.on .bp-knight{opacity:1}
.bar-progress .bp-knight img{position:static;display:block;width:100%;height:auto;transform:none;opacity:1;transform-origin:50% 100%;filter:drop-shadow(0 2px 2px rgba(18,17,16,.25))}
.bar-progress.back .bp-knight img{scale:-1 1}
html.motion .bar-progress.moving .bp-knight img{animation:gallop .32s ease-in-out infinite}
@keyframes gallop{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -4px;rotate:3deg}}
@media (max-width:760px){.bar-progress .bp-knight{width:40px;left:calc(var(--p,0) * (100% - 40px))}}
.ringtag img{width:50%;max-height:50%}

/* Contact: serif saved for the headline only; the form sentence and WhatsApp card in the sans */
.ml{font-family:var(--sans);font-weight:500;font-variation-settings:normal;font-size:clamp(22px,2.3vw,34px);letter-spacing:-.02em;line-height:1.7}
.madlib .blank input,.madlib .blank select{font-weight:700}
.wa-card-t{font-family:var(--sans);font-weight:700;font-variation-settings:normal;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.02em;line-height:1.25}

/* Essex Tech50 badge */
.ftr-badge,.about-badge{display:block;width:clamp(150px,13vw,190px);margin-top:26px;transition:transform .4s var(--spring)}
.ftr-badge img,.about-badge img{display:block;width:100%;height:auto}
.ftr-badge:hover,.about-badge:hover{transform:rotate(-3deg) scale(1.04)}
.deck-media video.deck-real{object-fit:cover;transform:none;object-position:50% 50%}

/* Location / service landing pages */
.area-offer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.area-card{border:1.5px solid var(--fg);border-radius:6px;padding:clamp(20px,2vw,28px);background:var(--bg);position:relative}
.area-card::before{content:"";display:block;width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px var(--ink);margin-bottom:22px}
.area-card p{margin:12px 0 0;color:var(--soft);font-size:17px;line-height:1.5}
.pills a{text-decoration:none;color:inherit}
.pills li:has(a):hover{border-color:var(--fg)}
@media (max-width:980px){.area-offer{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.area-offer{grid-template-columns:minmax(0,1fr)}}
.ftr-top{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
@media (max-width:980px){.ftr-top{grid-template-columns:repeat(3,minmax(0,1fr))}.ftr-top .ftr-cta{grid-column:1/-1}}
@media (max-width:600px){.ftr-top{grid-template-columns:minmax(0,1fr)}}
.art-body iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:4px;margin:28px 0;background:#000}
.tier-ex{list-style:none;margin:14px 0 0;padding:0}.tier-ex li{position:relative;padding:7px 0 7px 22px;border-top:1px solid var(--line);font-size:16px;line-height:1.4}.tier-ex li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--butter);box-shadow:0 0 0 1.5px var(--ink)}

/* client logo strip: one ink colour, one optical height */
.marq ul.marq-logos{gap:clamp(48px,5vw,80px);padding-right:clamp(48px,5vw,80px)}
.marq ul.marq-logos img{width:auto;height:clamp(30px,3vw,44px);max-width:200px;object-fit:contain;opacity:.88;transition:opacity .3s}
.marq ul.marq-logos li:hover img{opacity:1}

/* Recent work captions: name left, details locked to the right edge */
.deck-cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(16px,2vw,28px);left:22px;right:22px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.deck-title{max-width:none;padding-left:clamp(16px,2vw,28px);border-left:1px solid color-mix(in srgb,currentColor 22%,transparent);line-height:1.3;opacity:.9}
.deck-svc{justify-self:end;text-align:right;max-width:16em;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;opacity:.75}
@media (max-width:1180px){.deck-cap{grid-template-columns:minmax(0,1fr) auto}}
@media (max-width:760px){.deck-cap{grid-template-columns:minmax(0,1fr);row-gap:4px;padding-block:14px}.deck-svc{justify-self:start;text-align:left}}

/* Services: capabilities in two columns, reasons as a lighter list */
.asks-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.asks-2 li{font-size:clamp(16px,1.25vw,18px);padding:12px 0}
.why-list{list-style:none;margin:0;padding:0}
.why-list li{position:relative;padding:8px 0 8px 30px;font-size:clamp(16px,1.25vw,18px);line-height:1.45;color:var(--soft)}
.why-list li::before{content:"\2192";position:absolute;left:0;top:8px;color:var(--fg);font-weight:700}
@media (max-width:560px){.asks-2{grid-template-columns:minmax(0,1fr)}}

/* How it works: a path down the page */
.proc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px clamp(48px,7vw,120px);align-items:start}
.proc-head{position:sticky;top:120px}
.proc-list{list-style:none;margin:0;padding:0;position:relative;--p:0}
.proc-line{position:absolute;left:31px;top:32px;bottom:32px;width:2px;background:var(--line)}
.proc-line i{position:absolute;inset:0 0 auto 0;height:calc(var(--p) * 100%);background:var(--butter)}
.proc-line img{position:absolute;left:50%;top:calc(var(--p) * 100%);width:64px;transform:translate(-50%,-50%) rotate(-6deg);filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.proc-step{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(20px,3vw,40px);padding:0 0 clamp(48px,7vh,80px)}
.proc-step:last-child{padding-bottom:0}
.proc-n{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--black);border:2px solid var(--line);font-family:var(--sans);font-weight:800;font-stretch:64%;font-variation-settings:"wdth" 64;font-size:24px;color:var(--soft);position:relative;z-index:1;transition:background .4s,border-color .4s,color .4s}
.proc-step .label{margin:6px 0 6px;color:var(--soft);transition:color .4s}
.proc-step h3{margin:0 0 10px;font-size:clamp(26px,2.6vw,38px)}
.proc-step p:last-child{margin:0;max-width:30em;color:var(--soft);font-size:clamp(17px,1.4vw,20px);line-height:1.55}
.proc-step > div{opacity:.45;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease)}
.proc-step.on .proc-n{background:var(--butter);border-color:var(--butter);color:var(--ink)}
.proc-step.on .label{color:var(--butter)}
.proc-step.on > div{opacity:1;transform:none}
html:not(.motion) .proc-step > div{opacity:1;transform:none}
@media (max-width:980px){.proc{grid-template-columns:minmax(0,1fr)}.proc-head{position:static}}
@media (max-width:560px){.proc-line{left:23px}.proc-step{grid-template-columns:48px minmax(0,1fr)}.proc-n{width:48px;height:48px;font-size:19px}.proc-line img{width:48px}}
.proc-line img{z-index:3}.proc-n{z-index:1}
.proc-line img{max-width:none;height:auto}

/* Ongoing support: heading across the top, the two plans get the full width */
#support .any{grid-template-columns:minmax(0,1fr);gap:clamp(36px,4vw,56px)}
#support .any > .rv:first-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 64px;align-items:end}
#support .any > .rv:first-child .lede{margin-top:0 !important}
#support .tiers{gap:clamp(20px,2.4vw,32px)}
#support .tier{padding:clamp(28px,3vw,44px);gap:14px}
#support .tier .h-3{font-size:clamp(20px,1.6vw,24px)}
#support .tier-price{font-size:clamp(26px,2.4vw,34px);margin-bottom:4px}
#support .tier > p:not(.tier-price){font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--soft)}
#support .tier-ex{margin-top:10px}
#support .tier-ex li{font-size:17px;padding:11px 0 11px 26px}
#support .tier-ex li::before{top:19px}
@media (max-width:980px){#support .any > .rv:first-child{grid-template-columns:minmax(0,1fr)}}
#support .any > .rv:first-child .kicker{grid-column:1/-1;margin-bottom:0}
#support .any > .rv:first-child .hd{margin:0}
.proc-line img{width:84px}
@media (max-width:560px){.proc-line img{width:56px}}

/* Footer CTA on butter yellow, so it stands apart from the black footer below */
#foot .cta-band{--bg:var(--butter);--fg:var(--ink);--soft:rgba(18,17,16,.72);--line:rgba(18,17,16,.22);--accent:var(--ink);--on-accent:var(--paper);--pop:var(--ink);background:var(--butter);color:var(--ink);border-bottom:0}
#foot .cta-band .kicker::before{background:var(--ink)}
.g-item .g-vid{display:block;width:100%;height:auto;border-radius:4px;background:#000}
.award-logo{grid-template-columns:auto minmax(0,2fr) auto;gap:40px}
.award-badge{display:block;width:clamp(160px,15vw,220px);transition:transform .4s var(--spring)}.award-badge img{display:block;width:100%;height:auto}.award-badge:hover{transform:rotate(-3deg) scale(1.04)}
@media (max-width:980px){.award-logo{grid-template-columns:minmax(0,1fr)}}

/* Eyebrows: a small brand dot instead of a dash */
.kicker::before{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--butter);box-shadow:0 0 0 1.5px var(--ink)}
.dark .kicker::before{box-shadow:none}
#foot .cta-band .kicker::before{background:var(--ink);box-shadow:none}

/* Mobile polish: long quotes and outcome statements stay readable */
@media (max-width:640px){
  .q blockquote{font-size:clamp(20px,5.6vw,26px);line-height:1.3}
  .grow .statement{font-size:clamp(22px,6vw,28px) !important;line-height:1.3}
  .person-stk,.case-hero .stk{max-width:30vw}
  .case-hero .stk{right:0 !important}
}
.marq ul.marq-logos img[src*="stepping-out"]{height:clamp(24px,2.4vw,34px)}
@media (max-width:760px){.stk-tag[data-tag="speedy"]{position:relative;display:block;right:auto !important;bottom:auto !important;margin:24px 0 0 auto;width:150px}}

/* Hero: headline on two lines, lede and buttons in a row, so the work shows on short laptop screens */
@media (min-width:761px){
  .hero{padding-top:calc(env(safe-area-inset-top,0px) + clamp(128px,19vh,180px))}
  .hero-top{grid-template-columns:minmax(0,1fr);gap:clamp(32px,5.5vh,56px)}
  .pair-hero{font-size:clamp(46px,min(5.4vw,10vh),100px);max-width:none;line-height:1}
  .pair-hero .ln{white-space:nowrap}
  .hero-side{flex-direction:row;align-items:center;justify-content:space-between;gap:24px 48px;padding-bottom:0}
  .hero-side .lede{max-width:52ch;margin:0}
  .hero-side .ctas{flex-shrink:0}
  .stage{margin-top:clamp(56px,9vh,104px)}
}
@media (min-width:761px) and (max-width:1100px){
  .hero-side{flex-direction:column;align-items:flex-start}
}
@media (min-width:761px) and (max-width:980px){.pair-hero{font-size:clamp(48px,min(8.2vw,11.5vh),80px)}}

/* Mobile: dark sections run full width (no inset card), so text never sits on the card edge */
@media (max-width:760px){.dark.grow{clip-path:none}}
/* Footer herd: hover-and-throw on desktop, tap-to-hop on touch */
.fn-touch{display:none}
html:not(.fine) .fn-fine{display:none}
html:not(.fine) .fn-touch{display:inline}
html:not(.fine) .floor{height:auto;padding:44px 0 18px;overflow:visible}
html:not(.fine) .floor-list{flex-wrap:wrap;justify-content:center;gap:14px 10px}
html:not(.fine) .floor-list li{width:clamp(64px,21vw,120px);cursor:pointer;-webkit-tap-highlight-color:transparent}
html:not(.fine) .floor-list li.hop{animation:hop .7s cubic-bezier(.3,1.6,.5,1)}
html:not(.fine) .floor-note{left:0;right:auto}
@keyframes hop{0%{transform:none}30%{transform:translateY(-34px) rotate(-12deg) scale(1.08)}60%{transform:translateY(0) rotate(6deg)}80%{transform:translateY(-8px) rotate(-3deg)}100%{transform:none}}
/* Mobile: the two polaroids sit side by side as a neat pair */
@media (max-width:760px){
  .studio{gap:40px}
  .snaps{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:48px 6px 8px}
  .snap-a,.snap-b{grid-column:auto}
  .snap-a{rotate:-3deg}
  .snap-b{margin-top:44px;rotate:3deg}
  .snap{padding:7px 7px 0}
  .snap figcaption{font-size:12.5px;line-height:1.3;padding:8px 2px 10px}
  .snap .badge{width:118px !important}
  .snap-a .badge{right:-14px !important;top:-36px !important}
  .snap-b .badge{left:-18px !important;bottom:auto !important;top:-30px !important}
  .snap-stk{width:58px}
  .snap-a .snap-stk{left:-12px !important;bottom:auto !important;top:40% !important}
  .snap-b .snap-stk{right:-10px !important;top:auto !important;bottom:30% !important}
}
@media (max-width:760px){.intro-art{aspect-ratio:5/4;max-width:360px;margin:8px auto -24px;overflow:hidden;pointer-events:none}.intro-art video{transform:scale(1.25)}}
/* Services page on mobile: simple jump links instead of repeating the big cards */
.svc-jump{display:none}
@media (max-width:760px){
  .fan-svc{display:none}
  .svc-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
  .svc-jump a{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
  .svc-jump a::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
  .sec{padding-block:72px}
}
/* Mobile: floating WhatsApp is a small round button in the corner, so it never covers text */
@media (max-width:980px){
  .wa-float{left:auto;right:16px;width:56px;height:56px;padding:0;justify-content:center;transform:translateY(160%)}
  .wa-float.on{transform:none}
  .wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .wa-float .wa-ico{width:28px;height:28px}
}
@media (max-width:760px){.about-photos .frame .stk.stk-tag{width:150px !important;right:-20px !important;top:-30px !important}}