/* KRI ART – MOXY FUNK layer v1.1: kinetic type, stickers, bands, tone wipes, brutal cards, cursor, mobile menu + rails.
   Loaded after app.css on every public page. All motion is switched off by prefers-reduced-motion. */
:root{--tone-y:#ffe500;--tone-p:#ffd3ea;--tone-c:#c8efff;--hard:6px 6px 0 var(--ink);--spring:cubic-bezier(.34,1.56,.64,1)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .32s var(--ease) both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:scale(.985)}}
@keyframes vt-in{from{clip-path:circle(0 at 50% 100%)}to{clip-path:circle(150% at 50% 100%)}}

/* grain + scroll bar */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scroll-bar{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.scroll-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--ink) 75%);transform-origin:left;transform:scaleX(var(--sp,0))}

/* header: burger (< 1100px) */
.hd-burger{display:inline-grid;place-content:center;gap:5px;width:46px;height:46px;border-radius:14px;background:var(--ink);margin-left:4px;transition:transform .3s var(--spring)}
.hd-burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:#fff;transition:transform .35s var(--spring),opacity .2s,width .3s}
.hd-burger span:nth-child(2){width:14px;background:var(--m2)}
.hd-burger:hover span:nth-child(2){width:20px}
.hd-burger:active{transform:scale(.92)}
@media(min-width:1100px){.hd-burger{display:none}}
@media(max-width:759px){.hd-in{height:62px}.hd-logo .logo{width:104px}}

/* mobile mega menu */
.mnav{position:fixed;inset:0;z-index:150;background:var(--ink);color:#fff;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--g) calc(26px + env(safe-area-inset-bottom));clip-path:circle(0 at calc(100% - 40px) 34px);transition:clip-path .65s var(--ease);visibility:hidden}
.mnav[hidden]{display:flex}
.mnav.open{clip-path:circle(160% at calc(100% - 40px) 34px);visibility:visible}
.mnav-bg i{position:absolute;border-radius:50%;filter:blur(0);opacity:.9;pointer-events:none}
.mnav-bg i:nth-child(1){width:260px;height:260px;right:-90px;top:120px;background:var(--m);animation:blob 9s ease-in-out infinite}
.mnav-bg i:nth-child(2){width:110px;height:110px;left:-70px;bottom:40px;background:var(--y);animation:blob 7s -2s ease-in-out infinite}
.mnav-bg i:nth-child(3){width:70px;height:70px;right:40px;bottom:90px;background:var(--c);animation:blob 6s -4s ease-in-out infinite}
@keyframes blob{50%{transform:translate(-14px,18px) scale(1.12)}}
.mnav-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;height:62px;margin:0 calc(var(--g) * -1);padding:0 var(--g);background:var(--ink)}
.mnav-x{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--m);color:#fff;transform:rotate(-90deg);transition:transform .5s var(--spring) .15s}
.mnav.open .mnav-x{transform:none}
.mnav-x .ic{width:22px;height:22px}
.mnav-in{position:relative;z-index:1;display:flex;flex-direction:column;padding:10px 0 20px}
.mn-g,.mn-l{border-bottom:1px solid #2c2c2c;opacity:0;transform:translateX(40px);transition:opacity .45s var(--ease),transform .55s var(--spring)}
.mnav.open .mn-g,.mnav.open .mn-l{opacity:1;transform:none;transition-delay:calc(.18s + var(--i) * .05s)}
.mn-g summary,.mn-l{display:flex;align-items:center;gap:14px;padding:16px 0;list-style:none;cursor:pointer}
.mn-g summary::-webkit-details-marker{display:none}
.mn-n{font-size:11px;font-weight:700;color:var(--m2);letter-spacing:.1em;min-width:22px}
.mn-g b,.mn-l b{font-size:clamp(32px,9vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1}
.mn-l:active b,.mn-g summary:active b{color:var(--m2)}
.mn-pl{position:relative;margin-left:auto;width:30px;height:30px;border-radius:50%;border:1.5px solid #444;transition:transform .35s var(--spring),background .2s}
.mn-pl::before,.mn-pl::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:#fff;border-radius:2px}
.mn-pl::after{transform:rotate(90deg);transition:transform .3s}
.mn-g[open] .mn-pl{transform:rotate(180deg);background:var(--m);border-color:var(--m)}
.mn-g[open] .mn-pl::after{transform:rotate(0)}
.mn-g[open] summary b{color:var(--m2)}
.mn-sub{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 0 18px;animation:sub .45s var(--ease)}
@keyframes sub{from{opacity:0;transform:translateY(-8px)}}
.mn-sub a{display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 12px;border-radius:14px;background:#1f1f1f;font-size:14px;font-weight:600;line-height:1.2}
.mn-sub a .ic{width:18px;height:18px;flex:none;color:var(--m2)}
.mn-sub a small{margin-left:auto;font-size:11px;color:var(--mute-d)}
.mn-sub a:active{background:var(--m)}
.mn-chips{display:flex;flex-wrap:wrap}
.mn-chips a{min-height:40px;padding:8px 13px;border-radius:999px;font-size:13px}
.mn-sub .mn-all{grid-column:1/-1;background:transparent;border:1.5px dashed #444;color:var(--y);justify-content:center}
.mnav-foot{position:relative;z-index:1;display:grid;gap:14px;margin-top:auto;opacity:0;transform:translateY(20px);transition:all .5s var(--ease) .45s}
.mnav.open .mnav-foot{opacity:1;transform:none}
.mnav-ct{display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:600}
.mnav-ct a:first-child{font-size:22px;font-weight:800;width:100%}
.mnav-hand{font-size:24px;color:var(--y);transform:rotate(-3deg)}
html.mn-lock,html.mn-lock body{overflow:hidden}

/* ---------------- HERO ---------------- */
.hero-funk{isolation:isolate}
.hero-shapes{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hs{position:absolute;display:block}
.hs-dot{width:clamp(180px,26vw,420px);aspect-ratio:1;border-radius:50%;background:var(--y);right:-6%;top:-12%;transform:translateY(calc(var(--py,0) * .3px));animation:float 11s ease-in-out infinite}
.hs-ring{width:120px;aspect-ratio:1;border-radius:50%;border:14px solid var(--c);left:-40px;bottom:120px;animation:float 8s -3s ease-in-out infinite}
.hs-sq{width:54px;height:54px;background:var(--m);left:44%;top:18px;border-radius:10px;animation:spin 14s linear infinite}
.hs-sqg{width:180px;color:var(--m);left:4%;top:56%;opacity:.0}
.hs-star{width:70px;color:var(--ink);right:46%;bottom:90px;animation:spin 18s linear infinite reverse}
@keyframes float{50%{transform:translate(12px,-18px) rotate(6deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:959px){.hs-dot{right:-30%;top:-4%;width:260px}.hs-sq{left:auto;right:18px;top:auto;bottom:46%;width:38px;height:38px}.hs-star{display:none}.hs-ring{bottom:auto;top:auto;left:auto;right:-70px;bottom:38%;width:110px}}

.hero-h{position:relative}
.hero-h .w{animation:none}
.hero-h .w,.hx{display:inline-block}
.hero-h .w{transform:translateY(105%) rotate(6deg);opacity:0;animation:wordin .9s var(--spring) forwards}
.hero-h .w:nth-child(2){animation-delay:.1s}
.hx{animation:wordin .9s .2s var(--spring) both;white-space:nowrap}
@keyframes wordin{to{transform:none;opacity:1}}
.hx-w{position:relative;display:inline-block;color:var(--ink);transition:color .3s}
.hx-w::after{animation:none!important;background:var(--hx,var(--m));height:.36em;bottom:.04em;transition:background .4s}
.hx-w .ch{display:inline-block;transform-origin:50% 80%}
.hx-w.in .ch{animation:chin .6s var(--spring) both;animation-delay:calc(var(--k) * 34ms)}
.hx-w.out .ch{animation:chout .3s var(--ease) both;animation-delay:calc(var(--k) * 18ms)}
@keyframes chin{from{transform:translateY(.7em) rotate(14deg) scale(.6);opacity:0}}
@keyframes chout{to{transform:translateY(-.6em) rotate(-12deg);opacity:0}}
/* CMYK misregistration on hover */
.hero-h:hover .w{text-shadow:3px 0 0 rgba(0,163,224,.55),-3px 0 0 rgba(230,0,126,.55),0 3px 0 rgba(255,229,0,.7);transition:text-shadow .2s}

.btn.b-lg{transition:transform .35s var(--spring),background .2s,color .2s,box-shadow .25s}
.btn.b-pri{box-shadow:0 0 0 0 var(--ink)}
.btn.b-pri:hover{box-shadow:5px 5px 0 0 var(--ink);transform:translate(-3px,-3px)}
.btn.b-line:hover{background:var(--y);border-color:var(--ink);box-shadow:5px 5px 0 0 var(--ink);transform:translate(-3px,-3px)}
.btn.mag{will-change:transform}
.hero-proof b{font-variant-numeric:tabular-nums}

/* stickers */
.stk-layer{position:absolute;inset:-30px -20px;pointer-events:none;z-index:3}
.stk{position:absolute;margin:0;width:clamp(86px,10vw,140px);padding:6px 6px 26px;background:#fff;border-radius:12px;box-shadow:0 1px 0 #ddd,4px 6px 0 var(--ink),0 18px 30px -12px rgba(0,0,0,.35);transform:rotate(var(--r)) translate(var(--dx,0px),var(--dy,0px));pointer-events:auto;cursor:grab;touch-action:none;user-select:none;animation:stkin .8s calc(.5s + var(--i) * .09s) var(--spring) both,bob 6s calc(var(--i) * -1.1s) ease-in-out infinite;transition:box-shadow .2s}
.stk img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;background:var(--bone);pointer-events:none}
.stk figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:700 10px/1 var(--f);letter-spacing:.12em;text-transform:uppercase}
.stk::after{content:"";position:absolute;right:-1px;top:-1px;width:22px;height:22px;background:linear-gradient(225deg,var(--bone) 50%,#e9e3da 50%);border-radius:0 12px 0 6px}
.stk.drag{cursor:grabbing;animation:none;opacity:1;box-shadow:0 1px 0 #ddd,10px 14px 0 var(--m),0 30px 50px -14px rgba(0,0,0,.45);z-index:5}
@keyframes stkin{from{opacity:0;transform:rotate(calc(var(--r) * 3)) scale(.3) translateY(60px)}}
@keyframes bob{50%{translate:0 -8px}}
.stk{width:clamp(86px,8.4vw,122px)}
.stk-0{left:-11%;top:4%}.stk-1{right:-9%;top:-6%}.stk-2{left:-13%;bottom:30%}.stk-3{right:-10%;bottom:34%}.stk-4{left:30%;top:-15%}.stk-5{right:-7%;bottom:2%}
.stk-tag{position:absolute;display:grid;place-items:center;font:800 15px/1 var(--f);letter-spacing:.02em;pointer-events:none;animation:stkin .7s 1.3s var(--spring) both,wob 2.4s 2s ease-in-out infinite}
.stk-wow{width:86px;height:86px;left:-8%;bottom:8%;color:var(--ink);background:var(--y);clip-path:polygon(50% 0,61% 22%,85% 12%,78% 38%,100% 50%,78% 62%,85% 88%,61% 78%,50% 100%,39% 78%,15% 88%,22% 62%,0 50%,22% 38%,15% 12%,39% 22%);--r:-12deg;transform:rotate(-12deg)}
.stk-3d{width:58px;height:58px;right:-4%;top:46%;border-radius:50%;background:var(--c);color:#fff;font-size:18px;--r:10deg;transform:rotate(10deg);box-shadow:3px 3px 0 var(--ink)}
@keyframes wob{50%{scale:1.1;rotate:8deg}}
@media(max-width:959px){.stk-layer{inset:-14px -6px}.stk{width:74px;padding:4px 4px 18px;border-radius:9px;box-shadow:3px 4px 0 var(--ink)}.stk figcaption{font-size:8px;bottom:5px}.stk-4,.stk-5{display:none}.stk-0{left:-2%;top:-4%}.stk-1{right:-2%;top:-6%}.stk-2{left:-2%;bottom:20%}.stk-3{right:-2%;bottom:18%}.stk-wow{width:62px;height:62px;font-size:12px;left:auto;right:16%;bottom:-6%}.stk-3d{display:none}}

/* spinning badge */
.spin{position:absolute;z-index:4;left:-64px;bottom:-34px;width:118px;height:118px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--m);transition:transform .4s var(--spring)}
.spin svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 12s linear infinite}
.spin text{font:700 10.4px var(--f);letter-spacing:.18em;fill:#fff}
.spin-ar{width:30px;height:30px;color:var(--y);transform:rotate(-45deg);transition:transform .4s var(--spring)}
.spin:hover{transform:scale(1.08) rotate(-8deg)}.spin:hover .spin-ar{transform:rotate(0)}
.spin:hover svg{animation-duration:3s}
@media(max-width:959px){.spin{width:88px;height:88px;left:auto;right:-4px;bottom:auto;top:-36px}.spin text{font-size:10.4px}.spin-ar{width:22px;height:22px}}

/* marquee of works: tilted strip */
.hero-funk .mq{transform:rotate(-1.6deg);margin:56px -2% 0;border:0;background:var(--ink);padding:16px 0;box-shadow:0 -6px 0 var(--m)}
.hero-funk .mq img{border-radius:12px;transition:transform .4s var(--spring)}
.hero-funk .mq img:hover{transform:scale(1.08) rotate(-3deg)}

/* ---------------- BANDS ---------------- */
.band{position:relative;z-index:2;height:clamp(120px,15vw,190px);overflow:hidden;margin:-30px 0;pointer-events:none}
.band-r{position:absolute;left:-5%;right:-5%;top:50%;overflow:hidden;padding:clamp(10px,1.4vw,18px) 0;border-block:2px solid var(--ink)}
.band-a{background:var(--m);color:#fff;transform:translateY(-62%) rotate(-3.2deg);z-index:2;box-shadow:0 8px 0 rgba(20,20,20,.12)}
.band-b{background:var(--y);color:var(--ink);transform:translateY(-38%) rotate(2.4deg)}
.band-t{display:flex;align-items:center;gap:clamp(14px,2vw,28px);width:max-content;font:800 clamp(22px,3.6vw,48px)/1 var(--f);letter-spacing:-.02em;white-space:nowrap;animation:bandL var(--bs,38s) linear infinite;transform:skewX(var(--skew,0deg))}
.band-b .band-t{animation-name:bandR;-webkit-text-stroke:0}
.band-t i{font-style:normal;color:var(--y);font-size:.8em;display:inline-block;animation:spin 6s linear infinite}
.band-b .band-t i{color:var(--m)}
.band-b .band-t span:nth-of-type(even){color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.band-a .band-t span:nth-of-type(3n){color:transparent;-webkit-text-stroke:1.5px #fff}
@keyframes bandL{to{transform:translateX(-50%) skewX(var(--skew,0deg))}}
@keyframes bandR{from{transform:translateX(-50%) skewX(var(--skew,0deg))}to{transform:translateX(0) skewX(var(--skew,0deg))}}
.band-y .band-a{background:var(--y);color:var(--ink)}.band-y .band-a i{color:var(--m)}.band-y .band-a .band-t span:nth-of-type(3n){-webkit-text-stroke-color:var(--ink)}
.band-y .band-b{background:var(--c);color:#fff}.band-y .band-b .band-t span:nth-of-type(even){-webkit-text-stroke-color:#fff}
.band-k .band-a{background:var(--ink);color:#fff}.band-k .band-b{background:var(--m);color:#fff}.band-k .band-b .band-t span:nth-of-type(even){-webkit-text-stroke-color:#fff}.band-k .band-b i{color:var(--y)}

/* ---------------- SECTIONS ---------------- */
/* colour wipe for toned sections */
.sec[data-tone]{background:transparent;isolation:isolate;overflow:hidden}
.sec[data-tone]::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tone);clip-path:circle(0 at 12% 0);transition:clip-path 1.3s var(--ease)}
.sec[data-tone].tone-in::before{clip-path:circle(150% at 12% 0)}
.sec[data-tone="y"]{--tone:var(--tone-y)}.sec[data-tone="p"]{--tone:var(--tone-p)}.sec[data-tone="c"]{--tone:var(--tone-c)}
.sec[data-tone="y"] .sh-k{color:var(--ink)}.sec[data-tone="y"] .sh p,.sec[data-tone="y"] .ct small{color:#3c3a2c}
.sec[data-tone] .sh p{color:#3c3a36}
.sec[data-tone] .tu{background:#fff}.sec[data-tone] .tu-ai{background:var(--ink)}

/* big outlined section numbers */
.sh{position:relative}
.sh-k b{transition:transform .5s var(--spring)}
.sh:hover .sh-k b{transform:rotate(-8deg) scale(1.15)}
.sh-num{position:absolute;right:0;top:-.38em;font:900 clamp(90px,15vw,220px)/1 var(--f);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px currentColor;opacity:.09;pointer-events:none;transform:translateY(calc(var(--py,0) * -.12px))}
.sec-ink .sh-num,.sec-mag .sh-num{opacity:.16}

/* heading word reveal */
.sh h2 .sw,.ph h1 .sw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .08em;margin-bottom:-.08em}
.sh h2 .sw>span,.ph h1 .sw>span{display:inline-block;transform:translateY(110%) rotate(5deg);transition:transform .9s var(--spring);transition-delay:calc(var(--k) * 60ms)}
.sh.in h2 .sw>span,.ph.in h1 .sw>span{transform:none}
.sh h2 em{font-style:normal;position:relative;color:var(--m);z-index:0}
.sec-mag .sh h2 em{color:var(--y)}
.sh h2 em::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.28em;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9C20 3 30 13 48 7s30 4 46-1 18 4 24 2' fill='none' stroke='%23ffe500' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .5s}
.sec-ink .sh h2 em::after,.sec-mag .sh h2 em::after{filter:none}
.sh.in h2 em::after{transform:scaleX(1)}

/* brutal cards */
.ct,.sv,.pk,.lab,.fin-b,.tu{transition:transform .35s var(--spring),box-shadow .3s var(--ease),border-color .2s,background .2s}
.ct:hover,.sv:hover,.pk:hover,.lab:hover,.fin-b:hover{transform:translate(-4px,-4px) rotate(-.6deg);box-shadow:var(--hard);border-color:var(--ink)}
.ct:nth-child(even):hover,.pk:nth-child(even):hover,.sv:nth-child(even):hover{transform:translate(-4px,-4px) rotate(.6deg)}
.ct:hover .ct-ic{transform:rotate(-10deg) scale(1.12)}
.ct-ic{transition:transform .4s var(--spring),background .2s,color .2s}
.ct{border-width:2px}
.sec[data-tone="y"] .ct{border-color:var(--ink)}
.sec[data-tone="y"] .ct-hot .ct-ic{background:var(--ink);color:var(--y)}
.st{transition:transform .45s var(--spring),border-color .2s,box-shadow .3s}
.st:hover{box-shadow:8px 8px 0 var(--m);border-color:var(--m)}
.st-badge{animation:wob 3s ease-in-out infinite}
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt.tilting{transition:transform .08s linear!important}

/* staggered pop-in for grids */
.pop{opacity:0;transform:translateY(36px) rotate(var(--pr,2deg)) scale(.96)}
.pop.in{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--pd,0ms),transform .8s var(--spring) var(--pd,0ms)}

/* works */
.wk{transition:transform .45s var(--spring)}
.wk:hover{transform:rotate(var(--wr,-1deg)) scale(1.02);z-index:2}
.wk:nth-child(3n) {--wr:1.2deg}
.wk-chips .chip{transition:transform .3s var(--spring),background .2s,color .2s}
.wk-chips .chip:hover{transform:translateY(-2px) rotate(-2deg)}
.wk-chips .chip.on{box-shadow:3px 3px 0 var(--m)}

/* doctor demo: live scanning */
.dt-demo{animation:float 9s ease-in-out infinite;box-shadow:10px 10px 0 var(--ink)}
.dt-res li{opacity:0;transform:translateX(-16px)}
.dt-demo.in .dt-res li{animation:resin .5s var(--spring) forwards}
.dt-demo.in .dt-res li:nth-child(2){animation-delay:.35s}.dt-demo.in .dt-res li:nth-child(3){animation-delay:.7s}.dt-demo.in .dt-res li:nth-child(4){animation-delay:1.05s}.dt-demo.in .dt-res li:nth-child(5){animation-delay:1.4s}
@keyframes resin{to{opacity:1;transform:none}}
.dt-file{position:relative;overflow:hidden}
.dt-file::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--m);box-shadow:0 0 18px var(--m);animation:scan 2.2s ease-in-out infinite}
@keyframes scan{50%{top:calc(100% - 3px)}}

/* process: numbers bounce in */
.flow li{transition:transform .4s var(--spring),box-shadow .3s}
.flow li:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:5px 5px 0 var(--m)}
.flow li .ic{transition:transform .5s var(--spring)}
.flow li:hover .ic{transform:rotate(-14deg) scale(1.2)}

/* final */
.fin{position:relative;overflow:hidden}
.fin-b .ic{transition:transform .5s var(--spring)}
.fin-b:hover .ic{transform:rotate(-12deg) scale(1.25)}

/* tab bar: raised AI + active pill */
.tabbar{border-radius:22px 22px 0 0;box-shadow:0 -10px 30px -18px rgba(0,0,0,.35)}
.tabbar a,.tabbar button{transition:transform .3s var(--spring),color .2s}
.tabbar a:active,.tabbar button:active{transform:scale(.88)}
.tabbar .on{position:relative}
.tabbar .on::before{content:"";position:absolute;top:-6px;left:50%;width:22px;height:4px;margin-left:-11px;border-radius:0 0 4px 4px;background:var(--m)}
.tabbar button[data-ai-open] .ic{width:46px;height:46px;margin-top:-22px;padding:11px;box-shadow:0 0 0 5px #fff,4px 4px 0 5px var(--ink);animation:aipulse 2.6s ease-in-out infinite}
@keyframes aipulse{50%{box-shadow:0 0 0 5px #fff,4px 4px 0 5px var(--ink),0 0 0 14px rgba(230,0,126,.18)}}

/* custom cursor (fine pointers only) */
.cur{position:fixed;left:0;top:0;z-index:190;pointer-events:none;display:none}
.cur-d,.cur-r{transform:translate(-300px,-300px)}
.cur-d{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--m)}
.cur-r{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1.5px solid var(--m);display:grid;place-items:center;font:800 10px/1 var(--f);letter-spacing:.1em;color:#fff;transition:width .3s var(--spring),height .3s var(--spring),margin .3s var(--spring),background .2s,border-color .2s}
.cur.hov .cur-r{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(230,0,126,.12)}
.cur.lab .cur-r{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--m);border-color:var(--m)}
.cur.down .cur-r{transform:scale(.85)}
@media(hover:hover) and (pointer:fine){.cur{display:block}}

/* ---------------- MOBILE ---------------- */
@media(max-width:759px){
	.hero{padding-top:18px}
	.hero-h{font-size:clamp(50px,15vw,76px);margin:14px 0 16px}
	.hero-k{font-size:10.5px}
	.hero-sub{font-size:15.5px}
	.hero-cta{margin:20px 0 16px}
	.hero-cta .btn{flex:1 1 100%}
	.hero-art{margin-top:18px}
	.stage-steps{display:none}
	.hero-funk .mq{margin-top:34px}
	.hero-funk .mq img{height:92px}
	.sec{padding:64px 0}
	.sh h2{font-size:clamp(30px,8.6vw,40px)}
	.sh-num{font-size:96px;top:-.25em}
	/* swipe rails instead of long stacks */
	.st-grid,.sv-list,.pk-grid,.flow,.lab-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(78%,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--g) * -1);padding:6px var(--g) 18px;scrollbar-width:none;overscroll-behavior-x:contain}
	.st-grid::-webkit-scrollbar,.sv-list::-webkit-scrollbar,.pk-grid::-webkit-scrollbar,.flow::-webkit-scrollbar,.lab-grid::-webkit-scrollbar{display:none}
	.st-grid>*,.sv-list>*,.pk-grid>*,.flow>*,.lab-grid>*{scroll-snap-align:start}
	.sv-list{grid-template-rows:repeat(3,auto);grid-auto-columns:84%}
	.flow{grid-auto-columns:56%}
	.pk-grid{grid-auto-columns:80%}
	.bez{display:none}
	.rail-hint{display:flex}
	.ct-grid{gap:8px}
	.ct{min-height:118px;padding:14px 12px}
	.ct:nth-child(n+9){display:none}
	.ct-grid.all .ct{display:flex}
	.ct-more{display:flex}
	.fin-grid{grid-template-columns:1fr 1fr;gap:8px}
	.band{height:110px;margin:-22px 0}
	.band-t{font-size:22px}
	.mq{mask-image:none}
	.wk:hover{transform:none}
}
.rail-hint{display:none;align-items:center;gap:8px;margin:-4px 0 6px;font:500 20px/1 var(--hand);color:var(--m);transform:rotate(-2deg)}
.rail-hint .ic{width:18px;height:18px;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(8px)}}
.sec-ink .rail-hint{color:var(--m2)}
.ct-more{display:none;margin:10px auto 0;justify-content:center;width:100%}
.rail-dots{display:none}

@media(prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
	.hero-h .w,.hx,.pop,.sh h2 .sw>span,.ph h1 .sw>span{opacity:1;transform:none}
	.sec[data-tone]::before{clip-path:none}
	.cur{display:none!important}
}

/* ---------------- INNER PAGES ---------------- */
.ph{overflow:hidden;isolation:isolate}
.ph::before{content:"";position:absolute;z-index:-1;right:-70px;top:-90px;width:clamp(170px,22vw,320px);aspect-ratio:1;border-radius:50%;background:var(--y);animation:float 12s ease-in-out infinite}
.ph::after{content:"";position:absolute;z-index:-1;right:clamp(90px,18vw,300px);bottom:22px;width:clamp(28px,3.4vw,52px);aspect-ratio:1;border-radius:10px;background:var(--m);animation:spin 16s linear infinite}
.ph-ink::before{background:var(--m)}.ph-ink::after{background:var(--y)}
.ph .ph-k{animation:wordin .7s var(--spring) both;transform:translateY(20px);opacity:0}
.ph .ph-sub,.ph .ph-cta{animation:wordin .8s .35s var(--spring) both;transform:translateY(24px);opacity:0}
.ph h1 mark::after{animation-delay:.9s}
.svc-imgs img{border:6px solid #fff;border-radius:14px;box-shadow:5px 5px 0 var(--ink);transform:rotate(-2deg);transition:transform .45s var(--spring),box-shadow .3s;animation:stkin .8s var(--spring) both;--r:-2deg}
.svc-imgs img:nth-child(2){transform:rotate(3deg);animation-delay:.12s;--r:3deg}
.svc-imgs img:nth-child(3){transform:rotate(-4deg);animation-delay:.24s;--r:-4deg}
.svc-imgs img:hover{transform:rotate(0) scale(1.04);box-shadow:8px 8px 0 var(--m)}
.wk-like{transition:transform .3s var(--spring)}.wk-like:hover{transform:scale(1.08) rotate(-3deg)}
@media(max-width:759px){
	.ph::before{width:150px;right:-60px;top:-50px}
	.ph::after{right:28px;bottom:14px}
	.wk-like{position:absolute;right:8px;bottom:8px;margin:0;width:36px;height:36px;padding:0;justify-content:center;font-size:0;gap:0;box-shadow:2px 2px 0 var(--ink)}
	.wk-like .ic{width:16px;height:16px}
}

/* ---------------- INNER PAGES v1.2 ---------------- */
/* hero stickers */
.ph-stk{position:relative;display:flex;gap:0;padding:18px var(--g) 0;max-width:var(--max);margin:0 auto;pointer-events:none}
.ph-stk .stk{position:relative;width:96px;flex:none;margin-right:-14px}
.pstk-1{margin-top:12px}.pstk-2{margin-top:-4px}
.pstk-wow{position:relative;width:62px;height:62px;margin:30px 0 0 20px;color:var(--ink);background:var(--y);clip-path:polygon(50% 0,61% 22%,85% 12%,78% 38%,100% 50%,78% 62%,85% 88%,61% 78%,50% 100%,39% 78%,15% 88%,22% 62%,0 50%,22% 38%,15% 12%,39% 22%);font-size:12px}
.pstk-ring{display:none}
.ph-ink .stk{box-shadow:0 1px 0 #333,4px 6px 0 var(--m),0 18px 30px -12px rgba(0,0,0,.6)}
@media(min-width:1100px){
	.ph-stk{position:absolute;right:max(var(--g),calc(50% - var(--max) / 2 + var(--g)));top:50%;translate:0 -46%;width:330px;height:300px;padding:0;margin:0;display:block}
	.ph-stk .stk{position:absolute;width:138px;margin:0}
	.pstk-0{left:0;top:18px}.pstk-1{left:118px;top:-14px;margin:0}.pstk-2{left:76px;top:128px;margin:0}
	.pstk-wow{position:absolute;left:224px;top:170px;margin:0;width:84px;height:84px;font-size:15px}
	.pstk-ring{display:block;position:absolute;left:-30px;top:150px;width:70px;height:70px;border:3px dashed var(--ink);border-radius:50%;animation:spin 14s linear infinite}
	.ph-ink .pstk-ring{border-color:#fff}
	.ph:has(.ph-stk) .wrap>h1,.ph:has(.ph-stk) .wrap>.ph-sub{max-width:min(780px,calc(100% - 360px))}
}
/* section headings & lists come alive */
.sec[data-tone] .card{background:#fff}
.steps li{transition:transform .4s var(--spring),box-shadow .3s}
@media(hover:hover){.steps li:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:var(--hard)}}
.list-ck li .ic{transition:transform .5s var(--spring)}
.list-ck li.in .ic,.list-ck li:hover .ic{transform:rotate(-12deg) scale(1.2)}
.faq details{transition:transform .35s var(--spring),box-shadow .3s,background .3s}
.faq details[open]{padding-inline:16px;border-radius:14px;border-bottom-color:transparent;background:var(--y);box-shadow:4px 4px 0 var(--ink);transform:rotate(-.6deg)}
.faq details[open] summary{color:var(--ink)}
.faq details p{animation:wordin .5s var(--spring) both;transform:translateY(10px);opacity:0}
.kpi{transition:transform .4s var(--spring)}.kpi:hover{transform:rotate(-2deg) scale(1.04)}
/* works filter chips */
.cats .chip{transition:transform .35s var(--spring),background .2s,color .2s,box-shadow .2s}
.cats .chip:hover{transform:translateY(-3px) rotate(-2deg);box-shadow:3px 3px 0 var(--ink)}
.cats .chip.on{box-shadow:3px 3px 0 var(--m);transform:rotate(-1.5deg)}
.masonry .wk.pop{transform:translateY(46px) rotate(var(--pr,2deg)) scale(.9)}
.masonry .wk.pop.in{transform:none}
@media(max-width:759px){
	.cats{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc(var(--g) * -1);padding:4px var(--g) 10px;scrollbar-width:none}
	.cats::-webkit-scrollbar{display:none}
	.cats .chip{flex:none;scroll-snap-align:start}
	.ph-stk .stk{width:78px;padding:4px 4px 18px}
	.ph-stk .stk figcaption{font-size:8px;letter-spacing:.04em}
}
/* services: colour group blocks */
.sgrp{position:relative;margin:22px 0;padding:clamp(18px,3vw,34px);border-radius:28px;background:var(--gt);border:2px solid var(--ink);box-shadow:var(--hard);isolation:isolate;overflow:hidden}
.sgrp:nth-child(even){transform:rotate(.5deg)}.sgrp:nth-child(odd){transform:rotate(-.4deg)}
.sgrp-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:0 0 18px;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em}
.sgrp-h i{font-style:normal;font-size:clamp(54px,7vw,96px);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--ink);position:absolute;right:clamp(14px,3vw,30px);top:clamp(10px,2vw,20px);opacity:.9;z-index:-1;transition:transform .8s var(--spring)}
.sgrp:hover .sgrp-h i{transform:rotate(-8deg) scale(1.1)}
.sgrp-h small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:99px;background:var(--ink);color:#fff}
.sgrp .sv{border-color:var(--ink)}
.sv img{transition:transform .5s var(--spring)}.sv:hover img{transform:rotate(-8deg) scale(1.12)}
@media(max-width:759px){.sgrp-h{padding-right:64px;font-size:24px}.sgrp-h i{font-size:48px}.sgrp{margin:16px calc(var(--g) * -.5);border-radius:22px;box-shadow:4px 4px 0 var(--ink)}.sgrp .sv-list{margin-right:calc(var(--g) * -1.5)}}
/* sticky CTA bounce on service pages */
.sticky-cta .btn{animation:ctabob 3.2s 2s ease-in-out infinite}
@keyframes ctabob{0%,88%,100%{transform:none}92%{transform:translateY(-6px) rotate(-2deg)}96%{transform:translateY(0) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){
	.ph-stk .stk,.pstk-wow,.pstk-ring,.sticky-cta .btn,.faq details p{animation:none;opacity:1;transform:rotate(var(--r,0deg))}
	.masonry .wk.pop{opacity:1;transform:none}
}