/* One coordinate space for artwork, copy, brand and interactive objects. */
.interactive-hero{height:auto;min-height:0;width:100%;max-width:none;padding:0;display:block;background:#061019;perspective:none}
.interactive-hero .hero-grid{width:100%;height:auto;aspect-ratio:1672/941;min-height:0;display:block;container-type:inline-size}
.setup{box-shadow:none;transform:none}
.setup-image{filter:saturate(.72) brightness(.88)}
.setup::after{box-shadow:none;background:none}
.studio-header{position:absolute;left:6.4%;top:2.4%;width:24%;height:5%;padding:0;gap:10px;flex-wrap:nowrap;align-items:center;transform:skewY(1deg)}
.studio-header .wordmark{font-size:clamp(20px,2.6cqw,45px);line-height:1}
.studio-location{font-size:clamp(5px,.47cqw,9px);letter-spacing:.08em;max-width:150px;line-height:1.5}
.hero-copy{top:19%;left:8%;width:21%;height:23%;padding:0;display:flex;flex-direction:column;justify-content:center;transform:perspective(700px) rotateY(10deg);transform-origin:center;pointer-events:none}
.hero-copy .studio-caption{font-size:.52cqw;margin:0 0 1cqw;letter-spacing:.15em}
.hero-copy h1{font-size:3.05cqw;letter-spacing:-.06em;line-height:1.08;margin:0 0 1.2cqw;font-weight:500}
.hero-copy .intro{font-size:.88cqw;line-height:1.6;color:#d2dce0}
.studio-phone{position:absolute;left:10%;top:51%;width:12%;height:23%;z-index:4;border-radius:8px;color:#dcebe6;transition:filter .2s}
.studio-phone span{position:absolute;left:44%;top:72%;width:46%;height:17%;display:flex;align-items:center;justify-content:center;font-size:clamp(9px,.85cqw,16px);transform:rotate(-13deg);white-space:nowrap}
.studio-phone:hover{filter:brightness(1.35)}
.studio-phone:focus-visible{outline:2px solid #d1e9e0;outline-offset:3px}
.setup-hint,.interactive-hero .hero-foot{display:none}
.projects .muted{max-width:600px;margin:24px 0}.projects h2 span{color:var(--salmon)}
@media(max-width:1000px) and (orientation:portrait){
 .interactive-hero{height:100svh;min-height:600px;padding:0}
 .interactive-hero .hero-grid{height:100%;width:100%;aspect-ratio:auto;background:linear-gradient(90deg,#0d2530 1px,transparent 1px) 0 0/25% 100%,#07121a}
 .studio-header{left:6%;top:10px;width:88%;height:28px;padding:0;transform:none;justify-content:flex-start}
 .studio-header .wordmark{font-size:25px}.studio-location{display:block;font-size:6px;max-width:none}.studio-contact{display:none}
 .hero-copy{position:absolute;top:47px;left:6%;width:88%;height:100px;margin:0;padding:12px 18px;display:flex;transform:none;max-width:none;border:4px solid #20333d;border-bottom-color:#344955;box-shadow:0 5px 0 #03090e,inset 0 0 20px #0008;background:linear-gradient(165deg,#1d3948,#0c1e2b 65%);z-index:4}
 .hero-copy .studio-caption{display:none}.hero-copy h1{font-size:clamp(20px,5.5vw,29px);margin:0 0 5px;letter-spacing:-.045em}.hero-copy h1 br{display:none}.hero-copy .intro{font-size:10px;line-height:1.4}.hero-copy .intro br{display:none}
 .setup{position:absolute;top:auto;bottom:0;left:50%;right:auto;transform:translateX(-50%);width:min(100%,calc((100svh - 158px)*2/3));height:auto;aspect-ratio:2/3;max-height:calc(100% - 158px);margin:0;container-type:inline-size}
 .studio-phone{left:1%;top:68%;width:17%;height:15%;min-width:44px;min-height:44px}
 .studio-phone span{left:20%;top:73%;width:70%;height:22%;font-size:3cqw;transform:rotate(-13deg)}
}
@media(min-width:1001px),(orientation:landscape){
 /* Fit the whole room inside the visible browser height, including its desk labels. */
 .interactive-hero{height:100svh;display:flex;align-items:center;justify-content:center;background:#060b0f}
 .interactive-hero .hero-grid{flex:none;width:100%;height:100%;aspect-ratio:auto}
 .setup .setup-image,.setup .actor-frame{object-fit:fill}
 .studio-header{left:10.7%;top:3.8%;width:13.5%;height:5%;gap:.6cqw;transform:skewY(8deg)}
 .studio-header .wordmark{font-size:2.1cqw}
 .studio-location{font-size:.38cqw;line-height:1.5;max-width:7cqw}
 .hero-copy{text-shadow:0 2px 9px #0009}
}
@media(max-width:1000px) and (orientation:portrait){
 .interactive-hero{height:100svh;min-height:480px;width:100%;max-width:none}
 .setup{top:158px;bottom:0;left:0;right:0;width:100%;height:calc(100% - 158px);max-height:none;aspect-ratio:auto;transform:none}
 .setup .setup-image{object-fit:fill}
 .hero-copy{background-image:linear-gradient(#06101a38,#06101a55),url('../images/studio-desktop-v7.webp');background-size:100% 100%,400% auto;background-position:center,8% 27%}
 .studio-header{background:linear-gradient(115deg,#182833,#0a141d);border:1px solid #31444e;box-shadow:2px 3px 0 #02070a;width:88%;padding:0 8px}
 .studio-phone span{top:69%;left:25%;width:65%;font-size:2.8cqw}
}

/* Mobile is one continuous room. Its monitor carries the opening message. */
@media(max-width:1000px) and (orientation:portrait){
 .interactive-hero{height:100svh;min-height:560px}
 .setup{inset:0;width:100%;height:100%;max-height:none}
 .studio-header{left:7%;top:1.1%;width:25%;height:3.6%;padding:0 1.2%;gap:0;justify-content:center;transform:skewY(-2deg);border-color:#263b43;background:#070e12;box-shadow:1px 2px 0 #000}
 .studio-header .wordmark{font-size:6cqw}
 .studio-location{display:none}
 .hero-copy{left:19%;top:26.7%;width:62%;height:17.8%;padding:3%;margin:0;border:0;box-shadow:none;justify-content:center;align-items:flex-start;background-position:center,8% 27%;z-index:4;pointer-events:none}
 .hero-copy h1{font-size:clamp(20px,6.6cqw,34px);line-height:1.05;letter-spacing:-.05em;margin:0 0 8px}
 .hero-copy h1 br{display:block}
 .hero-copy .intro{font-size:clamp(9px,2.5cqw,13px);line-height:1.45;max-width:95%}
}

/* A low-profile threshold joins the room to the next section. */
.scene-bridge{position:absolute;inset:auto 0 0;height:52px;z-index:6;display:flex;justify-content:center;pointer-events:none}
.scene-bridge::before{content:'';position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,#30434a55 35%,#30434a55 65%,transparent)}
.scene-bridge-link{position:relative;width:240px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;padding:0 25px 7px;pointer-events:auto;color:#a7b8bf;isolation:isolate}
.scene-bridge-plate{position:absolute;inset:0;width:100%;height:100%;z-index:-1;color:#365058;transition:color .2s}
.scene-bridge-link>span{font:500 9px/1.2 Consolas,monospace;letter-spacing:1.4px;text-transform:uppercase}
.scene-bridge-arrow{color:#77a7af;transition:transform .2s}
.scene-bridge-link:hover{color:#d9e3e5}.scene-bridge-link:hover .scene-bridge-plate{color:#64858c}.scene-bridge-link:hover .scene-bridge-arrow{transform:translateY(2px)}
.scene-bridge-link:focus-visible{outline:1px solid #a2c6cc;outline-offset:-4px;border-radius:12px}
@media(max-width:1000px) and (orientation:portrait){
 .scene-bridge,.scene-bridge-link{height:46px}.scene-bridge-link{width:204px;gap:5px;padding-bottom:6px}.scene-bridge-link>span{font-size:8px;letter-spacing:1.1px}
}

/* The next section rises around the tab, with continuous curved shoulders. */
.scene-bridge{height:64px;bottom:-1px}
.scene-bridge::before{background:linear-gradient(90deg,transparent,#30434a33 25%,#30434a33 75%,transparent)}
.scene-bridge-link{width:360px;height:64px;gap:8px;padding-bottom:10px}
.scene-bridge-plate{color:#365058aa}
@media(max-width:1000px) and (orientation:portrait){
 .scene-bridge,.scene-bridge-link{height:54px}.scene-bridge-link{width:min(310px,92vw);gap:6px;padding-bottom:8px}
}