/* Layout: a "quilt" of shape tiles as the hero (cheerful building blocks with faces), then bold coloured cards that
   tilt on hover and lean with scroll speed, a sticker marquee, shape-numbered steps and a tomato red finale.
   Deliberately one committed light, colourful look. */
:root{
  --paper:#FBFAF6;
  --ink:#1B1530;
  --tomato:#FF5A36;
  --cobalt:#2F4BFF;
  --sun:#FFC52E;
  --pink:#FFA3CF;
  --mint:#7EDCB4;
  --lilac:#B9A8FF;
  --line:#E7E3DA;
  --muted:#5E5872;
  --f-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,3.5vw,48px);
  --r:clamp(18px,2.4vw,32px);
  --spring:cubic-bezier(.3,1.4,.4,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--sun);color:var(--ink)}
a{color:inherit}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;margin:0;text-wrap:balance;line-height:.92}
.lbl{font-weight:600;font-size:14px;letter-spacing:.02em}

/* shapes */
.sh{position:absolute;inset:0;transition:transform .6s cubic-bezier(.3,1.5,.4,1),border-radius .5s,background-color .4s}
.s-circle{inset:12%;border-radius:50%}
.s-half{inset:auto 0 0 0;height:50%;border-radius:999px 999px 0 0}
.s-quarter{inset:0 auto auto 0;width:100%;height:100%;border-radius:0 0 100% 0}
.s-pill{inset:30% 8%;border-radius:999px}
.s-diamond{inset:20%;transform:rotate(45deg);border-radius:12%}
.s-flower{inset:8%;clip-path:polygon(50% 0%,61% 26%,85% 15%,74% 39%,100% 50%,74% 61%,85% 85%,61% 74%,50% 100%,39% 74%,15% 85%,26% 61%,0% 50%,26% 39%,15% 15%,39% 26%)}
.s-arch{inset:14% 14% 0;border-radius:999px 999px 0 0}
.s-stripes{inset:0;background:transparent!important}
.s-face{inset:10%;border-radius:50%}
.eyes{position:absolute;left:28%;right:28%;top:36%;height:16%;display:flex;justify-content:space-between;pointer-events:none}
.eyes i{width:26%;aspect-ratio:1;border-radius:50%;background:var(--ink);transition:translate .08s linear,transform .12s}
.blink .eyes i{transform:scaleY(.1)}
.smile{position:absolute;left:36%;right:36%;top:60%;height:12%;border:3px solid var(--ink);border-top:0;border-radius:0 0 99px 99px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding-block:12px}
.nav .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:color-mix(in srgb,var(--paper) 85%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1.5px solid var(--ink);border-radius:99px;padding:8px 8px 8px 12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.03em}
.mini{display:flex;gap:3px}
.mini span{width:18px;height:18px;display:block;transition:transform .5s var(--spring)}
.logo:hover .mini span:nth-child(1){transform:translateY(-4px)}
.logo:hover .mini span:nth-child(2){transform:rotate(180deg)}
.logo:hover .mini span:nth-child(3){transform:rotate(90deg)}
.links{display:flex;gap:clamp(12px,2.4vw,28px)}
.links a{text-decoration:none;font-weight:500;font-size:15px}
.links a:hover{text-decoration:underline wavy var(--tomato);text-underline-offset:5px}
.hello{font:600 15px var(--f-body);text-decoration:none;background:var(--tomato);color:#fff;border-radius:99px;padding:10px 18px;white-space:nowrap;transition:transform .3s cubic-bezier(.3,1.6,.4,1)}
.hello:hover{transform:rotate(-4deg) scale(1.05)}
@media (max-width:760px){.links{display:none}}


/* scroll story header */
.story{position:relative}
.stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--paper);margin-top:-76px}
.bgc{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;border-radius:50%;background:var(--tomato);transform:scale(0)}
.bgh{position:absolute;left:50%;bottom:0;width:220vmax;height:110vmax;margin-left:-110vmax;border-radius:999px 999px 0 0;background:var(--cobalt);transform:translateY(100%)}
.fl{position:absolute;left:calc(50% + var(--x) * 1vw);top:calc(50% + var(--y) * 1vh);width:calc(var(--s) * 1vmin);aspect-ratio:1;translate:-50% -50%}
.fl .sh{transition:none}
.mark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding-inline:var(--gutter)}
.mark h1{font-size:clamp(64px,15vw,260px);line-height:.85}
.mark p{font-weight:500;font-size:clamp(16px,1.5vw,20px);color:var(--muted);margin:0}
.mini.big{gap:.6vmin}
.mini.big span{width:clamp(26px,4vmin,48px);height:clamp(26px,4vmin,48px)}
.word{position:absolute;left:0;right:0;top:50%;translate:0 -50%;margin:0;text-align:center;font-family:var(--f-display);font-weight:800;letter-spacing:-.05em;line-height:.85;font-size:clamp(80px,18vw,320px);opacity:0;pointer-events:none;padding-inline:var(--gutter)}
#w1{color:var(--ink)}
#w2{color:var(--paper)}
#w3{top:auto;bottom:8%;translate:0 0;font-size:clamp(44px,8vw,140px);color:var(--paper)}
.face{position:absolute;left:50%;top:44%;width:min(58vmin,520px);aspect-ratio:1;margin-left:calc(min(58vmin,520px) / -2);translate:0 -50%;border-radius:50%;background:var(--sun);transform:scale(0)}
.face .eye{position:absolute;top:34%;width:15%;aspect-ratio:1;border-radius:50%;background:var(--ink)}
.face .eye.l{left:27%}.face .eye.r{right:27%}
.face .mouth{position:absolute;left:33%;right:33%;top:58%;height:14%;border:solid var(--ink);border-width:0 0 clamp(8px,1.6vmin,16px);border-radius:0 0 999px 999px;transform:scaleX(0)}
.final{position:absolute;inset:auto 0 0 0;padding:0 var(--gutter) clamp(28px,5vh,56px);display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;opacity:0;pointer-events:none}
.final.on{pointer-events:auto}
.final .big{font-family:var(--f-display);font-weight:800;font-size:clamp(36px,5.4vw,92px);line-height:.9;letter-spacing:-.045em;color:var(--paper);margin:0}
.final .btns{display:flex;gap:10px;flex-wrap:wrap}
.sbtn{font:600 16px var(--f-body);text-decoration:none;background:var(--sun);color:var(--ink);border-radius:99px;padding:14px 22px;transition:transform .3s var(--spring)}
.sbtn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--paper)}
.sbtn:hover{transform:rotate(-4deg) scale(1.05)}
.hintscroll{position:absolute;left:50%;bottom:24px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:600;font-size:13px;color:var(--muted)}
.hintscroll i{width:22px;height:34px;border:2px solid var(--muted);border-radius:99px;position:relative}
.hintscroll i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--muted);animation:sc 1.6s ease-in-out infinite}
@keyframes sc{50%{transform:translateY(8px);opacity:.3}}
@media (prefers-reduced-motion: reduce){.hintscroll i::after{animation:none}}

/* marquee */
.mq{background:var(--cobalt);color:#fff;overflow:hidden;padding-block:clamp(14px,2vw,22px);transform:rotate(-1.6deg);margin-inline:-20px;border-block:2px solid var(--ink)}
.mq .in{display:flex;width:max-content;animation:mq 30s linear infinite}
.mq span{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,5.4vw,76px);letter-spacing:-.03em;line-height:1;white-space:nowrap;display:flex;align-items:center}
.mq em{display:inline-block;width:.62em;height:.62em;margin:0 .45em;position:relative}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
.sec{padding-block:clamp(72px,10vw,140px)}
.shead{display:flex;justify-content:space-between;align-items:end;gap:16px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px)}
.shead h2{font-size:clamp(52px,9vw,140px)}
.shead p{margin:0;max-width:40ch;color:var(--muted);font-size:18px}

/* work cards: tilt on hover, lean with scroll speed */
.lean{transform:skewY(var(--sk,0deg));will-change:transform}
.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.card{position:relative;border-radius:var(--r);overflow:hidden;min-height:clamp(360px,40vw,560px);padding:clamp(20px,2.6vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:20px;text-decoration:none;transition:transform .55s var(--spring),box-shadow .4s;--tilt:-2.2deg}
.card:nth-child(even){--tilt:2.2deg}
.card.wide{--tilt:-1.2deg}
.card.wide:nth-child(even){--tilt:1.2deg}
.card.wide{grid-column:1/-1;min-height:clamp(420px,46vw,640px)}
.card .deco{position:absolute;inset:0;pointer-events:none}
.card .deco .sh{transition:transform .8s var(--spring)}
@media (hover:hover){
  .card:hover{transform:rotate(var(--tilt)) scale(1.025);box-shadow:0 30px 60px -20px rgba(27,21,48,.45);z-index:2}
  .card:hover .deco .sh{transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--dr,30deg))}
}
.card .top{position:relative;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:start}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-weight:600;font-size:13.5px;border-radius:99px;padding:5px 12px;background:rgba(255,255,255,.85);color:var(--ink)}
.chip.live{background:var(--ink);color:#fff;display:inline-flex;align-items:center;gap:7px}
.chip.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.2}}
.card .bot{position:relative;display:grid;gap:10px;max-width:40ch}
.card h3{font-size:clamp(40px,5.6vw,92px)}
.card.wide h3{font-size:clamp(64px,11vw,200px)}
.card p{margin:0;font-size:17px;line-height:1.45}
.arrowbtn{width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:22px;transition:transform .5s cubic-bezier(.3,1.6,.4,1);flex:0 0 auto}
.card:hover .arrowbtn{transform:rotate(-45deg) scale(1.1)}
@media (max-width:760px){.work{grid-template-columns:1fr}}

.minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(14px,2vw,24px)}
.minis .card{min-height:clamp(240px,24vw,320px)}
.minis .card:nth-child(1){--tilt:-3deg}.minis .card:nth-child(2){--tilt:2.5deg}.minis .card:nth-child(3){--tilt:-2deg}
.minis h3{font-size:clamp(28px,3vw,44px)}
.minis .lbl{position:relative;opacity:.8}
@media (max-width:760px){.minis{grid-template-columns:1fr}}


/* project images */
.shot{position:relative;border-radius:calc(var(--r) * .7);overflow:hidden;box-shadow:0 22px 44px -20px rgba(0,0,0,.5);transition:transform .6s var(--spring);max-width:100%}
.shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--spring)}
@media (hover:hover){.card:hover .shot{transform:rotate(calc(var(--tilt) * -1.4))}.card:hover .shot img{transform:scale(1.05)}}
.work .card{min-height:0}
.card.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:clamp(20px,3vw,48px);align-items:stretch}
.card.split .txtcol{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.card.split h3{font-size:clamp(48px,7vw,120px)}
@media (max-width:760px){.card.split{grid-template-columns:1fr}}


.shot video{display:block;width:100%;height:100%;object-fit:cover}
.minis .card .shot{margin-block:4px}
.minis .bot p{font-size:15.5px;opacity:.9}
.me img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.me{border:6px solid #fff;box-shadow:0 24px 50px -20px rgba(27,21,48,.45)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.step{display:grid;gap:14px;align-content:start}
.step .shape{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;display:grid;place-items:center;transition:transform .5s var(--spring)}
.step:nth-child(odd):hover .shape{transform:rotate(-4deg)}
.step:nth-child(even):hover .shape{transform:rotate(4deg)}
.step:hover .shape .sh{transform:rotate(90deg)}
.step .shape b{position:relative;font-family:var(--f-display);font-weight:800;font-size:clamp(56px,7vw,110px);letter-spacing:-.05em;color:var(--ink)}
.step h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.025em}
.step p{margin:0;color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,5vw,80px);align-items:center}
.me{position:relative;aspect-ratio:1;border-radius:var(--r);background:var(--pink);overflow:hidden;max-width:100%;transform:rotate(-2deg);transition:transform .5s var(--spring)}
.me:hover{transform:rotate(2deg) scale(1.02)}
.me .head{position:absolute;left:22%;right:22%;top:18%;bottom:6%;background:var(--sun);border-radius:999px 999px 40% 40%}
.me .hair{position:absolute;left:18%;right:18%;top:10%;height:26%;background:var(--ink);border-radius:999px 999px 30% 30%}
.me .eyes{left:36%;right:36%;top:46%;height:7%}
.me .smile{top:60%;left:42%;right:42%;height:6%}
.me .bubble{position:absolute;right:6%;top:8%;background:#fff;border:2px solid var(--ink);border-radius:20px 20px 20px 4px;padding:8px 14px;font-weight:600;font-size:15px}
.me .note{position:absolute;left:12px;bottom:12px;background:#fff;border:1.5px dashed var(--ink);border-radius:12px;padding:6px 10px;font-size:13px;font-weight:500}
.about .say{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,3.4vw,50px);line-height:1.04;letter-spacing:-.03em;margin:0 0 22px;text-wrap:balance}
.about .say mark{background:var(--mint);border-radius:.3em;padding:0 .12em;color:inherit}
.about p{margin:0 0 16px;max-width:58ch;font-size:18px}
.pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:24px 0 0}
.pills li{border-radius:99px;padding:7px 15px;font-weight:600;font-size:15px;transition:transform .35s cubic-bezier(.3,1.6,.4,1)}
.pills li:nth-child(odd):hover{transform:rotate(-6deg) scale(1.08)}
.pills li:nth-child(even):hover{transform:rotate(6deg) scale(1.08)}
@media (max-width:820px){.about{grid-template-columns:1fr}.me{max-width:420px}}

/* contact */
.contact{position:relative;background:var(--tomato);color:#fff;border-radius:calc(var(--r) * 1.4);padding:clamp(40px,8vw,120px) clamp(20px,5vw,80px);overflow:hidden}
.contact .float{position:absolute;pointer-events:none;animation:bob 6s ease-in-out infinite}
.contact .float .sh{position:absolute}
@keyframes bob{50%{transform:translateY(-18px) rotate(14deg)}}
.contact h2{position:relative;font-size:clamp(72px,15vw,250px);line-height:.84}
.contact p{position:relative;font-size:20px;max-width:40ch;margin:24px 0 0}
.crow{position:relative;display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(28px,4vw,48px)}
.mail{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,4vw,56px);letter-spacing:-.03em;background:#fff;color:var(--ink);border-radius:99px;padding:.18em .6em;user-select:all;word-break:break-all;transform:rotate(-2deg);transition:transform .4s var(--spring)}
.mail:hover{transform:rotate(1.5deg) scale(1.03)}
.copy{font:600 16px var(--f-body);background:var(--ink);color:#fff;border:0;border-radius:99px;padding:15px 24px;cursor:pointer;transition:transform .3s cubic-bezier(.3,1.6,.4,1)}
.copy:hover{transform:rotate(3deg) scale(1.05)}
.phone{font-weight:600;font-size:18px;opacity:.95}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:28px 40px;color:var(--muted);font-weight:500;font-size:14px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .mq .in,.contact .float,.chip.live::before{animation:none}
  .sh,.card,.tile,.tile .sh,.me,.step .shape{transition:none}
  .lean{transform:none}
}

/* ---------- site additions ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:99px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.menu-btn{display:none;font:600 15px var(--f-body);background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:99px;padding:9px 16px;cursor:pointer}
@media (max-width:760px){
  .menu-btn{display:inline-block}
  .nav .bar{flex-wrap:wrap;border-radius:26px}
  .nav.open .links{display:flex;flex-direction:column;gap:4px;width:100%;order:3;padding:8px 6px 6px}
  .nav.open .links a{font-family:var(--f-display);font-weight:800;font-size:30px;letter-spacing:-.03em;padding:4px 0}
  .hello{display:none}
  .nav.open .hello{display:inline-block;order:4;margin:0 6px 6px}
}
/* case pages */
.case-top{padding-block:clamp(12px,2vw,24px) 0}
.case-hero{position:relative;overflow:hidden;background:var(--c);color:var(--f);border-radius:calc(var(--r) * 1.2);padding:clamp(24px,5vw,72px);display:grid;gap:clamp(20px,3vw,36px)}
.case-hero .deco{position:absolute;inset:0;pointer-events:none}
.back{position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;width:max-content;border-radius:99px;padding:8px 14px;background:rgba(255,255,255,.85);color:var(--ink);transition:transform .3s var(--spring)}
.back:hover{transform:rotate(-3deg)}
.case-hero h1{position:relative;font-size:clamp(60px,12vw,210px);line-height:.86}
.case-hero .intro{position:relative;font-size:clamp(19px,1.8vw,25px);line-height:1.35;max-width:42ch}
.facts{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding-top:20px;border-top:1.5px solid currentColor}
.facts dt{font-size:13px;font-weight:600;opacity:.75;margin-bottom:2px}
.facts dd{margin:0;font-weight:600}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}}
.case-media{padding-block:clamp(28px,4vw,56px)}
.frame{border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -28px rgba(27,21,48,.5);transition:transform .6s var(--spring);background:var(--c)}
.frame img,.frame video{display:block;width:100%;height:auto}
@media (hover:hover){.frame:hover{transform:rotate(-1deg) scale(1.01)}}
.story3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);padding-block:clamp(24px,4vw,56px) clamp(56px,8vw,110px)}
.story3 div{border-top:2px solid var(--ink);padding-top:16px}
.story3 h2{font-size:clamp(28px,3vw,42px);margin-bottom:12px}
.story3 p{margin:0;font-size:18px;max-width:52ch}
.story3 a{font-weight:600}
@media (max-width:860px){.story3{grid-template-columns:1fr}}
.next{display:block;text-decoration:none;background:var(--nc);color:var(--nf);border-radius:calc(var(--r) * 1.2);padding:clamp(28px,5vw,72px);transition:transform .55s var(--spring);position:relative;overflow:hidden}
.next .lbl{opacity:.8}
.next h2{font-size:clamp(52px,10vw,170px);margin-top:10px}
.next .arrowbtn{position:absolute;right:clamp(20px,3vw,40px);top:clamp(20px,3vw,40px)}
@media (hover:hover){.next:hover{transform:rotate(-1.5deg) scale(1.01)}.next:hover .arrowbtn{transform:rotate(-45deg) scale(1.1)}}
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:clamp(48px,7vw,96px) 8px}
.cta-band h2{font-size:clamp(36px,5vw,72px);max-width:16ch}
.cta-band .hello{display:inline-block;font-size:17px;padding:14px 22px}
/* 404 */
.lost{min-height:70vh;display:grid;place-items:center;text-align:center;padding-block:60px}
.lost .big-face{position:relative;width:clamp(160px,26vw,300px);aspect-ratio:1;margin:0 auto 28px}
.lost h1{font-size:clamp(56px,10vw,150px)}
.lost p{font-size:20px;margin:16px auto 28px;max-width:34ch;color:var(--muted)}
/* client quote on project pages */
.quote-big{margin:22px 0 0;padding:16px 0 0 18px;border-left:4px solid var(--sun)}
.quote-big p{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.2;letter-spacing:-.02em;margin:0}
.quote-big cite{display:block;margin-top:8px;font-style:normal;font-weight:600;color:var(--muted);font-size:15px}