/* dod motion language: responsive touch, quiet depth, generous space. */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.22,.61,.36,1)}
html{scroll-padding-top:104px;scrollbar-gutter:stable}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
header{position:fixed;inset:16px 24px auto;height:72px;border-radius:22px;padding:0 26px;background:rgba(20,20,20,.32);border:1px solid #ffffff24;backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%);transition:background .35s,border-color .35s,box-shadow .35s;box-shadow:0 4px 28px #0000000a}
header.is-scrolled{background:rgba(20,20,20,.82);border-color:#ffffff18;box-shadow:0 8px 32px #0002}
header .logo-art{width:76px}.header-caption{font-size:10px;letter-spacing:.16em;color:#ffffffa6}
header nav{gap:8px}header nav a{padding:12px 18px;border-radius:30px;transition:background .24s,color .24s}
header nav a:hover,header nav a[aria-current]{background:#ffffff12;color:white}
.nav-action{width:40px;height:40px;border-color:#ffffff40;transition:background .25s,transform .3s var(--ease-out)}
.nav-action:hover{background:var(--pink);transform:rotate(5deg);border-color:transparent}
.hero{height:100svh;max-height:none;min-height:640px;padding:130px 5% 50px}
.hero h1{font-size:clamp(56px,8.4vw,132px);line-height:1.02;letter-spacing:-.065em;margin:auto 0;text-wrap:balance}
.hero h1>span{animation:rise .9s var(--ease-out) both}.hero h1>span+span{animation-delay:.12s}
.hero-kicker{font-size:11px;letter-spacing:.12em;color:#ffffffb8}
.shade{background:linear-gradient(180deg,#0005,transparent 30%,#0003 55%,#000b)}
.hero-photo img{animation:none}.hero-bottom{padding-top:30px}
.slide-controls{background:#15151555;border:1px solid #ffffff26;border-radius:40px;padding:5px;backdrop-filter:blur(14px)}
.slide-controls button{border:0;min-width:44px;min-height:44px;transition:background .25s,transform .25s var(--ease-out)}
.slide-controls button:hover{background:#ffffff20}.slide-controls button:active{transform:scale(.9)}
#hero-count{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.explore .circle{background:#ffffff10;border-color:#ffffff55;transition:background .3s,transform .3s var(--ease-out)}
.explore:hover .circle{background:var(--pink);border-color:var(--pink);transform:translateY(3px)}
.section{padding-top:110px;padding-bottom:110px}.intro-grid{gap:8%;padding:75px 0}.intro-copy p{line-height:1.45}.intro-copy .secondary{line-height:1.7}
h2{letter-spacing:-.055em;text-wrap:balance}.section-label{letter-spacing:.1em;font-size:11px}
.work.section{background:#111;color:var(--white);padding-bottom:0}.work-heading{margin-top:75px;margin-bottom:85px}.work-heading p{color:#aaa}
.work .section-label{color:#aaa;border-color:#333}
.work-heading h2{font-size:clamp(52px,7.8vw,112px)}
.studio-film-stage{height:82svh;max-height:1000px}.studio-film-toggle{backdrop-filter:blur(16px);transition:background .25s,transform .25s;bottom:30px}.studio-film-toggle:active{transform:scale(.95)}
.studio-film video{object-fit:contain}
#project-dialog[open]{animation:none;transform-origin:center 65%}
#project-dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}
.dialog-bar{padding:18px 5%;background:#111c;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-color:#ffffff14}
.dialog-bar button{border-color:#ffffff30;background:#ffffff0a;min-height:44px;transition:background .2s,transform .25s}
.dialog-bar button:hover{background:#ffffff1c}.dialog-bar button:active{transform:scale(.96)}
.detail-heading{padding:85px 7% 65px;max-width:1200px}.detail-heading h2{letter-spacing:-.055em}#detail-description{line-height:1.8}
#detail-images{gap:20px;padding:0 3%}#detail-images img{border-radius:12px;background:#1a1a1a}#detail-images figcaption{padding:20px 1% 38px;color:#999}
.next-project{min-height:380px}.next-project-image{transition:transform .8s var(--ease-out)}
.footer-contact a{transition:color .25s}.footer-contact a:hover{color:#fff}.footer-contact .contact-value{letter-spacing:-.02em}
button:active .scene-open svg{transform:translate(4px,-4px)}
@media(prefers-reduced-motion:no-preference){
 .motion .reveal{transform:translateY(24px);transition:opacity .7s var(--ease-soft),transform .85s var(--ease-out)}
 .motion .project-scene{height:118svh}
 .motion .work .project-scene .project-photo{clip-path:none}
 .motion .work .project-scene .project-photo>img,.motion .work .project-scene .project-card:hover .project-photo>img{transform:translate3d(0,var(--scene-pan-y,0%),0) scale(var(--scene-zoom,1.02));object-position:var(--project-focus,50% 50%)}
 .motion .project-scene .scene-meta{top:116px;color:#ffffffb3;font-size:11px}
 .motion .work .project-scene .project-info{bottom:20svh;opacity:1;transform:none}
 .motion .project-scene .project-info h3{font-size:clamp(38px,6vw,86px);letter-spacing:-.05em;max-width:1000px}
 .motion .project-scene .scene-open{bottom:7svh;min-width:172px;border:1px solid #ffffff40;border-radius:99px;padding:13px 20px;background:#ffffff10;backdrop-filter:blur(12px);transition:background .25s,transform .35s var(--ease-out)}
 .motion .project-card:hover .scene-open{background:#ffffff24;transform:translateY(-2px)}
 .motion .project-scene .project-card::after{bottom:10svh}
 .motion .project-scene[data-layout=panorama]{height:auto;padding:50px 0}
 .motion .work .project-scene[data-layout=panorama] .project-card{position:relative;height:auto;display:flex;flex-direction:column}
 .motion .work .project-scene[data-layout=panorama] .project-photo{position:relative;inset:auto;aspect-ratio:var(--project-ratio,1.7);height:auto}
 .motion .project-scene[data-layout=panorama] .project-photo::after{display:none}
 .motion .work .project-scene[data-layout=panorama] .project-info{position:relative;inset:auto;margin:28px 5% 0;display:flex}
 .motion .project-scene[data-layout=panorama] .project-info h3{font-size:clamp(32px,4.2vw,64px)}
 .motion .project-scene[data-layout=panorama] .scene-meta{position:relative;inset:auto;order:-1;margin:0 5% 24px}
 .motion .project-scene[data-layout=panorama] .scene-open{position:relative;inset:auto;margin:24px 5% 0;align-self:flex-start}
 .motion .project-scene[data-layout=panorama] .project-card::after{display:none}
}
@media(max-width:760px){
 header{inset:10px 12px auto;height:62px;padding:0 18px;border-radius:18px;gap:10px}header .brand .logo-art{width:62px}header nav{gap:0}header nav a{font-size:12px;padding:12px}
 .hero{min-height:600px;padding:105px 6% 32px}.hero h1{font-size:clamp(44px,10vw,74px)}.hero-bottom{gap:18px}.hero-project{font-size:14px}
 .section{padding-top:72px;padding-bottom:72px}.intro-grid{padding:48px 0;gap:38px}.work-heading{margin-top:48px;margin-bottom:58px}.work-heading h2{font-size:clamp(44px,11vw,72px)}
 .studio-film-stage{height:76svh}.detail-heading{padding:45px 6%}.detail-heading h2{font-size:clamp(38px,10vw,64px)}#detail-images{padding:0;gap:12px}#detail-images img{border-radius:0}#detail-images figcaption{padding:16px 6% 26px}
 .motion .project-scene{height:110svh}.motion .project-scene .scene-meta{top:98px}.motion .project-scene .project-info h3{font-size:clamp(32px,9vw,52px)}.motion .work .project-scene .project-info{bottom:22svh}
 .motion .project-scene .scene-open{bottom:9svh;font-size:13px}.motion .project-scene[data-layout=panorama]{padding:30px 0 45px}
 .motion .project-scene[data-layout=panorama] .project-info h3{font-size:32px}.footer-contact{padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media(max-height:500px){.hero{min-height:500px}.motion .project-scene .scene-meta{top:96px}.motion .work .project-scene .project-info{bottom:100px}.motion .project-scene .project-info h3{font-size:32px}.motion .project-scene .scene-open{bottom:18px}}
@media(prefers-reduced-motion:reduce){.hero h1>span{animation:none}.project-card{color:var(--white)}.project-info p{color:#aaa}.project-info{border-color:#333}.hero-photo{transform:none}}

/* Restore the signature scroll-led opening, with softer camera movement. */
@media(prefers-reduced-motion:no-preference){
 .scroll-story header{inset:16px 24px auto;border-radius:22px;background:#141414b8;backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%)}
 .scroll-story .opening .hero h1>span{animation:none}
 .scroll-story .opening .hero-photo{will-change:auto}
 .scroll-story .opening .hero-photo img{will-change:auto}
 .scroll-story .opening .studio-film video{object-fit:cover}
 .scroll-story .opening .studio-film-stage{max-height:none}
 .scroll-story .opening .hero-bottom{padding-top:30px}
 .scroll-story .opening-brand{will-change:auto}
 .scroll-story .opening .hero h1{line-height:1.08}
 @media(max-width:760px){.scroll-story header{inset:10px 12px auto;border-radius:18px}}
}