*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f4f5f6;color:#17202b;font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #568ddb;outline-offset:4px}button:disabled{cursor:wait;opacity:.45}header{height:82px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;background:#111720;color:white;border-bottom:1px solid #303740}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand b{font-style:italic;font-size:30px}.brand>span:last-child:not(.stripes){font-size:13px;letter-spacing:2px;color:#c4ccd7;margin-left:10px}.stripes{display:flex;gap:3px;transform:skew(-24deg)}.stripes i{width:7px;height:23px;background:#70c9eb}.stripes i:nth-child(2){background:#3c60cf}.stripes i:nth-child(3){background:#db3549}.header-center{font-size:12px;letter-spacing:3px;color:#9faab7}header>a:last-child{font-size:14px;text-decoration:none}.showcase{display:grid;grid-template-columns:minmax(0,1fr) 365px;min-height:780px}.stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 55% 42%,#e8edf1 0%,#d8dfe5 50%,#bfc9d3 100%);min-height:780px}.stage-heading{position:absolute;top:38px;left:5%;z-index:2;pointer-events:none}.eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;margin:0 0 16px}h1{font-size:clamp(60px,7.4vw,114px);font-weight:800;letter-spacing:-5px;line-height:.95;margin:0}.stage-heading>p:last-child{font-size:16px;color:#596573;margin:18px 0 0}.stage-label{position:absolute;right:28px;top:40px;z-index:2;display:flex;flex-direction:column;gap:12px;text-align:right;font-size:12px;letter-spacing:2px;color:#697583}#viewport{position:absolute;inset:0}#model{width:100%;height:100%;display:block;touch-action:none}#load-status{position:absolute;inset:0;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;background:#dce3eadb;z-index:5;font-size:14px;padding:50px;text-align:center}#load-status[hidden]{display:none}.loader-ring{width:28px;height:28px;border:2px solid #9bacbe;border-top-color:#173b6c;border-radius:50%;animation:spin 1s linear infinite}.error .loader-ring{display:none}.error{color:#963d3d}@keyframes spin{to{transform:rotate(360deg)}}.camera-controls{position:absolute;bottom:77px;left:50%;transform:translateX(-50%);display:flex;gap:3px;background:#ffffffc4;backdrop-filter:blur(12px);padding:5px;border:1px solid #ffffffb5;border-radius:5px}.camera-controls button{border:0;background:transparent;color:#617082;padding:10px 17px;font-size:14px;border-radius:3px}.camera-controls button[aria-pressed=true]{background:#17222f;color:white}.camera-controls button:hover{background:#35475d;color:white}.stage-bottom{position:absolute;bottom:24px;left:5%;right:4%;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#617081;gap:16px}.stage-bottom button{background:none;border:0;color:inherit;font-size:14px;padding:8px}.stage-bottom button[aria-pressed=true]{background:#182c43;color:white}.configuration{background:#fff;padding:32px 27px 22px;display:flex;flex-direction:column;justify-content:space-between}.configuration .eyebrow{color:#728092;margin-bottom:12px}.configuration h2{font-size:24px;font-weight:400;letter-spacing:-.6px;margin:0 0 25px}.section-label{font-size:12px;color:#7d8a98;letter-spacing:1.4px;margin:0 0 16px}fieldset{padding:18px 0 20px;margin:0;border:0;border-bottom:1px solid #e1e6ec;min-width:0}legend{float:left;width:100%;font-size:14px;margin:0 0 18px}legend span{float:right;color:#718195;font-size:12px;padding-top:2px}.swatches{display:flex;gap:15px;clear:both;padding:2px 3px 20px}.swatch{height:34px;width:34px;border-radius:50%;background:var(--swatch);border:1px solid #00000018;box-shadow:inset 0 1px 3px #ffffff30;position:relative}.swatch[aria-pressed=true]:after{content:'';position:absolute;inset:-5px;border:1px solid #263d56;border-radius:50%}.swatch:hover{transform:scale(1.08)}.custom-color{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#708093}.custom-color>span{display:flex;align-items:center;gap:10px;font-size:12px;font-family:monospace}input[type=color]{width:24px;height:24px;background:none;border:0;padding:0;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}.config-block{padding:22px 0;border-bottom:1px solid #e1e6ec}.config-block h3{margin:0 0 17px;font-size:17px;font-weight:400}.door-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.door-controls button{background:#f2f5f8;border:1px solid #e2e7ed;border-radius:3px;text-align:left;padding:12px;color:#27394e;font-size:14px}.door-controls button[aria-pressed=true]{background:#e5edf9;border-color:#7fa1cd}.door-state{display:block;font-size:12px;color:#7a8899;margin-top:6px}.text-button{background:transparent;border:0;padding:13px 0 0;width:100%;font-size:14px;text-align:left;color:#536e90}.toggle-row{display:flex;align-items:center;position:relative;cursor:pointer;padding:10px 0 15px;gap:12px}.toggle-row>span:first-child{flex:1}.toggle-row b{font-size:14px;font-weight:400}.toggle-row small{display:block;font-size:12px;color:#7c899a;margin-top:6px}.toggle-row input{position:absolute;right:0;width:42px;height:25px;margin:0;opacity:0;cursor:pointer}.switch-ui{width:38px;height:22px;border-radius:15px;background:#c8d1dc;position:relative;pointer-events:none;transition:background .2s}.switch-ui:after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:white;transition:transform .2s;box-shadow:0 1px 3px #0002}.toggle-row input:checked+.switch-ui{background:#365d90}.toggle-row input:checked+.switch-ui:after{transform:translateX(16px)}.toggle-row input:focus-visible+.switch-ui{outline:3px solid #568ddb;outline-offset:4px}.wheel-spec{display:flex;gap:15px;align-items:center;padding-top:22px}.wheel-spec>span{font-size:35px;color:#738397}.wheel-spec b{font-size:14px;font-weight:500}.wheel-spec p{font-size:12px;color:#7a8899;line-height:1.5;margin:6px 0 0}.spec-strip{background:#121a25;color:#fff;display:grid;grid-template-columns:repeat(4,1fr);padding:35px 6%;gap:32px}.spec-strip>div{border-right:1px solid #ffffff1c}.spec-strip>div:last-child{border:0}.spec-strip strong{font-size:35px;font-weight:400;letter-spacing:-1px}.spec-strip strong span{font-size:16px;letter-spacing:0;color:#b1becf}.spec-strip p{font-size:14px;color:#91a0b4;margin:11px 0 0}.details{display:grid;grid-template-columns:1fr 1.25fr;gap:70px;padding:80px 7%;background:#f7f8fa}.details>div{max-width:430px}.details .eyebrow{color:#738297}.details h2{font-weight:400;font-size:43px;letter-spacing:-1.4px;margin:25px 0}.details p:not(.eyebrow){font-size:16px;color:#6b7889;line-height:1.85}.tags{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.tags span{font-size:12px;border:1px solid #d7dfe8;padding:9px 12px;color:#5b6e87}.details a{font-size:14px}figure{margin:0;align-self:center}figure img{width:100%;display:block}figcaption{font-size:12px;color:#748293;display:flex;justify-content:space-between;margin-top:13px}footer{padding:30px 4%;display:flex;align-items:center;gap:50px;background:#fff;border-top:1px solid #dfe5eb}footer p{font-size:12px;color:#748293;line-height:1.8;flex:1}footer>div{font-size:12px;color:#748293;line-height:1.8;text-align:right}footer>div span{display:block}.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px}
@media(max-width:1100px){.showcase{grid-template-columns:minmax(0,1fr) 315px}.configuration{padding:27px 21px}.stage-heading h1{font-size:72px}.stage-heading>p:last-child{font-size:14px}.stage-label{display:none}.camera-controls button{padding:10px 12px}.details{gap:35px}.spec-strip{gap:20px}.spec-strip p{font-size:12px}}@media(max-width:760px){header{height:65px}.header-center{display:none}header>a:last-child{font-size:12px}.showcase{display:flex;flex-direction:column}.stage{min-height:540px}.stage-heading{top:30px;left:6%}.stage-heading h1{font-size:72px}.configuration{padding:30px 6%}.configuration h2{font-size:27px}.config-block{padding:25px 0}.swatches{gap:22px}.swatch{width:36px;height:36px}.camera-controls{bottom:62px}.stage-bottom{bottom:18px;left:6%;font-size:12px}.spec-strip{grid-template-columns:1fr 1fr;padding:32px 6%;gap:28px 20px}.spec-strip>div:nth-child(2){border:0}.spec-strip strong{font-size:32px}.spec-strip p{font-size:12px;max-width:150px;line-height:1.6}.details{display:flex;flex-direction:column;padding:50px 6%;gap:30px}.details h2{font-size:37px}.details figure{width:100%}footer{gap:22px;flex-wrap:wrap;padding:30px 6%}footer p{min-width:210px}footer>div{text-align:left;width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.loader-ring{animation:none}.switch-ui,.switch-ui:after{transition:none}}

/* Keep the expanded lighting controls alongside a stable studio viewport. */
select{font:inherit}.signal-select{display:flex;align-items:center;justify-content:space-between;font-size:14px;gap:12px;padding:10px 0}.signal-select select{min-width:120px;padding:8px 10px;border:1px solid #c8d1dc;border-radius:3px;background:#f4f7fa;color:#27394e}.signal-banks{font-size:14px;color:#536e90;margin:0 0 12px}.signal-banks summary{cursor:pointer;padding:8px 0}.signal-banks>div{display:grid;gap:10px;padding:8px 0}.signal-banks label{display:flex;align-items:center;gap:8px}.signal-banks input{accent-color:#365d90;width:16px;height:16px}select:focus-visible,summary:focus-visible{outline:3px solid #568ddb;outline-offset:3px}@media(min-width:761px){.stage{position:sticky;top:0;height:calc(100vh - 20px);min-height:780px;max-height:980px;align-self:start}}

.stage.smoke-active{background:radial-gradient(ellipse at 55% 42%,#c2cbd4 0%,#a6b2bf 55%,#8393a5 100%)}

.welcome-control{margin:0 0 10px}.welcome-control button{width:100%;padding:12px 14px;border:1px solid #294e7b;border-radius:3px;background:#243e60;color:#fff;font-size:14px;text-align:left}.welcome-control button:hover:not(:disabled){background:#365d90}.welcome-control button:disabled{opacity:.8;cursor:progress}.welcome-control p{font-size:12px;line-height:1.5;color:#718195;margin:9px 0 14px;min-height:18px}

/* One load entrance; secondary content has only an opacity transition. */
:root{--studio-reveal:1;--chrome-reveal:1}
.experience-pending{--studio-reveal:0;--chrome-reveal:0}
.experience-pending body{background:#101720}
.experience-pending #load-status{background:transparent;color:#c6d1d9}
.stage{background:#101720;isolation:isolate}
.stage:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 55% 42%,#e8edf1 0%,#d8dfe5 50%,#bfc9d3 100%);opacity:var(--studio-reveal);pointer-events:none}
.stage.smoke-active{background:#101720}
.stage.smoke-active:before{background:radial-gradient(ellipse at 55% 42%,#c2cbd4 0%,#a6b2bf 55%,#8393a5 100%)}
#viewport{z-index:1}
.stage-heading,.stage-label,.camera-controls,.stage-bottom{z-index:3}
.experience-pending :is(header,.stage-heading,.stage-label,.camera-controls,.stage-bottom,.configuration,.spec-strip,.details,footer){opacity:var(--chrome-reveal);visibility:hidden;transition:none}
.experience-pending.chrome-visible :is(header,.stage-heading,.stage-label,.camera-controls,.stage-bottom,.configuration,.spec-strip,.details,footer){visibility:visible}
.section-fade{opacity:0;transition:opacity .55s ease}
.section-fade.section-visible{opacity:1}
.eyebrow,.section-label,.stage-label,.header-center{letter-spacing:.055em}
#model:focus-visible{outline:3px solid #568ddb;outline-offset:-5px}
.studio-post{position:absolute;inset:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 43%,transparent 42%,rgba(8,17,28,.07) 100%),linear-gradient(120deg,rgba(88,150,181,.015),rgba(38,68,105,.02));z-index:2}
.film-grain{position:absolute;inset:-4px;background:url('./assets/film-grain.svg') repeat;opacity:.02;mix-blend-mode:overlay;animation:grain-drift 1.2s steps(3,end) infinite}
@keyframes grain-drift{0%,100%{transform:translate(0,0)}33%{transform:translate(-2px,1px)}66%{transform:translate(1px,-2px)}}
@media(hover:hover) and (pointer:fine){
 #model{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='16' fill='%2317202b' fill-opacity='.8' stroke='%23e4edf4'/%3E%3Cg fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18a9 9 0 0 1 15-7m0-4v4h-4M27 18a9 9 0 0 1-15 7m0 4v-4h4'/%3E%3Cpath d='M15 18h6m-3-3v6'/%3E%3C/g%3E%3C/svg%3E") 18 18,grab}
 #model.is-grabbing{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='16' fill='%23365d90' stroke='white'/%3E%3Cpath d='M12 22l-2-5q0-2 2-1l2 2v-6q0-2 2-1v5-7q2-2 3 0v7-6q2-2 3 0v7-4q3-2 3 1v7l-3 5h-7z' fill='none' stroke='white' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 18 18,grabbing}
}
@media(prefers-reduced-motion:reduce){
 .film-grain{animation:none}
 .section-fade{opacity:1;transition:none}
 .experience-pending :is(header,.stage-heading,.stage-label,.camera-controls,.stage-bottom,.configuration,.spec-strip,.details,footer){opacity:1;visibility:visible}
 .stage:before{opacity:1}
 .swatch:hover{transform:none}
}

/* Preserve the full phone hero, then pin the same viewer within the configurator. */
.mobile-viewer-spacer{display:none}
@media(max-width:760px){
 .showcase{--compact-viewer-height:33svh}
 .mobile-viewer-spacer{display:block;position:absolute;height:calc(540px - var(--compact-viewer-height));width:1px;visibility:hidden;pointer-events:none;flex-shrink:0;overflow-anchor:none}
 .showcase.mobile-compact .mobile-viewer-spacer{position:static}
 .showcase.mobile-compact .stage{position:sticky;top:0;height:var(--compact-viewer-height);min-height:0;flex-shrink:0;z-index:10;overflow-anchor:none}
 .mobile-compact .stage-heading,.mobile-compact .stage-label,.mobile-compact .stage-bottom>span{display:none}
 .mobile-compact #viewport{bottom:52px}
 .mobile-compact .camera-controls{bottom:7px}
 .mobile-compact .stage-bottom{top:4px;bottom:auto;left:auto;right:8px}
 .mobile-compact .stage-bottom button{font-size:12px;padding:6px}
 .mobile-compact .configuration :is(button,input,select,summary){scroll-margin-top:calc(var(--compact-viewer-height) + 12px)}
}

.garage-brand b{font-style:normal;font-size:24px;letter-spacing:-.6px}
#scene-preview{height:auto;aspect-ratio:8/5;background:#d8dfe5}

/* Finish pass: retain the existing grid, content, and responsive viewer. */
body{font-family:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color:#202b36;background:#f5f6f7}
.garage-brand b{font-weight:650;letter-spacing:-.045em}
.header-center{font-size:11px;letter-spacing:.07em;color:#adb8c4}
header>a:last-child{font-size:13px;color:#e0e5eb}
.stage-heading h1{font-weight:600;letter-spacing:-.055em;line-height:1.02}
.stage-heading>p:last-child{line-height:1.6;color:#596774;margin-top:17px}
.eyebrow,.section-label,.stage-label{font-size:11px;font-weight:600;letter-spacing:.075em;color:#63717f}
.stage:before{background:radial-gradient(ellipse 58% 18% at 58% 87%,#8b9ba73b 0%,transparent 100%),radial-gradient(ellipse 70% 65% at 90% 18%,#697e9029 0%,transparent 100%),linear-gradient(150deg,#101923 0%,#303f4d 53%,#101a25 100%)}
/* A feathered upper-right studio beam stays behind the interactive canvas. */
.stage:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--studio-reveal);background:linear-gradient(154deg,transparent 28%,#d8e6f004 32%,#d8e6f034 39%,#d8e6f047 43%,#d8e6f020 49%,transparent 57%)}
.stage-heading{color:#f2f5f7}.stage .stage-heading>p:last-child,.stage .eyebrow,.stage .stage-label,.stage .stage-bottom{color:#bbc7d2}
.stage.smoke-active:before{background:radial-gradient(ellipse at 60% 58%,#3d4c5b,transparent 75%),linear-gradient(145deg,#141c25,#263441 55%,#141e28)}
.configuration{background:#fdfefe;border-left:1px solid #e4e8ec}
.configuration h2{font-weight:500;letter-spacing:-.035em;line-height:1.25}
.configuration .eyebrow{color:#667686;margin-bottom:10px}
.section-label{margin-bottom:10px;color:#687989}
.config-block{padding-top:24px;padding-bottom:24px;border-color:#e3e8ec}
.config-block h3{font-weight:500;letter-spacing:-.025em;line-height:1.35;margin-bottom:18px}
fieldset{padding-bottom:24px;border-color:#e3e8ec}
legend{font-weight:500;letter-spacing:-.015em}
legend span{font-weight:400;color:#667789}
.camera-controls{border-radius:8px;background:#fafcfce8;border-color:#ffffffc9;box-shadow:0 4px 18px #2030400c}
.camera-controls button{border-radius:5px;font-weight:500;font-size:13px;letter-spacing:-.012em;color:#566879}
.camera-controls button[aria-pressed=true]{background:#273d51;color:#fff;box-shadow:0 1px 3px #182b3d1a}
.camera-controls button:hover:not([aria-pressed=true]){background:#e8eef3;color:#253b50}
.door-controls button{background:#f6f8fa;border-color:#dce3e9;border-radius:6px;padding:14px 12px;font-weight:500;color:#2b4053;box-shadow:0 1px 2px #142c4304}
.door-controls button[aria-pressed=true]{background:#eaf0f6;border-color:#91a7bd;color:#233b52}
.door-controls button:hover:not(:disabled){border-color:#8d9faf}
.door-state{font-weight:400;color:#66778a;margin-top:5px}
.welcome-control button{background:#2a435b;border-color:#243d54;border-radius:6px;font-weight:500;letter-spacing:-.012em;box-shadow:inset 0 1px #ffffff0d,0 2px 4px #172c4210}
.welcome-control button:hover:not(:disabled){background:#354f68}
.welcome-control p,.toggle-row small,.wheel-spec p{line-height:1.5;color:#67788a}
.toggle-row{padding-top:12px;padding-bottom:14px}
.toggle-row b{font-weight:500;letter-spacing:-.015em}
.switch-ui{background:#cbd4dd;box-shadow:inset 0 1px 2px #14293a0b}
.switch-ui:after{box-shadow:0 1px 3px #152c4826}
.toggle-row input:checked+.switch-ui{background:#365875}
.text-button{font-size:13px;font-weight:500;color:#385774}
.signal-select select{background:#f6f8fa;border-color:#dce3e9;border-radius:6px;font-size:13px;color:#2b4053}
.signal-banks{font-size:13px;color:#506a83}
.swatch{box-shadow:inset 0 1px 3px #ffffff24,0 1px 2px #142c4310}
.swatch[aria-pressed=true]:after{border-color:#526f89}
.swatch:hover{transform:none;box-shadow:inset 0 1px 3px #ffffff24,0 0 0 2px #e3eaf0}
.custom-color{font-size:13px;color:#647587}
.custom-color>span{font-family:inherit;font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.02em}
.wheel-spec b{font-weight:500;letter-spacing:-.02em}
.spec-strip strong{font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.spec-strip strong span{font-size:14px;font-weight:400}
.spec-strip p{line-height:1.55;color:#a4b0bf}
.details h2{font-weight:500;line-height:1.16;letter-spacing:-.04em;margin:22px 0}
.details p:not(.eyebrow){line-height:1.8;color:#586b7c}
.tags{gap:9px;margin:24px 0}
.tags span{border-color:#dde4ea;border-radius:4px;background:#f9fafb;color:#5c7186;line-height:1.35}
.details a{font-size:13px;color:#344e67;text-decoration-color:#9fadb9}
figcaption{font-size:11px;line-height:1.6;color:#647789}
footer p,footer>div{color:#647789}
.door-controls button,.welcome-control button,.camera-controls button,.swatch,.signal-select select{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}
@media(max-width:760px){.configuration{border-left:0}.stage-heading h1{letter-spacing:-.055em}.mobile-compact .stage-bottom button{font-size:11px}.camera-controls{box-shadow:0 3px 12px #2030400b}}
@media(prefers-reduced-motion:reduce){.door-controls button,.welcome-control button,.camera-controls button,.swatch,.signal-select select{transition:none}}

.spec-source{display:block;margin-top:4px;font-size:11px;line-height:1.6;color:#647789}