:root { --ease: cubic-bezier(.22,1,.36,1); }
html { scroll-padding-top: 110px; }
body.overlay-active { overflow: hidden; }
body.overlay-active .headline, body.overlay-active .cue, body.overlay-active .inkbar { visibility:hidden !important; }
.skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 12px 20px; border-radius: 100px; background:#0A0A0A; color:#fff; transform:translateY(-150%); }
.skip:focus { transform:none; }
.noscript-note { position:relative; z-index:60; padding:24px 5vw; background:#fff; }
.menu-btn { min-height:44px; }
.menu-ov { z-index:45; padding-top:100px; overflow-y:auto; }
.big { transition:transform .6s var(--ease), opacity .35s ease; transform:translateY(22px) scale(.97); }
.big:hover { transform:translateY(-3px); }
.headline .w > span { transition-timing-function:var(--ease); transition-duration:.95s; }
.film { height:450vh; }
.chap .tag, .chap .num, .chap h2 { display:block !important; }
.chap .tag { display:flex !important; }
.chap { justify-content:center; padding-top:80px; }
.chap h2 { font-size:clamp(48px,8vw,140px); max-width:10ch; }
.chap .tag { top:120px; }
.ch1 { background:radial-gradient(at 80% 25%,#ffd973,transparent 65%),#FFC400; }
.ch2 { background:radial-gradient(at 80% 25%,#7955bd,transparent 65%),#4B1A8C; }
.ch3 { background:radial-gradient(at 80% 25%,#fff,transparent 65%),#CFE7F4; }
.ch4 { background:radial-gradient(at 80% 25%,#ff96c8,transparent 65%),#FF3D9A; }
.has-film .chap { display:none; }
body.on-film .top, body.on-film .top .menu-btn { color:var(--hdr,#0A0A0A); }
.stairs { height:240vh; margin-top:0; }
.st-stage { min-height:0; height:100vh; height:100svh; overflow:hidden; }
.st-head { top:120px; }
.st-world { top:76%; }
.st-foot { z-index:4; }
.step:focus-visible .hit { outline:3px solid #FFC400; outline-offset:6px; }
#clients.clients { margin-top:0; }
.wt { color:#585858; border-color:rgba(10,10,10,.25); }

.seg { animation:trailFade 1.55s ease forwards; }
@keyframes trailFade {
  0% { opacity:0; transform:translate(var(--x),var(--y)) translate(-50%,-50%) scale(.94); }
  12%,65% { opacity:1; transform:translate(var(--x),var(--y)) translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(var(--x),var(--y)) translate(-50%,-50%) scale(.98); }
}
#about .portrait img { filter:saturate(.9); transition:transform 1.25s var(--ease),opacity 1s ease; }
#about.reveal-ready:not(.revealed) .portrait img { transform:scale(1.035); opacity:.15; }
#about .bio { transition:transform 1s var(--ease),opacity .9s ease; }
#about.reveal-ready:not(.revealed) .bio { transform:translateY(26px); opacity:0; }
.newsletter-wait .nbox-body { max-height:none; }
.newsletter-wait p { margin:0; font-size:17px; line-height:1.55; }
.newsletter-wait .nsend { display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.signout { align-self:flex-start; border:0; background:transparent; padding:10px 0; font-size:14px; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.work-notice { margin:0; font-size:14px; line-height:1.4; color:#9b153b; }
.work-notice:empty { display:none; }
.gate { overflow-y:auto; align-items:start; padding-top: max(110px,18vh); }
.gate .dialog { margin:auto; }
.gate input { border-radius:16px; }
.gate .note { min-height:0; }
.media > img, .media > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.media:has(img)::before,.media:has(img)::after,.media:has(video)::before,.media:has(video)::after { display:none; }
.cap { flex-wrap:wrap; line-height:1.4; }
.cap span:last-child { white-space:normal; }
.side { height:auto; min-height:100vh; max-height:100vh; overflow-y:auto; scrollbar-width:thin; }
.pn { flex-wrap:wrap; }
.item { opacity:1; transform:none; }
.item.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .9s var(--ease); }
.item.reveal.in { opacity:1; transform:none; }
.demo[hidden] { display:none; }
@media (max-width:860px) {
 .side { min-height:0; max-height:none; overflow:visible; }
 .facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .facts div:last-child { grid-column:1 / -1; }
}
@media (max-width:760px) {
 .top { padding-top:22px; }
 .menu-btn { top:12px; right:var(--gutter); padding:0; opacity:1 !important; transform:none !important; pointer-events:auto !important; min-width:82px; justify-content:flex-end; }
 body.on-film #menuTxt { opacity:1; width:auto; }
 body.on-film .menu-btn { gap:14px; }
 .nav { padding-top:2px; padding-right:105px; }
 .n-name { font-size:18px; }
 .menu-ov { justify-content:center; padding:100px 5vw 40px; }
 .big { font-size:clamp(32px,8.4vw,58px); max-width:100%; }
 .hero { height:100svh; min-height:520px; }
 .headline { font-size:clamp(48px,12vw,78px); bottom:20svh; }
 .film { margin-top:-100svh; height:350svh; }
 .stage { height:100svh; }
 .stairs { height:200svh; }
 .st-head { top:100px; }
 .st-head h2 { font-size:max(30px,4.4vw); }
 .st-world { top:76%; left:56%; }
 .st-foot { bottom:25px; gap:12px; }
 .st-hint { display:none; }
 .st-foot .pill { font-size:15px; padding:0 20px; }
 .chap h2 { font-size:clamp(44px,12vw,76px); }
 .chap .tag { top:100px; font-size:10px; }
 .home { padding-top:4px; }
 .gate .dialog { padding:28px 22px; border-radius:24px; }
 .gate h1 { font-size:34px; }
 .contact h2 { font-size:clamp(44px,12vw,68px); }
 .nbox-top { padding:0 22px; }
 .nbox-meta { font-size:10px; letter-spacing:.04em; }
 .news-lead { max-width:none; }
}
@media (max-height:540px) and (max-width:950px) {
 .menu-ov { justify-content:flex-start; }
 .big { font-size:32px; }
 .headline { font-size:44px; bottom:22vh; }
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
 .headline { position:absolute; }
 .headline .hlB { display:none; }
 .headline.swap .hlA .w > span { transform:none; }
 .film { height:auto; margin-top:0; }
 .stage { height:auto; position:static; }
 .screen { position:static; clip-path:none !important; visibility:visible !important; }
 .track { position:static; transform:none !important; }
 .chap { position:relative !important; left:auto !important; top:auto !important; min-height:55vh; padding:100px 5vw 50px; }
 .chap .tag { top:40px; }
 .stairs { height:100svh; }
 .item.reveal, #about.reveal-ready .bio, #about.reveal-ready .portrait img { opacity:1 !important; transform:none !important; }
 #snake { display:none; }
}