/* Colne Car Centre. A showroom at night: graphite black, a slow red glow behind everything, glass panels in front,
   and real depth (a turning ring of cars, cards that lean, ridgelines that drift apart). One typeface, Sora. */
@font-face{font-family:Sora;font-weight:300 800;font-display:swap;src:url(/fonts/sora.woff2) format('woff2')}
:root{
  /* the palette: graphite black and signal red. Each accent also has an "r g b" form so it can be used at any strength. */
  --bg:#0d0e11;--bg-rgb:13 14 17;--bg2:#191b20;--ink:#f5f5f3;--soft:#dedede;--dim:#a9acb3;--faint:#7c7f87;
  --line:rgba(255,255,255,.14);--glass:rgba(255,255,255,.065);--glass2:rgba(255,255,255,.11);
  --a1:#ff3b30;--a1-rgb:255 59 48;--a1b:#ff7a66;--a2:#b3120a;--a2-rgb:179 18 10;--a3:#4a4f5c;--a3-rgb:74 79 92;
  --go:#d7150c;--go2:#f0352b;--go-ink:#fff;--ok:#5fe3a1;--bad:#ffb08a;--h1a:#3a3d47;--h1b:#1f2127;--h2a:#24262d;--h2b:#15161a;--h3a:#16171b;
  --r:22px;--wrap:1280px;--pad:clamp(16px,4vw,40px);--ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
/* alternative palettes, tried with <html data-theme="…"> */
:root[data-theme=navy]{--bg:#0a1424;--bg-rgb:10 20 36;--bg2:#12213a;--ink:#f6f3ec;--soft:#e3dfd5;--dim:#aeb6c4;--faint:#7f8898;
  --a1:#e8c37a;--a1-rgb:232 195 122;--a1b:#f6e2b3;--a2:#c8873a;--a2-rgb:200 135 58;--a3:#2c5f9e;--a3-rgb:44 95 158;--go:#e8c37a;--go2:#f6e2b3;--go-ink:#1a1206;
  --h1a:#2a4a78;--h1b:#16294a;--h2a:#182d50;--h2b:#0e1b33;--h3a:#0f1d36}
:root[data-theme=claret]{--bg:#1a0a12;--bg-rgb:26 10 18;--bg2:#2a111d;--ink:#fbf3f0;--soft:#ecdcd8;--dim:#c9b3b6;--faint:#96807f;
  --a1:#8fd3f4;--a1-rgb:143 211 244;--a1b:#c9ecfb;--a2:#a8324e;--a2-rgb:168 50 78;--a3:#6c1d36;--a3-rgb:108 29 54;--go:#8fd3f4;--go2:#c9ecfb;--go-ink:#06202c;
  --h1a:#6c1d36;--h1b:#3b1020;--h2a:#451425;--h2b:#260c16;--h3a:#280d18}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
html.locked{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 Sora,system-ui,Arial,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--a1);text-underline-offset:.2em}
a:hover{color:#fff}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.6vw,4.2rem)}
h2{font-size:clamp(1.55rem,3.4vw,2.6rem)}
h3{font-size:1.15rem;letter-spacing:-.02em;line-height:1.25}
p,ul,ol,dl,table,address{margin:0 0 1.1em}
address{font-style:normal}
:focus-visible{outline:3px solid var(--a1);outline-offset:3px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--go);color:var(--go-ink);padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
.wrap{width:min(var(--wrap),100% - 2*var(--pad));margin-inline:auto}
.small{font-size:.86rem;color:var(--dim)}
.dim{color:var(--dim)}
.lede{font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.5;color:var(--soft);max-width:62ch}
.kicker{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--a1);margin:0 0 1.1em}

/* the sky behind every page */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,var(--bg),var(--bg2) 60%,var(--bg));view-transition-name:sky}
.aurora i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.55;will-change:transform}
.aurora i:nth-child(1){left:-22vmax;top:-30vmax;background:radial-gradient(closest-side,rgb(var(--a3-rgb)/.9),rgb(var(--a3-rgb)/0));animation:drift1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:-28vmax;top:-10vmax;background:radial-gradient(closest-side,rgb(var(--a2-rgb)/.5),rgb(var(--a2-rgb)/0));animation:drift2 32s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:20vmax;bottom:-46vmax;background:radial-gradient(closest-side,rgb(var(--a1-rgb)/.32),rgb(var(--a1-rgb)/0));animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(14vmax,10vmax,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-16vmax,14vmax,0) scale(.9)}}
@keyframes drift3{to{transform:translate3d(-10vmax,-12vmax,0) scale(1.2)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.35em;border-radius:999px;border:1px solid var(--line);background:var(--glass);color:var(--ink);font:600 1rem/1.2 Sora,sans-serif;text-decoration:none;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .25s var(--ease),background .25s,box-shadow .25s,border-color .25s}
.btn:hover{background:var(--glass2);border-color:rgba(255,255,255,.4);color:#fff;transform:translateY(-2px)}
.btn.go{background:linear-gradient(120deg,var(--go),var(--go2));border-color:transparent;color:var(--go-ink);font-weight:700;box-shadow:0 0 0 0 rgb(var(--a1-rgb)/.5),0 10px 30px -10px rgb(var(--a1-rgb)/.6)}
.btn.go:hover{box-shadow:0 0 0 6px rgb(var(--a1-rgb)/.16),0 14px 40px -10px rgb(var(--a1-rgb)/.8);color:var(--go-ink)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.link{background:none;border:0;padding:0;color:var(--a1);font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 1.2em}
.backs{display:flex;flex-wrap:wrap;gap:12px;margin-top:2em}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.6vw,30px);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.glass>:last-child{margin-bottom:0}
.status{display:inline-flex;align-items:center;gap:.55em;font-size:.9rem;color:var(--dim)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);flex:none}
.dot.off{background:var(--bad);box-shadow:0 0 10px var(--bad)}
.dot.live{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* notice, header, menu */
.notice{background:linear-gradient(90deg,rgb(var(--a2-rgb)/.28),rgb(var(--a3-rgb)/.34));border-bottom:1px solid var(--line);font-size:.86rem;text-align:center;padding:8px 0}
.notice a{color:#fff;font-weight:600}
.top{position:sticky;top:10px;z-index:50;margin-top:10px;view-transition-name:top}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:62px;padding:8px 10px 8px 22px;border-radius:999px;background:rgb(var(--bg-rgb)/.72);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 14px 40px -18px #000,inset 0 1px 0 rgba(255,255,255,.14)}
.brand{text-decoration:none;color:var(--ink);flex:none}
.wm{display:inline-flex;align-items:center;gap:.5em;font-weight:300;font-size:1.12rem;letter-spacing:-.03em;white-space:nowrap}
.wm b{font-weight:800}
.wm i{width:1.05em;height:1.05em;border-radius:50%;background:conic-gradient(from 210deg,var(--a1),var(--a3),var(--a2),var(--a1));box-shadow:0 0 14px rgb(var(--a2-rgb)/.6)}
.top nav{display:flex;gap:2px;margin-left:auto}
.top nav a{color:var(--dim);text-decoration:none;font-size:.9rem;font-weight:500;padding:.55em .8em;border-radius:999px;white-space:nowrap;transition:color .2s,background .2s}
.top nav a:hover{color:#fff;background:var(--glass)}
.top nav a[aria-current]{color:#fff;background:var(--glass2)}
.tel{display:inline-flex;align-items:center;gap:.55em;min-height:46px;padding:0 1.1em;border-radius:999px;background:var(--glass2);border:1px solid var(--line);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.tel .t-short{display:none}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--glass);cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),top .3s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:26px}
.burger[aria-expanded=true] span:first-child{top:22px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:22px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:40;background:rgb(var(--bg-rgb)/.94);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);padding:130px 0 30px;overflow:auto;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s;perspective:900px}
.menu.open{visibility:visible;opacity:1}
.menu .m{display:block;color:#fff;text-decoration:none;font-size:clamp(1.7rem,7vw,2.6rem);font-weight:800;letter-spacing:-.04em;padding:.22em 0;opacity:0;transform:translateY(24px) rotateX(-40deg);transform-origin:left top;transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--n)*40ms)}
.menu.open .m{opacity:1;transform:none}
.menu .m[aria-current]{color:var(--a1)}
.menu .foot{display:grid;gap:8px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.menu .big{font-size:1.5rem;font-weight:800;color:#fff;text-decoration:none}
@media(max-width:1140px){.top nav{display:none}.burger{display:block}.tel{margin-left:auto}}
@media(max-width:460px){.tel .t-num{display:none}.tel .t-short{display:inline}.top .wrap{padding-left:16px;gap:10px}.wm{font-size:1rem}}
@media(max-width:380px){.wm{font-size:.92rem}.wm i{display:none}.tel{padding:0 .75em;min-height:44px}.burger{width:44px;height:44px}.burger span{left:12px;right:12px}.burger span:first-child{top:17px}.burger span:last-child{top:25px}.burger[aria-expanded=true] span{top:21px!important}.top .wrap{padding-left:14px;gap:8px}}

/* hero: copy on the left, the turntable on the right, Pendle's ridgelines behind */
.home section{padding:clamp(54px,8vw,110px) 0;position:relative;overflow-x:clip}
.hero{padding:clamp(34px,6vw,80px) 0 clamp(90px,13vw,190px)!important;overflow:clip}
.scene{position:absolute;inset:0;z-index:-1;pointer-events:none}
.stars{position:absolute;inset:-40px;background-image:radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 62%,#cfe,transparent),radial-gradient(1.6px 1.6px at 44% 12%,#fff,transparent),radial-gradient(1px 1px at 61% 34%,#fde,transparent),radial-gradient(1.3px 1.3px at 73% 8%,#fff,transparent),radial-gradient(1px 1px at 86% 44%,#cff,transparent),radial-gradient(1.2px 1.2px at 94% 20%,#fff,transparent),radial-gradient(1px 1px at 6% 48%,#fff,transparent),radial-gradient(1.1px 1.1px at 52% 52%,#fff,transparent),radial-gradient(1px 1px at 36% 30%,#fff,transparent);opacity:.75;animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.4}}
.hills{position:absolute;left:-40px;right:-40px;bottom:-2px;width:calc(100% + 80px);max-width:none;height:min(46%,420px)}
.hills g{will-change:transform}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.hero h1{font-size:clamp(2.3rem,10.4vw,4.5rem);line-height:.98;letter-spacing:-.05em;margin-bottom:.45em;perspective:800px}
.hero h1 span{display:block;transform-origin:left bottom}
.glow{background:linear-gradient(100deg,var(--a1),var(--a1b) 45%,var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgb(var(--a2-rgb)/.45))}
.stats{list-style:none;padding:0;margin:1.8em 0 0;display:flex;flex-wrap:wrap;gap:12px}
.stats li{flex:1 1 130px;padding:14px 16px;border-radius:18px;background:var(--glass);border:1px solid var(--line);font-size:.82rem;color:var(--dim);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.stats b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1.1}
.stage{position:relative;--pw:clamp(210px,24vw,330px);min-width:0;text-align:center}
.ringbox{perspective:1100px;perspective-origin:50% 42%;padding:26px 0 54px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);touch-action:pan-y;cursor:grab}
.ringbox:active{cursor:grabbing}
.ring{position:relative;width:var(--pw);aspect-ratio:4/3;margin:0 auto;transform-style:preserve-3d;transition:transform .95s var(--ease);--r:0px}
.ring.drag{transition:none}
.ring:empty{border-radius:18px;background:linear-gradient(110deg,var(--glass),var(--glass2),var(--glass));background-size:220% 100%;animation:sheen 1.4s linear infinite}
@keyframes sheen{to{background-position:-220% 0}}
.pane{position:absolute;inset:0;border-radius:18px;overflow:hidden;transform:rotateY(var(--a,0deg)) translateZ(var(--r));backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid rgba(255,255,255,.22);background:var(--bg2);filter:brightness(calc(1 - var(--dim,0)*.2));transition:filter .6s,box-shadow .6s;-webkit-user-drag:none;user-select:none}
.pane img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.pane.front{box-shadow:0 0 0 1px rgb(var(--a1-rgb)/.5),0 30px 80px -20px rgb(var(--a2-rgb)/.55),0 0 60px -10px rgb(var(--a1-rgb)/.45)}
.pane .plate{position:absolute;left:10px;bottom:10px;background:#ffd41c;color:#111;font-weight:800;font-size:.78rem;letter-spacing:.04em;padding:.18em .55em;border-radius:5px}
.floor{position:absolute;left:8%;right:8%;bottom:118px;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--a1-rgb)/.4),rgb(var(--a2-rgb)/.18) 55%,transparent);filter:blur(14px);z-index:-1}
.deck{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px}
.spin{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:#fff;font-size:1.15rem;cursor:pointer;flex:none;transition:background .2s,transform .2s}
.spin:hover{background:var(--glass2);transform:scale(1.08)}
.now{flex:0 1 310px;min-width:0;display:grid;gap:2px;padding:10px 18px;border-radius:18px;background:var(--glass);border:1px solid var(--line);text-decoration:none;color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.now b{font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now span{font-size:.86rem;color:var(--a1)}
.pause{margin-top:14px;font-size:.82rem;color:var(--dim)}
@media(max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.stage{--pw:clamp(190px,56vw,320px);margin-top:10px}}

/* the two announcements */
.update{padding-top:0!important}
.update .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:18px}
.update h2{font-size:1.25rem}
.update .glass:first-child{border-color:rgb(var(--a2-rgb)/.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 50px -18px var(--a2)}

/* stock browser */
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px 24px;margin-bottom:22px}
.head h2{margin:0}
.filters{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr 1fr;gap:12px;align-items:end;padding:16px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:40px;padding:.4em 1em;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--dim);font:500 .88rem Sora,sans-serif;cursor:pointer;transition:all .2s}
.chips button:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.chips button[aria-pressed=true]{background:linear-gradient(120deg,var(--a3),var(--a2));border-color:transparent;color:#fff;box-shadow:0 8px 24px -10px var(--a2)}
input,select,textarea{width:100%;min-height:48px;padding:.6em .9em;border-radius:14px;border:1px solid var(--line);background:rgb(var(--bg-rgb)/.55);color:var(--ink);font:400 1rem Sora,sans-serif}
textarea{min-height:120px;resize:vertical}
select option{background:var(--bg2);color:#fff}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--a1);outline:none;box-shadow:0 0 0 3px rgb(var(--a1-rgb)/.2)}
input[readonly]{color:var(--dim)}
.budget{font-size:.84rem;color:var(--dim)}
.budget output{color:#fff;font-weight:700}
input[type=range]{padding:0;min-height:30px;background:none;border:0;accent-color:var(--a1)}
.count{margin:18px 0;color:var(--dim)}
.count #count{color:#fff;font-weight:600}
.empty{grid-column:1/-1;padding:30px;border-radius:var(--r);background:var(--glass);border:1px dashed var(--line);text-align:center}
.makes{margin-top:22px;color:var(--dim);font-size:.92rem}
@media(max-width:900px){.filters{grid-template-columns:1fr 1fr}.filters .search,.filters .budget{grid-column:1/-1}}

/* a car: a glass card that leans towards the pointer, its text riding in front of its photo */
.cars{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,285px),1fr));gap:22px;perspective:1500px}
.car{position:relative;border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid var(--line);transform-style:preserve-3d;transition:transform .45s var(--ease),box-shadow .45s,border-color .3s;will-change:transform}
.car:hover{border-color:rgb(var(--a1-rgb)/.5);box-shadow:0 34px 70px -30px rgb(var(--a2-rgb)/.55),0 0 0 1px rgb(var(--a1-rgb)/.2)}
.car .hit{position:absolute;inset:0;z-index:3;border-radius:inherit;transform:translateZ(40px)}
.media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;background:var(--bg2)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.car:hover .media img{transform:scale(1.06)}
.nopic{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:.9rem}
.tag{position:absolute;left:12px;top:12px;padding:.25em .8em;border-radius:999px;background:rgb(var(--bg-rgb)/.7);border:1px solid var(--line);font-size:.74rem;font-weight:600;letter-spacing:.04em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.seg{position:absolute;left:12px;right:12px;bottom:10px;display:flex;gap:4px}
.seg i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}.seg i.on{background:var(--a1)}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.2),transparent 60%);z-index:2}
.car:hover .glare{opacity:1}
.txt{padding:16px 18px 18px;transform:translateZ(26px)}
.txt h3{margin:0 0 .35em;font-size:1.12rem}
.txt h3 small{display:block;font-size:.78rem;font-weight:500;color:var(--dim);letter-spacing:.02em;margin-top:.3em;min-height:1.2em}
.price{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;margin:0 0 .5em;background:linear-gradient(100deg,#fff,var(--a1));-webkit-background-clip:text;background-clip:text;color:transparent}
.price small{font-size:.5em;font-weight:500;-webkit-text-fill-color:var(--dim)}
.specs{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.78rem;color:var(--dim)}
.specs li{padding:.25em .7em;border-radius:999px;border:1px solid var(--line)}

/* known for: four panes that settle out of depth */
.layers{list-style:none;padding:0;margin:2.2em 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;perspective:1200px}
.layers li{position:relative;padding:26px 22px 24px;border-radius:var(--r);background:linear-gradient(170deg,rgb(var(--a3-rgb)/.34),rgba(255,255,255,.04));border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform-style:preserve-3d;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.layers .n{display:block;font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:1;margin-bottom:.35em;color:transparent;-webkit-text-stroke:1.5px var(--a1)}
.layers p{margin:0;color:var(--dim);font-size:.94rem}

/* help tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;perspective:1300px;margin-top:1.6em}
.tile{position:relative;display:block;padding:24px 22px 60px;border-radius:var(--r);text-decoration:none;color:var(--ink);background:var(--glass);border:1px solid var(--line);overflow:hidden;transform-style:preserve-3d;transition:transform .45s var(--ease),border-color .3s,box-shadow .45s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tile::before{content:"";position:absolute;inset:auto -30% -70% -30%;height:120%;border-radius:50%;background:radial-gradient(closest-side,var(--c,var(--a3)),transparent);opacity:.5;transition:transform .7s var(--ease),opacity .4s}
.tile:nth-child(2){--c:var(--a2)}.tile:nth-child(3){--c:var(--a1)}.tile:nth-child(4){--c:var(--a3)}
.tile:hover{border-color:rgba(255,255,255,.45);color:#fff;box-shadow:0 30px 60px -30px #000}
.tile:hover::before{transform:translateY(-32%) scale(1.2);opacity:.8}
.tile>*{position:relative}
.tile .k{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--a1)}
.tile h3{font-size:1.45rem;margin:.5em 0 .4em}
.tile p{margin:0;color:var(--soft);font-size:.94rem}
.tile .arrow{position:absolute;right:20px;bottom:18px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--bg);font-weight:700;transition:transform .35s var(--ease)}
.tile:hover .arrow{transform:translateX(5px) rotate(-45deg)}
.deliver{margin:1.8em 0 0;font-size:1.05rem;color:var(--dim);max-width:70ch}
.deliver b{color:#fff}
.glass.big{padding:clamp(24px,5vw,60px);background:linear-gradient(135deg,rgb(var(--a3-rgb)/.42),rgb(var(--a2-rgb)/.18) 60%,rgb(var(--a1-rgb)/.12));max-width:none}
.glass.big p{max-width:68ch}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:18px;perspective:1300px}
.quotes.all{display:block;columns:2 340px;column-gap:18px}
.quotes.all .quote{break-inside:avoid;margin-bottom:18px}
.quote{margin:0;padding:26px 24px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .45s var(--ease),border-color .3s;transform-style:preserve-3d}
.quote:hover{border-color:rgba(255,255,255,.4)}
.quote blockquote{margin:0}
.quote blockquote::before{content:"“";display:block;font-size:3.4rem;line-height:.6;font-weight:800;color:var(--a2);margin-bottom:.1em}
.quote p{font-size:1.02rem;line-height:1.55}
.quote figcaption{display:flex;flex-wrap:wrap;gap:.6em;align-items:baseline;font-size:.9rem}
.quote figcaption span{color:var(--dim)}

/* questions */
.faq{display:grid;gap:10px;max-width:900px}
.faq details{border-radius:18px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .3s,background .3s}
.faq details[open]{border-color:rgb(var(--a1-rgb)/.45);background:var(--glass2)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-size:1.2rem;transition:transform .35s var(--ease),background .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--go);color:var(--go-ink);border-color:transparent}
.faq h3{margin:0;font-size:1.02rem;font-weight:600}
.faq p{padding:0 20px 18px;margin:0;color:var(--soft)}

/* visit */
.visit .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.visit .wrap>div{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,30px);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.visit h2{font-size:1.4rem}
.visit .big{font-size:1.8rem;font-weight:800;letter-spacing:-.04em;margin-bottom:.2em}
.visit .big a{color:#fff;text-decoration:none}
.hours{width:100%;border-collapse:collapse;font-size:.95rem}
.hours th{text-align:left;font-weight:500;color:var(--dim)}
.hours th,.hours td{padding:.5em .6em;border-bottom:1px solid var(--line)}
.hours td{text-align:right}
.hours .today th,.hours .today td{color:#fff;font-weight:700;background:rgb(var(--a1-rgb)/.1)}
.route{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:0 0 1em}
.route label{flex:1 1 180px;font-size:.84rem;color:var(--dim)}

/* inner pages */
.page{padding:clamp(28px,5vw,60px) 0 clamp(60px,8vw,110px);max-width:min(980px,100% - 2*var(--pad))}
.page.wide{max-width:min(var(--wrap),100% - 2*var(--pad))}
.page h2{margin-top:1.7em}
.page>h2:first-of-type{margin-top:1.3em}
.page li{margin-bottom:.35em}
.crumbs{display:flex;flex-wrap:wrap;gap:.4em;font-size:.84rem;color:var(--dim);margin-bottom:1.6em}
.crumbs a{color:var(--dim);text-decoration:none}.crumbs a:hover{color:#fff}
.crumbs a::after{content:"/";margin-left:.4em;opacity:.5}
.crumbs span{color:#fff}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px;counter-reset:s}
.steps li{counter-increment:s;padding:20px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);margin:0}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-weight:800;font-size:1.9rem;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px var(--a1);margin-bottom:.3em}
.steps p{margin:0;color:var(--dim);font-size:.93rem}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.trio p{color:var(--dim);font-size:.95rem}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(22px,4vw,54px);align-items:start}
.split h2:first-child{margin-top:0}
.poster img{border-radius:var(--r);border:1px solid var(--line);width:100%}
@media(max-width:820px){.split{grid-template-columns:minmax(0,1fr)}}
.ticks{list-style:none;padding:0}
.ticks li{position:relative;padding-left:2em}
.ticks li::before{content:"";position:absolute;left:0;top:.28em;width:1.15em;height:1.15em;border-radius:50%;background:var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.legalbox{padding:20px 22px;border-radius:var(--r);border:1px solid var(--line);background:rgb(var(--bg-rgb)/.5);font-size:.9rem;color:var(--soft)}
.legalbox p:last-child{margin:0}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1em}
.tabs a{padding:.5em 1em;border-radius:999px;border:1px solid var(--line);color:var(--dim);text-decoration:none;font-size:.9rem;min-height:40px;display:inline-flex;align-items:center}
.tabs a:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.tabs a[aria-current]{background:linear-gradient(120deg,var(--a3),var(--a2));border-color:transparent;color:#fff}

/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:clamp(18px,2.6vw,28px);border-radius:var(--r);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin-bottom:1.4em}
.form label{display:grid;gap:6px;font-size:.86rem;font-weight:500;color:var(--soft);min-width:0}
.form .wide{grid-column:1/-1}
.form .reg{text-transform:uppercase;font-weight:800;letter-spacing:.06em;background:#ffd41c;color:#111;border-color:#ffd41c}
.form .reg::placeholder{color:#6b5a00}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:.8rem;color:var(--dim);margin:0}
.send{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.note{margin:0;font-size:.92rem;color:var(--bad)}.note.ok{color:var(--ok)}
@media(max-width:560px){.form{grid-template-columns:minmax(0,1fr)}}

/* a car's own page */
.carpage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"gal info" "detail ask" "also also";gap:clamp(22px,3.2vw,44px);align-items:start}
.gallery{grid-area:gal;min-width:0;perspective:1400px}
.g-main{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--bg2);border:1px solid var(--line);box-shadow:0 40px 90px -40px rgb(var(--a2-rgb)/.5),0 0 80px -30px rgb(var(--a1-rgb)/.4);transition:transform .45s var(--ease)}
.g-main img{width:100%;height:100%;object-fit:cover;view-transition-name:car-photo}
.g-nav{position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgb(var(--bg-rgb)/.6);color:#fff;font-size:1.1rem;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.g-nav.prev{left:12px}.g-nav.next{right:12px}
.g-nav:hover{background:var(--go);color:var(--go-ink)}
.g-count{position:absolute;right:12px;bottom:12px;padding:.2em .8em;border-radius:999px;background:rgb(var(--bg-rgb)/.7);font-size:.82rem}
.thumbs{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 8px;scrollbar-width:thin;scrollbar-color:var(--a3) transparent}
.thumbs button{flex:0 0 96px;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:none;cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s}
.thumbs button[aria-current=true]{border-color:var(--a1);opacity:1}
.thumbs button:hover{opacity:1}
.thumbs img{width:100%;aspect-ratio:3/2;object-fit:cover}
.info{grid-area:info;min-width:0}
.info h1{font-size:clamp(1.8rem,3.6vw,2.9rem)}
.info .price{font-size:clamp(2.2rem,4.4vw,3.2rem);margin:.1em 0 .4em}
.specs.big{gap:10px;margin-bottom:1.4em;font-size:.78rem}
.specs.big li{flex:1 1 110px;padding:12px 14px;border-radius:16px;background:var(--glass)}
.specs.big b{display:block;font-size:1.12rem;color:#fff;letter-spacing:-.02em}
.cta.minor{gap:8px 18px;font-size:.9rem}
.cta.minor button{background:none;border:0;padding:0;color:var(--a1);font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.detail{grid-area:detail;min-width:0}
.detail h2{font-size:1.4rem;margin-top:1.6em}.detail h2:first-child{margin-top:0}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.facts div{padding:12px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--line)}
.facts dt{font-size:.74rem;color:var(--dim);letter-spacing:.04em;text-transform:uppercase}
.facts dd{margin:0;font-weight:700}
.opts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.opts li{margin:0;padding:.35em .9em;border-radius:999px;border:1px solid var(--line);background:var(--glass);font-size:.86rem}
.ask{grid-area:ask;min-width:0}
.ask h2{font-size:1.4rem}
.also{grid-area:also;min-width:0}
@media(max-width:940px){.carpage{grid-template-columns:minmax(0,1fr);grid-template-areas:"gal" "info" "detail" "ask" "also"}}

/* the appointment message: a panel on every listing, and a pop-up once per visit */
.appt{display:grid;gap:2px;padding:14px 18px 14px 20px;margin:0 0 1.3em;border-radius:16px;border:1px solid rgb(var(--a1-rgb)/.55);border-left:5px solid var(--a1);background:rgb(var(--a2-rgb)/.22);font-size:.95rem;max-width:760px}
.appt b{font-size:1.02rem}
.appt a{color:#fff;font-weight:700}
.stock .appt{margin-top:18px}
.pop{width:min(560px,calc(100% - 32px));padding:clamp(22px,4vw,36px);border-radius:26px;border:1px solid rgb(var(--a1-rgb)/.6);background:var(--bg2);color:var(--ink);box-shadow:0 40px 120px -20px #000,0 0 90px -30px var(--a1)}
.pop::backdrop{background:rgb(var(--bg-rgb)/.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pop[open]{animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.96)}}
.pop h2{font-size:clamp(1.4rem,3.4vw,1.9rem)}
.pop .cta{margin:1.4em 0 0}
.notice .link{color:#fff;font-weight:600}

/* footer */
footer{border-top:1px solid var(--line);background:rgb(var(--bg-rgb)/.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:clamp(40px,6vw,70px) 0 30px;font-size:.93rem}
footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
footer h2{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--a1);font-weight:600;margin-bottom:1em}
footer a{color:var(--ink);text-decoration:none}footer a:hover{color:var(--a1)}
footer nav a{display:block;padding:.2em 0}
footer p{color:var(--dim)}
.f-brand p{max-width:34ch;margin-top:1em}
.badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:1.2em}
.badges img{height:54px;width:auto;border-radius:8px}
.legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;margin:0;font-size:.8rem}
.legal a{color:var(--a1)}
@media(max-width:900px){footer .wrap{grid-template-columns:1fr 1fr}.f-brand{grid-column:1/-1}}
@media(max-width:520px){footer .wrap{grid-template-columns:minmax(0,1fr)}}

/* page to page: the old page lifts away, the new one settles in; the header and the sky stay put */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.26s ease-in both vt-out}
::view-transition-new(root){animation:.5s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px) scale(.985)}}
@keyframes vt-in{from{opacity:0;transform:translateY(26px) scale(1.012)}}
::view-transition-group(car-photo){animation-duration:.55s;animation-timing-function:var(--ease)}
::view-transition-group(*){animation-duration:.5s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  @view-transition{navigation:none}
  .menu .m{transform:none}
}
@media print{
  .aurora,.notice,.top,.menu,footer,.ask,.also,.backs,.thumbs,.g-nav,.cta{display:none!important}
  body{background:#fff;color:#000}
  .price{color:#000;-webkit-text-fill-color:#000}
  .lede,.small,.dim,.facts dt,.specs,.kicker{color:#333}
  .specs.big b,.facts dd{color:#000}
}