/* V8: a photographic, readable showroom built from separate interactive elements. */
.experience-hero{padding-top:116px;padding-bottom:54px;background:#06101d}
.experience-hero .hero-image{background-position:center 47%}
.experience-hero .hero-shade{background:linear-gradient(180deg,#030d1bea 0%,#0614239c 19%,#06142312 43%,#0614238a 82%,#061423fc 100%),linear-gradient(90deg,#061423a0,transparent 27%,transparent 73%,#061423a0)}
.experience-hero .hero-titleband{max-width:1000px;margin:auto;padding:10px 0 8px}
.experience-hero .hero-titleband h1{font-size:clamp(2.8rem,5.4vw,5.3rem);line-height:1.04;letter-spacing:-.05em;text-shadow:0 4px 28px #000f}
.experience-hero .hero-titleband h1 em{color:#f5dbab}
.experience-hero .hero-lede{max-width:680px;margin:14px auto 0;color:#e1f3f8;text-shadow:0 2px 12px #000}
.experience-hero .hero-hotspots{grid-template-columns:minmax(205px,236px) minmax(0,1fr) minmax(205px,236px);grid-template-rows:repeat(3,184px);gap:17px;padding:28px 4px 38px}
.experience-hero .studio-panel{height:184px;border:1px solid #9df0ffcc;border-radius:15px;box-shadow:inset 0 0 0 1px #ffffff35,0 0 0 5px #58dafa12,0 0 24px #3bdfff50,0 18px 34px #000c;overflow:hidden;background:#0a2434}
.experience-hero .studio-panel::after{content:'';position:absolute;z-index:2;inset:0;border-radius:inherit;background:linear-gradient(140deg,#ffffff24,transparent 29%,transparent 70%,#40dffa14);pointer-events:none}
.experience-hero .studio-panel:hover,.experience-hero .studio-panel:focus-visible{transform:perspective(900px) translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.08);box-shadow:0 0 0 1px #dcfbff,0 0 34px #4ce4ffaa,0 28px 52px #000e}
.experience-hero .panel-mini{display:none}
.experience-hero .panel-icon{z-index:5;width:39px;height:39px;top:11px;right:11px;border:1px solid #d3faffc7;border-radius:50%;background:#071a2bb8;backdrop-filter:blur(8px);box-shadow:0 0 15px #5ceaff80}
.experience-hero .panel-icon svg{width:21px;height:21px}
.experience-hero .panel-text{padding:35px 15px 13px;background:linear-gradient(180deg,transparent 0%,#04111bc7 30%,#04111bf5 100%);text-shadow:0 2px 10px #000}
.experience-hero .panel-text small{font-size:9px;color:#b8f5ff}
.experience-hero .panel-text strong{font-size:23px;line-height:1.05}
.experience-hero .panel-detail{font-size:11px;color:#e6f8fa;line-height:1.3}
.experience-hero .studio-panel:hover .panel-detail,.experience-hero .studio-panel:focus-visible .panel-detail{max-height:42px}
.studio-panel:hover .panel-peek,.studio-panel:focus-visible .panel-peek{max-height:42px}
.panel-peek img{height:40px}
.hero-showcase{grid-area:1/2/4/3;height:100%;min-height:0;align-self:stretch}
.showcase-glow{inset:7% 0 0;background:radial-gradient(ellipse,#6ceaff70,transparent 63%)}
.showcase-browser{width:96%;height:calc(100% - 22px);border:2px solid #baf7ff;border-radius:19px;background:#071623;box-shadow:0 0 0 8px #70e4f523,0 0 49px #54e3ffb7,0 29px 60px #000f;overflow:hidden}
.showcase-browser::after{content:'';position:absolute;z-index:4;inset:0;border-radius:inherit;border:1px solid #ffffff70;pointer-events:none}
.showcase-browser-bar{height:34px;background:linear-gradient(90deg,#071725f5,#164a66db);color:#d9faff;border-bottom:1px solid #9af3ff95}
.showcase-lights{color:#f7d495}
.showcase-visual{height:calc(100% - 34px);background:#071725}
.showcase-visual::after{background:linear-gradient(90deg,#04121caa,transparent 72%),linear-gradient(0deg,#04121cd1,transparent 42%)}
.showcase-visual img{object-position:center 49%}
.showcase-copy{left:5%;top:10%;bottom:auto;width:min(78%,490px);gap:7px}
.showcase-copy small{font-size:9px;color:#bff6ff}
.showcase-copy strong{font-size:clamp(28px,3.4vw,46px);line-height:1.02;text-shadow:0 4px 14px #000f}
.showcase-copy span{font-size:12px;line-height:1.4;max-width:390px;color:#edf9fb}
.showcase-film{position:absolute;z-index:5;left:5%;right:5%;bottom:15px;display:flex;align-items:center;gap:8px;pointer-events:auto}
.showcase-film a{display:block;width:77px;height:53px;flex:0 0 77px;border:1px solid #b6f5ff;border-radius:7px;overflow:hidden;box-shadow:0 0 12px #40dcff9e,0 6px 13px #0009;transition:transform .22s,box-shadow .22s}
.showcase-film a:hover,.showcase-film a:focus-visible{transform:translateY(-6px) scale(1.08);box-shadow:0 0 23px #86eeff}
.showcase-film img{width:100%;height:100%;object-fit:cover}
.showcase-film span{margin-left:auto;text-align:right;color:#d7f8ff;font-size:9px;font-weight:800;letter-spacing:.13em;line-height:1.35;text-shadow:0 2px 9px #000}
.showcase-pedestal{bottom:-3%;width:88%;height:16%;border:3px solid #a9eff8;box-shadow:0 0 10px #fff,0 0 36px #4de2ff,inset 0 0 26px #5ce8ffa8,0 24px 32px #000d;background:radial-gradient(ellipse,#76e7ff30,transparent 64%)}
.experience-hero .hero-bottom{position:relative;z-index:5}
.experience-hero .hero-bottom span{color:#c7dbe3}
.interactive-frame{border-color:#6bb9c5}
.interactive-frame:hover,.interactive-frame:focus-visible,.interactive-frame:focus-within{box-shadow:0 0 0 1px #d7fbff,0 0 36px #5de2ff91,0 24px 50px #000b}
.thumbs a{display:block;padding:0;border:2px solid #a7e5ec;border-radius:4px;overflow:hidden;aspect-ratio:1;transition:transform .2s,box-shadow .2s}
.thumbs a:hover,.thumbs a:focus-visible{transform:translateY(-3px);box-shadow:0 0 16px #70e9ff}
.thumbs a img{width:100%;height:100%;object-fit:cover}
@media(max-width:1100px){.experience-hero .hero-hotspots{grid-template-columns:190px minmax(0,1fr) 190px;grid-template-rows:repeat(3,170px);gap:12px}.experience-hero .studio-panel{height:170px}.experience-hero .panel-text strong{font-size:19px}.showcase-copy strong{font-size:34px}}
@media(max-width:800px){.experience-hero .hero-hotspots{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:390px repeat(3,182px);gap:13px}.hero-showcase{height:390px;grid-area:1/1/2/3}.experience-hero .studio-panel{height:182px}.experience-hero .studio-panel:nth-child(1){grid-area:2/1}.experience-hero .studio-panel:nth-child(2){grid-area:2/2}.experience-hero .studio-panel:nth-child(3){grid-area:3/1}.experience-hero .studio-panel:nth-child(4){grid-area:3/2}.experience-hero .studio-panel:nth-child(5){grid-area:4/1}.experience-hero .studio-panel:nth-child(6){grid-area:4/2}}
@media(max-width:540px){.experience-hero{padding-top:96px}.experience-hero .hero-hotspots{grid-template-rows:340px repeat(3,170px);padding-top:24px}.hero-showcase{height:340px}.showcase-browser{width:100%;height:calc(100% - 18px)}.showcase-copy{top:10%;left:6%;width:85%}.showcase-copy strong{font-size:29px}.showcase-copy span{font-size:10px}.showcase-film{bottom:11px;left:5%;right:5%;gap:5px}.showcase-film a{width:53px;flex-basis:53px;height:42px}.showcase-film span{font-size:7px}.experience-hero .studio-panel{height:170px}.experience-hero .panel-text strong{font-size:18px}.experience-hero .panel-detail{font-size:10px}.experience-hero .hero-titleband h1{font-size:clamp(2.25rem,8vw,3.2rem)}}
@media(prefers-reduced-motion:reduce){.showcase-film a{transition:none}.experience-hero .studio-panel:hover,.experience-hero .studio-panel:focus-visible{transform:none}}