/* Depth and light follow the visitor through the existing showroom. */
.scroll-light-rig{position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .65s;--light-x:52%;--light-y:43%;--beam-angle:-12deg}
.scroll-light-rig.is-on{opacity:1}
.scroll-light-rig.is-modal{opacity:0}
.scroll-light-shadow,.scroll-light-pool{position:absolute;inset:0}
.scroll-light-shadow{background:radial-gradient(ellipse 54vw 53vh at var(--light-x) var(--light-y),transparent 12%,#08050d0a 36%,#08050d59 78%,#08050d7a 100%)}
.scroll-light-pool{mix-blend-mode:screen;background:radial-gradient(ellipse 38vw 34vh at var(--light-x) var(--light-y),#fff0c33b 0%,#edc17e29 22%,#dc9d4c12 48%,transparent 76%)}
.scroll-light-beam{position:absolute;top:-35vh;left:var(--light-x);width:clamp(500px,75vw,1300px);height:130vh;transform:translateX(-50%) rotate(var(--beam-angle));transform-origin:50% 0%;background:linear-gradient(180deg,#fff3ce4d 0%,#f3d39426 42%,#e7b76e14 70%,transparent 100%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);mask-image:radial-gradient(ellipse 45% 80% at 50% 20%,#000 5%,#0009 45%,transparent 85%);filter:blur(18px);mix-blend-mode:screen}
@media(max-width:560px){.scroll-light-shadow{background:radial-gradient(ellipse 95vw 49vh at var(--light-x) var(--light-y),transparent 12%,#08050d05 35%,#08050d45 85%,#08050d66 100%)}.scroll-light-pool{background:radial-gradient(ellipse 75vw 32vh at var(--light-x) var(--light-y),#fff0c338,#edc17e22 30%,transparent 76%)}.scroll-light-beam{width:650px;filter:blur(15px)}}
.site-header::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:linear-gradient(90deg,#8b6d43,var(--gold),#fff0ce);transform:scaleX(var(--scroll-progress,0));transform-origin:left;box-shadow:0 0 12px #d3b27a66;pointer-events:none}
.site-header nav a{transition:color .3s,text-shadow .3s}
.site-header nav a.is-current{color:var(--gold);text-shadow:0 0 20px #d3b27a55}
.site-header nav a.is-current::after{right:0;box-shadow:0 0 10px #d3b27a77}
.nav-contact.is-current{border-color:var(--gold);box-shadow:0 0 22px #d3b27a25}
main>section{position:relative;isolation:isolate}
main>section:not(.hero)::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 12%,#d3b27a12,transparent 60%);box-shadow:inset 0 1px #d3b27a44;opacity:0;transition:opacity 1.1s}
main>section.section-in-focus::after{opacity:1}
.about-grid,.section-heading,.services-grid,.project-grid,.process-grid,.logo-grid,.credentials,.contact-grid{perspective:1400px}
.depth-item{--depth-y:0px;--depth-z:0px;--depth-angle:0deg;transform:perspective(1200px) translate3d(0,calc(var(--depth-y) + var(--card-lift,0px)),var(--depth-z)) rotateX(calc(var(--depth-angle) + var(--tilt-x,0deg))) rotateY(var(--tilt-y,0deg));transform-origin:50% 35%;opacity:1;filter:blur(0);transition:transform 900ms cubic-bezier(.16,1,.3,1),opacity 700ms ease,filter 700ms ease,box-shadow 400ms,border-color 400ms;transition-delay:var(--depth-delay,0ms),var(--depth-delay,0ms),var(--depth-delay,0ms),0ms,0ms}
.depth-item.depth-pending{--depth-y:46px;--depth-z:-65px;--depth-angle:9deg;opacity:0;filter:blur(3px)}
.depth-item.depth-hover,.depth-item.depth-keyboard{transition-delay:0ms;transition-duration:220ms,400ms,400ms,400ms,400ms}
.service-card,.certificate-card{position:relative}
.service-card.depth-hover,.certificate-card.depth-hover,.service-card.depth-keyboard,.certificate-card.depth-keyboard{border-color:#d3b27a88;box-shadow:0 22px 45px #0005,0 0 30px #d3b27a0d}
.project-card.depth-hover .project-image,.project-card.depth-keyboard .project-image{box-shadow:0 22px 40px #0005}
.service-card::after,.certificate-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,20%),#fff0ce18,transparent 62%);opacity:0;transition:opacity .4s}
.service-card.depth-hover::after,.certificate-card.depth-hover::after,.service-card.depth-keyboard::after,.certificate-card.depth-keyboard::after{opacity:1}
.depth-keyboard{--card-lift:-4px}
.project-image{transition:box-shadow .4s}
dialog[open]{animation:detail-enter .6s cubic-bezier(.16,1,.3,1)}
@keyframes detail-enter{from{opacity:0;transform:perspective(1200px) translate3d(0,35px,-90px) rotateX(5deg)}to{opacity:1;transform:perspective(1200px) translate3d(0,0,0) rotateX(0)}}
@media(max-width:850px){.site-header nav.open{transform-origin:top center;animation:menu-depth .45s cubic-bezier(.16,1,.3,1)}.menu-toggle span{transition:transform .3s}.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}}
@keyframes menu-depth{from{opacity:0;transform:perspective(900px) rotateX(-12deg) translateY(-12px)}to{opacity:1;transform:perspective(900px) rotateX(0) translateY(0)}}
@media(max-width:560px){.depth-item.depth-pending{--depth-y:28px;--depth-z:-30px;--depth-angle:5deg;filter:blur(1.5px)}.depth-item{transition-duration:650ms,500ms,500ms,300ms,300ms}}
body.motion-off .depth-item{opacity:1;filter:none;transform:none}
body.motion-off main>section::after{display:none}
@media(prefers-reduced-motion:reduce){.depth-item,.depth-item.depth-pending{opacity:1;filter:none;transform:none}main>section::after{display:none}}
