/* ================= LAYOUT & SCROLL REFINEMENT ================= */
:root{--wrap:max(6vw, calc((100vw - 1200px) / 2)); --sp:clamp(90px,11vw,150px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.slide{min-height:0;padding:var(--sp) var(--wrap);border-bottom:0}
.slide + .slide::before{content:"";position:absolute;top:0;left:var(--wrap);right:var(--wrap);border-top:1px dashed #cfcac0}
.pix-title{font-size:clamp(64px,8.5vw,128px);will-change:transform}
.corner{left:var(--wrap)!important}

/* hero: exactly one screen */
.hero{min-height:calc(100svh - 46px);padding-top:40px;padding-bottom:60px}
.hero-inner{will-change:transform,opacity}
.b-l{left:max(4vw,calc(50% - 560px))}.b-r{right:max(4vw,calc(50% - 560px))}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.scroll-cue i{width:18px;height:28px;border:1.5px solid var(--ink);border-radius:10px;position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;background:var(--ink);border-radius:2px;animation:wheel 1.6s infinite}
@keyframes wheel{to{transform:translateY(10px);opacity:0}}

/* what's up: 3-column, no overlap */
.whats{display:grid;grid-template-columns:200px 1fr 200px;gap:4vw;align-items:center;padding-top:calc(var(--sp) + 30px)}
.whats .swoop{top:30px}
.whats .corner{top:46px}
.whats .polaroid{position:relative;left:auto;right:auto;top:auto;width:100%}
.whats .pl-l{transform:rotate(-6deg);margin-top:80px}
.whats .pl-r{transform:rotate(5deg);margin-bottom:80px}
.whats-in{max-width:none}

/* about: tabs beside card */
.about-layout{display:grid;grid-template-columns:140px 1fr;gap:30px;align-items:start}
.side-tabs{position:static;margin-top:30px}
.about-card{max-width:none;margin:0}

/* works */
.work-grid{gap:40px}
.works .pix-title{margin:10px 0 60px}

/* banners: stack while scrolling */
.banners{display:block;padding-top:40px}
.ban{position:sticky;top:80px;margin-bottom:40px;transform-origin:top center;will-change:transform}
.b-yellow{margin-top:0}
.ban:last-child{margin-bottom:0}

/* case */
.case-img{border:6px solid #fff;box-shadow:0 20px 50px rgba(0,0,0,.15)}
.results{margin-top:80px}
.duo{margin-top:50px}

/* playground */
.play-bar{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.drag-hint{background:var(--n-y);padding:6px 14px;font-size:17px;transform:rotate(-2deg);box-shadow:2px 3px 6px rgba(0,0,0,.1)}
.hand-ic{display:inline-block;animation:pokeDrag 2.4s ease-in-out infinite}
@keyframes pokeDrag{0%,100%{transform:translate(0,0)}30%{transform:translate(0,4px) scale(.9)}60%{transform:translate(18px,4px) scale(.9)}80%{transform:translate(18px,0)}}
.pbtn{background:#fff;border:1.5px solid var(--ink);padding:7px 12px;font-weight:700;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.pbtn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--yellow)}
.pbtn:active{transform:translate(3px,3px);box-shadow:none}
.board{height:640px;margin-top:40px}
.clip{transition:box-shadow .3s,filter .3s}
.clip:hover{box-shadow:0 22px 40px rgba(0,0,0,.25)}
.clip.wiggle{animation:wiggle .7s ease-in-out}
@keyframes wiggle{20%{translate:0 -10px;rotate:-3deg}40%{translate:0 0;rotate:3deg}60%{translate:0 -5px;rotate:-2deg}80%{rotate:1deg}}
.clip.settle{transition:transform .8s var(--ease)}
.board.used + .x{display:none}

/* custom drag cursor */
.cur{position:fixed;left:0;top:0;z-index:999;pointer-events:none;transform:translate(-50%,-50%) scale(0);transition:transform .25s var(--ease)}
.cur span{display:block;background:var(--ink);color:#fff;font-weight:700;padding:10px 14px;border-radius:999px;white-space:nowrap;box-shadow:3px 3px 0 var(--yellow)}
.cur.on{transform:translate(-50%,-50%) scale(1)}
.cur.grab span{background:var(--blue)}

/* talk + contact rhythm */
.talk{padding-bottom:60px}
.logos{margin-bottom:70px}
.contact{padding-top:60px}
.contact::before{display:none}
.contact .pl-l{left:var(--wrap);top:180px}
.contact .pl-r{right:var(--wrap);top:260px}

/* scroll progress (bottom-right pill) */
.scroll-bar{position:fixed;left:0;top:46px;height:3px;width:100%;z-index:49}
.scroll-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--yellow),var(--pink),var(--blue));transform-origin:left;transform:scaleX(0)}

@media (max-width:900px){
  .hero{min-height:calc(100svh - 46px)}
  .whats{grid-template-columns:1fr 1fr;gap:16px}
  .whats-in{grid-column:1/-1;order:-1}
  .whats .pl-l,.whats .pl-r{margin:0;width:auto;display:block}
  .about-layout{grid-template-columns:1fr}
  .side-tabs{margin:0}
  .ban{position:relative;top:auto}
  .play-bar .pbtn,.drag-hint{display:none}
  .cur{display:none}
  .scroll-cue{display:none}
}
@media (hover:none){.cur{display:none}}
.whats .pl-r{order:2}@media (max-width:900px){.whats .pl-r{order:0}}