/* Cloud Auto, theme "showroom": Ali's pick of 26 Oct, the mix of v2/1 "Glass showroom" and v2/2 "Studio configurator".
   The landing and the dark chapters stand on the smoked Lacquer jewels (never black or slate) with frosted glass panes,
   faintly tinted with the section's jewel; the cars index and the car pages stand in one lit blue-grey studio with
   studio glass. Same header, type and glass everywhere. Panels are square; only controls are pills.
   Type: Spectral 200/300 for names, prices and headlines; Hanken Grotesk 400/500 for the rest. Logical properties
   throughout, so one sheet serves English, French and Arabic. */

@font-face{font-family:'Spectral';font-weight:200;font-style:normal;font-display:swap;src:url(../fonts/spectral/spectral-latin-200-normal.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/spectral/spectral-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-weight:300;font-style:italic;font-display:swap;src:url(../fonts/spectral/spectral-latin-300-italic.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/hanken-grotesk/hanken-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/hanken-grotesk/hanken-grotesk-latin-500-normal.woff2) format('woff2')}

:root{
  /* dark: the smoked jewels (light, base, foot) and the ivory text */
  --ivory:#E7E8EB; --ivory-rgb:231 232 235;
  --d-body:rgb(231 232 235 / .8); --d-label:rgb(231 232 235 / .64); --d-line:rgb(231 232 235 / .2);
  --sap-l:#28334C; --sap-b:#131B2B; --sap-f:#0C121E; --sap-rgb:19 27 43;
  --em-l:#3B594D;  --em-b:#1E2F29;  --em-f:#121E1A;  --em-rgb:30 47 41;
  --bo-l:#482731;  --bo-b:#221118;  --bo-f:#150A0F;  --bo-rgb:34 17 24;
  --au-l:#412E47;  --au-b:#1F1523;  --au-f:#130D16;  --au-rgb:31 21 35;
  /* glass tints: the vivid jewels at low alpha */
  --tint-sap:12 26 61; --tint-em:11 53 41; --tint-bo:44 10 27; --tint-au:37 17 45;
  --tint:var(--tint-sap);
  /* the studio */
  --wall-top:#A3AEBD; --wall:#BEC7D2; --cove:#D5DAE1; --floor-far:#C3CAD3; --floor:#A9B3BF; --floor-near:#8995A5;
  --ink:#0C1A3D; --ink-rgb:12 26 61; --ink-body:#2B3754; --ink-label:#4B5673; --s-line:rgb(12 26 61 / .16);
  --sapphire:#1D3366; --sapphire-deep:#0C1A3D; --emerald:#18634D; --aubergine:#4E2559; --bordeaux:#5C1733;
  --s-glass:rgb(238 241 246 / .46); --s-glass-strong:rgb(240 243 247 / .74); --s-edge:rgb(255 255 255 / .62);
  --s-shadow:0 24px 60px -28px rgb(18 28 52 / .45), 0 2px 8px -4px rgb(18 28 52 / .18);
  /* type and space */
  --font-display:'Spectral', Georgia, serif; --font-text:'Hanken Grotesk', system-ui, sans-serif;
  --fs-hero:clamp(40px, calc(18px + 4.4vw), 84px);
  --fs-name:clamp(34px, calc(16px + 4.6vw), 84px);
  --fs-title:clamp(30px, calc(17px + 2.8vw), 58px);
  --fs-body:clamp(16px, calc(15.6px + .1vw), 18px);
  --fs-small:clamp(14px, calc(13.6px + .1vw), 15px);
  --fs-label:clamp(12px, calc(11.6px + .1vw), 13px);
  --gutter:clamp(20px, calc(3.657px + 4.1905vw), 64px); --max:1312px; --tap:44px;
  --ease:cubic-bezier(.2,.7,.15,1);
  /* the current ground's text (dark by default) */
  --fg:var(--ivory); --body:var(--d-body); --label-c:var(--d-label); --line:var(--d-line);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--sap-b);color:var(--fg);font:400 var(--fs-body)/1.55 var(--font-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-studio{background:var(--wall);--fg:var(--ink);--body:var(--ink-body);--label-c:var(--ink-label);--line:var(--s-line)}
img,video,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
p,h1,h2,h3,h4,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;padding:10px 16px;background:var(--ivory);color:var(--ink);border-radius:999px}
.skip:focus{top:12px}
.num{font-variant-numeric:lining-nums tabular-nums;unicode-bidi:isolate}
.nb{white-space:nowrap}
.en{unicode-bidi:isolate}
.fn{font-size:.62em;vertical-align:.7em;margin-inline-start:1px}
.is-hidden,[hidden]{display:none!important}
.needs-js{display:none}
.js .needs-js{display:revert}
.js .grid.needs-js,.js .summary.needs-js{display:block}
.wrap{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter);position:relative}

.label{font:500 var(--fs-label)/1.3 var(--font-text);letter-spacing:.2em;text-transform:uppercase;color:var(--label-c)}
.eyebrow::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sapphire);margin-inline-end:10px;vertical-align:1px}
.eyebrow--em::before{background:var(--emerald)} .eyebrow--au::before{background:var(--aubergine)}
.h1{font:200 var(--fs-name)/1.04 var(--font-display);letter-spacing:-.015em;margin-top:14px;text-wrap:balance}
.sec-title{font:200 var(--fs-title)/1.06 var(--font-display);letter-spacing:-.012em;margin-top:14px;text-wrap:balance}
.lead{font:300 clamp(20px, calc(17px + .7vw), 26px)/1.4 var(--font-display);color:var(--fg);margin-top:18px;max-width:34em}
.body{color:var(--body);max-width:38em}
.body p+p,.body p+ol,.body ol+p,.body p+ul{margin-top:14px}
.body h3{font:300 24px/1.2 var(--font-display);color:var(--fg);margin:26px 0 10px}
.small{font-size:var(--fs-small);color:var(--label-c);line-height:1.5}
.sub{font:500 var(--fs-label)/1.3 var(--font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--label-c);margin:22px 0 10px}
.more-row{margin-top:26px}
.more{display:inline-flex;align-items:center;gap:10px;padding-bottom:4px;border-bottom:1px solid var(--line);color:var(--fg);transition:gap .3s var(--ease)}
.more:hover{gap:14px}
.arr{width:18px;height:18px;flex:none}
[dir=rtl] .arr{transform:scaleX(-1)}
.links li{border-top:1px solid var(--line)}
.links li:last-child{border-bottom:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font:300 clamp(20px, calc(16px + 1vw), 28px)/1.2 var(--font-display)}

/* ---------------------------------------------------------------- pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--tap);padding:0 22px;border-radius:999px;
  font:500 var(--fs-small)/1 var(--font-text);white-space:nowrap;border:1px solid rgb(255 255 255 / .34);background:rgb(255 255 255 / .1);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);transition:background .25s,border-color .25s,color .25s,transform .3s var(--ease)}
.pill:hover{background:rgb(255 255 255 / .2)}
.pill:active{transform:scale(.98)}
.pill svg{width:18px;height:18px;flex:none}
.pill.solid{background:rgb(var(--ivory-rgb) / .94);color:var(--sap-b);border-color:transparent;box-shadow:inset 0 1px 0 #fff, 0 12px 30px -12px rgb(0 0 0 / .45)}
.pill.solid:hover{background:#fff}
.pill.jewel{background:var(--sapphire);color:#F4F5F8;border-color:rgb(255 255 255 / .18)}
.pill.jewel:hover{background:var(--sapphire-deep)}
.pill.round{width:var(--tap);padding:0}
.pill.wide{width:100%;height:52px;font-size:var(--fs-body)}
.is-studio main .pill:not(.jewel):not(.solid),.on-studio .pill:not(.jewel){border-color:var(--s-edge);background:var(--s-glass);color:var(--ink)}
.is-studio main .car-hero .pill:not(.jewel):not(.solid){border-color:rgb(255 255 255 / .34);background:rgb(255 255 255 / .1);color:var(--ivory)}
.btns{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:22px}
.btns li{display:flex;flex-direction:column;gap:6px}

/* ---------------------------------------------------------------- glass */
.glass{position:relative;isolation:isolate;
  background:linear-gradient(168deg, rgb(255 255 255 / .13) 0%, rgb(255 255 255 / .05) 34%, rgb(255 255 255 / .025) 100%), rgb(var(--tint) / .32);
  -webkit-backdrop-filter:blur(26px) saturate(165%);backdrop-filter:blur(26px) saturate(165%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .26), inset 0 -1px 0 rgb(255 255 255 / .05), 0 40px 90px -40px rgb(4 7 16 / .7)}
.glass::before{content:"";position:absolute;inset:0;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(150deg, rgb(255 255 255 / .46) 0%, rgb(255 255 255 / .12) 30%, rgb(255 255 255 / .05) 62%, rgb(255 255 255 / .2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass--thin{background:linear-gradient(168deg, rgb(255 255 255 / .12), rgb(255 255 255 / .04)), rgb(var(--tint) / .18);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.t-sap{--tint:var(--tint-sap)} .t-em{--tint:var(--tint-em)} .t-bo{--tint:var(--tint-bo)} .t-au{--tint:var(--tint-au)}
/* studio glass: pale, precise, a white edge */
.is-studio main .glass,.dock.glass{background:var(--s-glass);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--s-edge);box-shadow:var(--s-shadow), inset 0 1px 0 rgb(255 255 255 / .7)}
.is-studio main .glass::before,.dock.glass::before{display:none}
.pane{padding:clamp(26px, calc(14px + 2.4vw), 48px)}

/* ---------------------------------------------------------------- the header */
.bar{position:fixed;inset:0 0 auto;z-index:50;height:72px;display:flex;align-items:center;gap:12px;padding:0 var(--gutter);color:var(--ivory);transition:color .4s var(--ease)}
.bar::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02)), rgb(var(--sap-rgb) / .5);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 -1px 0 rgb(255 255 255 / .1)}
.bar.scrolled::before{opacity:1}
.bar.on-studio{color:var(--ink)}
.bar.on-studio::before{background:var(--s-glass);box-shadow:inset 0 -1px 0 rgb(255 255 255 / .5)}
.brand{display:block;width:104px;flex:none;color:inherit}
.brand svg{display:block;width:100%;height:auto}
.nav{display:none;gap:28px;margin-inline-start:40px;font-size:var(--fs-small)}
.nav a{opacity:.82;transition:opacity .25s;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{opacity:1}
.nav a[aria-current]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.bar-r{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.seg{display:flex;height:40px;padding:3px;border-radius:999px;border:1px solid rgb(255 255 255 / .3);background:rgb(255 255 255 / .1);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.seg a{display:grid;place-items:center;min-width:34px;padding:0 8px;border-radius:999px;font:500 12.5px/1 var(--font-text);letter-spacing:.06em;opacity:.82}
.seg a[aria-current]{background:rgb(var(--ivory-rgb) / .94);color:var(--sap-b);opacity:1}
.on-studio .seg{border-color:var(--s-edge);background:var(--s-glass)}
.on-studio .seg a[aria-current]{background:var(--ink);color:var(--ivory)}
.bar .pill{height:40px}
.bar .pill.wa{width:40px;padding:0}
.wa-text{display:none}
.menu{position:relative}
.menu summary{list-style:none;height:40px;position:relative;z-index:2}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{position:relative;display:block;width:16px;height:1px;background:currentColor;box-shadow:0 5px 0 currentColor;transform:translateY(-2.5px);transition:transform .25s var(--ease)}
.menu[open] summary i{background:transparent;box-shadow:none;transform:none}
.menu[open] summary i::before,.menu[open] summary i::after{content:"";position:absolute;left:0;top:0;width:16px;height:1px;background:currentColor;transform:rotate(45deg)}
.menu[open] summary i::after{transform:rotate(-45deg)}
/* the phone menu (review 2.4): a full-screen sheet in the page's mode, the words large, the controls at the foot */
.menu-sheet{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow:auto;overscroll-behavior:contain;
  padding:calc(100px + env(safe-area-inset-top)) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background:radial-gradient(90% 50% at 80% 0%, rgb(46 57 81 / .6), rgb(46 57 81 / 0) 70%), linear-gradient(196deg, var(--sap-l) 0%, var(--sap-b) 46%, var(--sap-f) 100%);
  color:var(--ivory);--m-fg:var(--ivory);--m-inv:var(--sap-b);--m-line:rgb(231 232 235 / .18);transition:opacity .22s var(--ease)}
@starting-style{.menu[open] .menu-sheet{opacity:0}}
.menu.is-closing .menu-sheet{opacity:0}
:root[data-studio^=lit] body.is-studio .menu-sheet{background:linear-gradient(180deg, var(--wall-top) 0%, var(--wall) 40%, var(--cove) 100%);color:var(--ink);--m-fg:var(--ink);--m-inv:var(--ivory);--m-line:rgb(12 26 61 / .12)}
:root[data-studio]:not([data-studio^=lit]) body.is-studio .menu-sheet{background:linear-gradient(180deg, #1F2633 0%, var(--st-base) 50%, #11151D 100%)}
html.menu-open{overflow:hidden}
html.menu-open .bar{color:var(--m-fg, var(--ivory))}
html.menu-open body.is-studio .bar{color:var(--ink)}
html.menu-open .bar::before{opacity:0}
.bar .brand{position:relative;z-index:2}
.menu-nav{display:grid}
.menu-nav a{padding:10px 0;border-bottom:1px solid var(--m-line);font:300 32px/1.15 var(--font-display);letter-spacing:-.01em;animation:menu-in .42s var(--ease) both;animation-delay:calc(var(--i, 0) * 30ms + 40ms)}
.menu-nav a[aria-current]{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
@keyframes menu-in{from{opacity:0;transform:translate3d(0, 10px, 0)}}
.menu-foot{display:grid;gap:12px}
.menu-sheet .pill{height:50px}
.menu-sheet .seg{height:50px;padding:4px;border-color:var(--m-line);background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-sheet .seg a{flex:1;font:500 14px/1 var(--font-text);letter-spacing:0;opacity:.86}
.menu-sheet .seg a[aria-current]{background:var(--m-fg);color:var(--m-inv);opacity:1}
.menu-sheet .mode{display:flex;justify-content:flex-start;gap:12px;width:100%;padding:0 18px;border-color:var(--m-line);background:none;color:inherit}
.menu-wa{width:100%}
@media (max-width:899px){.bar-r > .seg,.bar-r > .mode{display:none}}
@media (min-width:900px){
  .bar{height:76px}
  .brand{width:124px}
  .bar .pill.wa{width:auto;padding:0 18px}
  .wa-text{display:inline}
}
/* six words in the header: they sit inline from 1200 px (French, with longer words, from 1380 px); below that the menu button */
@media (min-width:1200px){
  html:not([lang=fr]) .nav{display:flex}
  html:not([lang=fr]) .menu{display:none}
}
@media (min-width:1380px){
  .nav{display:flex}
  .menu{display:none}
}

/* ---------------------------------------------------------------- the foot */
.foot{position:relative;padding:88px 0 calc(40px + env(safe-area-inset-bottom));background:linear-gradient(180deg, var(--sap-f) 0%, #0A0F19 100%);color:var(--ivory);
  --fg:var(--ivory);--body:var(--d-body);--label-c:var(--d-label);--line:var(--d-line)}
.foot--studio{background:linear-gradient(180deg, rgb(169 179 191 / 0) 0%, rgb(137 149 165 / .35) 100%);color:var(--ink);
  --fg:var(--ink);--body:var(--ink-body);--label-c:var(--ink-label);--line:var(--s-line)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.foot .brand{width:160px}
.seal{width:48px;height:48px;color:currentColor}
.seal svg{width:100%;height:100%}
.foot-cols{display:grid;gap:26px;padding-top:30px;font-size:13.5px;color:var(--label-c)}
.foot-cols .lines p+p{margin-top:6px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;align-content:start}
.foot-nav a{color:var(--body)}
.foot-nav a[aria-current]{color:var(--fg)}
@media (min-width:900px){.foot-cols{grid-template-columns:2fr 1fr 1fr;gap:48px}.foot-nav{flex-direction:column}}

/* ---------------------------------------------------------------- the grounds (dark chapters without a photo) */
.ground{position:relative;padding:clamp(88px, 10vw, 150px) 0;overflow:hidden}
.ground.t-sap{background:radial-gradient(90% 60% at 70% 0%, rgb(46 57 81 / .55), rgb(46 57 81 / 0) 70%), linear-gradient(196deg, var(--sap-l) 0%, var(--sap-b) 46%, var(--sap-f) 100%)}
.ground.t-em{background:radial-gradient(90% 60% at 70% 0%, rgb(31 104 82 / .32), rgb(31 104 82 / 0) 70%), linear-gradient(196deg, var(--em-l) 0%, var(--em-b) 46%, var(--em-f) 100%)}
.ground.t-bo{background:radial-gradient(90% 60% at 64% 0%, rgb(97 30 57 / .42), rgb(97 30 57 / 0) 70%), linear-gradient(196deg, var(--bo-l) 0%, var(--bo-b) 46%, var(--bo-f) 100%)}
.ground.t-au{background:radial-gradient(90% 60% at 64% 0%, rgb(83 44 94 / .42), rgb(83 44 94 / 0) 70%), linear-gradient(196deg, var(--au-l) 0%, var(--au-b) 46%, var(--au-f) 100%)}
.page-open{padding-top:calc(72px + clamp(48px, 8vw, 120px))}
.split{display:grid;gap:36px;align-items:start}
.wide-pane{max-width:900px}
.end-grid{display:grid;gap:30px;align-items:end}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:56px}
  .split--wide{grid-template-columns:minmax(0, 4fr) minmax(0, 8fr)}
  .end-grid{grid-template-columns:1fr 1fr;gap:56px}
}

/* ---------------------------------------------------------------- reveals and motion */
.js .rise{opacity:0;transform:translate3d(0, 16px, 0);transition:opacity .6s var(--ease), transform .7s var(--ease)}
.js .rise.in{opacity:1;transform:none}
/* the first screen's reveals run from the first frame on their own, without waiting for site.js at the end of the page */
@media (prefers-reduced-motion:no-preference){
  .js .page-open .rise{animation:rise-in .6s var(--ease) both}
  .js .page-open .rise + .rise{animation-delay:.06s}
}
@media (prefers-reduced-motion:reduce){.js .page-open .rise{opacity:1;transform:none}}
@keyframes rise-in{from{opacity:0;transform:translate3d(0, 16px, 0)}to{opacity:1;transform:none}}

/* page transitions (Ali, 1 Nov: "smoother between the transitions of the pages"): a soft crossfade between pages, the
   header holding its place, and the car photo growing from its card into the car page (the names are set for the length
   of a transition by site.js on the old page and mode.js on the new one). Off when motion is reduced. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.3,.6,.2,1)}
  ::view-transition-old(root){animation-name:ca-out}
  ::view-transition-new(root){animation-name:ca-in}
  ::view-transition-group(car-photo){animation-duration:.56s;animation-timing-function:cubic-bezier(.2,.7,.15,1)}
  ::view-transition-old(car-photo),::view-transition-new(car-photo){height:100%;object-fit:cover;overflow:clip}
  ::view-transition-group(bar){animation-duration:.42s}
  .mode-fade::view-transition-old(root),.mode-fade::view-transition-new(root){animation-duration:.34s}
}
@keyframes ca-out{to{opacity:0}}
@keyframes ca-in{from{opacity:0}}
/* photos below the fold fade in once decoded; the box and its preview are already there, so nothing moves */
.img-fade img[loading=lazy]{transition:opacity .6s var(--ease), transform .8s var(--ease)}
.img-fade .chapter-bg img[loading=lazy]{transition:opacity .9s var(--ease)}
.img-fade img[loading=lazy]:not(.is-loaded){opacity:0}

/* soft seams (review 3.3): where one ground meets another, the one above runs on into the next for a quarter screen
   instead of stopping on a straight edge */
:is(.ground, .chapter, .build-ch) + .ground::before{content:"";position:absolute;inset:0 0 auto;height:min(28vh, 260px);pointer-events:none;
  background:linear-gradient(180deg, var(--seam-from) 0%, color-mix(in srgb, var(--seam-from) 55%, transparent) 40%, color-mix(in srgb, var(--seam-from) 0%, transparent) 100%)}
.t-sap + .ground{--seam-from:var(--sap-f)} .t-em + .ground{--seam-from:var(--em-f)} .t-bo + .ground{--seam-from:var(--bo-f)} .t-au + .ground{--seam-from:var(--au-f)}

/* ---------------------------------------------------------------- home: the scene */
.scene{position:relative;height:250svh;background:var(--sap-b)}
.scene--short{height:100svh;min-height:680px}
.scene::after{content:"";position:absolute;inset:auto 0 0;height:16svh;z-index:4;pointer-events:none;
  background:linear-gradient(180deg, rgb(var(--sap-rgb) / 0) 0%, rgb(var(--sap-rgb) / .6) 55%, rgb(var(--sap-rgb)) 100%)}
.stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;--photo:1;--car:0;--copy1:1;--copy2:0;--hp:0;
  background:radial-gradient(120% 50% at 70% 0%, rgb(46 57 81 / .7), rgb(46 57 81 / 0) 70%), linear-gradient(196deg, var(--sap-l) 0%, var(--sap-b) 46%, var(--sap-f) 100%)}
.slides{position:absolute;inset:0;opacity:var(--photo);transform:scale(calc(1 + (1 - var(--photo)) * .06 + var(--hp) * .06));transform-origin:50% 60%}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.slide.on{opacity:1}
.slide picture,.slide img,.slide video{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.slide img,.slide video{object-fit:cover;object-position:var(--fx) var(--fy)}
.slide .still{transform:scale(1.07);transition:transform 9s linear}
.slide.on .still{transform:scale(1)}
.slide.has-clip .still{transform:none;transition:none}
.slide .clip{opacity:0;transition:opacity .8s var(--ease)}
.slide .clip.playing{opacity:1}
.hero-shade{position:absolute;inset:0;opacity:var(--photo);pointer-events:none;
  background:linear-gradient(180deg, rgb(12 18 30 / .5) 0%, rgb(12 18 30 / .22) 30%, rgb(12 18 30 / 0) 46%),
    linear-gradient(180deg, rgb(var(--sap-rgb) / .3) 0%, rgb(var(--sap-rgb) / 0) 24%, rgb(var(--sap-rgb) / 0) 52%, rgb(var(--sap-rgb) / .5) 72%, rgb(var(--sap-rgb) / .94) 100%)}
.stage-studio{position:absolute;inset:0;opacity:calc(1 - var(--photo));pointer-events:none;--horizon:58%;
  background:radial-gradient(52% 22% at 50% calc(var(--horizon) + 15%), rgb(246 248 251 / .62) 0%, rgb(246 248 251 / 0) 72%),
    radial-gradient(70% 46% at 50% 18%, rgb(255 255 255 / .32) 0%, rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, var(--wall-top) 0%, var(--wall) 30%, var(--cove) calc(var(--horizon) - 3%), var(--floor-far) calc(var(--horizon) + 2%), var(--floor) calc(var(--horizon) + 20%), var(--floor-near) 100%)}
.stage-studio::before{content:"";position:absolute;inset:0;background:url(grain-light.svg) 0 0 / 256px 256px;mix-blend-mode:multiply;opacity:.55}
.car-slide{position:absolute;left:50%;bottom:18svh;width:min(118vw, 1180px);transform:translateX(calc(-50% + (1 - var(--car)) * 75vw));opacity:clamp(0, calc(var(--car) * 3), 1)}
[dir=rtl] .car-slide{transform:translateX(calc(-50% - (1 - var(--car)) * 75vw))}
.car-slide img{width:100%;height:auto}
.car-slide img,.conf-stage .car img,.turn .car img{-webkit-mask-image:linear-gradient(90deg, transparent 1%, #000 8%, #000 92%, transparent 99%);mask-image:linear-gradient(90deg, transparent 1%, #000 8%, #000 92%, transparent 99%)}
.reflect{position:absolute;left:0;right:0;top:calc((2 * var(--ground, .77) - 1) * 100%);transform:scaleY(-1);opacity:.13;pointer-events:none;
  -webkit-mask-image:linear-gradient(0deg, #000 0%, transparent 36%)!important;mask-image:linear-gradient(0deg, #000 0%, transparent 36%)!important}
.hero-copy{position:absolute;inset:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(88px + 4svh) var(--gutter) 0;
  opacity:var(--copy1);transform:translate3d(0, calc((1 - var(--copy1)) * -40px), 0);text-shadow:0 1px 18px rgb(6 10 20 / .3)}
.hero-copy .label{color:rgb(var(--ivory-rgb) / .82)}
.hero-copy h1{font:300 var(--fs-hero)/1.04 var(--font-display);letter-spacing:-.02em;margin-top:16px;max-width:13em;text-wrap:balance}
/* review 1.4 / 5.2: over a photo the headline is Spectral 300 (200 loses its strokes on sky) and the count line under it
   is plain sentence case at 15 px, not tracked capitals */
.hero-copy .sub{font:500 15px/1.5 var(--font-text);letter-spacing:0;text-transform:none;color:rgb(var(--ivory-rgb) / .9);margin-top:18px;max-width:34em;text-wrap:balance}
.studio-copy{position:absolute;inset:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink);
  padding:calc(96px + 3svh) var(--gutter) 0;opacity:var(--copy2);transform:translate3d(0, calc((1 - var(--copy2)) * 30px), 0);pointer-events:none;--label-c:var(--ink-label)}
.studio-copy.live{pointer-events:auto}
.studio-copy h2{font:200 var(--fs-name)/1.02 var(--font-display);letter-spacing:-.015em;margin-top:12px}
.studio-copy .pill{margin-top:22px}
.car-caption{position:fixed;inset:auto 0 calc(6svh + env(safe-area-inset-bottom));text-align:center;font-size:12px;color:var(--ink-label)}
.studio-copy .car-caption{position:absolute;top:calc(100svh - 96px - 8svh);bottom:auto}
.hero-foot{position:absolute;inset:auto 0 0;padding:0 var(--gutter) calc(16px + env(safe-area-inset-bottom));opacity:var(--copy1);color:var(--ivory)}
.hero-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.hero-actions .pill{height:50px}
.strip{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:10px}
.strip.glass{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.strip.glass::before{display:none}
.strip-item a{display:block;min-width:0;padding:0 0 4px}
.track{display:block;height:2px;background:rgb(255 255 255 / .26);margin-bottom:12px;overflow:hidden}
.track i{display:block;height:100%;width:100%;background:var(--ivory);transform:scaleX(0);transform-origin:left}
[dir=rtl] .track i{transform-origin:right}
.strip-item.on .track i{animation:fill var(--cycle, 7s) linear forwards}
.strip.still .strip-item.on .track i{animation:none;transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.strip .mk{display:block;font:500 12px/1.3 var(--font-text);letter-spacing:.16em;text-transform:uppercase;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip .md{display:block;font:300 17px/1.15 var(--font-display);margin-top:3px;min-height:2.3em}
.strip .pr{display:block;font:400 13.5px/1.3 var(--font-display);opacity:.9;margin-top:2px}
.strip .pr .w{display:block;font:400 12px/1.2 var(--font-text);opacity:.78}
.strip .dt{display:none;font-size:13px;opacity:.74;margin-top:2px}
.strip-item:not(.on){opacity:.62;transition:opacity .4s}
.strip-item:hover{opacity:1}
@media (max-width:899px){
  /* the photo is a band that fades into the sapphire ground, so the whole car stays in frame */
  .slide picture,.slide img,.slide video{inset:auto;top:30%;left:calc(50vw - var(--px) * 205vw);width:205vw;height:calc(205vw / var(--ar, 1.7778))}
  .slide picture img{top:0;left:0;width:100%;height:100%}
  .slide img,.slide video{-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%)}
  .hero-shade{background:linear-gradient(180deg, rgb(var(--sap-rgb) / 0) 0%, rgb(var(--sap-rgb) / 0) 66%, rgb(var(--sap-rgb) / .6) 86%, rgb(var(--sap-rgb) / .9) 100%)}
  .strip-item.on .dt{display:block}
  .strip-item .dt{position:absolute;inset-inline:var(--gutter);bottom:calc(-4px + env(safe-area-inset-bottom));text-align:center}
  .strip{position:relative;padding-bottom:22px}
}
@media (min-width:900px){
  .hero-copy{padding-top:calc(76px + 6svh)}
  .hero-actions{flex-direction:row;justify-content:center;margin-bottom:30px}
  .hero-actions .pill{min-width:210px}
  .strip{gap:0;padding:0 8px}
  .strip.glass{background:linear-gradient(168deg, rgb(255 255 255 / .12), rgb(255 255 255 / .04)), rgb(var(--tint) / .18);
    -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .26)}
  .strip.glass::before{display:block}
  .strip-item{position:relative}
  .strip-item a{padding:20px 22px 18px}
  .strip-item + .strip-item::after{content:"";position:absolute;inset-inline-start:0;top:22px;bottom:20px;width:1px;background:rgb(255 255 255 / .1)}
  .strip .mk{font-size:12px}
  .strip .md{font-size:25px;min-height:0;margin:5px 0 3px}
  .strip .pr{font-size:16px}
  .strip .pr .w{display:inline;font:inherit;opacity:1}
  .strip .dt{display:block}
  .car-slide{bottom:13svh;width:min(64vw, 940px)}
  /* review 1.4: on a desktop the "All cars" pill sat on the car's sills; it is the strip's last cell instead */
  .hero-actions{display:none}
  .strip{grid-template-columns:repeat(4, minmax(0, 1fr)) auto}
  .strip-all{position:relative;display:flex}
  .strip-all::after{content:"";position:absolute;inset-inline-start:0;top:22px;bottom:20px;width:1px;background:rgb(255 255 255 / .1)}
  .strip-all a{display:flex;align-items:center;gap:10px;padding:0 26px;font:500 var(--fs-small)/1 var(--font-text);white-space:nowrap;color:var(--ivory)}
  .strip-all .arr{width:18px;height:18px;transition:transform .3s var(--ease)}
  .strip-all a:hover .arr{transform:translateX(4px)}
  [dir=rtl] .strip-all .arr{transform:scaleX(-1)}
  [dir=rtl] .strip-all a:hover .arr{transform:scaleX(-1) translateX(4px)}
}
@media (max-width:899px){.strip-all{display:none}}

/* ---------------------------------------------------------------- home: the dark chapters over photos */
.chapter{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px 0;overflow:hidden;background:var(--sap-b)}
.chapter.t-em{background:var(--em-b)}
.chapter-bg{position:absolute;inset:-12% 0;z-index:0}
.chapter-bg picture,.chapter-bg img{width:100%;height:100%}
.chapter-bg img{object-fit:cover;transform:translate3d(0, var(--py, 0px), 0) scale(1.08);will-change:transform}
.chapter::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--veil)}
.chapter > .wrap{z-index:2;width:100%}
.ch-how{--veil:linear-gradient(90deg, rgb(var(--sap-rgb) / .8) 0%, rgb(var(--sap-rgb) / .35) 58%, rgb(var(--sap-rgb) / .1) 100%), linear-gradient(180deg, rgb(var(--sap-rgb)) 0%, rgb(var(--sap-rgb) / 0) 18%, rgb(var(--sap-rgb) / 0) 80%, rgb(var(--sap-rgb)) 100%)}
[dir=rtl] .ch-how{--veil:linear-gradient(270deg, rgb(var(--sap-rgb) / .8) 0%, rgb(var(--sap-rgb) / .35) 58%, rgb(var(--sap-rgb) / .1) 100%), linear-gradient(180deg, rgb(var(--sap-rgb)) 0%, rgb(var(--sap-rgb) / 0) 18%, rgb(var(--sap-rgb) / 0) 80%, rgb(var(--sap-rgb)) 100%)}
.ch-how .pane{max-width:760px}
.ch-ask{--veil:linear-gradient(180deg, rgb(var(--sap-rgb)) 0%, rgb(var(--sap-rgb) / .5) 22%, rgb(var(--sap-rgb) / .55) 78%, rgb(var(--sap-rgb)) 100%)}
.ch-models{align-items:flex-end;--veil:linear-gradient(180deg, rgb(var(--sap-rgb)) 0%, rgb(var(--sap-rgb) / 0) 26%, rgb(var(--sap-rgb) / 0) 46%, rgb(var(--sap-rgb) / .74) 100%)}
.ch-models .pane{max-width:680px}
.ch-models .pill{margin-top:28px}
.ch-made{--veil:linear-gradient(180deg, var(--bo-f) 0%, rgb(var(--em-rgb) / .3) 18%, rgb(var(--em-rgb) / .45) 60%, var(--em-f) 100%)}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:4px;padding:18px 0;border-top:1px solid var(--line);color:var(--body)}
.steps .n{font:200 26px/1 var(--font-display);color:var(--fg)}
.bandlist{margin-top:26px}
.bandlist li{border-top:1px solid var(--line)}
.bandlist a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 0;align-items:baseline}
.bandlist .bn{font:300 21px/1.2 var(--font-display)}
.bandlist .bc{grid-row:2;font-size:13px;color:var(--label-c)}
.bandlist .bf{grid-row:1 / span 2;grid-column:2;font:300 20px/1.2 var(--font-display);text-align:end}
.build-ch{position:relative;padding:clamp(96px, 11vw, 150px) 0 clamp(80px, 9vw, 130px);overflow:hidden;
  background:radial-gradient(70% 60% at 64% 18%, rgb(97 30 57 / .55) 0%, rgb(97 30 57 / 0) 70%), linear-gradient(196deg, var(--bo-l) 0%, var(--bo-b) 46%, var(--bo-f) 100%)}
.build-ch::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgb(var(--sap-rgb)) 0%, rgb(var(--sap-rgb) / 0) 14%)}
.build-ch .wrap{display:grid;gap:28px;align-items:center}
.chips-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chips-row img{width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:inset 0 1px 1px rgb(255 255 255 / .5), 0 0 0 1px rgb(255 255 255 / .2)}
.build-link{display:grid;gap:4px;margin-top:26px;justify-items:start}
.build-link .pr{font:200 clamp(30px, calc(18px + 2vw), 44px)/1 var(--font-display)}
.build-link .dt{font-size:13px;color:var(--label-c)}
.build-link .pill{margin-top:22px}
.build-car{position:relative}
.build-car img{width:100%;height:auto;transform:translate3d(calc(var(--bx, 0) * 1px), 0, 0)}
.build-car::after{content:"";position:absolute;inset:auto -10% -6% -10%;height:34%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%, rgb(255 255 255 / .1) 0%, rgb(255 255 255 / 0) 70%)}
.build-car .cap{font-size:12px;color:var(--label-c);margin-top:8px;text-align:center}
.build-car .plate img{aspect-ratio:16 / 10;object-fit:cover}
.made-grid{display:grid;gap:0}
.shop{position:relative;min-height:320px;overflow:hidden}
.shop picture,.shop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shop figcaption{position:absolute;inset:auto 0 0;padding:14px 18px;font-size:12px;color:var(--label-c);background:linear-gradient(0deg, rgb(0 0 0 / .5), rgb(0 0 0 / 0))}
.tier-rows{margin-top:26px}
.tier-rows li{display:grid;grid-template-columns:1fr auto;gap:2px 20px;padding:16px 0;border-top:1px solid var(--line)}
.tier-rows .tn{font:300 23px/1.15 var(--font-display)}
.tier-rows .pk,.tag{display:inline-block;margin-inline-start:10px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);font:500 12px/1.4 var(--font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--body);vertical-align:3px}
.tier-rows .tf{grid-column:1;font-size:13.5px;color:var(--label-c)}
.tier-rows .tps{grid-column:2;grid-row:1 / span 2;display:grid;gap:6px;text-align:end}
.tier-rows .tp{font:300 21px/1.1 var(--font-display)}
.tier-rows .tp small{display:block;font:400 13px/1.3 var(--font-text);color:var(--label-c)}
.tier-rows li > .small{grid-column:1 / -1}
.leb{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.leb .fn-line{font-size:13px}
.leb p+p{margin-top:8px}
@media (min-width:900px){
  .build-ch .wrap{grid-template-columns:5fr 7fr;gap:44px}
  .made-grid{grid-template-columns:minmax(0, 5fr) minmax(0, 6fr)}
  .shop{min-height:620px}
}
@media (max-width:899px){
  .chapter{padding:46svh 0 56px;align-items:flex-end}
  .chapter-bg{inset:0 0 auto;height:66svh}
  .chapter-bg img{transform:translate3d(0, calc(var(--py, 0px) * .5), 0) scale(1.08);
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 60%, transparent 100%);mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 60%, transparent 100%)}
  .chapter .wrap{padding:0 12px}
  .ch-how,.ch-models,.ch-ask{--veil:linear-gradient(180deg, rgb(var(--sap-rgb) / .3) 0%, rgb(var(--sap-rgb) / 0) 30%, rgb(var(--sap-rgb) / .2) 50%, rgb(var(--sap-rgb)) 66%)}
  .ch-made{--veil:linear-gradient(180deg, rgb(var(--em-rgb) / .3) 0%, rgb(var(--em-rgb) / 0) 30%, rgb(var(--em-rgb) / .3) 50%, var(--em-b) 66%)}
  .build-car{order:-1;margin:0 calc(var(--gutter) * -1)}
}

/* ---------------------------------------------------------------- the advisor */
.adv{padding:0;overflow:hidden;max-width:1080px;margin:0 auto}
.adv-head{display:flex;gap:16px;align-items:center;padding:24px clamp(20px, 3vw, 36px);border-bottom:1px solid var(--line)}
.adv-head .seal{width:36px;height:36px;flex:none}
.adv-title{font:300 clamp(24px, calc(18px + 1vw), 30px)/1.15 var(--font-display)}
.adv-head p{font-size:13px;color:var(--label-c);margin-top:4px;max-width:44em}
.adv-body{display:grid;gap:16px;padding:24px clamp(20px, 3vw, 36px) 30px}
.adv-ex{font-size:12px}
.msg{max-width:40em;font-size:var(--fs-small);line-height:1.5}
.msg.you{justify-self:end;padding:12px 16px;background:rgb(var(--ivory-rgb) / .92);color:var(--sap-b)}
.is-studio .msg.you{background:var(--ink);color:var(--ivory)}
.msg.ai{max-width:none}
.picks{display:grid;gap:8px;margin-top:12px}
.pick{display:grid;grid-template-columns:84px 1fr auto;grid-template-areas:'img nm pr' 'img why why';gap:2px 14px;align-items:center;padding:8px;
  border:1px solid rgb(255 255 255 / .12);transition:background .3s}
.pick:hover{background:rgb(255 255 255 / .06)}
.is-studio .pick{background:rgb(255 255 255 / .42);border-color:rgb(255 255 255 / .6)}
.is-studio .pick:hover{background:rgb(255 255 255 / .62)}
.pk-img{grid-area:img}
.pk-img img{width:84px;height:56px;object-fit:cover}
.pick .nm{grid-area:nm;font:300 19px/1.2 var(--font-display)}
.pick .pr{grid-area:pr;font:400 17px/1.2 var(--font-display);text-align:end;white-space:nowrap}
.pick .pr .w{font:400 13px var(--font-text);color:var(--label-c)}
.pick .pr small{display:block;font:400 13px/1.3 var(--font-text);color:var(--label-c)}
.pick .why{grid-area:why;font-size:13px;color:var(--body);line-height:1.45}
.adv-wa{font-size:13.5px;color:var(--body)}
.adv .btns{margin-top:0}
@media (max-width:599px){.pick{grid-template-columns:72px 1fr;grid-template-areas:'img nm' 'img pr' 'why why'}.pk-img img{width:72px;height:48px}.pick .pr{text-align:start}}

/* ---------------------------------------------------------------- the studio (cars index and car pages) */
.studio{position:fixed;inset:0;z-index:-2;pointer-events:none;--horizon:58%;
  background:radial-gradient(52% 22% at 50% calc(var(--horizon) + 15%), rgb(246 248 251 / .62) 0%, rgb(246 248 251 / 0) 72%),
    radial-gradient(70% 46% at 50% 18%, rgb(255 255 255 / .32) 0%, rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, var(--wall-top) 0%, var(--wall) 30%, var(--cove) calc(var(--horizon) - 3%), var(--floor-far) calc(var(--horizon) + 2%), var(--floor) calc(var(--horizon) + 20%), var(--floor-near) 100%)}
.studio::before{content:"";position:absolute;inset:0;background:url(grain-light.svg) 0 0 / 256px 256px;mix-blend-mode:multiply;opacity:.55}
.studio::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 52%, rgb(20 30 55 / 0) 52%, rgb(20 30 55 / .2) 100%)}
.sec{padding:clamp(72px, 9vw, 140px) 0}
.sec--close{padding-top:0}
.sec-head{max-width:44em}
.sec-head h2{font:200 var(--fs-title)/1.08 var(--font-display);letter-spacing:-.01em;margin-top:12px;text-wrap:balance}
.sec-head p{color:var(--body);margin-top:12px}

/* the cars index */
.page-top{padding-top:calc(72px + clamp(28px, 4vw, 60px))}
.models-head h1{font:200 clamp(32px, calc(16px + 3.6vw), 68px)/1.06 var(--font-display);letter-spacing:-.015em;margin-top:14px;max-width:18em;text-wrap:balance}
.models-head p{color:var(--body);font-size:var(--fs-small);margin-top:14px;max-width:44em}
.search{position:relative}
.search svg{position:absolute;inset-inline-start:16px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--ink-label)}
.search input{width:100%;height:var(--tap);border-radius:999px;border:1px solid var(--s-edge);background:rgb(255 255 255 / .6);padding:0 18px 0 44px;color:var(--ink)}
[dir=rtl] .search input{padding:0 44px 0 18px}
.search input::placeholder{color:var(--ink-label)}
.fp{flex:none;height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--s-line);background:rgb(255 255 255 / .34);font-size:13.5px;white-space:nowrap;color:var(--ink)}
.fp .c{opacity:.6;margin-inline-start:4px}
.fp[aria-pressed=true],.fp[aria-checked=true]{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:34px 14px}
/* off-screen cards cost no layout or paint (review 7.1); the size they hold is remembered once they have been seen */
.grid .unit{content-visibility:auto;contain-intrinsic-size:auto 170px auto 280px}
@media (min-width:900px){.grid .unit{contain-intrinsic-size:auto 300px auto 330px}}
.unit a{display:block}
.unit .plate{display:block;position:relative;aspect-ratio:16 / 10;overflow:hidden;background:var(--floor-far);box-shadow:0 18px 26px -18px rgb(18 28 52 / .55)}
.unit .plate picture,.unit .plate img{width:100%;height:100%}
.unit .plate img{object-fit:cover;transition:transform .8s var(--ease)}
.unit a:hover .plate img{transform:scale(1.035)}
.unit .plate::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .35)}
.unit .rnd{position:absolute;inset:auto auto 6px 6px;font-size:12px;padding:2px 8px;border-radius:999px;background:rgb(255 255 255 / .6);color:var(--ink-body)}
[dir=rtl] .unit .rnd{inset:auto 6px 6px auto}
.unit .mk{display:block;font:500 12px/1.3 var(--font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-label);margin-top:14px}
.unit .md{display:block;font:300 19px/1.2 var(--font-display);margin-top:3px;color:var(--ink)}
/* the fact line (review 2.6): seats, powertrain, electric range, from the data */
.unit .ft{display:block;font:400 13px/1.45 var(--font-text);color:var(--ink-body);margin-top:5px;text-wrap:pretty}
.unit .ft .sep{color:var(--ink-label)}
.unit .pr{display:block;font:400 17px/1.3 var(--font-display);color:var(--sapphire);margin-top:6px}
.unit .pr .w{font:400 13px var(--font-text);color:var(--ink-label)}
.unit .pr.req{color:var(--ink-label);font-style:italic;font-weight:300}
.unit .dt{display:block;font-size:13px;color:var(--ink-label);margin-top:1px}
.empty{padding:60px 0;text-align:center;color:var(--ink-label)}
@media (min-width:900px){
  .grid{grid-template-columns:repeat(3, minmax(0, 1fr));gap:48px 26px}
  .unit .md{font-size:23px}
}

/* the filter component (_macros.html facets(), site.js Facets()): one bar with the search, a dropdown per group with
   live counts, the result count and the sort menu; on a phone the groups move into a bottom sheet. Square panels, pill
   controls, the studio's own glass and ink; the colours follow the light and the dark studio. */
body{--fx-bg:#FCFCFB;--fx-ctl:rgb(255 255 255 / .55);--fx-ctl-h:rgb(255 255 255 / .85);--ink-inv:var(--ivory);--fx-hover:rgb(12 26 61 / .05)}
:root[data-studio]:not([data-studio^=lit]) body.is-studio{--fx-bg:#1E2431;--fx-ctl:rgb(255 255 255 / .05);--fx-ctl-h:rgb(255 255 255 / .1);--ink-inv:var(--sap-b);--fx-hover:rgb(255 255 255 / .06)}
/* review 2.2: the whole filter block sticks under the header (the bar alone could only stick inside its own box, so it
   never did); once the mark above it has passed under the header (.is-stuck) the chips step aside and on a phone the
   bar folds to one row: search icon, Filter, count, sort. site.js keeps the space it gave up as a margin, so nothing
   below moves. */
.fx{margin-top:26px;position:sticky;top:72px;z-index:20}
.fx-mark{height:0}
.fx.is-stuck .fx-chips{display:none}
.fx-qbtn{display:none;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--s-line);background:var(--fx-ctl);color:var(--ink);flex:none}
.fx-qbtn svg{width:17px;height:17px}
.fx-qbtn:hover{background:var(--fx-ctl-h)}
.fx-bar{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:10px;padding:10px}
.fx-bar::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-glass);border:1px solid var(--s-edge);box-shadow:var(--s-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5)}
:root[data-studio=b] .fx-bar::before{background:rgb(24 30 42 / .72);border-color:rgb(255 255 255 / .1)}
.fx-bar .search{grid-column:1 / -1}
.fx-open,.fx-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--s-line);
  background:var(--fx-ctl);color:var(--ink);font:500 14px/1 var(--font-text);white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.fx-open:hover,.fx-btn:hover{background:var(--fx-ctl-h)}
.fx-open svg,.fx-btn svg{width:17px;height:17px;flex:none}
.fx-btn .chev{width:15px;height:15px;margin-inline-start:-2px;transition:transform .25s var(--ease)}
.fx-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.fx-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--ink-inv);font:500 12px/1 var(--font-text)}
.fx-group.is-active > .fx-btn,.fx-open.is-active{border-color:var(--ink)}
.fx-sum{display:none}
.fx-count{font-size:13.5px;color:var(--ink-label);white-space:nowrap}
.fx-group{position:relative}
.fx-panel{position:absolute;top:calc(100% + 10px);inset-inline-start:0;z-index:5;width:max-content;min-width:260px;max-width:min(360px, calc(100vw - 2 * var(--gutter)));
  background:var(--fx-bg);color:var(--ink);border:1px solid var(--s-edge);box-shadow:0 30px 60px -26px rgb(12 20 40 / .42), 0 2px 6px rgb(12 20 40 / .08);
  transition:opacity .18s var(--ease), translate .22s var(--ease)}
.fx-panel:focus{outline:none}
@starting-style{.fx-panel{opacity:0;translate:0 -6px}}
.fx-sortg .fx-panel{inset-inline-start:auto;inset-inline-end:0}
.fx-panel fieldset{border:0;margin:0;padding:0;min-width:0}
.fx-opts{display:grid;max-height:min(52vh, 380px);overflow:auto;overscroll-behavior:contain;padding:6px}
.fx-opt{position:relative;display:grid;grid-template-columns:20px minmax(0, 1fr) auto;align-items:center;gap:12px;min-height:42px;padding:8px 12px;cursor:pointer;font-size:14.5px;line-height:1.3}
.fx-opt:hover{background:var(--fx-hover)}
.fx-in{position:relative;display:grid;place-items:center;width:20px;height:20px}
.fx-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.fx-box{position:relative;width:20px;height:20px;border-radius:5px;border:1.5px solid var(--ink-label);transition:background .15s,border-color .15s}
.fx-box.r{border-radius:50%}
.fx-opt input:checked + .fx-box{background:var(--ink);border-color:var(--ink)}
.fx-opt input:checked + .fx-box::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:10px;border:solid var(--ink-inv);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fx-opt input:checked + .fx-box.r::after{left:4px;top:4px;width:9px;height:9px;border:0;border-radius:50%;background:var(--ink-inv);transform:none}
.fx-opt input:focus-visible + .fx-box{outline:2px solid var(--sapphire);outline-offset:3px}
.fx-c{font-size:13px;color:var(--ink-label)}
.fx-opt.is-zero{opacity:.4;cursor:default}
.fx-find{margin:6px 6px 0}
.fx-find input{height:40px;font-size:14px}
.fx-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--s-line)}
.fx-done{height:38px;padding:0 18px;font-size:14px}
.fx-link{font-size:14px;color:var(--ink-label);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;padding:8px 2px}
.fx-link:hover{color:var(--ink)}
.fx-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.fx-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 14px;border-radius:999px;border:1px solid var(--s-line);background:var(--fx-ctl);color:var(--ink);font-size:13.5px;transition:background .2s}
.fx-chip:hover{background:var(--fx-ctl-h)}
.fx-chip svg{width:15px;height:15px;opacity:.7}
.fx-scrim{position:fixed;inset:0;z-index:1;background:rgb(12 26 61 / .4);opacity:0;transition:opacity .28s var(--ease)}
.fx-scrim.is-on{opacity:1}
.fx-sheet-head,.fx-sheet-foot{display:none}
.grid{transition:opacity .15s var(--ease)}
.grid.is-updating{opacity:.3}
html.fx-lock{overflow:hidden}
html.fx-lock .fx{z-index:70}
@media (max-width:899px){
  .fx-count{text-align:center}
  /* folded: one 52 px row; the search box comes back on a tap of its icon, or stays while it holds a search */
  .fx.is-fold .fx-bar{grid-template-columns:auto auto minmax(0, 1fr) auto;padding:6px 8px}
  .fx.is-fold .fx-qbtn{display:grid}
  .fx.is-fold:not(.is-q) .fx-bar > .search{display:none}
  .fx.is-fold.is-q .fx-qbtn{display:none}
  .fx.is-fold.is-q .fx-bar{grid-template-columns:auto minmax(0, 1fr) auto}
  /* the sort menu shrinks to its icon on a phone; its current choice stays readable to a screen reader */
  .fx-sortg .fx-btn{padding:0 12px}
  .fx-sortg .fx-btn-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* the sheet: the groups as rows, each opening in place, with "Clear all" and "Show n cars" at the foot */
  .fx-sheet{position:fixed;inset:max(56px, 8svh) 0 0;z-index:2;display:flex;flex-direction:column;background:var(--fx-bg);color:var(--ink);
    box-shadow:0 -20px 50px -20px rgb(12 20 40 / .35);transform:translateY(100%);visibility:hidden;transition:transform .3s var(--ease), visibility 0s .3s}
  .fx-sheet.is-open{transform:none;visibility:visible;transition:transform .3s var(--ease)}
  .fx-sheet-head{display:flex;justify-content:space-between;align-items:center;padding:12px 12px 12px var(--gutter);border-bottom:1px solid var(--s-line)}
  [dir=rtl] .fx-sheet-head{padding:12px var(--gutter) 12px 12px}
  .fx-sheet-h{font:300 26px/1.1 var(--font-display)}
  .fx-x{width:44px;height:44px;border-color:var(--s-line)!important;background:none!important;color:var(--ink)!important}
  .fx-groups{flex:1;overflow:auto;overscroll-behavior:contain;padding:0 var(--gutter)}
  .fx-groups .fx-group{border-bottom:1px solid var(--s-line)}
  .fx-groups .fx-btn{width:100%;height:60px;padding:0;border:0;border-radius:0;background:none;font-size:16px;gap:12px}
  .fx-groups .fx-btn:hover{background:none}
  .fx-groups .fx-btn .fx-n{display:none}
  .fx-groups .fx-sum{display:block;flex:1;min-width:0;text-align:end;font:400 14px/1.3 var(--font-text);color:var(--ink-label);overflow:hidden;text-overflow:ellipsis}
  .fx-groups .fx-panel{position:static;width:auto;min-width:0;max-width:none;border:0;box-shadow:none;background:none;padding-bottom:12px}
  .fx-groups .fx-opts{max-height:none;padding:0}
  .fx-groups .fx-opt{padding:8px 4px;min-height:46px}
  .fx-groups .fx-foot{display:none}
  .fx-sheet-foot{display:flex;align-items:center;gap:16px;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--s-line)}
  .fx-sheet-foot .fx-done{flex:1;height:50px;font-size:15px}
}
@media (min-width:900px){
  .fx{top:84px}
  .fx-bar{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px}
  .fx-bar .search{flex:0 1 300px;min-width:220px}
  .fx-open,.fx-scrim{display:none!important}
  .fx-sheet{display:contents}
  .fx-groups{display:flex;flex-wrap:wrap;gap:8px}
  .fx-count{margin-inline-start:auto;padding:0 6px}
  .grid--wide{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (min-width:1200px){.grid--wide{grid-template-columns:repeat(4, minmax(0, 1fr));gap:48px 24px}}
#grid,.mk-wrap{margin-top:30px}

/* ---------------------------------------------------------------- the car page */
.car-hero{position:relative;height:calc(100svh + var(--seam));min-height:calc(600px + var(--seam));overflow:hidden;color:var(--ivory);background:var(--sap-b);--hp:0;--seam:16svh;
  --fg:var(--ivory);--body:var(--d-body);--label-c:var(--d-label);--line:var(--d-line)}
/* the seam: below the first screen the photo runs into the studio's own ground (light or dark), so the hero ends softly */
.car-hero::after{content:"";position:absolute;inset:auto 0 0;height:calc(var(--seam) + 6svh);z-index:1;pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ground-c) 0%, transparent) 0%, color-mix(in srgb, var(--ground-c) 50%, transparent) 38%, var(--ground-c) 100%)}
body.is-studio{--ground-c:var(--wall)}
:root[data-studio]:not([data-studio^=lit]) body.is-studio{--ground-c:var(--st-base)}
.car-hero picture,.car-hero .hero-img{position:absolute;inset:0;width:100%;height:100%}
.car-hero .hero-img{object-fit:cover;object-position:var(--fx) var(--fy);transform:scale(calc(1 + var(--hp) * .08));transform-origin:50% 70%}
.car-hero .shade{position:absolute;inset:0;background:linear-gradient(180deg, rgb(6 10 20 / .5) 0%, rgb(6 10 20 / 0) 30%, rgb(6 10 20 / 0) 46%, rgb(6 10 20 / .74) 100%)}
.car-hero .in{position:absolute;inset:auto 0 0;z-index:2;padding:0 var(--gutter) calc(var(--seam) + 26px + env(safe-area-inset-bottom));opacity:calc(1 - var(--hp) * 1.4)}
.car-hero .mk{opacity:.9}
.car-hero h1{font:200 clamp(84px, calc(36px + 14vw), 240px)/.86 var(--font-display);letter-spacing:-.035em;margin:8px 0 0;overflow-wrap:anywhere}
.car-hero .line{font-size:var(--fs-small);opacity:.88;margin-top:24px;max-width:34ch;text-wrap:pretty}
.from-line.price{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.from-line .w{font-size:13px;opacity:.84}
.from-line b.price,.from-line .price{font:200 clamp(32px, calc(22px + 2.4vw), 56px)/1 var(--font-display)}
.car-hero .dt{font-size:13px;opacity:.84;margin-top:6px}
.car-hero .acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.car-hero .acts .pill{height:50px;flex:1 1 150px}
.car-hero .caption{font-size:12px;opacity:.72;margin-top:12px}
@media (max-width:899px){
  .car-hero{background:linear-gradient(196deg, var(--sap-l) 0%, var(--sap-b) 50%, var(--sap-f) 100%)}
  .car-hero picture{max-width:none;inset:auto;top:64px;left:calc(50vw - var(--fxn, .5) * 190vw);width:190vw;height:calc(190vw * 9 / 16)}
  [dir=rtl] .car-hero picture{left:calc(50vw - var(--fxn, .5) * 190vw)}
  .car-hero .hero-img{-webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%);mask-image:linear-gradient(180deg, #000 70%, transparent 100%)}
}
@media (min-width:900px){
  .car-hero .shade{background:linear-gradient(180deg, rgb(6 10 20 / .45) 0%, rgb(6 10 20 / 0) 26%), linear-gradient(270deg, rgb(6 10 20 / .6) 0%, rgb(6 10 20 / .2) 36%, rgb(6 10 20 / 0) 56%)}
  [dir=rtl] .car-hero .shade{background:linear-gradient(180deg, rgb(6 10 20 / .45) 0%, rgb(6 10 20 / 0) 26%), linear-gradient(90deg, rgb(6 10 20 / .6) 0%, rgb(6 10 20 / .2) 36%, rgb(6 10 20 / 0) 56%)}
  .car-hero .in{inset:auto 0 0 auto;width:min(600px, 46vw);text-align:end;padding-bottom:calc(var(--seam) + 56px)}
  [dir=rtl] .car-hero .in{inset:auto auto 0 0}
  .car-hero .line{margin-inline-start:auto}
  .from-line.price,.car-hero .acts{justify-content:flex-end}
  .car-hero .acts .pill{flex:none;min-width:190px}
}

/* the configurator */
.conf{position:relative}
.conf-stage{position:sticky;top:0;height:44svh;min-height:310px;z-index:30;overflow:hidden;color:var(--ink);
  background:linear-gradient(180deg, rgb(176 186 199 / .88) 0%, rgb(206 212 220 / .92) 58%, rgb(184 193 205 / .95) 74%, rgb(160 171 186 / .97) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);border-bottom:1px solid rgb(255 255 255 / .55);box-shadow:0 16px 30px -24px rgb(18 28 52 / .6)}
.conf-stage .car{position:absolute;left:-7%;right:-7%;bottom:16%;transition:opacity .35s, transform .25s var(--ease);transform-origin:50% 100%}
.conf-stage .car img{width:100%;height:auto}
.conf-stage .car.swap{opacity:0}
.conf-stage .car--spin{left:4%;right:4%}
/* a maker's full photo (its own backdrop, no cut-out): shown whole, as a photo, without the floor reflection */
.conf-stage .car.car--scene{left:0;right:0;top:50%;bottom:auto;transform:translateY(-50%);box-shadow:0 24px 60px -28px rgb(18 28 52/.45)}
.conf-stage .car--scene img{-webkit-mask-image:none;mask-image:none}
.conf-stage .car--scene .reflect{display:none}
.conf-stage .plate{position:absolute;inset:118px var(--gutter) 24px;display:flex;align-items:center}
.conf-stage .plate picture{width:100%}
.conf-stage .plate img{width:100%;aspect-ratio:16 / 9;object-fit:cover;box-shadow:0 22px 34px -22px rgb(18 28 52 / .6);transition:opacity .35s}
/* the views: one row under the car (review 4.3), scrolling sideways with soft edges when it does not fit, centred when it does */
.conf-stage .views{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:flex-start;justify-content:safe center;gap:6px;padding:0 var(--gutter);
  overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;transition:opacity .2s var(--ease), visibility .2s;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%)}
.conf-stage .views::-webkit-scrollbar{display:none}
.conf-stage .views .pill{height:32px;padding:0 12px;font-size:12px;flex:none}
.conf-stage .views .pill[aria-pressed=true]{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.conf-stage .cap{position:absolute;top:72px;inset-inline-start:var(--gutter);font-size:12.5px;color:var(--ink-label);line-height:1.35;max-width:70%}
.conf-stage .cap b{display:block;font:300 20px/1.15 var(--font-display);color:var(--ink)}
.conf-stage .cap > span{display:block}
.conf-stage .cap .src{display:none}
.conf-body{position:relative;z-index:6;padding:18px var(--gutter) 40px}
.sheet{padding:4px 18px 20px}
.step{padding:22px 0;border-top:1px solid var(--s-line)}
.step:first-child{border-top:0}
.step-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.step-h h3{font:300 23px/1.2 var(--font-display)}
.step-h .k{font-size:12px;color:var(--ink-label);white-space:nowrap}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{position:relative;width:40px;height:40px;border-radius:50%;background:var(--c, var(--floor));overflow:visible;
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .14), 0 4px 10px -4px rgb(18 28 52 / .5)}
.sw img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.sw[aria-checked=true]{outline:2px solid var(--sapphire);outline-offset:3px}
.sw .oos{position:absolute;inset:-2px auto auto -2px;width:11px;height:11px;border-radius:50%;background:var(--bordeaux);border:2px solid var(--cove)}
.sw-name{margin-top:12px;font-size:var(--fs-small)}
.note{font-size:13.5px;color:var(--ink-label);margin-top:10px;line-height:1.5}
.oos-note{color:var(--bordeaux)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:4px 14px 4px 6px;border-radius:999px;border:1px solid rgb(255 255 255 / .55);background:rgb(255 255 255 / .3);font-size:14px;text-align:start}
.chip:not(:has(img)){padding-inline-start:14px}
.chip img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.chip small{display:block;font-size:12.5px;color:var(--ink-label)}
.chip[aria-checked=true]{border-color:var(--sapphire);background:rgb(255 255 255 / .62);box-shadow:inset 0 0 0 1px var(--sapphire)}
.interior{margin-top:14px}
.interior img{width:100%;aspect-ratio:16 / 10;object-fit:cover;box-shadow:0 18px 26px -18px rgb(18 28 52 / .55)}
.opt-list{display:grid;gap:8px}
.opt-list li{display:flex;gap:12px;align-items:center;font-size:14px}
.opt-list img{width:36px;height:36px;object-fit:cover;flex:none}
.opt-list small{display:block;font-size:12.5px;color:var(--ink-label)}
.opts{display:grid;gap:8px}
.opt{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:2px 14px;padding:13px 15px;text-align:start;color:var(--ink);
  border:1px solid rgb(255 255 255 / .55);background:rgb(255 255 255 / .3);transition:background .2s,border-color .2s,box-shadow .2s}
.opt:hover{background:rgb(255 255 255 / .48)}
.opt[aria-checked=true]{border-color:var(--sapphire);background:rgb(255 255 255 / .62);box-shadow:inset 0 0 0 1px var(--sapphire)}
.opt .a{grid-column:1;font-size:15px;font-weight:500}
.opt .b{grid-column:1;font-size:13px;color:var(--ink-label);line-height:1.45}
.opt .p{grid-column:2;grid-row:1 / span 2;align-self:center;font:400 18px/1.2 var(--font-display);text-align:end;white-space:nowrap}
.opt .p + .p{grid-row:auto}
.opt .p small{display:block;font:400 13px/1.3 var(--font-text);color:var(--ink-label)}
.opt .p .req{font:400 13px var(--font-text);color:var(--ink-label)}
.opt[aria-checked=true] .p{color:var(--sapphire)}
.opt .tag{color:var(--emerald);border-color:rgb(24 99 77 / .4);margin-inline-start:8px;padding:2px 8px;font-size:12px}
.opt.dim{opacity:.62}
.js .opt .p[data-seats].off{display:none}
.seats-pick{display:flex;gap:6px;margin-bottom:12px}
.js .seats-pick{display:flex}
.summary{padding:22px 20px;margin-top:16px}
.summary h2{font:300 24px/1.2 var(--font-display)}
.summary .rows{margin-top:14px;font-size:14px}
.summary .row{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:12px;padding:9px 0;border-top:1px solid var(--s-line)}
.summary .row span:last-child{font-family:var(--font-display);font-size:16px;white-space:nowrap}
.summary .row.q span:last-child{font-family:var(--font-text);font-size:13px;color:var(--ink-label)}
.summary .tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0 4px;border-top:1px solid var(--ink)}
.summary .tot b{font:200 34px/1 var(--font-display);color:var(--sapphire)}
.summary .fine{font-size:13px;color:var(--ink-label);line-height:1.45;margin:8px 0 16px}
.dock{position:fixed;inset:auto 10px calc(10px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:12px;padding:10px;padding-inline-start:18px;color:var(--ink);
  transform:translateY(160%);transition:transform .45s var(--ease)}
.js .dock{display:flex}
.dock.show{transform:none}
.dock .t{flex:1;min-width:0}
.dock .t small{display:block;font-size:12px;color:var(--ink-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .t b{font:300 22px/1.1 var(--font-display);color:var(--sapphire)}
.dock .pill{height:46px}
@media (min-width:900px){
  .conf{display:grid;grid-template-columns:minmax(0, 1fr) 440px;gap:0 48px;padding:0 var(--gutter);max-width:1560px;margin:0 auto}
  .conf-stage{height:100svh;margin:0 calc(var(--gutter) * -1);background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;z-index:5}
  .conf-stage .car{left:3%;right:3%;bottom:15svh}
  .conf-stage .plate{inset:150px var(--gutter) 15svh}
  .conf-stage .views{bottom:96px;padding:0 24px}
  .conf-stage .views .pill{height:36px;padding:0 16px}
  .conf-stage .cap{top:124px;font-size:12.5px}
  .conf-stage .cap b{font-size:32px}
  .conf-stage .cap .src{display:block;margin-top:6px}
  .conf-body{padding:110px 0 140px}
  .sheet{padding:8px 28px 28px}
  .sw{width:44px;height:44px}
  .summary{padding:24px 28px}
  .dock{inset:auto;inset-block-end:18px;inset-inline-start:var(--gutter);width:min(520px, 40vw)}
}

/* view in 360° */
.v360{overflow:hidden}
.turn{position:relative;height:min(64svh, 640px);margin-top:28px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.turn:active{cursor:grabbing}
.turn .disc{position:absolute;left:50%;bottom:8%;width:min(96%, 980px);aspect-ratio:5 / 1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side, rgb(250 251 253 / .78), rgb(226 230 236 / .5) 70%, rgb(200 207 216 / 0) 100%);box-shadow:inset 0 -2px 0 rgb(255 255 255 / .6), 0 30px 40px -30px rgb(18 28 52 / .5)}
.turn .disc::after{content:"";position:absolute;inset:6%;border-radius:50%;border:1px solid rgb(12 26 61 / .1)}
.turn .car{position:absolute;left:50%;bottom:12%;width:min(92%, 980px);transform:translateX(-50%)}
.turn .car img{width:100%;height:auto;pointer-events:none}
.turn .hud{position:absolute;inset:14px 14px auto;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}
.turn .badge{font-size:12px;padding:7px 12px;border-radius:999px;background:rgb(255 255 255 / .5);border:1px solid var(--s-edge);color:var(--ink-body)}
.turn .badge:empty{display:none}
.turn .drag{position:absolute;left:50%;bottom:1%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;font-size:12.5px;color:var(--ink-label);white-space:nowrap}
.turn .drag .pill{width:40px;height:40px}
.turn--photos{cursor:default;height:auto;aspect-ratio:16 / 9;max-height:72svh;padding-bottom:56px}
.turn--photos .ph{position:absolute;inset:0 0 56px;opacity:0;transition:opacity .9s var(--ease)}
.turn--photos .ph.on{opacity:1}
.turn--photos picture,.turn--photos img{width:100%;height:100%}
.turn--photos img{object-fit:cover;box-shadow:0 22px 34px -22px rgb(18 28 52 / .6)}
.spin-colours{display:flex;align-items:center;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.spin-colours .sw-name{margin:0 8px;font-size:13px;color:var(--ink-label)}
@media (max-width:899px){.turn{height:auto;aspect-ratio:1 / .9}.turn .car{bottom:20%}.turn .disc{bottom:13%}.turn .drag{bottom:2%}.turn--photos{aspect-ratio:4 / 3.2}}

/* the maker's configurator views: no turntable (they are views, not a spin), the view's name between the arrows,
   labelled thumbs under the stage, a crossfade between stills */
.turn--views .car img{transition:opacity .3s var(--ease)}
.turn--views .car img.is-out{opacity:0}
.turn .vname{min-width:14ch;text-align:center;font-size:14px;color:var(--ink-body)}
.thumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.thumbs .pill{height:38px;padding:0 15px;font-size:13.5px}
.is-studio main .thumbs .pill[aria-pressed=true]{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}
[dir=rtl] .turn .drag svg{transform:scaleX(-1)}

/* key numbers, the twelve answers, photos, anchors, the specification */
.nums{display:grid;grid-template-columns:1fr 1fr;margin-top:32px;border-top:1px solid var(--s-line)}
.nums > div{padding:22px 16px 22px 0;border-bottom:1px solid var(--s-line)}
.nums dt{font-size:var(--fs-small);color:var(--ink-body);order:2}
.nums .v{font:200 clamp(38px, calc(24px + 3vw), 70px)/1 var(--font-display);letter-spacing:-.02em;margin-bottom:8px}
.nums > div{display:flex;flex-direction:column}
.nums .v{order:1}
.nums .n{order:3;font-size:13px;color:var(--ink-label)}
.answers{margin-top:30px;padding:6px 20px}
.answers li{display:grid;grid-template-columns:24px minmax(0, 1fr) auto;gap:12px;align-items:baseline;padding:13px 0;border-top:1px solid var(--s-line);font-size:15px}
.answers li:first-child{border-top:0}
.yn{width:20px;height:20px;align-self:center}
.yes{color:var(--emerald)} .no{color:var(--bordeaux)} .unk{color:var(--ink-label)}
.answers small{font-size:13px;color:var(--ink-label);text-align:end}
.gal{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:30px calc(var(--gutter) * -1) 0;padding:0 var(--gutter) 10px;scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal li{flex:none;width:82%;scroll-snap-align:start}
.gal img{width:100%;aspect-ratio:16 / 10;object-fit:cover;box-shadow:0 18px 26px -18px rgb(18 28 52 / .55)}
.gal figcaption{font-size:12px;color:var(--ink-label);margin-top:8px}
.anchors{margin-top:28px;padding:6px 20px}
.anchors li{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:baseline;padding:14px 0;border-top:1px solid var(--s-line)}
.anchors li:first-child{border-top:0}
.a-price{font:300 24px/1.1 var(--font-display)}
.a-meta{font-size:13.5px;color:var(--ink-body)}
.spec-wrap{display:grid;gap:26px}
.spec{padding:4px 20px}
.acc{border-top:1px solid var(--line)}
.acc:first-child{border-top:0}
.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font:300 20px/1.25 var(--font-display)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:9px;height:9px;border:solid currentColor;border-width:0 1px 1px 0;transform:rotate(45deg);flex:none;transition:transform .3s}
.acc[open] summary::after{transform:rotate(225deg)}
.inner{padding-bottom:16px}
.inner .row{display:grid;grid-template-columns:minmax(0, 2fr) minmax(0, 3fr);gap:14px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.inner dt{color:var(--label-c)}
.bytrim{display:grid;gap:4px}
.bytrim i{font-style:normal;color:var(--label-c);margin-inline-end:8px}
@media (min-width:900px){
  .nums{grid-template-columns:repeat(4, 1fr)}
  .nums > div{padding:30px 24px 30px 0}
  .answers{padding:10px 36px}
  .answers ul{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
  .answers li:nth-child(2){border-top:0}
  .gal li{width:42%}
  .anchors{padding:10px 36px}
  .spec-wrap{grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);gap:56px;align-items:start}
  .spec{padding:8px 32px}
  .grid--3{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

/* ---------------------------------------------------------------- the studio after dark (Ali, 28 Oct: "too white/gray")
   <html data-studio> picks the studio of the cars index, the car pages and the home scene: a night studio, b gallery,
   c blue hour, lit = the blue-grey studio above. theme.json "studio" sets it; ?studio=a|b|c|lit previews another one.
   Each option only sets the --st-* grounds and its glass; the block after them turns the studio's ink to ivory. */
:root[data-studio=a]{--st-accent:#C3CFEC;--st-base:#161B2C;--st-plate:#1C2234;
  --st-wall:radial-gradient(44% 15% at 50% 75%, rgb(212 220 240 / .12) 0%, rgb(212 220 240 / .04) 46%, rgb(212 220 240 / 0) 100%),
    radial-gradient(90% 55% at 50% -6%, rgb(83 44 94 / .5) 0%, rgb(83 44 94 / 0) 72%),
    radial-gradient(60% 46% at 8% 44%, rgb(40 51 76 / .55) 0%, rgb(40 51 76 / 0) 70%),
    linear-gradient(180deg, #1D1828 0%, #191D2E 30%, #242C42 56%, #1B2234 60%, #131927 82%, #0F1420 100%);
  --st-stage:radial-gradient(90% 60% at 50% 0%, rgb(83 44 94 / .45) 0%, rgb(83 44 94 / 0) 72%),
    linear-gradient(180deg, #1D1828 0%, #1E2335 40%, #262E45 60%, #1B2234 64%, #121826 100%)}
:root[data-studio=b]{--st-accent:#BCCBEC;--st-base:#191F2A;--st-plate:#1E2430}
/* the light bar: above the car on a car page, between the header and the title on the index */
:root[data-studio=b] body{--bar-y:30%;
  --st-wall:linear-gradient(90deg, rgb(238 241 247 / 0) 4%, rgb(238 241 247 / .9) 20%, rgb(238 241 247 / .9) 80%, rgb(238 241 247 / 0) 96%) 0 var(--bar-y) / 100% 2px no-repeat,
    radial-gradient(48% 4% at 50% calc(var(--bar-y) + 1px), rgb(214 222 242 / .2) 0%, rgb(214 222 242 / 0) 100%),
    radial-gradient(64% 34% at 50% var(--bar-y), rgb(150 165 200 / .1) 0%, rgb(150 165 200 / 0) 100%),
    radial-gradient(44% 1.4% at 50% 96%, rgb(214 222 242 / .16) 0%, rgb(214 222 242 / 0) 100%),
    linear-gradient(180deg, #1A202B 0%, #1F2633 40%, #262E3D 61%, #141922 62%, #171C26 74%, #11151D 100%);
  --st-stage:linear-gradient(90deg, rgb(238 241 247 / 0) 4%, rgb(238 241 247 / .9) 20%, rgb(238 241 247 / .9) 80%, rgb(238 241 247 / 0) 96%) 0 33% / 100% 2px no-repeat,
    radial-gradient(48% 5% at 50% 33.6%, rgb(214 222 242 / .2) 0%, rgb(214 222 242 / 0) 100%),
    radial-gradient(70% 40% at 50% 33%, rgb(150 165 200 / .1) 0%, rgb(150 165 200 / 0) 100%),
    linear-gradient(180deg, #1A202B 0%, #212836 50%, #283040 72%, #141922 73%, #171C26 84%, #10141C 100%)}
:root[data-studio=b] body:is(.page-cars, .page-market, .page-industrial){--bar-y:calc(72px + 2.6svh)}
:root[data-studio=b] body.page-home{--bar-y:24%}
:root[data-studio=c]{--st-accent:#D5C6E4;--st-base:#121828;--st-plate:#1B1E30;
  --st-wall:radial-gradient(72% 9% at 50% 58%, rgb(140 78 112 / .34) 0%, rgb(140 78 112 / 0) 100%),
    radial-gradient(56% 7% at 50% 61%, rgb(120 70 108 / .2) 0%, rgb(120 70 108 / 0) 100%),
    radial-gradient(44% 14% at 50% 76%, rgb(212 214 236 / .1) 0%, rgb(212 214 236 / 0) 100%),
    linear-gradient(180deg, #0F1626 0%, #172038 32%, #29294A 48%, #45304F 57.6%, #1E1D31 58%, #18192B 66%, #121725 84%, #0E1320 100%);
  --st-stage:radial-gradient(76% 11% at 50% 66%, rgb(140 78 112 / .36) 0%, rgb(140 78 112 / 0) 100%),
    radial-gradient(44% 16% at 50% 84%, rgb(212 214 236 / .1) 0%, rgb(212 214 236 / 0) 100%),
    linear-gradient(180deg, #111829 0%, #1A2240 34%, #2B2A4B 54%, #45304F 65.6%, #1E1D31 66%, #17182A 78%, #111624 100%)}

/* the shared night: ivory ink, the paler jewels for marks, controls as smoked glass */
:root[data-studio]:not([data-studio^=lit]) :is(body.is-studio, .stage-studio, .studio-copy, .bar.on-studio){
  --ink:var(--ivory); --ink-rgb:var(--ivory-rgb); --ink-body:var(--d-body); --ink-label:rgb(231 232 235 / .64); --s-line:rgb(231 232 235 / .14);
  --s-glass:rgb(255 255 255 / .07); --s-glass-strong:rgb(255 255 255 / .11); --s-edge:rgb(255 255 255 / .18);
  --s-shadow:0 34px 70px -32px rgb(3 5 12 / .85);
  --sapphire:var(--st-accent); --emerald:#93CCB5; --bordeaux:#E3A0B8; --aubergine:#B995C6; --cove:var(--st-base)}
:root[data-studio]:not([data-studio^=lit]) body.is-studio{background:var(--st-base);color-scheme:dark}
:root[data-studio]:not([data-studio^=lit]) :is(.studio, .stage-studio){background:var(--st-wall)}
:root[data-studio]:not([data-studio^=lit]) .studio::after{background:radial-gradient(120% 90% at 50% 52%, rgb(6 9 18 / 0) 50%, rgb(6 9 18 / .42) 100%)}
:root[data-studio]:not([data-studio^=lit]) .studio::before,:root[data-studio]:not([data-studio^=lit]) .stage-studio::before{opacity:.35}
:root[data-studio]:not([data-studio^=lit]) .skip{color:var(--sap-b)}
:root[data-studio]:not([data-studio^=lit]) .bar.on-studio::before{background:linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02)), rgb(var(--sap-rgb) / .62);box-shadow:inset 0 -1px 0 rgb(255 255 255 / .1)}
:root[data-studio]:not([data-studio^=lit]) :is(.fp[aria-pressed=true], .fp[aria-checked=true], .conf-stage .views .pill[aria-pressed=true], .on-studio .seg a[aria-current], .is-studio .msg.you){color:var(--sap-b)}
/* their light ground: without it the selected view pill and film tier were dark text on the dark glass (28 Oct, phone check) */
:root[data-studio]:not([data-studio^=lit]) :is(.fp[aria-pressed=true], .fp[aria-checked=true], .conf-stage .views .pill[aria-pressed=true]){background:rgb(var(--ivory-rgb) / .94);border-color:transparent}
:root[data-studio]:not([data-studio^=lit]) .is-studio .pill.jewel{background:rgb(var(--ivory-rgb) / .94);color:var(--sap-b);border-color:transparent;box-shadow:inset 0 1px 0 #fff, 0 14px 30px -14px rgb(0 0 0 / .6)}
:root[data-studio]:not([data-studio^=lit]) .is-studio .pill.jewel:hover{background:#fff}
:root[data-studio]:not([data-studio^=lit]) .is-studio :is(.search input){background:rgb(255 255 255 / .07);border-color:var(--s-edge)}
:root[data-studio]:not([data-studio^=lit]) .is-studio .fp:not([aria-pressed=true]):not([aria-checked=true]){background:rgb(255 255 255 / .05);border-color:var(--s-edge)}
:root[data-studio]:not([data-studio^=lit]) .is-studio :is(.chip, .opt){border-color:rgb(255 255 255 / .14);background:rgb(255 255 255 / .04)}
:root[data-studio]:not([data-studio^=lit]) .is-studio .opt:hover{background:rgb(255 255 255 / .08)}
:root[data-studio]:not([data-studio^=lit]) .is-studio :is(.chip, .opt)[aria-checked=true]{border-color:var(--st-accent);background:rgb(255 255 255 / .1);box-shadow:inset 0 0 0 1px var(--st-accent)}
:root[data-studio]:not([data-studio^=lit]) .is-studio .opt .tag{border-color:rgb(147 204 181 / .4)}
:root[data-studio]:not([data-studio^=lit]) .is-studio .pick{background:rgb(255 255 255 / .04);border-color:rgb(255 255 255 / .12)}
:root[data-studio]:not([data-studio^=lit]) .is-studio .pick:hover{background:rgb(255 255 255 / .08)}
:root[data-studio]:not([data-studio^=lit]) .is-studio :is(.turn .badge){background:rgb(255 255 255 / .06)}
:root[data-studio]:not([data-studio^=lit]) .unit .rnd{background:rgb(var(--sap-rgb) / .72);color:var(--ivory)}
:root[data-studio]:not([data-studio^=lit]) .unit .plate{background:var(--st-plate);box-shadow:0 22px 34px -18px rgb(3 5 12 / .85)}
:root[data-studio]:not([data-studio^=lit]) .unit .plate::after{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1)}
:root[data-studio]:not([data-studio^=lit]) .is-studio :is(.gal img, .interior img, .turn--photos img, .conf-stage .plate img){box-shadow:0 26px 40px -22px rgb(3 5 12 / .85), 0 0 0 1px rgb(255 255 255 / .08)}
:root[data-studio]:not([data-studio^=lit]) .foot--studio{background:linear-gradient(180deg, rgb(8 11 20 / 0) 0%, rgb(8 11 20 / .5) 100%)}
/* the car on the night floor: a contact shadow under a cut-out, a stronger reflection; a maker's full photo is a framed print */
:root[data-studio]:not([data-studio^=lit]) .conf-stage .car:not(.car--scene):not(.car--spin)::after{content:"";position:absolute;z-index:-1;left:9%;right:9%;
  top:calc(var(--ground, .86) * 100% - 4%);height:8%;border-radius:50%;background:radial-gradient(closest-side, rgb(2 4 10 / .62), rgb(2 4 10 / 0))}
:root[data-studio]:not([data-studio^=lit]) .conf-stage .reflect{opacity:.2}
:root[data-studio=a] .conf-stage .car:not(.car--scene)::before{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;
  top:calc(var(--ground, .86) * 100% - 12%);height:26%;border-radius:50%;background:radial-gradient(closest-side, rgb(212 220 240 / .2) 0%, rgb(212 220 240 / .07) 55%, rgb(212 220 240 / 0) 100%)}
:root[data-studio=b] .conf-stage .reflect{opacity:.28}
:root[data-studio]:not([data-studio^=lit]) .conf-stage .car.car--scene{box-shadow:0 34px 60px -26px rgb(2 4 10 / .9), 0 0 0 1px rgb(255 255 255 / .12)}
:root[data-studio]:not([data-studio^=lit]) .turn .disc{background:radial-gradient(closest-side, rgb(205 214 238 / .16), rgb(205 214 238 / .06) 70%, rgb(205 214 238 / 0) 100%);box-shadow:inset 0 -1px 0 rgb(255 255 255 / .16), 0 30px 40px -30px rgb(2 4 10 / .8)}
:root[data-studio]:not([data-studio^=lit]) .turn .disc::after{border-color:rgb(255 255 255 / .09)}
@media (max-width:899px){
  :root[data-studio]:not([data-studio^=lit]) .conf-stage{background:var(--st-stage);border-bottom-color:rgb(255 255 255 / .1);box-shadow:0 18px 30px -22px rgb(2 4 10 / .9)}
}

/* a: frosted panes tinted with the jewels, as on the landing */
:root[data-studio=a] :is(.is-studio main .glass, .dock.glass),:root[data-studio=c] :is(.is-studio main .glass, .dock.glass){border:0;
  background:linear-gradient(168deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / .045) 34%, rgb(255 255 255 / .02) 100%), rgb(var(--tint) / .42);
  -webkit-backdrop-filter:blur(26px) saturate(165%);backdrop-filter:blur(26px) saturate(165%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(255 255 255 / .04), 0 40px 90px -40px rgb(4 7 16 / .8)}
:root[data-studio=a] :is(.is-studio main .glass, .dock.glass)::before,:root[data-studio=c] :is(.is-studio main .glass, .dock.glass)::before{display:block}
:root[data-studio=a] :is(.summary, .adv){--tint:var(--tint-au)}
:root[data-studio=a] .answers{--tint:var(--tint-em)}
/* b: dark graphite panes drawn with one luminous hairline along the top, the light bar's echo */
:root[data-studio=b] :is(.is-studio main .glass, .dock.glass){background:rgb(24 30 42 / .62);border:1px solid rgb(255 255 255 / .1);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:0 34px 70px -32px rgb(3 5 12 / .85)}
:root[data-studio=b] :is(.is-studio main .glass, .dock.glass)::before{display:block;inset:-1px -1px auto;height:1px;padding:0;-webkit-mask:none;mask:none;
  background:linear-gradient(90deg, rgb(238 241 247 / 0) 0%, rgb(238 241 247 / .7) 18%, rgb(238 241 247 / .7) 82%, rgb(238 241 247 / 0) 100%)}
/* c: blue hour, panes tinted aubergine and bordeaux */
:root[data-studio=c] body.is-studio{--tint:var(--tint-au)}
:root[data-studio=c] :is(.summary, .answers){--tint:var(--tint-bo)}

/* ---------------------------------------------------------------- services, how, dealers, contact, 404, chooser */
.open-grid{display:grid;gap:36px;align-items:end}
.open-photo{position:relative}
.open-photo img{width:100%;aspect-ratio:4 / 5;object-fit:cover}
.open-photo figcaption,.side-photo figcaption,.cap{font-size:12px;color:var(--label-c);margin-top:10px}
.answers-pane{margin-top:56px;max-width:900px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:26px}
.big{font:200 clamp(44px, calc(26px + 3.4vw), 84px)/1 var(--font-display);letter-spacing:-.02em;margin-bottom:12px}
.big--em{color:#BFD9CF}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photo-pair img{width:100%;aspect-ratio:3 / 4;object-fit:cover}
.side-photo{margin-top:26px}
.side-photo img{width:100%;aspect-ratio:4 / 5;object-fit:cover}
.svc{display:grid;gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.svc h3{font:300 20px/1.25 var(--font-display)}
.tier-rows--2{margin-top:0}
.rows li{display:grid;gap:4px 18px;padding:14px 0;border-top:1px solid var(--line);font-size:14px}
.rows .r-name{font:300 19px/1.25 var(--font-display)}
.rows .r-price{font:300 19px/1.25 var(--font-display)}
.rows .r-meta{color:var(--label-c);font-size:13px}
.rows .r-p7{color:var(--fg);font-family:var(--font-display);font-size:16px}
.atwork{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
.atwork li:first-child{grid-column:1 / -1}
.atwork img{width:100%;aspect-ratio:4 / 3;object-fit:cover}
.page-404{min-height:100svh}
.chooser{min-height:100svh;display:grid;place-items:center;padding:24px}
.chooser-pane{width:min(440px, 100%);text-align:center}
.chooser-pane .brand{width:200px;margin:0 auto 34px}
.chooser-pane ul{display:grid;gap:12px}
.chooser-pane .pill{width:100%;height:52px;font-size:var(--fs-body)}
@media (min-width:900px){
  .open-grid{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);gap:56px}
  .rows li{grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);align-items:baseline}
  .atwork{grid-template-columns:repeat(3, 1fr)}
  .atwork li:first-child{grid-column:auto}
}

/* ---------------------------------------------------------------- the China market list (text only: brand, model, energy, body, price)
   Same finder as the cars index (tools bar, side filters); rows grouped by brand, one hairline between rows. */
.mk-note{font-size:var(--fs-small);color:var(--body);margin-top:14px;max-width:56em}
.mk-note .fn,.mk-price .fn{font-size:.8em;vertical-align:.3em;margin-inline-start:1px;margin-inline-end:3px}
.mk-main{min-width:0}
.mk-tier{margin-bottom:56px}
.mk-tier-h{display:flex;align-items:baseline;gap:14px;margin:0;font:300 clamp(30px, calc(20px + 2vw), 48px)/1.1 var(--font-display);color:var(--ink)}
.mk-tier-h .c{font:400 14px/1 var(--font-text);color:var(--ink-label)}
.mk-tier-line{margin:8px 0 30px;font-size:var(--fs-small);color:var(--ink-label);max-width:44em}
.mk-tier + .mk-tier{padding-top:44px;border-top:1px solid var(--s-line)}
.mk-group{margin-bottom:34px}
.mk-group h3{display:flex;align-items:baseline;gap:12px;margin:0;padding-bottom:12px;border-bottom:1px solid var(--s-line);font:300 clamp(21px, calc(17px + .8vw), 27px)/1.15 var(--font-display)}
.mk-group h3 .c{font:400 13px/1 var(--font-text);color:var(--ink-label)}
.mk-any{margin-top:36px;padding-top:26px;border-top:1px solid var(--s-line);font-size:var(--fs-small);color:var(--ink-body);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
.mk-rows>li{display:grid;grid-template-columns:minmax(0, 1fr);gap:12px 20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--s-line)}
.mk-id{min-width:0}
.mk-group:has(h3) .mk-brand{display:none}
.mk-group:has(h3) .mk-model{margin-top:0}
.mk-brand{display:block;font:500 12px/1.3 var(--font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-label)}
.mk-model{display:block;margin-top:3px;font:300 21px/1.2 var(--font-display);color:var(--ink);overflow-wrap:anywhere}
a.mk-model{text-decoration:underline;text-decoration-color:var(--s-line);text-underline-offset:5px;text-decoration-thickness:1px}
a.mk-model:hover{text-decoration-color:currentColor}
.mk-meta{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:8px;font-size:13px;color:var(--ink-label)}
.mk-meta span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;margin-inline-end:14px;vertical-align:middle}
.mk-flag{color:var(--ink)}
.mk-spec{margin-top:6px;font-size:13px;color:var(--ink-body)}
.mk-price{min-width:0}
.mk-price .w{display:block;font-size:13px;color:var(--ink-label)}
.mk-price .price{display:block;margin-top:2px;font:300 22px/1.2 var(--font-display);color:var(--sapphire)}
.mk-price .price.req{font-size:17px;font-style:italic;color:var(--ink-label)}
.mk-price .dt{display:block;margin-top:2px;font-size:13px;color:var(--ink-label)}
.mk-ask{justify-self:start;height:40px;padding:0 18px;font-size:13.5px}
.mk-more-row{margin-top:8px;text-align:center}
.mk-more-row .pill{min-width:220px}
#mk-empty{padding:60px 0}
@media (min-width:900px){
  .mk-rows>li{grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr) auto}
  .mk-ask{justify-self:end;min-width:13.5em;justify-content:center}
}

/* ---------------------------------------------------------------- the China market as photo cards (1 Nov)
   Brand sections of cards on the studio floor, like the cars index: the maker's photo on a 16:10 plate, the brand, the
   model, the facts, the price. A brand bar rides in the sticky filter block (a slim strip under the bar, scrolled
   sideways on a phone); the brand in view is underlined. Cars without a photo get the same plate set in type. */
.mk-brands{position:relative;margin-top:-1px}
.fx-chips:not([hidden]) + .mk-brands{margin-top:12px}
.fx.is-stuck .fx-chips + .mk-brands{margin-top:-1px}
.mk-brands[hidden]{display:none}
.mk-brands::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-glass);border:1px solid var(--s-edge);box-shadow:var(--s-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5)}
:root[data-studio=b] .mk-brands::before{background:rgb(24 30 42 / .72);border-color:rgb(255 255 255 / .1)}
.mk-brands ul{display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 6px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%)}
.mk-brands ul::-webkit-scrollbar{display:none}
.mk-brands li{flex:none}
.mk-brands li[hidden]{display:none}
.mk-brands a{position:relative;display:inline-flex;align-items:baseline;gap:6px;height:44px;padding:13px 12px 0;font:400 14px/1 var(--font-text);color:var(--ink-body);white-space:nowrap}
.mk-brands a .c{font-size:12px;color:var(--ink-label)}
.mk-brands a::after{content:"";position:absolute;inset:auto 12px 7px;height:1.5px;background:var(--ink);transform:scaleX(0);transition:transform .25s var(--ease)}
.mk-brands a:hover{color:var(--ink)}
.mk-brands a.is-on{color:var(--ink)}
.mk-brands a.is-on::after{transform:scaleX(1)}
.mk-brands a:focus-visible{outline:2px solid var(--sapphire);outline-offset:-4px}
.mk-list{margin-top:10px;transition:opacity .15s var(--ease)}
.mk-list.is-updating{opacity:.3}
.mk-sec{padding-top:40px;scroll-margin-top:230px}
.mk-sec-h{display:flex;align-items:baseline;gap:12px;margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid var(--s-line);
  font:300 clamp(26px, calc(18px + 1.6vw), 40px)/1.1 var(--font-display);color:var(--ink)}
.mk-sec-h .c{font:400 13px/1 var(--font-text);color:var(--ink-label)}
.mk-flat{padding-top:24px}
.mk-cards{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:30px 14px}
.mk-card{display:flex;flex-direction:column;min-width:0}
.mk-a{display:block;flex:1}
.mk-card .plate{display:block;position:relative;aspect-ratio:16 / 10;overflow:hidden;background:var(--floor-far);box-shadow:0 18px 26px -18px rgb(18 28 52 / .55)}
.mk-card .plate picture,.mk-card .plate img{display:block;width:100%;height:100%}
.mk-card .plate img{object-fit:cover;transition:opacity .6s var(--ease), transform .8s var(--ease)}
.mk-card a.mk-a:hover .plate img{transform:scale(1.035)}
.mk-card .plate::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .35);pointer-events:none}
/* no photo: the plate set in type (the model's name, once; the line under it then carries only the brand), never a stand-in picture */
.plate--text{display:flex!important;flex-direction:column;justify-content:flex-end;gap:4px;padding:12px 14px;
  background:linear-gradient(160deg, var(--floor-far) 0%, var(--floor) 100%)!important}
.mk-card.is-text .md{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.plate--text .pt-m{font:200 clamp(22px, calc(14px + 2vw), 34px)/1.05 var(--font-display);color:var(--ink);overflow-wrap:anywhere}
.mk-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin-top:14px}
.mk-card .mk{font:500 12px/1.3 var(--font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-label)}
.mk-pick{font:500 11.5px/1.3 var(--font-text);letter-spacing:.06em;color:var(--emerald)}
.mk-card .md{display:block;font:300 19px/1.2 var(--font-display);margin-top:3px;color:var(--ink);overflow-wrap:anywhere}
.mk-card .ft{display:block;margin-top:5px;font:400 13px/1.45 var(--font-text);color:var(--ink-body);text-wrap:pretty}
.mk-card .ft .sep{color:var(--ink-label)}
.mk-card .ft > span:not(.sep):not(.sr-only){white-space:nowrap}
.mk-card .mk-flag{display:block;margin-top:4px;font-size:12.5px;font-style:italic;color:var(--ink-label)}
.mk-card .pr{display:block;margin-top:8px;font:400 17px/1.3 var(--font-display);color:var(--sapphire)}
.mk-card .pr .w{display:block;font:400 12.5px/1.35 var(--font-text);color:var(--ink-label)}
.mk-card .pr b{font-weight:400}
.mk-card .pr.msrp{color:var(--ink)}
.mk-card .pr.req{color:var(--ink-label);font-style:italic;font-weight:300}
.mk-card .pr .fn{font-size:.8em;vertical-align:.3em;margin-inline-start:1px;margin-inline-end:2px}
.mk-card .dt{display:block;font-size:12.5px;color:var(--ink-label);margin-top:1px}
.mk-quote{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;min-height:40px;margin-top:2px;font-size:13.5px;color:var(--ink-body);
  text-decoration:underline;text-decoration-color:var(--s-line);text-underline-offset:4px;text-decoration-thickness:1px}
.mk-quote svg{width:16px;height:16px;flex:none}
.mk-quote:hover{color:var(--ink);text-decoration-color:currentColor}
@media (min-width:900px){
  .mk-brands a{font-size:14.5px}
  .mk-sec{padding-top:56px;scroll-margin-top:200px}
  .mk-cards{grid-template-columns:repeat(3, minmax(0, 1fr));gap:44px 24px}
  .mk-card .md{font-size:22px}
}
@media (min-width:1200px){.mk-cards{grid-template-columns:repeat(4, minmax(0, 1fr))}}
:root[data-studio]:not([data-studio^=lit]) .mk-card .plate{background:var(--st-plate);box-shadow:0 22px 34px -18px rgb(3 5 12 / .85)}
:root[data-studio]:not([data-studio^=lit]) .mk-card .plate::after{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1)}
:root[data-studio]:not([data-studio^=lit]) .plate--text{background:linear-gradient(160deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / .03) 100%)!important}
:root[data-studio]:not([data-studio^=lit]) .mk-pick{color:#7FC4A8}

/* ---------------------------------------------------------------- motion off */
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  .slide,.slide .still,.slide .clip{transition:none}
  .slide .still{transform:none}
  .strip-item.on .track i{animation:none;transform:scaleX(1)}
  .chapter-bg img,.car-hero .hero-img,.slides{transform:none!important}
  .img-fade img[loading=lazy]{transition:none}
  .fx-sheet,.fx-sheet.is-open,.fx-panel,.fx-scrim,.grid,.mk-list,.mk-brands a::after{transition:none}
  html{scroll-behavior:auto}
  .menu-nav a{animation:none}
  .menu-sheet{transition:none}
}

/* Light studios (28 Oct, Ali: "less darkness ... luxury shops provide light sites"): bright, not the old mid-grey lit
   studio. They reuse the lit studio's rules and only change its colours; the dark looks (a, b, c) stay for dark mode.
   lit-white: gallery white; lit-pearl: cool pearl; lit-ivory: warm ivory. */
:root[data-studio=lit-white]{--wall-top:#EEEEEB;--wall:#F6F6F4;--cove:#FBFBFA;--floor-far:#F1F1EE;--floor:#E5E5E1;--floor-near:#D3D3CE;
  --s-glass:rgb(255 255 255 / .74);--s-glass-strong:rgb(255 255 255 / .9);--s-edge:rgb(12 26 61 / .09);
  --s-shadow:0 22px 50px -30px rgb(18 28 52 / .28), 0 1px 3px rgb(18 28 52 / .06)}
:root[data-studio=lit-pearl]{--wall-top:#E3E8EF;--wall:#EEF1F6;--cove:#F8FAFC;--floor-far:#ECEFF4;--floor:#DCE2EA;--floor-near:#C7CFDA;
  --s-glass:rgb(255 255 255 / .66);--s-glass-strong:rgb(255 255 255 / .86);--s-edge:rgb(255 255 255 / .9);
  --s-shadow:0 24px 56px -30px rgb(18 28 52 / .32), 0 1px 3px rgb(18 28 52 / .08)}
:root[data-studio=lit-ivory]{--wall-top:#ECE9E3;--wall:#F4F2EE;--cove:#FAF9F6;--floor-far:#EFEDE8;--floor:#E3E0D9;--floor-near:#D2CEC5;
  --s-glass:rgb(255 255 255 / .7);--s-glass-strong:rgb(255 255 255 / .88);--s-edge:rgb(12 26 61 / .08);
  --s-shadow:0 22px 50px -30px rgb(30 26 20 / .26), 0 1px 3px rgb(30 26 20 / .06)}
/* pearl: a thin bright horizon line behind the car, the light cousin of the gallery's light bar */
:root[data-studio=lit-pearl] .studio::before{content:"";position:absolute;left:6%;right:6%;top:calc(var(--horizon) - 1px);height:2px;
  background:linear-gradient(90deg, rgb(255 255 255 / 0), #fff 20%, #fff 80%, rgb(255 255 255 / 0));opacity:1}

/* the dark mode switch (header, studio pages): a moon on the light studio, a sun on the dark one */
.mode{display:grid;place-items:center;padding:0}
.mode .sun,:root:not([data-studio^=lit]) .mode .moon{display:none}
:root:not([data-studio^=lit]) .mode .sun{display:block}
/* light studios on phones: the sticky stage takes the studio's own colours (its base rule is the old grey-blue) */
@media (max-width:899px){
  :root[data-studio^=lit-] .conf-stage{background:linear-gradient(180deg, var(--wall) 0%, var(--cove) 58%, var(--floor-far) 74%, var(--floor) 100%);
    border-bottom-color:rgb(12 26 61 / .06);box-shadow:0 16px 30px -26px rgb(18 28 52 / .28)}
}
/* light studios: a much fainter edge vignette, so the white stays white to the edges */
:root[data-studio^=lit-] .studio::after{opacity:.3}

/* ---------------------------------------------------------------- light pages (1 Nov, Ali's pick: option B)
   Home, services, how it works, dealers, contact and 404 open in the white gallery of the cars pages: ink text, studio
   glass with a faint wash of the section's jewel, the hero photo, its clips and its glass strip kept. One chapter stays
   dark emerald on its own (.dark-keep: the work made ready in China). The dark mode switch (data-studio b) brings back
   the dark glass jewels everywhere: every rule here is scoped to a light studio. */
:root[data-studio^=lit] body.is-dark{background:var(--wall);color:var(--ink);--fg:var(--ink);--body:var(--ink-body);--label-c:var(--ink-label);--line:var(--s-line)}
:root[data-studio^=lit] body.is-dark :is(.ground, .chapter, .build-ch):not(.dark-keep){background:var(--wall);color:var(--ink);--fg:var(--ink);--body:var(--ink-body);--label-c:var(--ink-label);--line:var(--s-line)}
:root[data-studio^=lit] body.is-dark .ground:not(.dark-keep)::before,:root[data-studio^=lit] body.is-dark .build-ch:not(.dark-keep)::before{display:none}
:root[data-studio^=lit] body.is-dark .scene::after{background:linear-gradient(180deg, rgb(246 246 244 / 0) 0%, rgb(246 246 244 / .7) 55%, var(--wall) 100%)}
/* photo chapters: the photo fades into the white instead of the sapphire */
:root[data-studio^=lit] body.is-dark .chapter:not(.dark-keep){--veil:linear-gradient(180deg, var(--wall) 0%, rgb(246 246 244 / 0) 22%, rgb(246 246 244 / 0) 70%, var(--wall) 100%)}
@media (max-width:899px){
  :root[data-studio^=lit] body.is-dark .chapter:not(.dark-keep){--veil:linear-gradient(180deg, rgb(246 246 244 / 0) 0%, rgb(246 246 244 / 0) 40%, rgb(246 246 244 / .6) 56%, var(--wall) 66%)}
}
/* glass on white: the studio's white glass with a faint jewel wash */
:root[data-studio^=lit] body.is-dark :is(.ground, .chapter, .build-ch):not(.dark-keep) .glass{background:linear-gradient(168deg, rgb(255 255 255 / .9), rgb(255 255 255 / .72)), rgb(var(--tint) / .07);
  border:1px solid rgb(12 26 61 / .08);box-shadow:var(--s-shadow);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4)}
:root[data-studio^=lit] body.is-dark :is(.ground, .chapter, .build-ch):not(.dark-keep) .glass::before{display:none}
:root[data-studio^=lit] body.is-dark :is(.ground, .chapter, .build-ch):not(.dark-keep) .pill:not(.jewel):not(.solid){border-color:rgb(12 26 61 / .14);background:rgb(255 255 255 / .6);color:var(--ink)}
:root[data-studio^=lit] body.is-dark :is(.ground, .chapter, .build-ch):not(.dark-keep) .pill.solid{background:var(--ink);color:var(--ivory)}
:root[data-studio^=lit] body.is-dark :is(.ground, .chapter, .build-ch):not(.dark-keep) .msg.you{background:var(--ink);color:var(--ivory)}
:root[data-studio^=lit] body.is-dark :is(.ground, .chapter, .build-ch):not(.dark-keep) .pick{border-color:rgb(12 26 61 / .1);background:rgb(255 255 255 / .5)}
:root[data-studio^=lit] body.is-dark :is(.ground, .chapter, .build-ch):not(.dark-keep) .big--em{color:var(--emerald)}
:root[data-studio^=lit] body.is-dark :is(.ground, .chapter, .build-ch):not(.dark-keep) .chips-row img{box-shadow:0 0 0 1px rgb(12 26 61 / .12)}
/* the one dark chapter: emerald, ivory type; the white above runs into it and it runs on into the white below */
:root[data-studio^=lit] body.is-dark .dark-keep{color:var(--ivory);--fg:var(--ivory);--body:var(--d-body);--label-c:var(--d-label);--line:var(--d-line);--tint:var(--tint-em)}
:root[data-studio^=lit] body.is-dark .ground.dark-keep{background:radial-gradient(90% 60% at 70% 0%, rgb(31 104 82 / .32), rgb(31 104 82 / 0) 70%), linear-gradient(196deg, var(--em-l) 0%, var(--em-b) 46%, var(--em-f) 100%)}
:root[data-studio^=lit] body.is-dark .ground.dark-keep::before{display:block;--seam-from:var(--wall)}
:root[data-studio^=lit] body.is-dark .dark-keep + .ground{--seam-from:var(--em-f)}
:root[data-studio^=lit] body.is-dark .dark-keep + .ground::before{display:block;height:min(12vh, 96px)}
:root[data-studio^=lit] body.is-dark .ch-made.dark-keep{--veil:linear-gradient(180deg, var(--em-f) 0%, rgb(var(--em-rgb) / .3) 18%, rgb(var(--em-rgb) / .45) 60%, var(--em-f) 100%)}
@media (max-width:899px){
  :root[data-studio^=lit] body.is-dark .ch-made.dark-keep{--veil:linear-gradient(180deg, var(--em-f) 0%, rgb(var(--em-rgb) / 0) 26%, rgb(var(--em-rgb) / .3) 50%, var(--em-b) 66%)}
}
:root[data-studio^=lit] body.is-dark .build-ch:not(.dark-keep):has(+ .chapter.dark-keep)::after{content:"";position:absolute;inset:auto 0 0;height:min(24vh, 220px);pointer-events:none;
  background:linear-gradient(180deg, rgb(18 30 26 / 0) 0%, rgb(18 30 26 / .55) 60%, var(--em-f) 100%)}
/* the foot */
:root[data-studio^=lit] body.is-dark .foot{background:linear-gradient(180deg, rgb(169 179 191 / 0) 0%, rgb(137 149 165 / .22) 100%);color:var(--ink);--fg:var(--ink);--body:var(--ink-body);--label-c:var(--ink-label);--line:var(--s-line)}
/* the header: ink on white glass once past the hero photo (home), ink from the start where a page opens on white */
:root[data-studio^=lit] body.is-dark .bar.light-on{color:var(--ink)}
:root[data-studio^=lit] body.is-dark .bar.light-on::before{opacity:1;background:var(--s-glass);box-shadow:inset 0 -1px 0 rgb(12 26 61 / .06)}
:root[data-studio^=lit] body.is-dark .bar.light-on .pill:not(.jewel){border-color:rgb(12 26 61 / .12);background:rgb(255 255 255 / .6);color:var(--ink)}
:root[data-studio^=lit] body.is-dark .bar.light-on .seg{border-color:rgb(12 26 61 / .12);background:rgb(255 255 255 / .6)}
:root[data-studio^=lit] body.is-dark .bar.light-on .seg a[aria-current]{background:var(--ink);color:var(--ivory)}
/* the phone menu in the page's mode */
:root[data-studio^=lit] body.is-dark .menu-sheet{background:linear-gradient(180deg, var(--wall-top) 0%, var(--wall) 40%, var(--cove) 100%);color:var(--ink);--m-fg:var(--ink);--m-inv:var(--ivory);--m-line:rgb(12 26 61 / .12)}
html.menu-open[data-studio^=lit] body.is-dark .bar{color:var(--ink)}
:root[data-studio^=lit] body.is-dark .menu-sheet .pill:not(.jewel){border-color:var(--m-line);background:none;color:var(--ink)}
/* the hero keeps its photo and its ivory type */
:root[data-studio^=lit] body.is-dark .scene{color:var(--ivory);--fg:var(--ivory);--body:var(--d-body);--label-c:var(--d-label);--line:var(--d-line)}

/* contact: the facts under the buttons (reply hours, area, who answers), from contact.json only */
.facts{display:grid;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.facts div{display:grid;gap:2px}
.facts dt{font:500 12px/1.3 var(--font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--label-c)}
[lang=ar] .facts dt{letter-spacing:0}
.facts dd{font:300 22px/1.3 var(--font-display);color:var(--fg)}

/* ---------------------------------------------------------------- the configurator, review 4.3 to 4.7 */
/* 4.3: a maker's full photo (its own backdrop) fills the stage edge to edge and fades into the page at its foot; the
   name over it turns ivory */
.conf-stage--scene .car.car--scene{inset:72px 0 48px;transform:none;box-shadow:none}
.conf-stage--scene .car--scene img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 30px), transparent);mask-image:linear-gradient(180deg, #000 calc(100% - 30px), transparent)}
.conf-stage--scene .cap{color:rgb(var(--ivory-rgb) / .8);text-shadow:0 1px 12px rgb(6 10 20 / .45);z-index:1}
.conf-stage--scene .cap b{color:var(--ivory)}
:root[data-studio]:not([data-studio^=lit]) .conf-stage .car.car--scene{box-shadow:none}
.turn--scene .car img{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 30px), transparent);mask-image:linear-gradient(180deg, #000 calc(100% - 30px), transparent)}
.turn--scene .disc{display:none}
/* 4.4: the wheels as the maker's thumbnails in a row, the picked one named under it; options folded past six, each
   version line a small tag */
.wheel-row{gap:10px}
.sw.sw--wheel{width:56px;height:56px;background:rgb(255 255 255 / .5)}
.sw--wheel img{object-fit:cover}
.wheel-name small,.opt-list .vt{display:inline-block;margin-top:4px;padding:2px 9px;border-radius:999px;border:1px solid var(--s-line);font-size:12.5px;line-height:1.4;color:var(--ink-label)}
.wheel-name small{margin-inline-start:8px;margin-top:0}
.opt-box{margin-top:6px}
.opt-sum{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none}
.opt-sum::-webkit-details-marker{display:none}
.opt-sum .opt-n{color:var(--ink-label)}
.opt-sum .chev{width:16px;height:16px;margin-inline-start:auto;transition:transform .25s var(--ease)}
.opt-box[open] .opt-sum .chev{transform:rotate(180deg)}
.opt-box .opt-list{margin-top:10px}
/* 4.6: after the configurator the dock is a slim bar across the foot of the screen; the page keeps room for it */
.dock.is-bar{inset:auto 0 0;width:auto;min-height:64px;border-radius:0;padding:8px max(var(--gutter), calc((100vw - 1400px) / 2));
  padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.js body.page-car{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.dock.show.swapping{transform:translateY(160%);transition-duration:.28s}
@media (max-width:899px){
  .conf-stage{transition:height .25s var(--ease), min-height .25s var(--ease), margin-bottom .25s var(--ease)}
  /* 4.5: once the visitor is in the steps the pinned stage shrinks to 30 % of the screen and the car with it; the
     space it gives up stays as a margin, so the steps do not move; the views wait in the section below */
  .conf.is-deep .conf-stage:not(.conf-stage--photo){height:30svh;min-height:230px;margin-bottom:calc(max(44svh, 310px) - max(30svh, 230px))}
  /* the car keeps its place in the layout (its bottom follows the shrinking stage) and moves up and shrinks by transform
     only, so nothing on the page counts as a shift; both run on the stage's own timing */
  .conf-stage .car:not(.car--scene){bottom:calc(.16 * max(44svh, 310px));transition:opacity .35s, transform .25s var(--ease), bottom .25s var(--ease)}
  .conf.is-deep .conf-stage .car:not(.car--scene){bottom:calc(max(30svh, 230px) - .84 * max(44svh, 310px));
    transform:translateY(calc(-.84 * (max(44svh, 310px) - max(30svh, 230px)))) scale(.8)}
  .conf.is-deep .conf-stage--scene .car--scene{bottom:0}
  .conf.is-deep .conf-stage:not(.conf-stage--photo) .views{opacity:0;visibility:hidden;transition:none}
}
@media (min-width:900px){
  .conf-stage--scene .car.car--scene{inset:96px 0 0}
  .sheet{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.conf-stage,.conf-stage .car{transition:none}}

/* ---------------------------------------------------------------- a China-market car's page (1 Nov)
   The car page's photo hero (the card's own photo grows into it), then the versions with their China retail price on
   glass, the key specs in four groups, the photos, similar cars and the footnote. Phone: the 16:10 photo sits whole under
   the header and the name and price follow on the jewel ground (the car page's 190 % crop would cut a press photo). */
.mk-card .sp{display:block;margin-top:3px;font:400 12.5px/1.4 var(--font-text);color:var(--ink-label);letter-spacing:.01em}
.mk-card .sp .num,.mc-hero .mc-sp .num{white-space:nowrap}
.mc-hero .mc-pick{color:#9FD6BE}
.mc-hero .mc-sp{margin-top:6px;opacity:.78}
.mc-hero .line + .mc-sp{margin-top:6px}
.mc-hero .mc-price .fn{font-size:.8em;vertical-align:.3em;margin-inline-start:1px}
.mc-hero.is-text{background:linear-gradient(196deg, var(--sap-l) 0%, var(--sap-b) 55%, var(--sap-f) 100%)}
@media (min-width:900px){.mc-hero.is-text{height:calc(62svh + var(--seam));min-height:calc(520px + var(--seam))}}
@media (max-width:899px){
  .mc-hero{height:auto;min-height:0;padding:64px 0 0;--seam:9svh}
  .mc-hero picture{position:relative;inset:auto;left:auto;top:auto;width:100%;height:auto;aspect-ratio:16 / 10}
  [dir=rtl] .mc-hero picture{left:auto}
  .mc-hero .hero-img{position:static;width:100%;height:100%;object-fit:cover;-webkit-mask-image:none;mask-image:none;transform:none}
  .mc-hero .shade{background:linear-gradient(180deg, rgb(6 10 20 / .42) 0%, rgb(6 10 20 / 0) 18%)}
  .mc-hero .in{position:relative;inset:auto;padding:22px var(--gutter) calc(var(--seam) + 6svh + 30px + env(safe-area-inset-bottom));opacity:1}
  .mc-hero.is-text .in{padding-top:28svh}
  .mc-hero h1{font-size:clamp(56px, calc(24px + 11vw), 120px)}
  .mc-hero .line{margin-top:16px}
}
@media (min-width:900px){
  .mc-hero.is-text .in{inset:auto auto 0 0;width:auto;text-align:start}
  [dir=rtl] .mc-hero.is-text .in{inset:auto 0 0 auto}
  .mc-hero.is-text .line{margin-inline-start:0}
  .mc-hero.is-text .from-line.price,.mc-hero.is-text .acts{justify-content:flex-start}
  .mc-hero h1{font-size:clamp(84px, calc(30px + 9vw), 190px)}
}
.mc-sec{padding-top:clamp(28px, 4vw, 56px)}
.mc-vers{margin-top:26px;padding:4px 18px}
.mc-vers li{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:2px 16px;align-items:center;padding:14px 0;border-top:1px solid var(--s-line)}
.mc-vers li:first-child{border-top:0}
.mc-vers .a{grid-column:1;font-size:15px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.mc-vers .b{grid-column:1;font-size:13px;color:var(--ink-label);line-height:1.45}
.mc-vers .b i{font-style:italic}
.mc-vers .b .num{white-space:nowrap}
.mc-vers .p{grid-column:2;grid-row:1 / span 2;font:400 19px/1.2 var(--font-display);color:var(--ink);white-space:nowrap;text-align:end}
.mc-vers .p .fn{font-size:.62em;vertical-align:.5em;margin-inline-start:1px;color:var(--ink-label);font-family:var(--font-text)}
.js .mc-vers.is-folded:not(.is-open) li.more{display:none}
.mc-more-row{margin-top:16px;text-align:center}
.mc-more-row .pill{min-width:230px}
.mc-specs{display:grid;gap:14px;margin-top:26px}
.mc-spec{padding:18px 20px 8px}
.mc-spec h3{font:300 22px/1.2 var(--font-display);color:var(--ink);padding-bottom:10px}
.mc-spec .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-top:1px solid var(--s-line)}
.mc-spec dt{font-size:14px;color:var(--ink-body)}
.mc-spec dt{flex:1 1 auto;min-width:0}
.mc-spec dd{flex:0 1 auto;font:400 16px/1.3 var(--font-text);color:var(--ink);text-align:end;font-variant-numeric:tabular-nums}
.mc-spec dd .num{white-space:nowrap}
.mc-similar{margin-top:28px}
.mc-gal{scroll-padding-inline:var(--gutter)}
.mc-foot .mk-any{margin-top:22px}
@media (min-width:900px){
  .mc-vers{padding:4px 26px}
  .mc-vers li{padding:15px 0}
  .mc-specs{grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px}
  .mc-spec{padding:22px 26px 12px}
  .mc-similar{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
:root[data-studio]:not([data-studio^=lit]) .mc-hero .mc-pick{color:#9FD6BE}

/* industrial rows with the maker's photo (1 Nov): the market cards' 16:10 plate at the row's start */
.mk-rows>li.has-ph{grid-template-columns:minmax(0, 38%) minmax(0, 1fr);column-gap:16px}
.mk-rows>li.has-ph .plate{grid-row:1 / span 3;align-self:start;display:block;position:relative;aspect-ratio:16 / 10;overflow:hidden;
  background:var(--floor-far);box-shadow:0 14px 22px -16px rgb(18 28 52 / .5)}
.mk-rows>li.has-ph .plate picture,.mk-rows>li.has-ph .plate img{display:block;width:100%;height:100%}
.mk-rows>li.has-ph .plate img{object-fit:cover;transition:opacity .6s var(--ease)}
.mk-rows>li.has-ph .plate::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .35);pointer-events:none}
.mk-rows>li.has-ph .mk-price,.mk-rows>li.has-ph .mk-ask{grid-column:2}
:root[data-studio]:not([data-studio^=lit]) .mk-rows>li.has-ph .plate{background:var(--st-plate);box-shadow:0 18px 28px -16px rgb(3 5 12 / .85)}
@media (min-width:900px){
  .mk-rows>li.has-ph{grid-template-columns:200px minmax(0, 1.25fr) minmax(0, 1fr) auto;column-gap:24px}
  .mk-rows>li.has-ph .plate{grid-row:auto}
  .mk-rows>li.has-ph .mk-price{grid-column:3}
  .mk-rows>li.has-ph .mk-ask{grid-column:4}
}

/* ---- The China car guide (2 Nov): hub home, news, guides, FAQ, glossary, brands, compare, search. Studio pages, hairline
   lists, no rounded cards; the colours are the studio's own variables, so the dark studios follow. */
.hb{padding-bottom:clamp(72px, 9vw, 130px)}
.hb-head h1{max-width:20em}
.hb-lead{font:300 clamp(18px, calc(15px + .6vw), 23px)/1.42 var(--font-display) !important;color:var(--fg) !important;max-width:36em !important}
.hb-en{font-size:13px !important;color:var(--label-c) !important;margin-top:10px !important}
.hb-sub{margin-top:26px;border-block:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hb-sub::-webkit-scrollbar{display:none}
.hb-sub ul{display:flex;gap:26px;white-space:nowrap;padding:12px 0}
.hb-sub a{font-size:var(--fs-small);color:var(--body);padding:4px 0}
.hb-sub a:hover{color:var(--fg)}
.hb-sub a[aria-current]{color:var(--fg);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.hb-search{margin-top:26px;max-width:640px}
.hb-search input{height:54px;font-size:var(--fs-body)}
.hb-block{margin-top:clamp(44px, 6vw, 80px);min-width:0}
.hb-h{font:200 clamp(26px, calc(15px + 2vw), 42px)/1.1 var(--font-display);letter-spacing:-.01em;color:var(--fg);text-wrap:balance}
.hb-h a{color:inherit}
.hb-cols{display:grid;gap:0 56px}
@media (min-width:1000px){.hb-cols{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}}
.hb-links{margin-top:18px}
.hb-links a{font-size:clamp(19px, calc(15px + .8vw), 24px);padding:15px 0}
.hb-links a > span{display:flex;flex-direction:column;gap:4px;min-width:0}
.hb-links small{font:400 13px/1.4 var(--font-text);color:var(--label-c)}
.hb-list{margin-top:14px}
.hb-row{padding:20px 0;border-top:1px solid var(--line);min-width:0}
.hb-list > .hb-row:last-child{border-bottom:1px solid var(--line)}
.hb-grid{display:grid;gap:0 40px}
@media (min-width:900px){.hb-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.hb-grid > .hb-row:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line)}}
.hb-meta{font:500 12px/1.4 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--label-c)}
.hb-t{font:300 clamp(19px, calc(15px + .7vw), 24px)/1.25 var(--font-display);color:var(--fg);margin-top:6px;text-wrap:balance;overflow-wrap:anywhere}
.hb-t a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.hb-sum{color:var(--body);font-size:var(--fs-small);line-height:1.55;margin-top:8px;max-width:46em}
.hb-names{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:18px;max-width:72em}
.hb-names a{display:inline-block;padding:6px 0;font:300 19px/1.3 var(--font-display);color:var(--fg);border-bottom:1px solid transparent}
.hb-names a:hover{border-bottom-color:var(--line)}
/* an article: the text and the sources beside it on a desktop */
.hb-article{display:grid;gap:30px;margin-top:30px}
@media (min-width:1000px){.hb-article{grid-template-columns:minmax(0, 1fr) 300px;gap:64px}.hb-article:has(> .hb-body:only-child){grid-template-columns:minmax(0, 46em)}}
.hb-body{min-width:0;max-width:46em}
.hb-body > p,.hb-sec > p{color:var(--body);margin-top:14px;line-height:1.65}
.hb-body > p:first-child{font:300 clamp(19px, calc(15px + .6vw), 22px)/1.5 var(--font-display);color:var(--fg);margin-top:0}
.hb-sec{margin-top:40px;scroll-margin-top:96px}
.hb-h2{font:300 clamp(23px, calc(15px + 1.2vw), 30px)/1.2 var(--font-display);color:var(--fg);text-wrap:balance}
.hb-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hb-tags span{font-size:12.5px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;color:var(--label-c)}
.hb-aside{min-width:0}
.hb-aside > * + *{margin-top:22px}
.hb-src{margin-top:18px}
.hb-src-h{font:500 12px/1.4 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--label-c)}
.hb-src ul,.hb-src ol{margin-top:6px}
.hb-src li{font-size:13.5px;line-height:1.5;padding:3px 0;color:var(--label-c);overflow-wrap:anywhere}
.hb-src a{color:var(--body);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.hb-src a:hover{color:var(--fg)}
.hb-toc{padding:16px 0;border-block:1px solid var(--line);margin-bottom:10px}
.hb-toc ol{margin-top:8px;list-style:decimal;padding-inline-start:22px;color:var(--label-c)}
.hb-toc li{padding:3px 0;font-size:var(--fs-small)}
.hb-toc a{color:var(--body)}
.hb-toc a:hover{color:var(--fg)}
.hb-pn{display:grid;gap:12px;margin-top:48px;border-top:1px solid var(--line);padding-top:20px}
@media (min-width:900px){.hb-pn{grid-template-columns:1fr 1fr;gap:40px}}
.hb-pn-a{display:flex;flex-direction:column;gap:4px;min-width:0}
.hb-pn-a small{font:500 12px/1.4 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--label-c)}
.hb-pn-a span{font:300 18px/1.3 var(--font-display);color:var(--fg);overflow-wrap:anywhere}
@media (min-width:900px){.hb-pn-b{text-align:end}}
/* questions: native details, a hairline between them */
.hb-faq{margin-top:16px;border-top:1px solid var(--line)}
.hb-q{border-bottom:1px solid var(--line)}
.hb-q summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;list-style:none;
  font:300 clamp(18px, calc(15px + .5vw), 21px)/1.35 var(--font-display);color:var(--fg)}
.hb-q summary::-webkit-details-marker{display:none}
.hb-q summary .chev{width:20px;height:20px;flex:none;transition:transform .25s var(--ease);color:var(--label-c)}
.hb-q[open] summary .chev{transform:rotate(180deg)}
.hb-a{padding:0 0 20px;max-width:46em}
.hb-a > p{color:var(--body);line-height:1.65}
/* glossary */
.hb-terms{margin-top:24px;border-top:1px solid var(--line)}
.hb-term{display:grid;gap:6px 40px;padding:20px 0;border-bottom:1px solid var(--line);scroll-margin-top:96px}
@media (min-width:900px){.hb-term{grid-template-columns:minmax(0, 260px) minmax(0, 46em)}}
.hb-term dt{font:400 20px/1.3 var(--font-display);color:var(--fg)}
.hb-term dd{margin:0;color:var(--body);line-height:1.6}
.hb-term dd .hb-src{margin-top:8px}
.hb-term:target dt{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
/* brands */
.hb-az{position:sticky;top:72px;z-index:5;margin-top:20px;overflow-x:auto;scrollbar-width:none;background:var(--wall, transparent)}
.hb-az::-webkit-scrollbar{display:none}
.hb-az ul{display:flex;gap:4px;padding:8px 0}
.hb-az a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;font:500 14px/1 var(--font-text);color:var(--body);border-radius:999px}
.hb-az a:hover{color:var(--fg);background:var(--s-glass)}
.hb-letter{margin-top:30px;scroll-margin-top:130px}
.hb-L{font:200 34px/1 var(--font-display);color:var(--label-c)}
.hb-brands{display:grid;margin-top:8px;border-top:1px solid var(--line)}
@media (min-width:900px){.hb-brands{grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:40px}}
@media (min-width:1300px){.hb-brands{grid-template-columns:repeat(3, minmax(0, 1fr))}}
.hb-brands li{border-bottom:1px solid var(--line);min-width:0}
.hb-brands a{display:flex;flex-direction:column;gap:3px;padding:14px 0}
.hb-brands .nm{font:300 21px/1.25 var(--font-display);color:var(--fg)}
.hb-brands a:hover .nm{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.hb-brands .ct{font-size:13px;color:var(--body)}
.hb-brands .gp{font-size:12.5px;color:var(--label-c)}
.hb-facts{margin-top:24px;display:grid;gap:14px;max-width:60em}
.hb-facts dl{display:flex;flex-wrap:wrap;gap:14px 40px}
.hb-facts dt{font:500 12px/1.4 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--label-c)}
.hb-facts dd{margin:4px 0 0;font:300 19px/1.3 var(--font-display);color:var(--fg)}
.hb-cars{margin-top:22px}
.hb-block .mk-cards{margin-top:22px}
.hb-ind{display:grid;margin-top:16px;border-top:1px solid var(--line)}
@media (min-width:900px){.hb-ind{grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:40px}}
.hb-ind li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
.hb-ind .nm{color:var(--fg);overflow-wrap:anywhere}
.hb-ind .k{color:var(--label-c);font-size:13px;text-align:end;flex:none;max-width:45%}
/* search */
.hb-results{margin-top:24px;min-height:40vh}
.hb-count{font-size:13px;color:var(--label-c)}
.hb-hits{margin-top:10px;border-top:1px solid var(--line)}
.hb-hits li{border-bottom:1px solid var(--line)}
.hb-hits a{display:flex;flex-direction:column;gap:3px;padding:14px 0}
.hb-hits .k{font:500 11.5px/1.4 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--label-c)}
.hb-hits .t{font:300 20px/1.3 var(--font-display);color:var(--fg);overflow-wrap:anywhere}
.hb-hits a:hover .t{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* compare: real selects, then one table that scrolls inside itself on a phone (the page never does) */
.cmp-pick,.js .cmp-pick.needs-js{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;margin-top:26px}
@media (min-width:900px){.cmp-pick,.js .cmp-pick.needs-js{grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px}}
.cmp-slot{display:flex;flex-direction:column;gap:6px;min-width:0}
.cmp-slot label{font:500 12px/1.4 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--label-c)}
.cmp-slot select{width:100%;min-width:0;height:var(--tap);border-radius:999px;border:1px solid var(--s-edge);background:rgb(255 255 255 / .6);
  color:var(--fg);padding:0 14px;font:400 var(--fs-small)/1 var(--font-text);text-overflow:ellipsis}
:root[data-studio]:not([data-studio^=lit]) .cmp-slot select{background:rgb(255 255 255 / .07)}
.cmp-out{margin-top:30px;min-width:0}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.cmp{width:100%;border-collapse:collapse;min-width:520px;table-layout:fixed}
.cmp th,.cmp td{text-align:start;vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-small);line-height:1.45;color:var(--body)}
[dir=rtl] .cmp th,[dir=rtl] .cmp td{padding:12px 0 12px 12px}
.cmp thead th{border-bottom:1px solid var(--line);vertical-align:bottom}
.cmp thead th:first-child,.cmp tbody th{width:108px}
@media (min-width:900px){.cmp thead th:first-child,.cmp tbody th{width:180px}}
.cmp tbody th{font-weight:500;color:var(--label-c);font-size:13px}
.cmp tbody th,.cmp thead th:first-child{position:sticky;inset-inline-start:0;background:var(--wall, #F6F6F4);z-index:1}
:root[data-studio]:not([data-studio^=lit]) .cmp tbody th,:root[data-studio]:not([data-studio^=lit]) .cmp thead th:first-child{background:var(--st-base, #1A1F29)}
@media (min-width:900px){.cmp tbody th,.cmp thead th:first-child,:root[data-studio]:not([data-studio^=lit]) .cmp tbody th,:root[data-studio]:not([data-studio^=lit]) .cmp thead th:first-child{position:static;background:none}}   /* the table fits: no sticky column to paint */
.cmp tr.g-start > *{border-top:1px solid var(--fg)}
.cmp thead a{display:flex;flex-direction:column;gap:2px;color:var(--fg)}
.cmp-img{display:block;aspect-ratio:16 / 10;overflow:hidden;margin-bottom:8px;background:var(--floor-far, #DDE1E6)}
.cmp-img img{width:100%;height:100%;object-fit:cover}
.cmp .mk{font:500 11.5px/1.3 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--label-c)}
.cmp .md{font:300 18px/1.2 var(--font-display)}
.cmp td b{font:400 19px/1.2 var(--font-display);color:var(--fg)}
.cmp td small{display:block;font-size:12.5px;color:var(--label-c);margin-top:3px}
.cmp td .req{color:var(--fg)}
.cmp .yn.yes{color:var(--emerald)}
.cmp .yn.no{color:var(--label-c)}
.cmp .yn.unknown{color:var(--label-c);font-style:italic}
:root[data-studio]:not([data-studio^=lit]) .cmp .yn.yes{color:#6FBFA0}
.dl-gh{font:300 24px/1.2 var(--font-display);color:var(--fg);margin:40px 0 10px}