/* Motion direction: architectural shutters, kinetic type, and spatial depth. */
.hero-scene{position:relative;background:#151515}
.hero-media{position:absolute;inset:0;overflow:hidden;transform:translate3d(var(--hero-x,0px),var(--hero-y,0px),0) scale(1.06);will-change:transform}
.hero-media .hero-image{background-size:cover;background-position:center 44%;transform:none;transition:none;opacity:0;z-index:0;will-change:transform,clip-path}
.hero-media .hero-image.is-current{opacity:1;z-index:1}
.hero-media .hero-image.is-entering{opacity:1;z-index:2;animation:project-shutter 1.25s cubic-bezier(.76,0,.24,1) both}
.motion-ready .hero-media .hero-image.is-current{animation:camera-drift 9s linear both}
@keyframes camera-drift{from{transform:scale(1.02)}to{transform:scale(1.12) translate3d(-.8%,-.3%,0)}}
@keyframes project-shutter{from{clip-path:inset(0 100% 0 0);transform:scale(1.16)}to{clip-path:inset(0);transform:scale(1.02)}}
.motion-ready .hero{animation:opening-aperture 1.65s cubic-bezier(.76,0,.24,1) both}
@keyframes opening-aperture{0%{clip-path:inset(38% 36%)}30%{clip-path:inset(18% 36%)}100%{clip-path:inset(0)}}
.hero-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none;opacity:.16}
.hero-grid i{border-right:1px solid #fff;transform-origin:top}
.motion-ready .hero-grid i{animation:grid-draw 1.9s var(--ease) both;animation-delay:calc(.7s + var(--i,0)*.12s)}
.hero-grid i:nth-child(2){--i:1}.hero-grid i:nth-child(3){--i:2}
@keyframes grid-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hero-copy{z-index:3;transform:translate3d(0,var(--copy-y,0px),0);opacity:var(--copy-opacity,1)}
.hero h1 .title-line{animation:none;display:block;overflow:hidden;padding-bottom:.11em;margin-bottom:-.11em;perspective:900px}
.hero h1 .title-char{display:inline-block;animation:none;white-space:pre}
.motion-ready .hero h1 .title-char{animation:letter-rise 1.25s var(--ease) both;animation-delay:calc(.6s + var(--char-index)*.026s)}
@keyframes letter-rise{from{transform:translate3d(0,115%,0) rotateX(-55deg) rotateZ(4deg);opacity:0}to{transform:translate3d(0,0,0) rotateX(0) rotateZ(0);opacity:1}}
.motion-ready .site-header,.motion-ready .hero-topline,.motion-ready .hero-bottom{animation:fade-in 1s 1s both}
.motion-ready .hero-copy>.eyebrow{animation:fade-in 1s 1s both}
.hero-controls{display:flex;gap:18px;align-items:center}.hero-motion-toggle{width:38px;height:38px;border:1px solid #ffffff66;border-radius:50%;font-size:14px;display:grid;place-items:center;transition:background .3s}
.hero-motion-toggle:hover{background:#ffffff20}.hero-select button{min-width:42px;min-height:44px}
.hero-select button.active:after{height:2px;background:linear-gradient(to right,#fff calc(var(--slide-progress,0)*100%),#ffffff40 0)}
.hero-project-label{display:flex;flex-direction:column;gap:9px;min-width:160px}.hero-project-label>.eyebrow{font-size:10px;opacity:.65}.hero-project-label>#hero-project-name{font-size:15px;letter-spacing:0}
.hero-project-label.is-changing #hero-project-name{animation:label-rise .55s var(--ease)}
@keyframes label-rise{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
.hero-edition{position:absolute;right:3.4%;top:45%;writing-mode:vertical-rl;font-size:10px;letter-spacing:.2em;color:#fffc}
.line-icon{overflow:hidden}.motion-ready .line-icon:after{animation:scroll-tick 2.3s ease-in-out infinite}
@keyframes scroll-tick{0%,100%{transform:translateY(-19px);opacity:0}35%,65%{transform:translateY(0);opacity:1}85%{transform:translateY(20px);opacity:0}}
.motion-marquee{overflow:hidden;padding:30px 0 35px;background:var(--paper);border-bottom:1px solid var(--line)}
.marquee-track{display:flex;width:max-content;transform:translateX(-3%)}.marquee-track>span{flex-shrink:0;white-space:nowrap;font-size:clamp(45px,6.8vw,110px);font-weight:300;line-height:1;letter-spacing:-.045em;padding-right:.4em}.marquee-track i{font-style:normal;color:#aaa;padding:0 .25em;font-weight:300}
.motion-ready .marquee-track{animation:marquee-travel 35s linear infinite}
@keyframes marquee-travel{to{transform:translateX(-53%)}}
.motion-ready .project.reveal{transform:none;opacity:1}
.motion-ready .project .project-image{clip-path:inset(0 0 100%);transition:clip-path 1.45s cubic-bezier(.76,0,.24,1),transform .7s var(--ease);transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));will-change:clip-path}
.motion-ready .project.in-view .project-image{clip-path:inset(0)}
.motion-ready .project-image img{transform:scale(1.1) translateY(var(--image-drift,0px));transition:transform 1.2s var(--ease),filter .8s}
.motion-ready .project-open:hover img{transform:scale(1.15) translateY(var(--image-drift,0px))}
.motion-ready .project-caption{opacity:0;transform:translateY(25px);transition:transform .9s .3s var(--ease),opacity .9s .3s}
.motion-ready .project.in-view .project-caption{opacity:1;transform:translateY(0)}
.project-hover{display:grid;place-items:center;width:110px;height:110px;padding:15px;text-align:center;white-space:normal;line-height:1.5;left:var(--pointer-x,50%);top:var(--pointer-y,50%);pointer-events:none;transition:opacity .3s,transform .3s}
.project-open:focus-visible .project-hover{left:50%;top:50%}
.motion-ready .section-top{clip-path:inset(0 100% 0 0);transition:clip-path 1.5s var(--ease)}
.motion-ready .section-top.in-view{clip-path:inset(0)}
.motion-ready .studio-mark{transform:translateY(var(--mark-y,0px)) rotate(var(--mark-rotate,0deg));transition:opacity 1s;will-change:transform}
.studio-copy h2 .paint-word{color:inherit;opacity:var(--word-opacity,1);transition:opacity .18s linear}
.motion-ready .closing-wordmark{transform:translate3d(0,var(--wordmark-y,0px),0);will-change:transform}
.motion-ready .menu-dialog[open]{animation:menu-curtain .7s cubic-bezier(.76,0,.24,1)}
@keyframes menu-curtain{from{clip-path:inset(0 0 100%);transform:none;opacity:1}to{clip-path:inset(0);transform:none;opacity:1}}
.motion-ready .menu-dialog[open] nav a{animation:menu-row .8s var(--ease) both;animation-delay:calc(.15s + var(--row,0)*.1s)}
.menu-dialog nav a:nth-child(2){--row:1}.menu-dialog nav a:nth-child(3){--row:2}
@keyframes menu-row{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){.motion-ready .hero-scene{height:145svh;min-height:1044px;background:var(--paper)}.motion-ready .hero{position:sticky;top:0;clip-path:inset(var(--hero-inset,0%) var(--hero-inset,0%));animation-fill-mode:backwards}}
@media(max-width:700px){.hero-project-label{position:absolute;bottom:76px;right:0;text-align:right;min-width:0}.hero-project-label>.eyebrow{display:none}.hero-project-label>#hero-project-name{font-size:12px}.hero-controls{gap:8px}.hero-motion-toggle{width:36px;height:36px}.hero-copy{bottom:190px}.hero-edition{display:none}.hero-grid{grid-template-columns:repeat(3,1fr)}.hero-grid i:last-child{display:none}.hero h1{font-size:clamp(44px,11.8vw,86px)}.hero .hero-media .hero-image{background-position:57% center}.motion-marquee{padding:25px 0}.motion-ready .project .project-image{transform:none}.project-hover{width:85px;height:85px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-scene{height:auto!important;min-height:0!important}.hero{position:relative!important;clip-path:none!important}.hero-media,.hero-copy,.studio-mark,.closing-wordmark{transform:none!important}.hero-copy{opacity:1!important}.title-char,.project-caption,.paint-word{opacity:1!important;transform:none!important}.project-image,.section-top{clip-path:none!important}.project-image img{transform:none!important}}
.reduce-motion .hero-scene{height:auto!important;min-height:0!important}.reduce-motion .hero{position:relative!important;clip-path:none!important}.reduce-motion .hero-media,.reduce-motion .hero-copy,.reduce-motion .studio-mark,.reduce-motion .closing-wordmark{transform:none!important}.reduce-motion .hero-copy{opacity:1!important}.reduce-motion .title-char,.reduce-motion .project-caption,.reduce-motion .paint-word{opacity:1!important;transform:none!important}.reduce-motion .project-image,.reduce-motion .section-top{clip-path:none!important}.reduce-motion .project-image img{transform:none!important}
.hero-paused .hero-media .hero-image{animation-play-state:paused!important}
@media(max-width:380px){.hero-bottom{left:5%;right:5%}.explore-link{gap:10px;font-size:12px}.line-icon{width:34px;height:34px}.line-icon:after{left:16px;top:8px;bottom:8px}.hero-controls{gap:3px}.hero-select button{min-width:34px;padding:15px 8px}.hero-motion-toggle{width:30px;height:30px}}