/* ============ RESET & BASE ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0b0b0b;
  --bg-alt: #0e0e0e;
  --panel: #151515;
  --border: rgba(255,255,255,0.08);
  --text: #f4f1ea;
  --text-muted: #a39e94;
  --gold: #b99a6b;
  --gold-light: #d3ba90;
  --gold-line: rgba(185,154,107,0.45);
  --cream: #efe6df;
  --ink: #1d1a16;
  --ink-muted: #6b645a;
  --radius: 14px;
  --container: 1360px;
  --font: "Outfit", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.5;
  overflow-x: hidden;
}

body.modal-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.eyebrow {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sub { color: var(--text); font-size: 0.98rem; font-weight: 300; max-width: 44ch; }
.lede { color: var(--text-muted); font-size: 0.98rem; max-width: 46ch; }

section { padding: 64px 0; }

/* Thin line icons (Tabler, see js/icons.js) */
.i {
  width: 1.15em; height: 1.15em;
  fill: none; stroke: currentColor;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 14px 26px;
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn .i { width: 1.35em; height: 1.35em; }

.btn-gold {
  background: linear-gradient(180deg, #c6aa7c, #b08f60);
  color: #f7f1e6;
  border-color: rgba(255,255,255,0.08);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(185,154,107,0.3); }

.btn-ghost {
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border-color: rgba(255,255,255,0.16);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); }

.btn-outline-gold {
  background: rgba(0,0,0,0.25);
  color: var(--gold-light);
  border-color: var(--gold-line);
}
.btn-outline-gold:hover { border-color: var(--gold); background: rgba(185,154,107,0.12); }

.btn-sm { padding: 11px 20px; font-size: 0.72rem; }
.btn-lg { padding: 18px 34px; font-size: 0.82rem; }

/* ============ HEADER ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
  background-origin: border-box; /* stops the gradient repeating into the 1px border as a dark line */
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
}
.site-header.scrolled {
  background: rgba(11,11,11,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  gap: 24px;
  transition: height 0.35s ease;
}
.site-header.scrolled .header-inner { height: 68px; }

.logo { display: flex; align-items: center; }
.logo-img { height: 66px; width: auto; transition: height 0.35s ease; }
.site-header.scrolled .logo-img { height: 48px; }
.footer-brand .logo-img { height: 84px; }

.main-nav { display: flex; gap: 40px; margin: 0 auto; }
.main-nav a {
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.2s ease;
}
.main-nav a:hover { color: var(--gold-light); }

.header-cta { padding: 12px 22px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

/* ============ HERO ============ */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(660px, 100vh, 920px);
  padding: 0;
  background: var(--bg);
  overflow: hidden;
}

/* Sized from its height (aspect-ratio of the photo) so the whole car stays in frame,
   nudged up so the car sits above the feature strip */
.hero-bg {
  position: absolute;
  top: -10%; right: 0;
  height: 108%;
  aspect-ratio: 1800 / 1368;
  opacity: 0;
  overflow: hidden; /* without this, the mobile img's zoom transform overflows past this
    box's bottom edge and bleeds into the text section below (only .hero itself clips,
    and it's much taller than this box) */
  animation: fadeIn 1s ease 0.1s forwards;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(0.95) contrast(1.05);
}
/* gradients: dark on the text side, header fade on top, fade into the strip below */
.hero-bg::after {
  content: "";
  position: absolute; inset: 0 0 0 -2px; /* -2px covers the photo's anti-aliased left edge */
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(11,11,11,0.88) 22%, rgba(11,11,11,0.25) 55%, rgba(11,11,11,0) 80%),
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 62%, var(--bg) 100%);
}

.hero-inner { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; padding-top: 110px; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { to { opacity: 1; } }

.hero-copy { max-width: 540px; display: flex; flex-direction: column; gap: 22px; }
.hero-copy > * { opacity: 0; animation: fadeUp 0.7s ease forwards; }
.hero-copy > h1 { animation-delay: 0.2s; }
.hero-copy > p { animation-delay: 0.4s; }
.hero-copy > .hero-actions { animation-delay: 0.55s; }

.hero-copy h1 {
  font-size: clamp(2.6rem, 4.6vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
}
.hero-copy .accent { color: var(--gold); }
.hero-copy p { color: var(--text); max-width: 38ch; font-size: 1rem; line-height: 1.6; }
.hero-actions { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }

.hero-strip {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 8px;
  padding-bottom: 56px;
}
.hero-strip li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
}
.hero-strip .i { width: 28px; height: 28px; color: var(--gold); stroke-width: 1.2; }
.hero-strip strong { display: block; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.hero-strip small { color: var(--text-muted); font-size: 0.82rem; }

/* ============ REVEAL-ON-SCROLL ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--delay, 0ms);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-group li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-group.in-view li { opacity: 1; transform: translateY(0); }
.reveal-group li:nth-child(1) { transition-delay: 0ms; }
.reveal-group li:nth-child(2) { transition-delay: 120ms; }
.reveal-group li:nth-child(3) { transition-delay: 240ms; }
.reveal-group li:nth-child(4) { transition-delay: 360ms; }

/* ============ MODEL LINEUP ============ */
.models {
  position: relative;
  z-index: 2;
  margin-top: -28px;
  padding: 56px 0 48px;
  background: var(--bg-alt);
  border: 1px solid rgba(255,255,255,0.06);
  border-bottom: none;
  border-radius: 28px 28px 0 0;
}
.models-heading { text-align: center; }
.models-heading .eyebrow { margin-bottom: 12px; }
.models-heading h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.models-heading .sub { margin: 10px auto 0; font-size: 0.95rem; }

.model-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 36px;
}

.model-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, #171717 0%, #0f0f0f 100%);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.model-card:hover { border-color: var(--gold-line); }

.model-card-media { position: relative; height: 196px; overflow: hidden; }
/* zoomed in so the car fills the card like the design, not a tiny car in a big scene.
   --card-zoom/--card-zoom-y let individual cars override the default when their source
   photo's framing needs a different zoom to keep the full vehicle in view (see js/main.js) */
.model-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(var(--card-zoom, 1.52));
  transform-origin: 50% var(--card-zoom-y, 66%);
  transition: transform 0.6s ease;
}
.model-card:hover .model-card-media img { transform: scale(var(--card-zoom-hover, 1.6)); }
.model-card-media::after {
  content: "";
  position: absolute; inset: 0;
  /* last stop matches the card gradient at this height (#171717 -> #0f0f0f, ~60%) so there is no seam */
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 38%, rgba(18,18,18,0) 62%, #121212 100%);
}
.model-card-name {
  position: absolute;
  top: 16px; left: 16px; right: 16px;
  z-index: 1;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.model-card-body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 16px; }

.model-card-stats {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.model-card-stats li { display: grid; grid-template-columns: auto auto; column-gap: 5px; align-items: center; justify-content: start; }
.model-card-stats .i { width: 15px; height: 15px; color: var(--text); grid-row: 1; }
.model-card-stats strong { font-size: 0.72rem; font-weight: 400; white-space: nowrap; }
.model-card-stats small { grid-column: 1 / -1; color: var(--text); font-size: 0.72rem; margin-top: 4px; }

.model-card .btn { width: 100%; color: var(--gold-light); border-color: rgba(185,154,107,0.3); padding: 12px 16px; font-size: 0.7rem; justify-content: flex-start; }
.model-card .btn .i { margin-left: 2px; }

.feature-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 44px;
}
/* align-items: flex-start (not center) so a heading/description that wraps onto an extra
   line in one column doesn't push its icon out of line with the icons in neighboring columns */
.feature-strip li { display: flex; align-items: flex-start; justify-content: center; gap: 14px; min-width: 0; }
.feature-strip li > div { min-width: 0; }
.feature-strip .i { width: 32px; height: 32px; color: var(--gold); stroke-width: 1.15; flex-shrink: 0; }
.feature-strip strong { display: block; color: var(--gold); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; text-wrap: balance; }
.feature-strip small { display: block; color: var(--text); font-size: 0.85rem; text-wrap: balance; }

/* ============ LIFESTYLE ============ */
.lifestyle {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  align-items: stretch;
  padding: 0;
  min-height: 520px;
  background: #141414;
}
.lifestyle-media {
  background: url("../images/products/velino-atlas/alt-rear.jpg") center 60% / cover no-repeat;
  min-height: 520px;
}
.lifestyle-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 56px;
  background: linear-gradient(180deg, #171717, #111);
}
.lifestyle-copy h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 0 0 14px; }
.lifestyle-copy .sub { max-width: 34ch; }

.checklist { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 22px; }
.checklist li { display: flex; align-items: center; gap: 18px; }
.checklist .i { width: 30px; height: 30px; color: var(--gold); stroke-width: 1.15; }
.checklist strong { display: block; color: var(--gold); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
.checklist small { color: var(--text); font-size: 0.86rem; }

/* ============ CUSTOMIZE ============ */
.customize { background: var(--cream); color: var(--ink); padding: 48px 0 40px; }
.customize-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr;
  gap: 48px;
  align-items: center;
}
.customize .eyebrow { color: var(--ink); opacity: 0.75; }
.customize-copy h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 14px; }
.customize .sub { color: var(--ink); max-width: 30ch; }
.customize-copy .btn { margin-top: 26px; }

.customize-media {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr 1fr;
  gap: 8px;
  height: 260px;
}
.customize-tile {
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.customize-tile img { width: 100%; height: 100%; object-fit: cover; }
.customize-tile-main img { object-position: center 65%; }

.customize-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.customize-strip li { display: flex; align-items: center; justify-content: center; gap: 14px; }
.customize-strip .i { width: 30px; height: 30px; color: var(--gold); stroke-width: 1.1; }
.customize-strip strong { display: block; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
.customize-strip small { color: var(--ink-muted); font-size: 0.85rem; }

/* ============ CTA ============ */
.cta { position: relative; padding: 0; background: #0f0f0f; overflow: hidden; }
.cta-media {
  position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
  /* gradient sits in the same background so it ends exactly on the section colour (no edge) */
  background:
    linear-gradient(90deg, rgba(15,15,15,0.3) 0%, rgba(15,15,15,0.6) 55%, #0f0f0f 100%),
    url("../images/products/velino-atlas/alt-black.jpg") center 55% / cover no-repeat;
}
.cta-inner {
  position: relative;
  z-index: 1;
  padding-top: 52px; padding-bottom: 52px;
  display: grid;
  grid-template-columns: 0.9fr 1.3fr auto;
  align-items: center;
  gap: 32px;
}
.cta-copy { grid-column: 2; }
.cta-inner .btn { grid-column: 3; }
.cta-copy h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin: 4px 0 10px; }
.cta-copy .sub { max-width: 36ch; font-size: 0.9rem; }

/* ============ FOOTER ============ */
.site-footer { background: var(--bg); border-top: 1px solid var(--border); padding-top: 44px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.8fr 0.8fr 1.3fr;
  padding-bottom: 36px;
}
.footer-grid > div { padding: 0 32px; }
.footer-grid > div:first-child { padding-left: 0; }
.footer-grid > div + div { border-left: 1px solid rgba(255,255,255,0.08); }
.footer-brand p { color: var(--text); margin-top: 16px; max-width: 24ch; font-size: 0.88rem; }
.footer-col h4 { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul a { font-size: 0.85rem; color: var(--text-muted); transition: color 0.2s ease; }
.footer-col ul a:hover { color: var(--gold-light); }
.footer-contact p { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 16px; max-width: 28ch; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 20px; padding-bottom: 20px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ============ FLOATING WHATSAPP ============ */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 30;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--gold);
  border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.wa-float:hover { transform: scale(1.08); border-color: var(--gold); color: var(--gold-light); }

/* ============ MODAL ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(6,6,7,0.82);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.modal-backdrop.open { opacity: 1; visibility: visible; }

.modal {
  background: linear-gradient(180deg, #181818, #101010);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 920px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.9rem;
}

.modal-media { position: relative; overflow: hidden; background: #0d0d0d; }
.modal-media > * { position: relative; } /* keep photo + thumbs above the backdrop layer */
/* #modalMainImage, not ".modal-media img": that selector also matches the .modal-thumb
   images nested in .modal-media, fighting their own sizing rule depending on which rule
   happens to come later in the cascade (it won inside the mobile media query below,
   stretching every thumbnail to this height and wrecking their crop) */
#modalMainImage { width: 100%; height: 340px; object-fit: cover; }

/* A blurred, dimmed copy of the current photo fills the rest of the column */
.modal-media::before {
  content: "";
  position: absolute; inset: -40px;
  background: var(--modal-bg) center / cover no-repeat;
  filter: blur(30px) brightness(0.4) saturate(1.15);
}
/* Three thumbnails per row at a fixed size; a fourth (or more) wraps onto a new row instead of shrinking */
.modal-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}
.modal-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.modal-thumb:hover { opacity: 0.9; transform: translateY(-2px); }
/* --thumb-zoom/--thumb-zoom-y: some gallery photos frame the vehicle small within a big
   driveway/villa scene, so those specific thumbs zoom in on the car (see js/main.js) */
.modal-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(var(--thumb-zoom, 1));
  transform-origin: 50% var(--thumb-zoom-y, 50%);
}
.modal-thumb.active { border-color: var(--gold); opacity: 1; }

.modal-body { padding: 32px; }
.modal-body h3 { font-size: 1.5rem; margin-bottom: 8px; text-transform: uppercase; }
.modal-body .lede { margin-bottom: 24px; }

.stat-badges {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.stat-badges li {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.stat-badges strong { display: block; color: var(--gold-light); font-size: 0.95rem; font-weight: 400; }
.stat-badges small { color: var(--text-muted); font-size: 0.72rem; }

.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 28px; }
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 0; font-size: 0.85rem; }
.spec-table th { color: var(--text-muted); font-weight: 400; width: 42%; }
.spec-table td { color: var(--text); }

/* ============ SCROLLBARS ============ */
/* Slim gold thumb on a dark/transparent track, for the page and the details modal */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: rgba(185,154,107,0.4);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

.modal::-webkit-scrollbar { width: 12px; }
.modal::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }

/* Firefox has no ::-webkit-scrollbar; give it the closest equivalent */
@supports not selector(::-webkit-scrollbar) {
  html, .modal { scrollbar-width: thin; scrollbar-color: rgba(185,154,107,0.5) transparent; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1300px) {
  .model-cards { grid-template-columns: repeat(3, 1fr); }
  .model-card-media { height: 220px; }
  /* drop to 2 columns here too, before the narrower 4-col grid squeezes headings into wrapping */
  .feature-strip { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
}

@media (max-width: 1000px) {
  .main-nav { gap: 24px; }
  .hero-strip { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .hero-strip li { padding: 0; justify-content: center; align-items: flex-start; }
  .hero-strip li div { width: 130px; text-align: left; }
  .customize-strip { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .customize-inner { grid-template-columns: 1fr; gap: 32px; }
  .customize-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .customize-copy .sub { margin: 0 auto; }
  .cta-inner { grid-template-columns: 1fr auto; }
  .cta-copy { grid-column: 1; }
  .cta-inner .btn { grid-column: 2; }
  .cta-media { width: 100%; opacity: 0.4; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .footer-grid > div { padding: 0 24px 0 0; border-left: none !important; }
}

@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero-bg { position: relative; left: 0; bottom: auto; height: 340px; order: -1; }
  /* On the full-width mobile band, the uncropped desktop photo reads as mostly driveway/
     villa with a small, centered car. Zoom in so the car is the focal point, and keep it
     high enough in frame that its wheels sit above the gradient fade below. */
  .hero-bg img { transform: scale(1.47); transform-origin: 50% 85%; }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, var(--bg) 100%);
  }
  .hero-inner { padding-top: 0; }
  .hero-copy { align-items: center; text-align: center; margin: 0 auto; }
  .hero-copy p { margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .hero-strip { padding-top: 40px; }
  .models { margin-top: 0; border-radius: 0; }
  .lifestyle { grid-template-columns: 1fr; }
  .lifestyle-media { min-height: 300px; order: -1; }
  .lifestyle-copy { padding: 48px 32px; align-items: center; text-align: center; }
  .lifestyle-copy .sub { margin: 0 auto; }
  /* Centering each li as a whole (icon + text) makes the icon's x position drift row to
     row, since each row's text is a different width. A fixed text width keeps every row
     the same total width, so centering lands the icons in one consistent column. */
  .checklist { align-items: center; }
  .checklist li > div { width: 230px; text-align: left; }
  .modal { grid-template-columns: 1fr; }
  #modalMainImage { height: 240px; }
}

@media (max-width: 720px) {
  section { padding: 48px 0; }
  .container { padding-left: 20px; padding-right: 20px; }
  .main-nav { position: fixed; top: 88px; left: 0; right: 0; background: var(--bg); flex-direction: column; padding: 24px; gap: 20px; border-bottom: 1px solid var(--border); transform: translateY(-16px); opacity: 0; visibility: hidden; transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s; margin: 0; }
  .main-nav.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .header-inner { justify-content: space-between; }
  .model-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .model-card-media { height: 150px; }
  .model-card-stats { flex-wrap: wrap; row-gap: 10px; }
  .feature-strip li, .customize-strip li { justify-content: flex-start; }
  .customize-media { grid-template-columns: 1.6fr 1fr 1fr; height: 200px; }
  .customize-media .customize-tile:last-child { display: none; }
  .cta-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .cta-copy .sub { margin: 0 auto; }
  .cta-inner .btn { grid-column: 1; justify-self: center; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-grid > div { border-left: none !important; padding: 0 !important; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-brand p { margin-left: auto; margin-right: auto; }
  .footer-col ul { align-items: center; }
  .footer-contact p { margin-left: auto; margin-right: auto; }
  .stat-badges { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .model-cards { grid-template-columns: 1fr; }
  .model-card-media { height: 200px; }
}