/* DMK Garage / open studio: copy left, vehicles right, one continuous site background. */
.hero.hero-showroom{
 --showroom-stage:clamp(450px,35vw,540px);
 --showroom-gutter:max(56px,calc((100% - 1360px)/2));
 position:relative;display:grid;
 grid-template-columns:var(--showroom-gutter) minmax(0,2fr) minmax(0,3fr) var(--showroom-gutter);
 grid-template-rows:minmax(var(--showroom-stage),auto) auto auto;
 height:auto;min-height:0;padding:0;background:var(--background,#101114);isolation:isolate;overflow:hidden
}
.hero.hero-showroom:after{display:none}
.dmk-showroom{
 position:relative;inset:auto;grid-column:2/4;grid-row:1/3;display:grid;
 grid-template-columns:minmax(0,2fr) minmax(0,3fr);
 grid-template-rows:minmax(var(--showroom-stage),1fr) auto;
 z-index:1;min-width:0;min-height:0;color:#edf0f5;pointer-events:none
}
@supports(grid-template-columns:subgrid){
 .dmk-showroom{grid-template-columns:subgrid;grid-template-rows:subgrid}
}
.showroom-viewport{
 position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;height:100%;min-width:0;min-height:0;
 background:var(--background,#101114);overflow:hidden;opacity:0;transition:opacity .6s;pointer-events:auto
}
.showroom-viewport canvas{display:block;width:100%;height:100%;background:transparent;outline:none}
.showroom-fallback{
 position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;height:100%;min-height:0;
 object-fit:contain;object-position:center;background:var(--background,#101114);opacity:0;
 mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
 transition:opacity .6s;pointer-events:none
}
.showroom-loaded .showroom-viewport{opacity:1}
.showroom-loaded .showroom-fallback{opacity:0;pointer-events:none}
.showroom-unavailable .showroom-viewport{display:none}
.showroom-unavailable .showroom-fallback{opacity:1}
.hero-showroom .hero-inner{
 position:relative;left:auto;right:auto;bottom:auto;grid-column:2;grid-row:1;align-self:start;
 width:auto;max-width:none;min-width:0;margin:0;padding:clamp(54px,5vw,80px) 26px 42px 0;z-index:2
}
.hero-showroom .hero-inner .eyebrow{font-size:10px;letter-spacing:.16em;color:#a6aab3;margin-bottom:20px;line-height:1.6}
.hero-showroom .hero-inner .eyebrow:before{flex-shrink:0}
.hero.hero-showroom h1{font-size:clamp(36px,3.75vw,58px);line-height:1.09;max-width:540px;letter-spacing:-.04em;overflow-wrap:break-word;hyphens:auto}
.hero-showroom .hero-description{max-width:410px;font-size:15px;line-height:1.75;margin-top:23px;color:#a3a8b2}
.hero-showroom .actions{margin-top:28px;gap:11px;flex-wrap:wrap}
.hero-showroom .btn{font-size:12px;padding:12px 16px;min-height:46px;gap:16px;text-align:center}
.hero-showroom .btn svg{flex-shrink:0}
.hero-showroom .hero-bottom{
 position:relative;left:auto;right:auto;bottom:auto;grid-column:2/4;grid-row:3;
 width:auto;min-width:0;margin:0;padding:20px 0;border-top:1px solid #ffffff12;z-index:2;gap:24px
}
.hero-showroom .hero-bottom p{font-size:10px;color:#777f8c;letter-spacing:.1em}
.hero-showroom .hero-bottom .scroll-hint{font-size:11px;color:#a9afb9;white-space:nowrap}
.showroom-controls{
 position:relative;left:auto;right:auto;bottom:auto;grid-column:2;grid-row:2;align-self:start;justify-self:stretch;
 z-index:2;width:auto;max-width:none;min-width:0;margin:0 0 24px 30px;padding:16px 0 0;
 border-top:1px solid #ffffff17;pointer-events:auto
}
.showroom-controls[hidden]{display:none}
.showroom-status{display:flex;gap:10px;align-items:center;min-height:28px}
.showroom-step{flex:0 0 auto;font-size:10px;font-variant-numeric:tabular-nums;color:#df3947;border:1px solid #df394750;padding:5px;line-height:1}
.showroom-phase{font-size:12px;font-weight:500;color:#d9dde4;letter-spacing:.015em;line-height:1.45;overflow-wrap:break-word}
.showroom-phase-dots{display:flex;gap:6px;margin:10px 0 15px}
.showroom-phase-dots span{width:29px;height:2px;background:#3d4047;transition:background .35s}
.showroom-phase-dots span.active{background:#d33242}
.showroom-selection{display:grid;grid-template-columns:34px minmax(0,1fr) auto repeat(3,34px);gap:9px;align-items:center;min-height:40px}
.showroom-icon{display:grid;place-items:center;border:1px solid #ffffff24;background:#16181d;color:#eceff5;width:34px;height:34px;padding:0;border-radius:50%;font-size:15px;cursor:pointer;transition:border .2s,background .2s}
.showroom-icon:hover{border-color:#df3947;background:#28191e}
.showroom-icon:focus-visible{outline:2px solid #ff4055;outline-offset:3px}
.showroom-icon:disabled{opacity:.35;cursor:wait}
.showroom-car-label{font-size:11px;min-width:0;color:#cbd0d8;line-height:1.4;overflow-wrap:break-word}
.showroom-count{font-size:9px;letter-spacing:.04em;color:#79818e;white-space:nowrap;font-variant-numeric:tabular-nums}
.showroom-progress{height:1px;background:#ffffff20;overflow:hidden;margin:13px 0 9px}
.showroom-progress span{display:block;height:100%;width:100%;transform-origin:left;background:#cd2d3e;transform:scaleX(0)}
.showroom-caption{display:flex;align-items:flex-start;gap:15px;justify-content:space-between}
.showroom-note{font-size:9px;color:#848d9a;line-height:1.65;max-width:390px}
.showroom-credit{color:#929ba8;font-size:9px;line-height:1.65;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.dmk-showroom:not(.showroom-loaded):not(.showroom-unavailable)::after{
 content:"";grid-column:2;grid-row:1;align-self:center;justify-self:center;width:32px;height:32px;
 border:1px solid #ffffff18;border-top-color:#ce2b3d;border-radius:50%;animation:showroom-loading 1s linear infinite
}
@keyframes showroom-loading{to{transform:rotate(360deg)}}
@media(min-width:1240px){
 .showroom-controls{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);column-gap:22px}
 .showroom-status{grid-column:1;grid-row:1;align-self:end}
 .showroom-phase-dots{grid-column:1;grid-row:2;margin:9px 0 5px}
 .showroom-selection{grid-column:2;grid-row:1/3;align-self:center;grid-template-columns:32px minmax(0,1fr) auto repeat(3,32px);gap:6px}
 .showroom-icon{width:32px;height:32px}
 .showroom-progress{grid-column:1/-1;grid-row:3}
 .showroom-caption{grid-column:1/-1;grid-row:4}
}
@media(max-width:1180px){
 .hero.hero-showroom{--showroom-stage:450px;--showroom-gutter:32px}
 .hero-showroom .hero-inner{padding-top:52px;padding-right:22px}
 .hero.hero-showroom h1{font-size:clamp(35px,4vw,46px)}
 .hero-showroom .hero-description{font-size:14px;margin-top:20px}
 .hero-showroom .actions{margin-top:24px}
 .showroom-controls{margin-left:22px}
}
@media(max-width:900px){
 .hero.hero-showroom{
  --showroom-stage:clamp(300px,56vw,440px);--showroom-gutter:22px;
  grid-template-columns:var(--showroom-gutter) minmax(0,1fr) var(--showroom-gutter);
  grid-template-rows:auto var(--showroom-stage) auto auto
 }
 .dmk-showroom{
  grid-column:2;grid-row:2/4;grid-template-columns:minmax(0,1fr);
  grid-template-rows:var(--showroom-stage) auto
 }
 @supports(grid-template-columns:subgrid){.dmk-showroom{grid-template-columns:subgrid;grid-template-rows:subgrid}}
 .showroom-viewport,.showroom-fallback{grid-column:1;grid-row:1}
 .dmk-showroom:not(.showroom-loaded):not(.showroom-unavailable)::after{grid-column:1;grid-row:1}
 .hero-showroom .hero-inner{grid-column:2;grid-row:1;padding:44px 0 8px}
 .hero-showroom .hero-inner .eyebrow{font-size:10px;letter-spacing:.15em;margin-bottom:18px}
 .hero.hero-showroom h1{font-size:clamp(36px,6.1vw,52px);max-width:660px;line-height:1.1}
 .hero-showroom .hero-description{font-size:14px;max-width:540px;margin-top:18px;line-height:1.75}
 .hero-showroom .actions{margin-top:23px;gap:10px}
 .hero-showroom .btn{font-size:12px;min-height:46px;padding:12px 16px;gap:14px}
 .showroom-controls{grid-column:1;grid-row:2;margin:0 0 22px;padding:18px 0 0}
 .showroom-status{min-height:29px}
 .showroom-phase-dots{margin:10px 0 15px}
 .showroom-selection{grid-template-columns:36px minmax(0,1fr) auto repeat(3,36px);gap:10px}
 .showroom-icon{width:36px;height:36px}
 .showroom-car-label{font-size:12px}
 .showroom-count{font-size:10px}
 .showroom-progress{margin:16px 0 10px}
 .showroom-caption{gap:18px}
 .showroom-note{font-size:9px;max-width:470px}
 .showroom-credit{font-size:9px}
 .hero-showroom .hero-bottom{grid-column:2;grid-row:4;padding:18px 0;gap:20px;align-items:center}
 .hero-showroom .hero-bottom p{font-size:9px;line-height:1.65}
 .hero-showroom .hero-bottom .scroll-hint{font-size:10px;gap:7px}
}
@media(max-width:600px){
 .hero.hero-showroom{--showroom-stage:clamp(270px,72vw,380px);--showroom-gutter:20px}
 .hero-showroom .hero-inner{padding-top:34px}
 .hero-showroom .hero-inner .eyebrow{font-size:9px;letter-spacing:.13em}
 .hero.hero-showroom h1{font-size:clamp(34px,8.6vw,44px)}
 .hero-showroom .hero-description{font-size:13px}
 .hero-showroom .hero-bottom p{font-size:8px;max-width:210px}
 .hero-showroom .hero-bottom .scroll-hint{font-size:9px}
}
@media(max-width:380px){
 .hero.hero-showroom{--showroom-gutter:18px}
 .hero.hero-showroom h1{font-size:32px}
 .hero-showroom .hero-inner .eyebrow{font-size:8px;letter-spacing:.12em}
 .hero-showroom .btn{font-size:11px;padding:11px 13px;gap:10px}
 .showroom-selection{grid-template-columns:32px minmax(0,1fr) auto repeat(3,32px);gap:5px}
 .showroom-icon{width:32px;height:32px}
 .showroom-car-label{font-size:10px}
 .showroom-count{font-size:8px}
 .showroom-note,.showroom-credit{font-size:8px}
 .showroom-caption{gap:11px}
 .hero-showroom .hero-bottom{flex-wrap:wrap;gap:10px}
}
@media(prefers-reduced-motion:reduce){
 .showroom-viewport,.showroom-fallback,.showroom-icon,.showroom-phase-dots span{transition:none}
 .dmk-showroom::after{animation:none!important}
}

/* Body colours keep the satin material and only change the painted bodywork. */
.showroom-colors{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding-top:12px}
.showroom-color-description{display:flex;flex-direction:column;gap:4px;min-width:110px}
.showroom-color-label{font-size:9px;letter-spacing:.06em;color:#8c95a2;line-height:1.4}
.showroom-color-value{font-size:11px;color:#d6dbe3;line-height:1.4}
.showroom-color-choices{display:flex;flex-wrap:wrap;gap:2px}
.showroom-color{position:relative;display:block;width:40px;height:40px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;cursor:pointer;transition:border-color .2s,background-color .2s}
.showroom-color::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--swatch-color);border:1px solid #ffffff38;box-shadow:inset 0 1px 1px #ffffff0a}
.showroom-color:hover{border-color:#ffffff55;background:#ffffff05}
.showroom-color[aria-pressed="true"]{border-color:#e4e8ef}
.showroom-color[aria-pressed="true"]::after{content:"";position:absolute;left:16px;top:14px;width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);filter:drop-shadow(0 1px 1px #000)}
.showroom-color[data-color="2"][aria-pressed="true"]::after{border-color:#202328;filter:none}
.showroom-color:focus-visible{outline:2px solid #ff4055;outline-offset:3px}
@media(min-width:1240px){
 .showroom-colors{grid-column:1/-1;grid-row:3}
 .showroom-progress{grid-row:4}
 .showroom-caption{grid-row:5}
}
@media(max-width:900px){.showroom-color{width:44px;height:44px}.showroom-color::before{inset:9px}.showroom-color[aria-pressed="true"]::after{left:18px;top:16px}}
@media(max-width:380px){.showroom-colors{gap:8px}.showroom-color-description{min-width:0}.showroom-color-choices{gap:0}.showroom-color{width:40px;height:40px}.showroom-color::before{inset:7px}.showroom-color[aria-pressed="true"]::after{left:16px;top:14px}}
@media(prefers-reduced-motion:reduce){.showroom-color{transition:none}}