*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;min-height:100dvh;overflow:hidden;background:#06182b;font-family:Inter,Arial,sans-serif;color:white}.hero{position:relative;width:100%;height:100vh;height:100dvh;min-height:620px;overflow:hidden;background:radial-gradient(circle at 70% 38%,#1d6092 0,#0b3659 28%,#071f38 56%,#041423 100%)}.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,11,20,.82) 0,rgba(2,11,20,.35) 35%,transparent 64%)}#viewer{position:absolute;inset:0;z-index:1;cursor:grab}#viewer:active{cursor:grabbing}.copy{position:absolute;z-index:3;left:7vw;top:50%;transform:translateY(-50%);max-width:520px;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:.38em;font-weight:700;color:#ff8a2a;margin-bottom:22px}.copy h1{font-size:clamp(48px,6vw,92px);line-height:.88;letter-spacing:-.055em;margin:0;text-transform:uppercase}.copy h1 span{font-weight:300;color:#cfeaff}.copy p{max-width:400px;color:#a9c2d7;line-height:1.6;font-size:15px;margin-top:28px}.hint{margin-top:34px;font-size:10px;letter-spacing:.25em;color:#8eb4d0;display:flex;align-items:center;gap:10px}.hint span{display:block;width:30px;height:1px;background:#ff8a2a}.corner{position:absolute;right:28px;bottom:24px;z-index:3;font-size:11px;letter-spacing:.25em;color:#91abc0}#loading{position:absolute;z-index:10;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#06182b;gap:12px;transition:opacity .6s ease,visibility .6s}.loader{width:44px;height:44px;border:2px solid #31516c;border-top-color:#ff8a2a;border-radius:50%;animation:spin .8s linear infinite}#loading strong{font-size:12px;letter-spacing:.18em;text-transform:uppercase}#loading small{color:#7594ad}.loaded #loading{opacity:0;visibility:hidden}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:800px){.copy{left:24px;top:20%;transform:none}.copy h1{font-size:42px}.copy p{display:none}.hero:after{background:linear-gradient(180deg,rgba(2,11,20,.75),transparent 55%)}#viewer{top:8%}.corner{right:18px;bottom:16px}}

/* Give the camera a real viewport beside the copy, with no off-screen hero. */
html,body{height:auto;overflow-x:hidden;overflow-y:auto}
.hero{min-height:0;height:100dvh;min-height:540px}
#viewer{inset:0 0 0 38%;touch-action:none}
#viewer canvas{display:block;width:100%;height:100%}
.copy{left:5vw;max-width:32vw}
.copy h1{font-size:clamp(38px,5vw,76px)}
#reset{position:absolute;right:24px;top:24px;z-index:5;background:#102d46;color:white;border:1px solid #7594ad;border-radius:24px;padding:10px 18px;cursor:pointer}
@media(max-width:800px){.hero{min-height:650px}.copy{top:30px;left:24px;max-width:80%;transform:none}.copy h1{font-size:36px}.hint{margin-top:16px}#viewer{inset:230px 0 40px}#reset{top:auto;bottom:16px;right:16px}.corner{left:24px;right:auto}}

.brand-logo{position:relative;width:230px;height:108px;overflow:hidden;margin-bottom:26px;background:#263552;border-radius:10px;box-shadow:0 8px 28px #0003}
.brand-logo img{position:absolute;width:278px;max-width:none;height:auto;left:-24px;top:-80px}
@media(max-width:800px){.brand-logo{width:175px;height:80px;margin-bottom:18px}.brand-logo img{width:211px;left:-18px;top:-61px}.copy h1{font-size:30px}#viewer{top:270px}}

/* Transparent brand artwork sits directly on the page background. */
.brand-logo{width:230px;height:auto;overflow:visible;background:transparent;border-radius:0;box-shadow:none}
.brand-logo img{display:block;position:static;width:100%;height:auto;max-width:100%;left:auto;top:auto}
@media(max-width:800px){.brand-logo{width:175px;height:auto}.brand-logo img{position:static;width:100%;left:auto;top:auto}}