.experience-hero .hero-image{background:url('assets/studio-atrium-v7.webp') center 43%/cover no-repeat;filter:saturate(.86) brightness(.58);transform:scale(1.055);animation:city-drift 24s ease-in-out infinite alternate}
.experience-hero .hero-image::after{content:'';position:absolute;inset:0;background:url('assets/studio-atrium-v7.webp') center 43%/cover no-repeat;mix-blend-mode:screen;mask-image:linear-gradient(transparent 39%,#0009 67%,#000 85%);opacity:.08;animation:city-lights 5.8s ease-in-out infinite alternate}
.experience-hero .hero-shade{background:linear-gradient(180deg,#04101cf0 0%,#07192ba6 23%,#07192b61 54%,#04101bec 100%),linear-gradient(90deg,#06142385,transparent 30%,transparent 70%,#06142385)}
.showcase-visual video{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s,transform .65s}
.showcase-visual img[hidden],.showcase-visual video[hidden]{display:none!important}
.showcase-tour-label{position:absolute;z-index:3;top:18px;right:18px;max-width:55%;padding:8px 12px;border:1px solid #b4eaf39c;border-radius:999px;background:#061b2bc9;color:#e7f8fa;font:750 10px system-ui,sans-serif;letter-spacing:.12em;text-align:right;backdrop-filter:blur(12px);box-shadow:0 5px 20px #0008}
.showcase-tour-label[hidden]{display:none!important}
.hero-showcase.is-changing .showcase-visual video{opacity:.28;transform:scale(1.035)}
@media(max-width:540px){.showcase-tour-label{top:9px;right:9px;padding:5px 8px;font-size:8px;max-width:60%}}
@keyframes city-drift{from{transform:scale(1.055) translate3d(-.4%,0,0)}to{transform:scale(1.095) translate3d(.4%,-.35%,0)}}
@keyframes city-lights{from{opacity:.035;filter:brightness(1)}to{opacity:.18;filter:brightness(1.55)}}
body.motion-off .experience-hero .hero-image,body.motion-off .experience-hero .hero-image::after{animation:none}
@media(prefers-reduced-motion:reduce){.experience-landing .entry-sequence:not(.force-play){display:block}.experience-landing:not(.motion-off) .experience-hero .studio-panel:hover,.experience-landing:not(.motion-off) .experience-hero .studio-panel:focus-visible{transform:perspective(900px) translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.08)}}
.services { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:1000px) { .services { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .services { grid-template-columns:1fr; } }