/* Architectural drawing and an intentionally restrained bronze / ink palette. */
body:not(.project-page):not(.mini-page) main>.hero{overflow:visible;min-height:calc(100svh - 84px);padding-top:clamp(55px,8vh,100px);padding-bottom:120px}
body:not(.project-page):not(.mini-page) main>.hero:before{background:radial-gradient(ellipse at 79% 48%,#263f43 0%,#12262c 47%,#0c1a20 100%);animation:none}
body:not(.project-page):not(.mini-page) main>.hero:after{color:#dacbb8}
.architectural-stage{pointer-events:none;position:absolute;z-index:-1;right:-5vw;top:0;width:min(70vw,1000px);height:100%;display:grid;place-items:center;overflow:hidden;mask-image:linear-gradient(to right,transparent 0%,#000 20%)}
.architectural-stage img{display:block;width:100%;height:100%;object-fit:contain;opacity:.92;transform:translateX(4%);animation:stage-in 1.8s ease both}
body:not(.project-page):not(.mini-page) .hero h1{max-width:740px;font-size:clamp(58px,6.4vw,100px);line-height:1.03;text-shadow:0 3px 35px #071318}
body:not(.project-page):not(.mini-page) .hero h1 em{color:#dcb395}body:not(.project-page):not(.mini-page) .hero p{max-width:460px;color:#d0d9d7}
.hero .actions .btn{background:#dec6a9!important;color:#10262b!important;box-shadow:0 8px 25px #020b0d33}.hero .actions .btn:hover{background:#fff!important;transform:translateY(-3px)}
.banner .scene{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s}.banner .scene:hover{filter:brightness(1.08)}.scene .label{transition:padding .35s}.scene:hover .label{padding-bottom:29px}
@keyframes stage-in{from{opacity:0;transform:translate(8%,18px) scale(.95)}to{opacity:.92;transform:translate(4%,0) scale(1)}}
@media(max-width:800px){.architectural-stage{right:-28%;top:8%;width:100%;height:80%;opacity:.55;mask-image:linear-gradient(to right,transparent,#000 35%)}body:not(.project-page):not(.mini-page) .hero h1{max-width:630px;font-size:clamp(48px,8vw,72px)}}
@media(max-width:480px){body:not(.project-page):not(.mini-page) main>.hero{min-height:calc(100svh - 72px);padding:50px 0 95px}.architectural-stage{right:-55%;top:15%;width:145%;height:70%;opacity:.38}body:not(.project-page):not(.mini-page) .hero h1{font-size:clamp(43px,11.8vw,59px)}body:not(.project-page):not(.mini-page) .hero p{font-size:16px;max-width:300px}}
@media(prefers-reduced-motion:reduce){.architectural-stage img{animation:none}}
body{overflow-x:clip}
@media(max-width:800px){.architectural-stage{right:0;width:100%}}
@media(max-width:480px){.architectural-stage{right:0;width:100%;opacity:.32}}
/* Conceptual dusk pavilion: slowly reveal photographic material beneath the drawing. */
body:not(.project-page):not(.mini-page) main>.hero:before{background:linear-gradient(90deg,rgba(7,19,25,.88) 0%,rgba(7,19,25,.65) 44%,rgba(7,19,25,.15) 100%),url('/assets/architectural-pavilion.webp') center center/cover no-repeat;animation:pavilion-reveal 3.2s ease both}
.architectural-stage img{animation:drawing-overlay 9s ease both}
@keyframes pavilion-reveal{from{filter:brightness(.36);opacity:.45}to{filter:brightness(.92);opacity:1}}
@keyframes drawing-overlay{0%{opacity:0;transform:translate(4%,15px)}18%{opacity:.58}65%{opacity:.43}100%{opacity:.13;transform:translate(4%,0)}}
@media(max-width:800px){body:not(.project-page):not(.mini-page) main>.hero:before{background-position:65% center}}
@media(max-width:480px){body:not(.project-page):not(.mini-page) main>.hero:before{background-position:67% center;background-image:linear-gradient(90deg,rgba(7,19,25,.86),rgba(7,19,25,.56)),url('/assets/architectural-pavilion.webp')}}
@media(prefers-reduced-motion:reduce){body:not(.project-page):not(.mini-page) main>.hero:before,.architectural-stage img{animation:none}.architectural-stage img{opacity:.13}}
.hero-concept-note{position:absolute;right:0;bottom:34px;color:#dce3df;font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 8px #061318}
@media(max-width:480px){.hero-concept-note{font-size:8px;bottom:35px}}
/* Move the architectural image itself with a slow camera push. */
body:not(.project-page):not(.mini-page) main>.hero{clip-path:inset(0 -80px)}
body:not(.project-page):not(.mini-page) main>.hero:before{transform-origin:65% 50%;animation:camera-drift 18s ease-in-out infinite alternate;will-change:transform}
@keyframes camera-drift{from{transform:scale(1.03) translateX(0);filter:brightness(.82)}to{transform:scale(1.14) translateX(-1.2%);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){body:not(.project-page):not(.mini-page) main>.hero:before{animation:none;transform:none;filter:none}}
html{overflow-x:clip}
/* A restrained camera move and warm highlights, layered over the still concept image. */
body:not(.project-page):not(.mini-page) main>.hero:before{animation:architectural-camera 24s ease-in-out infinite alternate;transform-origin:65% 52%}
.hero .hero-light{position:absolute;inset:0 -80px;z-index:-1;pointer-events:none;overflow:hidden;mix-blend-mode:screen;animation:window-glow 7s ease-in-out infinite alternate;background:radial-gradient(ellipse 22% 28% at 75% 51%,rgba(255,185,105,.17),transparent 75%),radial-gradient(ellipse 15% 13% at 77% 73%,rgba(250,176,101,.13),transparent 75%)}
.hero .hero-light:after{content:'';position:absolute;inset:-25% -30%;background:linear-gradient(112deg,transparent 42%,rgba(255,226,176,.055) 49%,transparent 55%);transform:translateX(-55%);animation:glass-glint 12s ease-in-out infinite}
@keyframes architectural-camera{0%{transform:scale(1.035) translate3d(.7%,.25%,0);filter:brightness(.89)}50%{transform:scale(1.09) translate3d(-.1%,-.15%,0);filter:brightness(.98)}100%{transform:scale(1.15) translate3d(-.8%,-.45%,0);filter:brightness(.94)}}
@keyframes window-glow{0%,100%{opacity:.38}50%{opacity:.88}}
@keyframes glass-glint{0%,18%{transform:translateX(-55%);opacity:0}38%{opacity:.9}68%,100%{transform:translateX(55%);opacity:0}}
@media(max-width:480px){.hero .hero-light{inset:0 -22px;background:radial-gradient(ellipse 30% 23% at 75% 52%,rgba(255,185,105,.13),transparent 75%)}}
@media(prefers-reduced-motion:reduce){body:not(.project-page):not(.mini-page) main>.hero:before,.hero .hero-light,.hero .hero-light:after{animation:none!important}.hero .hero-light{opacity:.25}}
/* The Flow clip is a real lateral camera shot; the still remains its poster and fallback. */
.hero .hero-video{position:absolute;inset:0 -80px;width:calc(100% + 160px);height:100%;z-index:-1;object-fit:cover;object-position:center;pointer-events:none;animation:none;filter:brightness(.72);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.48) 37%,#000 70%)}
.hero .hero-light{z-index:0;opacity:.2}.hero>*:not(.hero-video):not(.hero-light){position:relative;z-index:1}.hero .hero-concept-note{position:absolute}
@media(max-width:480px){.hero .hero-video{object-position:67% center;mask-image:linear-gradient(to right,rgba(0,0,0,.28),rgba(0,0,0,.85));filter:brightness(.65)}}
@media(prefers-reduced-motion:reduce){.hero .hero-video{display:none}}