/* Moquito · The Slime Lab */
@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Hanken";src:url(/assets/fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}
@view-transition{navigation:auto}

:root{
  --paper:#F2EBDD; --paper-2:#E7DCC6; --wall:#CEC3AC;
  --ink:#17171A; --ink-2:#4A463F; --ink-soft:#2A2A2E;
  --slime:#86D12B; --slime-hi:#A6EC4A; --slime-dk:#356A08;
  --orange:#FF6B1A; --purple:#5B23A6; --purple-hi:#B993F2;
  --f-display:"Bricolage","Hanken",system-ui,sans-serif;
  --f-body:"Hanken",system-ui,sans-serif;
  --gut:clamp(16px,4vw,56px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-wet:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(16px,1.05vw,18px)/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip;caret-color:var(--slime-dk)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:2px}
button{font:inherit;color:inherit}
::selection{background:var(--slime);color:var(--ink)}
:focus-visible{outline:3px solid var(--slime);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 6px var(--ink)}
html{scrollbar-color:var(--slime-dk) var(--paper-2)}
::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--paper-2)}::-webkit-scrollbar-thumb{background:var(--slime-dk);border-radius:12px;border:3px solid var(--paper-2)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px}
.skip:focus{left:8px}
.ico{width:1.25em;height:1.25em;flex:none}

/* ---------- type ---------- */
.h2{font:800 clamp(2.6rem,7.4vw,7.6rem)/.9 var(--f-display);font-stretch:78%;letter-spacing:-.03em;margin:0;text-wrap:balance;text-transform:uppercase}
.h2 em{font-style:normal;color:var(--slime-dk)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:24px;padding:12px var(--gut);transition:background .3s,transform .4s var(--ease-out)}
.nav.is-solid{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);box-shadow:0 8px 24px -16px rgba(23,23,26,.35)}
.nav.is-hidden{transform:translateY(-110%)}
.nav__logo img{height:clamp(40px,4.4vw,58px);width:auto}
.nav__links{display:flex;gap:clamp(14px,2vw,30px);margin-inline:auto;font-weight:700}
.nav__links a{text-decoration:none;position:relative;padding:6px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:4px;background:var(--slime);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__end{display:flex;gap:12px;align-items:center;margin-left:auto}
.lang{display:flex;border:2px solid var(--ink);border-radius:999px;padding:2px}
.lang button{border:0;background:none;padding:5px 10px;border-radius:999px;font-weight:800;font-size:.8rem;cursor:pointer;transition:background .2s}
.lang button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.pill{display:inline-flex;gap:8px;align-items:center;text-decoration:none;font-weight:800;padding:10px 16px;border-radius:999px}
.pill--wa{background:var(--slime);color:var(--ink);transition:transform .2s var(--ease-out),background .2s}
.pill--wa:hover{background:var(--slime-hi)}
.pill--wa:active,.btn:active{transform:scale(.97)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:800 clamp(1rem,1.3vw,1.2rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em;padding:18px 26px;border-radius:999px;transition:transform .2s var(--ease-out),background .2s,box-shadow .3s}
.btn--slime{background:var(--slime);color:var(--ink);box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.btn--slime:hover{background:var(--slime-hi);box-shadow:0 16px 30px -14px rgba(0,0,0,.5)}
.btn--slime .ico{transition:transform .3s var(--ease-out)}
.btn--slime:hover .ico{transform:translateX(4px)}
.btn--xl{font-size:clamp(1.3rem,2.6vw,2.4rem);padding:clamp(18px,2vw,28px) clamp(26px,3vw,44px)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;padding:clamp(100px,14vh,150px) var(--gut) 40px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero__title{margin:0;font-family:var(--f-display);text-transform:uppercase;line-height:.84;position:relative;z-index:2}
.hero__small,.hero__mid{display:block;font-weight:800;font-stretch:80%;letter-spacing:-.02em;font-size:clamp(1.8rem,5.4vw,5.6rem)}
.hero__small{color:var(--ink-2)}
.hero__big{display:block;font-weight:800;font-stretch:75%;font-size:clamp(7rem,30.5vw,34rem);letter-spacing:-.035em;line-height:.8;margin-top:.04em;color:var(--ink);white-space:nowrap}
.hero__big .char{display:inline-block;will-change:transform}
.hero__o{display:inline-block;width:.74em;height:.78em;vertical-align:-.03em;position:relative}
.hero__o img{position:absolute;inset:-6% -10%;width:120%;height:auto;max-width:none}
.drips{position:relative;z-index:1;display:block;width:calc(100% + 2*var(--gut));margin:-.6vw calc(-1*var(--gut)) 0;height:clamp(70px,12vw,200px)}
.drip{animation:drip 3.6s var(--ease-wet) var(--d) infinite;transform-box:fill-box;transform-origin:top}
@keyframes drip{0%{transform:scaleY(.25)}55%{transform:scaleY(1)}75%{transform:scaleY(1.12)}100%{transform:scaleY(.25)}}
.hero__foot{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-end;justify-content:space-between;margin-top:clamp(-50px,-4vw,-10px);position:relative;z-index:2}
.hero__lead{max-width:34ch;margin:0;font-size:clamp(1.1rem,1.6vw,1.5rem);font-weight:500;line-height:1.35}
.rotator{display:inline-grid;vertical-align:bottom;background:var(--ink);color:var(--slime);padding:.06em .4em;border-radius:.3em;font-weight:800;overflow:hidden}
.rotator__w{grid-area:1/1;transform:translateY(110%);transition:transform .55s var(--ease-wet)}
.rotator__w.is-on{transform:none}
.rotator__w.is-out{transform:translateY(-110%)}
.hero__mascot{position:absolute;z-index:1;right:clamp(-30px,1vw,40px);top:clamp(70px,10vh,120px);width:clamp(150px,22vw,380px);transform:rotate(4deg)}

/* ---------- ticker ---------- */
.ticker{position:relative;z-index:3;margin:clamp(10px,3vw,40px) 0;overflow:hidden;padding:40px 0}
.ticker__band{white-space:nowrap;font:800 clamp(1.6rem,4vw,3.6rem)/1 var(--f-display);font-stretch:78%;text-transform:uppercase;padding:.35em 0}
.ticker__band--a{background:var(--orange);color:var(--ink);transform:rotate(-3deg) scale(1.05)}
.ticker__band--b{background:var(--ink);color:var(--slime);transform:rotate(2deg) scale(1.05);margin-top:-.5em}
.ticker__track{display:inline-flex;animation:marquee 34s linear infinite}
.ticker__band--b .ticker__track{animation-direction:reverse;animation-duration:28s}
.ticker__track span{padding:0 .5em}
.ticker__track span::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:1em;vertical-align:.18em;border-radius:50%;background:currentColor}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- poster wall ---------- */
.wall{background:var(--wall);position:relative}
.wall__pin{min-height:100svh;display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;gap:clamp(20px,4vw,60px);align-items:center;padding:clamp(90px,10vh,120px) var(--gut) 60px;overflow:hidden}
.wall__copy p{font-size:clamp(1.05rem,1.3vw,1.25rem);max-width:38ch;margin:22px 0 0;color:var(--ink-2);font-weight:500}
.wall__copy .h2 em{color:var(--ink);background:var(--slime);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.wall__board{position:relative;height:min(78svh,760px)}
.poster{position:absolute;left:50%;top:50%;width:min(46%,380px);margin:0;transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r));box-shadow:0 2px 2px rgba(0,0,0,.18),0 18px 30px -12px rgba(23,23,26,.55)}
.poster--tall{width:min(40%,330px)}
.poster::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 40%,rgba(0,0,0,.08));pointer-events:none;z-index:1}
.poster img{width:100%}

/* ---------- stages (web / app) ---------- */
.stage{position:relative;color:var(--paper)}
.stage--web{background:var(--ink)}
.stage--app{background:var(--purple)}
.stage .h2 em{color:var(--slime)}
.stage--app .h2 em{color:var(--slime-hi)}
.stage__pin{min-height:100svh;display:grid;grid-template-columns:minmax(260px,.75fr) 1.25fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(90px,10vh,120px) var(--gut) 60px;overflow:hidden}
.stage__copy p{max-width:36ch;margin:22px 0 0;font-size:clamp(1.05rem,1.3vw,1.25rem);color:#EFE6FF}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:26px 0 0}
.tags li{border:2px solid var(--slime);color:var(--slime);border-radius:999px;padding:6px 14px;font-weight:700;font-size:.92rem}
.tags--light li{border-color:var(--paper);color:var(--paper)}
.cam{perspective:1400px;perspective-origin:50% 30%}
.browser{background:#26262B;border-radius:14px;overflow:hidden;transform-origin:50% 100%;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}
.browser__bar{display:flex;align-items:center;gap:7px;padding:12px 14px;background:#2F2F35}
.browser__bar i{width:11px;height:11px;border-radius:50%;background:#55555C}
.browser__bar i:first-child{background:var(--orange)}
.browser__bar i:nth-child(2){background:#F2C21A}
.browser__bar i:nth-child(3){background:var(--slime)}
.browser__url{margin-left:12px;flex:1;background:#1E1E22;border-radius:8px;padding:5px 12px;font-size:.82rem;color:#B9B6AE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser__url b{color:var(--slime);font-weight:700}
.browser__view{position:relative;aspect-ratio:16/10;background:#1B1B1F}
.browser__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wire{position:absolute;inset:0;padding:5%}
.wire b{position:absolute;border:2px dashed rgba(134,209,43,.6);border-radius:8px}
.wire .w1{left:5%;right:5%;top:5%;height:8%}
.wire .w2{left:5%;width:55%;top:30%;height:22%}
.wire .w3{left:5%;width:40%;top:58%;height:6%}
.wire .w4{left:5%;width:18%;top:70%;height:8%;border-radius:999px}
.wire .w5{left:22%;width:20%;top:70%;height:8%;border-radius:999px}
.cam--phone{display:flex;justify-content:center}
.phone{width:clamp(220px,24vw,340px);aspect-ratio:9/19.5;background:#0E0E10;border-radius:clamp(30px,3.4vw,46px);padding:clamp(8px,.8vw,12px);box-shadow:inset 0 0 0 2px #3A3A40,0 50px 90px -30px rgba(0,0,0,.75),-30px 30px 60px -40px rgba(185,147,242,.6)}
.phone__screen{position:relative;width:100%;height:100%;border-radius:clamp(22px,2.6vw,36px);overflow:hidden;background:#13213F}
.phone__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.phone__screen img+img{clip-path:inset(100% 0 0 0)}

/* ---------- work ---------- */
.work{background:var(--paper);overflow:hidden}
.work__pin{padding:clamp(90px,12vh,140px) 0 60px}
.work__title{padding:0 var(--gut)}
.work__track{display:flex;gap:clamp(16px,2.4vw,36px);padding:clamp(30px,5vh,60px) var(--gut) 0;width:max-content}
.case{position:relative;width:min(78vw,1100px,calc((100svh - 330px)*1.6));flex:none}
.case__img{overflow:hidden;border-radius:16px;aspect-ratio:16/10;background:var(--ink)}
.case__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.case__meta{display:flex;flex-direction:column;gap:4px;margin-top:-1.1em;position:relative;padding-left:clamp(10px,2vw,30px)}
.case h3{margin:0;font:800 clamp(3rem,9vw,9.5rem)/.85 var(--f-display);font-stretch:75%;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);-webkit-text-stroke:0;text-shadow:0 2px 0 var(--paper)}
.case__kind{order:2;font-weight:700;color:var(--ink-2);margin-top:6px}
.case:nth-child(2) h3{color:var(--slime-dk)}
.case:nth-child(3) h3{color:var(--ink)}
.case:nth-child(4) h3{color:#B84300}

/* ---------- method ---------- */
.method{background:var(--slime);padding:clamp(90px,14vh,160px) var(--gut);position:relative}
.method .h2 em{color:var(--slime);background:var(--ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.steps{list-style:none;padding:0;margin:clamp(40px,6vw,80px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.step{display:flex;flex-direction:column;gap:10px;border-top:4px solid var(--ink);padding-top:16px}
.step__n{font:800 clamp(4rem,9vw,9rem)/.8 var(--f-display);font-stretch:75%;color:transparent;-webkit-text-stroke:3px var(--ink)}
.step h3{margin:0;font:800 clamp(1.4rem,2vw,2rem)/1 var(--f-display);text-transform:uppercase}
.step p{margin:6px 0 0;max-width:30ch;font-weight:500}
.step--free .step__n{color:var(--ink);-webkit-text-stroke:0}
.step--free h3{background:var(--ink);color:var(--slime);display:inline-block;padding:.12em .3em;border-radius:.2em;transform:rotate(-2deg)}

/* ---------- contact ---------- */
.contact{background:var(--ink);color:var(--paper);padding:clamp(90px,14vh,160px) var(--gut) clamp(60px,8vh,100px);position:relative;overflow:hidden}
.contact__title{margin:0;font:800 clamp(5rem,24vw,28rem)/.8 var(--f-display);font-stretch:75%;letter-spacing:-.035em;text-transform:uppercase;color:var(--slime)}
.contact__row{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between;margin-top:clamp(24px,4vw,48px);position:relative;z-index:2}
.contact__text{font-size:clamp(1.15rem,1.8vw,1.7rem);max-width:28ch;margin:0;font-weight:500}
.contact__links{list-style:none;padding:0;margin:clamp(40px,6vw,70px) 0 0;display:flex;flex-wrap:wrap;gap:14px 34px;font-weight:700;position:relative;z-index:2}
.contact__links a{text-decoration-color:var(--slime)}
.contact__links a:hover{color:var(--slime)}
.contact__mascot{position:absolute;right:clamp(-40px,2vw,60px);top:clamp(30px,6vw,80px);width:clamp(140px,20vw,330px);transform:scaleX(-1) rotate(-6deg);opacity:.95}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--ink);color:#A9A59C;padding:18px var(--gut) calc(18px + env(safe-area-inset-bottom));border-top:1px solid #2E2E33;font-size:.92rem}
.foot a{color:var(--paper)}

/* ---------- goo cursor, splats, wipe ---------- */
.goo-cursor{position:fixed;inset:0;pointer-events:none;z-index:60;display:none;opacity:0;transition:opacity .3s}
.goo-cursor.is-live{opacity:1}
.goo-cursor svg{width:100%;height:100%;overflow:visible}
.goo-cursor circle{fill:var(--slime)}
.splat{position:absolute;pointer-events:none;z-index:4;width:90px;transform:translate(-50%,-50%) scale(0) rotate(var(--r));animation:splat 2.6s var(--ease-wet) forwards}
@keyframes splat{0%{transform:translate(-50%,-50%) scale(0) rotate(var(--r))}12%{transform:translate(-50%,-50%) scale(1.15) rotate(var(--r))}20%{transform:translate(-50%,-50%) scale(1) rotate(var(--r))}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-30%) scale(.9,1.2) rotate(var(--r))}}
.wipe{position:fixed;inset:0;z-index:90;background:var(--slime);pointer-events:none;clip-path:circle(0 at var(--wx,50%) var(--wy,50%))}
.wipe.is-in{transition:clip-path .6s cubic-bezier(.7,0,.3,1);clip-path:circle(150% at var(--wx,50%) var(--wy,50%))}

/* ---------- desktop pointer ---------- */
@media (hover:hover) and (pointer:fine){
  .goo-cursor{display:block}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav__links{display:none}
  .wall__pin,.stage__pin{grid-template-columns:1fr}
  .wall__board{height:auto;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 4px 30px;margin:0 calc(-1*var(--gut));padding-inline:var(--gut);scrollbar-width:none}
  .wall__board::-webkit-scrollbar{display:none}
  .poster,.poster--tall{position:relative;left:auto;top:auto;flex:none;width:72vw;max-width:340px;transform:rotate(calc(var(--r)*.5));scroll-snap-align:center}
  .steps{grid-template-columns:1fr 1fr}
  .work__track{flex-direction:column;width:auto}
  .case{width:100%}
  .hero__mascot{top:auto;bottom:clamp(170px,30vh,260px);right:-12px}
}
@media (max-width:640px){
  .nav{gap:10px}
  .pill--wa span{display:none}
  .pill--wa{padding:10px}
  .steps{grid-template-columns:1fr}
  .hero{padding-top:110px}
  .hero__foot .btn{width:100%;justify-content:center}
  .hero__mascot{width:min(52vw,230px);bottom:auto;top:90px;right:2vw}
  .contact__mascot{width:120px;top:20px}
  .browser__url{font-size:.72rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .drip{transform:none}
  .ticker__track{animation:none}
  .goo-cursor{display:none!important}
  .phone__screen img+img{clip-path:none;display:none}
  .wire{display:none}
}

/* ---------- manifesto (words fall in, driven by --p 0..1) ---------- */
.manifesto{--p:1;position:relative;background:var(--ink);color:var(--paper);min-height:100svh;padding:clamp(100px,14vh,160px) var(--gut) clamp(60px,8vh,100px);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.manifesto__text{margin:0;font:800 clamp(3.4rem,11vw,12rem)/.86 var(--f-display);font-stretch:75%;letter-spacing:-.03em;text-transform:uppercase;position:relative;z-index:2;max-width:11ch}
.manifesto .w{display:inline-block;--t:clamp(0,(var(--p) - var(--i)*.11)*4.5,1);transform:translateY(calc((1 - var(--t))*-90vh)) rotate(calc((1 - var(--t))*var(--r)*3)) rotate(calc(var(--r)*.18));opacity:clamp(0,var(--t)*3,1);will-change:transform}
.manifesto .hl{color:var(--slime)}
.manifesto__sub{position:relative;z-index:2;margin:clamp(24px,4vw,44px) 0 0;max-width:34ch;font-size:clamp(1.1rem,1.6vw,1.5rem);font-weight:500;color:#D9D3C7}
.manifesto__mascot{position:absolute;right:clamp(0px,6vw,120px);bottom:-2%;width:clamp(150px,19vw,330px);z-index:1}

/* ---------- tape on posters ---------- */
.poster::after{content:"";position:absolute;z-index:2;top:-14px;left:50%;width:34%;height:30px;transform:translateX(-50%) rotate(var(--tape,-4deg));background:rgba(246,240,224,.78);box-shadow:0 1px 2px rgba(0,0,0,.18);clip-path:polygon(3% 0,97% 4%,100% 22%,97% 45%,100% 70%,97% 100%,2% 96%,0 74%,3% 50%,0 26%)}
.poster:nth-child(3n)::after{left:12%;width:24%;transform:rotate(-32deg)}
.poster:nth-child(3n+2)::after{left:auto;right:-8%;width:26%;top:8%;transform:rotate(48deg)}

/* ---------- hanging mascot on a slime strand ---------- */
.work__pin{position:relative}
.hanger{position:absolute;z-index:3;top:0;right:clamp(10px,7vw,140px);width:clamp(120px,13vw,220px);transform-origin:39% 0;animation:swing 3.4s ease-in-out infinite alternate;pointer-events:none}
.hanger__strand{display:block;width:12px;margin-left:calc(39% - 6px);height:clamp(60px,12vh,140px);background:linear-gradient(90deg,#5FA318,var(--slime) 40%,var(--slime-hi) 55%,#5FA318);border-radius:0 0 8px 8px}
.hanger img{width:100%;margin-top:-6px}
@keyframes swing{from{transform:rotate(5deg)}to{transform:rotate(-5deg)}}

/* ---------- layered ghost names ---------- */
.case{isolation:isolate}
.case__ghost{position:absolute;z-index:-1;top:-.42em;left:-.04em;white-space:nowrap;font:800 clamp(4rem,13vw,14rem)/1 var(--f-display);font-stretch:75%;text-transform:uppercase;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:2px rgba(23,23,26,.22);pointer-events:none}

@media (max-width:1000px){
  .manifesto{min-height:auto}
  .manifesto__mascot{width:120px;right:4vw}
  .manifesto__text{max-width:none}
  .manifesto__sub{max-width:60%}
  .hanger{width:110px;right:4vw}
  .case__ghost{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hanger{animation:none}
}

/* ---------- case tags: demo vs real ---------- */
.case__img{position:relative}
.case__tag{position:absolute;top:14px;left:14px;z-index:2;background:var(--paper);color:var(--ink);font:800 .8rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-radius:999px;box-shadow:0 4px 12px -6px rgba(0,0,0,.5)}
.case--real .case__tag{background:var(--slime)}
.case:nth-child(1) h3{color:#B84300}
.case:nth-child(2) h3{color:var(--ink)}
.case:nth-child(3) h3{color:var(--ink)}
.case:nth-child(4) h3{color:var(--slime-dk)}
.case:nth-child(5) h3{color:var(--ink)}

/* ---------- mobile nav: always on top, full-screen slime menu ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav__burger{display:none}
@media (max-width:1000px){
  .nav{background:var(--paper);box-shadow:0 6px 18px -14px rgba(23,23,26,.5);padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:10px}
  .nav.is-solid{backdrop-filter:none;background:var(--paper)}
  .nav.is-hidden{transform:none}
  .nav__burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;border:0;border-radius:999px;background:var(--ink);cursor:pointer;padding:0 12px}
  .nav__burger i{display:block;height:2.5px;border-radius:2px;background:var(--paper);transition:transform .35s var(--ease-out)}
  .nav.is-open .nav__burger i:first-of-type{transform:translateY(4.25px) rotate(45deg)}
  .nav.is-open .nav__burger i:last-of-type{transform:translateY(-4.25px) rotate(-45deg)}
  .nav__links{display:flex;position:fixed;z-index:-1;inset:0;flex-direction:column;justify-content:center;gap:4px;margin:0;padding:100px var(--gut) 40px;background:var(--slime);clip-path:circle(0 at calc(100% - 40px) 34px);transition:clip-path .55s cubic-bezier(.7,0,.3,1),visibility 0s .55s;visibility:hidden}
  .nav.is-open .nav__links{clip-path:circle(150% at calc(100% - 40px) 34px);visibility:visible;transition-delay:0s}
  .nav__links a{font:800 clamp(2.6rem,13vw,4.6rem)/1 var(--f-display);font-stretch:78%;text-transform:uppercase;letter-spacing:-.02em;padding:6px 0}
  .nav__links a::after{display:none}
  body.menu-open{overflow:hidden}
}

@media (max-width:1000px){.nav.is-open .pill--wa{background:var(--ink);color:var(--slime)}}