/* Final polish layer: shared contrast, layout and interaction invariants. */
:root {
  --surface-0: #070b12;
  --surface-1: #0d141f;
  --surface-2: #131e2b;
  --surface-3: #1a2938;
  --text-strong: #f4f8ff;
  --text-body: #c3cfdd;
  --text-muted: #9eafc2;
  --accent: #69edff;
  --accent-ink: #061016;
  --focus: #ffe45c;
  --hairline: #cde8ff24;
  --shadow: 0 24px 80px #0008;
  --radius-lg: 24px;
  color: var(--text-strong);
  background: var(--surface-0);
}

html { scrollbar-gutter: stable; }
body { color: var(--text-strong); background: var(--surface-0); }
h1,h2,h3,.car-body h3,.detail-sidebar h1 { overflow-wrap: anywhere; text-wrap: balance; }
p { color: var(--text-body); }
small,.source-note,.heading-note { color: var(--text-muted); }
.reveal-ready { opacity:1!important; transform:none!important; }
.drive-copy,.hero-status,.drop-heading,.drop-viewer { animation:none!important; opacity:1!important; transform:none!important; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.header {
  z-index: 80;
  isolation: isolate;
  background: #080e17e8;
  border-color: #d6ebff2b;
  box-shadow: 0 16px 60px #0008;
}
@supports (backdrop-filter: blur(20px)) { .header { background:#080e17c7; } }
.desktop-nav a { color: #edf5ff; }
.desktop-nav a:hover,.desktop-nav a:focus-visible { color: #fff; }
.nav-count { color: var(--accent); }
.button.yellow,.button.black { color: var(--accent-ink); }
.button.outline { color: var(--text-strong); }

.drive-hero { min-height: 780px; max-height: 980px; }
.drive-copy { max-width: min(700px,60vw); }
.drive-copy h1 { max-width: 12ch; }
.drive-copy>p { color: #d0dae7; max-width: 48ch; }
.drive-rating small,.scroll-cue { color: #b1bfd0; }
.hero-status {
  position: absolute;
  right: 56px;
  bottom: 58px;
  display: grid;
  gap: 6px;
  width: min(360px,32vw);
  padding: 22px 24px;
  background: #09111deb;
  border: 1px solid #d9efff2f;
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.hero-status strong { font-size: 18px; font-weight: 600; color: var(--text-strong); }
.hero-status>span:last-child { font-size: 12px; color: var(--text-muted); }
.scroll-cue { bottom: 86px; }

.trust-band { position: relative; z-index: 2; color: #c6d3e1; }

.drop-section { padding: 104px 0 40px; }
.drop-heading { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:48px; align-items:end; margin-bottom:36px; }
.drop-heading h2 { margin:10px 0 0; font-size:clamp(36px,4.6vw,68px); font-weight:500; line-height:1.05; letter-spacing:-.065em; }
.drop-heading>p { margin:0; max-width:46ch; line-height:1.75; color:var(--text-muted); }
.drop-viewer {
  position:relative;
  min-height:620px;
  overflow:hidden;
  border:1px solid var(--hairline);
  border-radius:28px;
  background:var(--surface-1);
  box-shadow:var(--shadow);
  isolation:isolate;
}
.drop-media { position:absolute; inset:0; z-index:-2; }
.drop-media img { width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.drop-scrim { position:absolute; inset:0; background:linear-gradient(90deg,#06101bf7 0%,#07111ce6 28%,#07111c7a 58%,#07111c20 78%),linear-gradient(0deg,#06101bd9 0%,transparent 48%,#06101b3d 100%); }
.drop-content { display:flex; flex-direction:column; justify-content:end; min-height:620px; width:min(580px,55%); padding:54px; }
.drop-counter { position:absolute; top:34px; left:54px; font-size:12px; letter-spacing:.14em; color:#a8b9ca; }
.drop-counter span { color:var(--accent); }
.drop-content .eyebrow { color:#b8c9d8; }
.drop-content h3 { margin:18px 0 8px; font-size:clamp(42px,5vw,74px); line-height:1; font-weight:500; letter-spacing:-.065em; }
.drop-tagline { font-size:18px; font-weight:600; color:#fff; }
.drop-content>p { max-width:46ch; margin:18px 0 24px; line-height:1.75; color:#c7d3df; }
.drop-specs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.drop-specs span { padding:8px 10px; border:1px solid #d8edff2c; border-radius:8px; background:#07121ec4; color:#e7f2fb; font-size:12px; }
.drop-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.drop-price { font-size:24px; font-weight:600; color:#fff; }
.drop-nav { position:absolute; right:28px; bottom:28px; display:flex; gap:10px; }
.drop-nav button { width:52px; height:52px; display:grid; place-items:center; border:1px solid #d8edff40; border-radius:50%; background:#07121edb; color:#fff; }
.drop-nav button:first-child svg { transform:rotate(180deg); }
.drop-nav button:hover { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.drop-rail { display:flex; gap:12px; overflow-x:auto; padding:16px 2px 14px; scrollbar-width:thin; scrollbar-color:#6d8295 transparent; scroll-snap-type:x proximity; overscroll-behavior-inline:contain; touch-action:pan-x pan-y; }
.drop-rail button { flex:0 0 min(245px,64vw); display:grid; grid-template-columns:70px minmax(0,1fr); gap:12px; align-items:center; padding:9px; text-align:left; border:1px solid var(--hairline); border-radius:14px; background:var(--surface-1); color:var(--text-strong); scroll-snap-align:start; }
.drop-rail button:hover { border-color:#69edff70; background:var(--surface-2); }
.drop-rail button[aria-pressed=true] { border-color:var(--accent); box-shadow:inset 0 0 0 1px #69edff55; }
.drop-rail img { width:70px; height:54px; border-radius:9px; object-fit:cover; }
.drop-rail span { min-width:0; display:grid; gap:4px; }
.drop-rail small { font-size:10px; letter-spacing:.12em; color:var(--accent); }
.drop-rail strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }

.car-card,.service-card,.detail-sidebar,.filters,.empty-state,dialog { background-color:var(--surface-1); }
.car-body h3 a,.detail-sidebar h1,.service-card h3 { color:var(--text-strong); }
.car-subtitle { height:auto; min-height:44px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:#b4c2d1; }
.car-meta { color:#d3deea; }
.car-price small,.car-brand { color:#9eb0c4; }
.car-image img { background:var(--surface-2); }
.save-car { z-index:3; }
.quick-look-trigger { position:absolute; right:14px; bottom:14px; z-index:3; display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid #d8edff45; border-radius:999px; background:#07121ee8; color:#f4f8ff; font:600 11px/1 var(--font-sans,Arial,sans-serif); letter-spacing:.04em; box-shadow:0 8px 24px #0007; }
.quick-look-trigger:hover,.quick-look-trigger:focus-visible { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.quick-look-trigger svg { width:15px; height:15px; }

.quick-look-modal { width:min(980px,calc(100vw - 32px)); max-width:none; padding:0; overflow:hidden; }
.quick-look-modal>.modal-close { z-index:4; background:#07121ee8; color:#fff; }
.quick-look-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr); min-height:560px; }
.quick-look-media { min-height:560px; background:var(--surface-2); }
.quick-look-media img { width:100%; height:100%; object-fit:cover; }
.quick-look-copy { display:flex; flex-direction:column; padding:54px 42px 32px; min-width:0; }
.quick-look-copy h2 { margin:12px 0 8px; font-size:clamp(34px,4vw,56px); line-height:1; letter-spacing:-.055em; }
.quick-look-copy>p { min-height:48px; margin:0 0 22px; color:var(--text-body); }
.quick-look-price { margin-bottom:24px; color:#fff; font-size:30px; font-weight:650; }
.quick-look-specs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:26px; }
.quick-look-specs span { display:grid; gap:5px; min-width:0; padding:12px 9px; border:1px solid var(--hairline); border-radius:12px; background:#09111c; }
.quick-look-specs svg { width:16px; height:16px; color:var(--accent); }
.quick-look-specs strong { overflow-wrap:anywhere; color:var(--text-strong); font-size:12px; }
.quick-look-specs small { color:var(--text-muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.quick-look-actions { display:grid; gap:10px; }
.quick-look-actions .button { width:100%; justify-content:center; }
.quick-look-nav { display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:30px; }
.quick-look-nav button { display:flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--text-body); font-weight:600; }
.quick-look-nav button:first-child svg { transform:rotate(180deg); }
.quick-look-nav button:hover { color:var(--accent); }
.quick-look-nav svg { width:18px; height:18px; }

.service-card { position:relative; isolation:isolate; overflow:hidden; min-height:290px; }
.service-card:before { content:""; position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; opacity:.26; filter:saturate(.7); transition:transform .7s ease,opacity .3s; }
.service-card:after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,#0b121df8 0%,#0b121de8 52%,#0b121d80 100%); }
.service-card:nth-child(1):before { background-image:url('assets/44504013023232-05.webp'); }
.service-card:nth-child(2):before { background-image:url('assets/44503315896096-07.webp'); }
.service-card:nth-child(3):before { background-image:url('assets/44503081222144-12.webp'); }
.service-card:nth-child(4):before { background-image:url('assets/instagram-3.webp'); }
.service-card:hover:before { transform:scale(1.04); opacity:.34; }
.service-card p { color:#c0ccda; }

.club-copy p,.contact-copy>p,.faq-list p,.footer-top p { color:var(--text-body); }
.eyebrow,.eyebrow.dark,.source-note { color:var(--text-muted); }
.contact-section { position:relative; }
.map-panel { background-image:linear-gradient(#07121db3,#07121ddc),url('assets/instagram-1.webp'); background-size:cover; background-position:center; }
.map-placeholder { width:100%; height:100%; justify-content:center; background:radial-gradient(circle at 50% 38%,#173747b3,transparent 55%); }
.map-placeholder h3,.map-placeholder p,.map-placeholder small { color:var(--text-strong); text-shadow:0 2px 16px #000; }
.map-placeholder small { color:#c0cfdd; }
.contact-list a { color:var(--text-strong); }

.social-rail,.thumbnails,.comparison-scroll { overscroll-behavior-inline:contain; overscroll-behavior-block:auto; touch-action:pan-x pan-y; }
.social-caption { background:linear-gradient(transparent,#02060be8); color:#fff; text-shadow:0 1px 8px #000; }

.inventory-intro { position:relative; z-index:1; }
.inventory-layout { align-items:start; }
.filters { z-index:10; max-height:none; overflow:visible; overscroll-behavior:auto; }
.field,.result-toolbar>label { color:#bdcada; }
.field input,.field select,.field textarea,.result-toolbar select { color:#f0f6ff; background:#080f18; border-color:#d0e7ff35; }
.field input::placeholder,.field textarea::placeholder { color:#8fa2b7; opacity:1; }
.active-filters button { color:#baf6ff; }
.compare-choice { color:#bac7d6; }
.detail-layout { align-items:start; }
.detail-sidebar { max-height:none; overflow:visible; overscroll-behavior:auto; }
.detail-subtitle,.detail-service,.detail-dealer p,.equipment-list li,.description-text { color:#b9c7d6; }
.spec-table dt { color:#9fb2c6; }
.message-preview pre { white-space:pre-wrap; overflow-wrap:anywhere; }
dialog { max-width:min(720px,calc(100vw - 32px)); max-height:min(88svh,900px); overflow:auto; }

#mobile-nav { z-index:79; }
#toast { z-index:200; }
#compare-bar { z-index:90; }
.mobile-dock { display:none; }

@media (max-width:1100px) {
  .hero-status { right:32px; width:320px; }
  .drop-viewer,.drop-content { min-height:570px; }
  .drop-content { padding:42px; }
  .drop-counter { left:42px; }
}

@media (max-width:760px) {
  html { scrollbar-gutter:auto; }
  body { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  .header { position:sticky; margin:12px 14px -84px; top:12px; }
  .drive-hero { min-height:900px; max-height:none; padding-bottom:32px; }
  .drive-copy { max-width:100%; }
  .drive-copy h1 { max-width:10ch; font-size:clamp(42px,12vw,62px); }
  .hero-status { position:relative; right:auto; bottom:auto; width:100%; margin-top:250px; padding:17px 18px; }
  .scroll-cue { margin:22px 0 0; }
  .drop-section { padding:76px 0 26px; }
  .drop-heading { grid-template-columns:1fr; gap:20px; }
  .drop-heading h2 { font-size:clamp(36px,10vw,50px); }
  .drop-heading>p { font-size:14px; }
  .drop-viewer { min-height:670px; border-radius:22px; }
  .drop-media { inset:0; }
  .drop-media img { object-position:64% center; }
  .drop-scrim { background:linear-gradient(0deg,#06101bfa 0%,#06101bf4 42%,#06101b58 72%,#06101b38 100%); }
  .drop-content { width:100%; min-height:670px; padding:30px 22px 28px; justify-content:end; }
  .drop-counter { top:22px; left:22px; }
  .drop-content h3 { font-size:clamp(38px,12vw,56px); max-width:10ch; }
  .drop-tagline { font-size:16px; }
  .drop-content>p { font-size:14px; margin:14px 0 18px; }
  .drop-specs { margin-bottom:20px; }
  .drop-actions { align-items:flex-start; flex-direction:column-reverse; gap:14px; }
  .drop-actions .button { width:100%; }
  .drop-nav { top:18px; right:18px; bottom:auto; }
  .drop-nav button { width:44px; height:44px; }
  .drop-rail { margin-right:-18px; padding-right:18px; }
  .service-card { min-height:280px; }
  .filters,.detail-sidebar { max-height:none; overflow:visible; overscroll-behavior:auto; }
  .detail-layout { flex-direction:column; }
  .detail-main,.detail-sidebar { width:100%; }
  .contact-section { grid-template-columns:1fr; }
  .footer-bottom { flex-wrap:wrap; }
  #compare-bar { max-width:calc(100vw - 24px); bottom:calc(82px + env(safe-area-inset-bottom)); }
  .compare-mini { display:none; }
  .quick-look-trigger { opacity:1; right:10px; bottom:10px; }
  .quick-look-modal { max-height:calc(100svh - 24px); overflow:auto; }
  .quick-look-layout { grid-template-columns:1fr; min-height:0; }
  .quick-look-media { min-height:0; aspect-ratio:16/10; }
  .quick-look-copy { padding:30px 20px 22px; }
  .quick-look-copy h2 { font-size:clamp(34px,10vw,48px); }
  .quick-look-copy>p { min-height:0; }
  .quick-look-specs { grid-template-columns:1fr; }
  .quick-look-specs span { grid-template-columns:22px 1fr; align-items:center; }
  .quick-look-specs small { grid-column:2; }
  .quick-look-nav { margin-top:8px; }
  .mobile-dock { position:fixed; left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); z-index:88; display:grid; grid-template-columns:repeat(4,1fr); min-height:64px; padding:6px; border:1px solid #d8edff2f; border-radius:20px; background:#07101bef; box-shadow:0 18px 50px #000b; backdrop-filter:blur(20px); }
  .mobile-dock a { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; border-radius:14px; color:#aab9c9; font-size:9px; font-weight:650; letter-spacing:.04em; text-decoration:none; }
  .mobile-dock a.active { background:#142635; color:#fff; }
  .mobile-dock a.active svg { color:var(--accent); }
  .mobile-dock svg { width:19px; height:19px; }
  .mobile-dock b { position:absolute; top:4px; left:calc(50% + 7px); min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:9px; line-height:16px; text-align:center; }
}

@media (max-width:380px) {
  .drive-hero { min-height:880px; }
  .hero-status { margin-top:225px; }
  .drop-viewer,.drop-content { min-height:650px; }
  .drop-content { padding-inline:18px; }
  .drop-nav { right:14px; }
  .drop-rail button { flex-basis:220px; }
}

@media (hover:none) {
  .car-card:hover,.service-card:hover,.button:hover { transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .reveal-ready { opacity:1!important; transform:none!important; }
}

@media (forced-colors:active) {
  .drop-scrim { background:Canvas; opacity:.85; }
  .button,.drop-nav button,.drop-rail button { border:1px solid ButtonText; }
}