.creative-hero{position:relative;background:#f4f5f6;isolation:isolate;overflow:hidden;border-top:1px solid #edf0f3}
.creative-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 82% 28%,#c5ddf869,transparent 53%),linear-gradient(110deg,#f8f5ed 0%,#f6f5f1 42%,#ecf1f8 100%);z-index:-2}
.creative-hero .hero-inner{display:grid;grid-template-columns:.94fr 1.06fr;gap:18px;align-items:center;min-height:663px;padding-top:30px;padding-bottom:34px}
.creative-copy{position:relative;z-index:2;padding:14px 0 10px}
.creative-copy .hero-eyebrow{display:flex;align-items:center;gap:10px;color:#2e547c;font-size:10px;letter-spacing:.13em;font-weight:700;margin:0 0 24px}
.hero-eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#0564db;box-shadow:0 0 0 4px #0065d912}
.creative-copy h1{font-size:clamp(55px,6vw,84px);line-height:1.015;letter-spacing:-.065em;color:#071b38;max-width:600px;margin-bottom:23px}
.creative-copy h1 span{color:#0659c5;display:block}
.hero-copy-text{font-size:17px;line-height:1.7;max-width:420px;margin:0 0 27px;color:#516075}
.creative-copy .button-row{gap:12px;flex-wrap:wrap}
.creative-copy .btn{font-size:13px;min-height:50px;padding:13px 21px;gap:24px;border-radius:7px}
.creative-copy .btn.secondary{background:transparent;border-color:#9bacbf;color:#163754}
.hero-fine-line{display:flex;gap:19px;align-items:center;margin-top:28px;font-size:10px;letter-spacing:.015em;color:#607189}
.hero-fine-line span+span{padding-left:19px;border-left:1px solid #c5cfda}
.hero-orbit-label{margin-top:59px;display:flex;gap:12px;align-items:center;color:#8a97a7;font-size:9px;letter-spacing:.17em;font-weight:600}
.hero-orbit-label i{display:block;width:33px;height:1px;background:#b6c1cf}
.showcase{position:relative;min-width:0;max-width:675px;width:100%;justify-self:center;--progress:0}
.showcase-shell{position:relative;height:447px;isolation:isolate}
.showcase-glow{position:absolute;width:82%;height:87%;top:0;left:9%;border-radius:50%;background:radial-gradient(circle,#dce9fbd9 0%,#b5d3f164 48%,#cfe1f200 73%);filter:blur(5px);z-index:-2;transition:background .7s}
.showcase-orbit{position:absolute;border:1px solid #93b7df44;border-radius:50%;width:85%;height:73%;left:8%;top:10%;transform:rotate(-28deg);z-index:-1}
.showcase-orbit:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#3989d5;left:12%;top:12%;box-shadow:0 0 0 5px #73a9e214}
.showcase-orbit.second{width:61%;height:104%;left:20%;top:-7%;transform:rotate(48deg);border-color:#adbdce3b}
.showcase-orbit.second:after{left:auto;right:10%;top:auto;bottom:14%;background:#d19b63;box-shadow:0 0 0 5px #d19b6312}
.showcase-floor{position:absolute;bottom:12px;left:22%;width:58%;height:46px;border-radius:50%;background:radial-gradient(ellipse,#17385a24,transparent 69%);filter:blur(9px)}
.showcase-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 18px;position:relative;z-index:4;font-size:9px;font-weight:650;letter-spacing:.12em;color:#617791}
.showcase-topline>span:first-child{color:#386ea8}
.showcase-dimension{position:absolute;right:1px;top:43%;writing-mode:vertical-rl;font-size:8px;letter-spacing:.2em;color:#8599ae;z-index:2;pointer-events:none}
#hero-stage{position:absolute;inset:6px 0 0;cursor:grab;touch-action:pan-y;border-radius:25px;z-index:1;outline-offset:-8px}
#hero-stage.is-dragging{cursor:grabbing}
#hero-stage canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity .5s}
.showcase-ready #hero-stage canvas{opacity:1}
#hero-fallback{position:absolute;width:88%;height:90%;object-fit:contain;inset:4% 6%;opacity:1;transition:opacity .3s;pointer-events:none;mix-blend-mode:multiply}
.showcase-ready #hero-fallback{opacity:0}
.showcase-views{display:flex;justify-content:center;gap:5px;position:absolute;bottom:-3px;left:0;right:0;z-index:3}
.showcase-views button{font-size:9px;min-height:31px;border:1px solid #c7d5e4;background:#ffffff96;color:#58718e;border-radius:20px;padding:4px 12px}
.showcase-views button:hover{background:white;color:#0055c9;border-color:#78a6da}
.showcase-caption{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:23px 22px 0}
.showcase-caption h2{font-size:24px;letter-spacing:-.04em;margin:0 0 5px;color:#102b4a;line-height:1.2}
.showcase-caption p{font-size:11px;margin:0;color:#61738b}
#showcase-play{display:flex;gap:7px;align-items:center;border:1px solid #b9cce1;background:#ffffff80;color:#37628e;border-radius:24px;font-size:10px;min-height:35px;padding:7px 11px;flex-shrink:0}
#showcase-play>span:first-child{font-size:12px}
.showcase-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:20px 22px 0}
.showcase-tabs button{position:relative;display:flex;justify-content:center;align-items:center;gap:7px;border-radius:6px;min-height:39px;padding:7px 5px;border:1px solid #cbd5df;background:#ffffff55;color:#5b6a7d;font-size:10px;white-space:nowrap;transition:background .2s,color .2s}
.showcase-tabs button>span{font-size:8px;opacity:.65}
.showcase-tabs button[aria-pressed=true]{background:#0b4fa6;color:white;border-color:#0b4fa6;box-shadow:0 3px 10px #1655a01a}
.showcase-progress-track{height:2px;background:#bed0e257;margin:13px 22px 0;overflow:hidden;border-radius:4px}
#showcase-progress{display:block;width:100%;height:100%;background:#357eca;transform:scaleX(0);transform-origin:left}
.showcase-footer{display:flex;justify-content:space-between;gap:10px;margin:9px 22px 0;font-size:9px;color:#8392a5}
.showcase-footer a{color:#2363a6;font-weight:600;font-size:10px}
.creative-bottom-line{border-top:1px solid #d9e2eb;background:#ffffff45}
.creative-bottom-line>.wrap{display:flex;gap:25px;justify-content:space-between;align-items:center;padding-top:13px;padding-bottom:13px;color:#5f7187;font-size:10px;letter-spacing:.035em}
.creative-bottom-line strong{color:#255685;font-weight:650}
.creative-bottom-line .creative-micro{display:flex;gap:20px;color:#8b9aac;font-size:9px}
@media(min-width:801px){.creative-copy{animation:hero-copy-in .8s ease-out both}@keyframes hero-copy-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}}
@media(max-width:1100px){.creative-hero .hero-inner{grid-template-columns:.95fr 1.05fr;min-height:625px;gap:0}.creative-copy h1{font-size:65px}.hero-copy-text{font-size:15px;max-width:360px}.showcase-shell{height:407px}.showcase-caption h2{font-size:21px}.showcase-caption p{font-size:10px}.hero-fine-line{gap:12px;font-size:9px}.hero-fine-line span+span{padding-left:12px}.showcase-tabs,.showcase-caption,.showcase-footer{margin-left:12px;margin-right:12px}.creative-copy .btn{font-size:12px;padding:12px 16px;gap:15px}.showcase-tabs button{font-size:9px;gap:4px}.showcase-tabs button>span{display:none}}
@media(max-width:800px){.creative-hero .hero-inner{grid-template-columns:1fr;padding-top:34px;padding-bottom:24px;gap:24px;min-height:0}.creative-copy{padding:0;max-width:650px}.creative-copy h1{font-size:62px;max-width:none}.creative-copy h1 span{display:inline}.creative-copy .hero-eyebrow{margin-bottom:16px}.hero-copy-text{max-width:510px;margin-bottom:22px}.hero-fine-line{margin-top:19px}.hero-orbit-label{display:none}.showcase{max-width:600px}.showcase-shell{height:410px}.showcase-topline{padding:0 20px}.showcase-caption h2{font-size:23px}.showcase-tabs button{font-size:11px;min-height:40px}.showcase-tabs button>span{display:inline}.showcase-caption{margin-top:22px}.showcase-footer{font-size:9px}.creative-bottom-line .creative-micro{display:none}.creative-bottom-line>.wrap{font-size:9px;gap:15px}.showcase-dimension{right:3px}}
@media(max-width:600px){.creative-hero .hero-inner{padding-top:25px;padding-bottom:22px;gap:28px}.creative-copy .hero-eyebrow{font-size:8px;letter-spacing:.1em;margin-bottom:17px}.creative-copy h1{font-size:48px;line-height:1.02;margin-bottom:17px;letter-spacing:-.057em}.creative-copy h1 span{display:block}.hero-copy-text{font-size:13px;line-height:1.65;margin-bottom:20px;max-width:320px}.creative-copy .btn{font-size:11px;min-height:46px;padding:11px 15px;gap:15px}.hero-fine-line{font-size:8px;gap:13px;margin-top:17px}.showcase-shell{height:345px}.showcase-topline{padding:0 6px;font-size:8px;letter-spacing:.09em}.showcase-orbit{top:12%;height:72%;width:94%;left:3%}.showcase-orbit.second{width:68%;height:88%;left:16%;top:5%}.showcase-dimension{font-size:7px;right:0;letter-spacing:.13em}.showcase-caption{margin:19px 2px 0;gap:8px}.showcase-caption h2{font-size:21px;margin-bottom:4px}.showcase-caption p{font-size:10px;max-width:235px}.showcase-tabs{margin:17px 2px 0;gap:5px}.showcase-tabs button{font-size:9px;padding:6px 3px;min-height:37px;gap:3px}.showcase-tabs button>span{display:none}#showcase-play{font-size:9px;padding:6px 9px;min-height:33px;gap:5px}.showcase-progress-track{margin:12px 2px 0}.showcase-footer{margin:9px 2px 0;align-items:flex-start;font-size:8px;gap:9px}.showcase-footer a{font-size:9px;max-width:155px;text-align:right}.showcase-views{bottom:0}.showcase-views button{min-height:29px;font-size:8px;padding:4px 12px}.creative-bottom-line>.wrap{gap:10px;font-size:8px;padding-top:12px;padding-bottom:12px}.showcase-floor{bottom:23px}}
@media(prefers-reduced-motion:reduce){.creative-copy{animation:none}.showcase *{transition:none!important}}

#hero-turntable{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-repeat:no-repeat;background-size:800% 900%;pointer-events:none}

/* Match the rendered product framing while each 360-degree view loads. */
#hero-fallback{inset:0;width:100%;height:100%;mix-blend-mode:normal}
.showcase-caption h2{font-size:22px}
@media(max-width:600px){.showcase-caption h2{font-size:19px}.showcase-caption p{max-width:225px}}

#hero-turntable{opacity:0;transition:opacity .2s ease}
.showcase-ready #hero-turntable{opacity:1}
