/* =====================================================================
   Showroom stylesheet — one responsive design system driven by template
   tokens (CSS variables) + data-* attributes for hero/card/header variants.
   Mobile-first. Works for all 10 templates in src/templates.js.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-heading, 'Inter', sans-serif); line-height: 1.15; margin: 0 0 .4em; color: var(--text); }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.center { text-align: center; }
section { padding: 56px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.section-head h2 { font-size: clamp(24px, 4vw, 34px); }
.section-head p { color: var(--muted); font-size: 17px; }
.eyebrow { color: var(--primary); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--primary); color: var(--on-hero, #fff); border:none; cursor:pointer;
  font-family: var(--font-body); font-weight:600; font-size:15px; padding:12px 22px;
  border-radius: var(--radius); transition: transform .12s, filter .12s, box-shadow .12s; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); text-decoration:none; }
.btn.lg { padding:15px 30px; font-size:16px; }
.btn.block { width:100%; }
.btn.ghost { background: transparent; color: var(--primary); border:2px solid var(--primary); }
.btn.ghost:hover { background: var(--primary); color:#fff; }
.btn.wa { background:#25D366; color:#fff; }
.btn.light { background:#fff; color: var(--primary); }
.btn.dark { background: var(--footer-bg); color: var(--footer-text); }

/* ---- Header ---- */
header.site { position: sticky; top:0; z-index:50; background: var(--surface); border-bottom:1px solid var(--line); }
header.site .bar { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
header.site .logo { display:flex; align-items:center; gap:12px; font-family:var(--font-heading);
  font-weight:800; font-size:22px; color: var(--text); }
header.site .logo img { height:42px; width:auto; border-radius:8px; background:#fff; padding:2px; }
header.site nav { display:flex; align-items:center; gap:26px; }
header.site nav a { color: var(--text); font-weight:500; font-size:15px; }
header.site nav a:hover { color: var(--primary); }
header.site .nav-cta { display:inline-flex; }
.menu-toggle { display:none; background:none; border:none; font-size:26px; color:var(--text); cursor:pointer; }
[data-header="solid"] header.site { background: var(--surface); border-bottom:1px solid var(--line); }
[data-header="transparent"] header.site { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }

/* ---- Hero (variants) ---- */
.hero { color: var(--on-hero); position:relative; overflow:hidden; }
.hero .wrap { position:relative; z-index:2; }
.hero h1 { color: var(--on-hero); font-size: clamp(30px, 5.5vw, 52px); font-weight:800; }
.hero p.sub { font-size: clamp(16px, 2.4vw, 20px); opacity:.94; max-width:560px; }
.hero .cta-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.hero .stats { display:flex; gap:34px; margin-top:34px; flex-wrap:wrap; }
.hero .stats .n { font-size:30px; font-weight:800; font-family:var(--font-heading); }
.hero .stats .l { opacity:.85; font-size:14px; }

/* split: text + image side by side */
[data-hero="split"] .hero { background: linear-gradient(120deg, var(--hero-from), var(--hero-to)); }
[data-hero="split"] .hero .grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center; padding:64px 0; }
[data-hero="split"] .hero .shot { border-radius: calc(var(--radius) + 6px); overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.28); aspect-ratio: 16/11; background:#0002 center/cover; }

/* centered: centered text on gradient */
[data-hero="centered"] .hero { background: linear-gradient(135deg, var(--hero-from), var(--hero-to)); text-align:center; }
[data-hero="centered"] .hero .grid { padding:78px 0; }
[data-hero="centered"] .hero p.sub, [data-hero="centered"] .hero .stats { margin-left:auto; margin-right:auto; }
[data-hero="centered"] .hero .cta-row, [data-hero="centered"] .hero .stats { justify-content:center; }

/* image: full-bleed photo with overlay */
[data-hero="image"] .hero { background:
  linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.30)),
  var(--hero-img, linear-gradient(120deg, var(--hero-from), var(--hero-to))); background-size:cover; background-position:center; }
[data-hero="image"] .hero .grid { padding:96px 0; max-width:620px; }

/* search: search-forward hero */
[data-hero="search"] .hero { background: linear-gradient(135deg, var(--hero-from), var(--hero-to)); text-align:center; }
[data-hero="search"] .hero .grid { padding:70px 0 92px; }
[data-hero="search"] .hero .cta-row, [data-hero="search"] .hero .stats { justify-content:center; }
[data-hero="search"] .hero p.sub { margin:0 auto; }

/* minimal: light, editorial */
[data-hero="minimal"] .hero { background: var(--surface); color: var(--text); border-bottom:1px solid var(--line); }
[data-hero="minimal"] .hero h1 { color: var(--text); }
[data-hero="minimal"] .hero .grid { padding:70px 0; max-width:760px; }
[data-hero="minimal"] .hero p.sub { color: var(--muted); }

/* ---- Hero search box ---- */
.hero-search { background: var(--surface); color: var(--text); border-radius: var(--radius);
  padding:14px; box-shadow:0 20px 50px rgba(0,0,0,.18); display:grid;
  grid-template-columns: 2fr 1fr 1fr auto; gap:10px; max-width:820px; margin:28px auto 0; }
.hero-search input, .hero-search select { padding:12px 14px; border:1px solid var(--line);
  border-radius: calc(var(--radius) - 4px); font-size:15px; font-family:var(--font-body); background:var(--surface); color:var(--text); }

/* ---- Search bar under hero (overlap) ---- */
.searchbar { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow:0 12px 34px rgba(0,0,0,.08); padding:16px; display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto; gap:10px; margin-top:-42px; position:relative; z-index:5; }
.searchbar input, .searchbar select { padding:11px 13px; border:1px solid var(--line);
  border-radius: calc(var(--radius) - 4px); font-size:15px; background:var(--surface); color:var(--text); font-family:var(--font-body); }

/* ---- Car cards ---- */
.car-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.car { background: var(--surface); border-radius: var(--radius); overflow:hidden; color:var(--text);
  display:flex; flex-direction:column; transition: transform .15s, box-shadow .15s; position:relative; }
.car:hover { transform: translateY(-4px); }
.car .photo { aspect-ratio: 16/10; background:#00000010 center/cover no-repeat; position:relative; }
.car .tags { position:absolute; top:12px; left:12px; display:flex; gap:6px; }
.car .tag { background: var(--primary); color:#fff; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.03em; }
.car .tag.sold { background:#dc2626; }
.car .tag.year { background: rgba(0,0,0,.65); }
.car .info { padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.car h3 { font-size:18px; margin:0; }
.car .price { color: var(--primary); font-weight:800; font-size:21px; font-family:var(--font-heading); }
.car .price small { color: var(--muted); font-weight:500; font-size:12px; }
.car .specs { display:flex; flex-wrap:wrap; gap:10px 16px; color:var(--muted); font-size:13px; margin-top:auto; }
.car .specs span { display:inline-flex; align-items:center; gap:5px; }
.car .cta { margin-top:12px; }
[data-card="elevated"] .car { box-shadow:0 4px 18px rgba(0,0,0,.07); }
[data-card="elevated"] .car:hover { box-shadow:0 16px 40px rgba(0,0,0,.14); }
[data-card="bordered"] .car { border:1px solid var(--line); }
[data-card="bordered"] .car:hover { border-color: var(--primary); }
[data-card="flat"] .car { background: color-mix(in srgb, var(--surface) 96%, var(--primary)); }
[data-card="overlay"] .car .photo { aspect-ratio:16/11; }
[data-card="overlay"] .car { border:1px solid var(--line); }

/* ---- Services ---- */
.services-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.service { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding:26px 22px; text-align:center; transition: transform .15s, box-shadow .15s; }
.service:hover { transform: translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.08); }
.service .ico { width:56px; height:56px; margin:0 auto 14px; border-radius:14px; display:grid; place-items:center;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); font-size:26px; }
.service h3 { font-size:17px; margin-bottom:6px; }
.service p { color: var(--muted); font-size:14px; margin:0; }

/* ---- Testimonials ---- */
.testi-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.testi { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:24px; }
.testi .stars { color:#f59e0b; letter-spacing:2px; margin-bottom:10px; }
.testi .quote { font-size:15px; }
.testi .who { margin-top:14px; font-weight:700; }
.testi .who small { display:block; color:var(--muted); font-weight:500; }

/* ---- Why-us / features strip ---- */
.why { display:grid; grid-template-columns: repeat(4,1fr); gap:22px; text-align:center; }
.why .item .n { font-size:30px; font-weight:800; color:var(--primary); font-family:var(--font-heading); }

/* ---- Contact / footer ---- */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:36px; }
.contact-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.map-wrap { border-radius: var(--radius); overflow:hidden; min-height:280px; border:1px solid var(--line); }
.map-wrap iframe { width:100%; height:100%; min-height:280px; border:0; }

footer.site { background: var(--footer-bg); color: var(--footer-text); padding:44px 0 0; margin-top:20px; }
footer.site a { color: var(--footer-text); opacity:.85; }
footer.site .cols { display:grid; grid-template-columns: 2fr 1fr 1fr; gap:30px; }
footer.site h4 { color: var(--footer-text); }
footer.site .bottom { border-top:1px solid color-mix(in srgb, var(--footer-text) 18%, transparent); margin-top:32px; padding:16px 0; text-align:center; font-size:13px; opacity:.7; }

/* ---- Forms ---- */
.field { margin-bottom:14px; }
.field label { display:block; font-weight:600; font-size:14px; margin-bottom:6px; }
.field input, .field select, .field textarea { width:100%; padding:12px 14px; border:1px solid var(--line);
  border-radius: calc(var(--radius) - 4px); font-size:15px; font-family:var(--font-body); background:var(--surface); color:var(--text); }
.field textarea { min-height:110px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.alert { padding:14px 16px; border-radius:var(--radius); margin-bottom:18px; font-size:15px; }
.alert.success { background:#dcfce7; color:#166534; }
.alert.error { background:#fee2e2; color:#991b1b; }

/* ---- Car detail ---- */
.detail-grid { display:grid; grid-template-columns: 1.3fr 1fr; gap:34px; align-items:start; }
.gallery .main { border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; background:#00000012 center/cover; }
.detail .title { font-size: clamp(24px,4vw,34px); }
.detail .price { font-size:30px; font-weight:800; color:var(--primary); font-family:var(--font-heading); margin:6px 0 4px; }
.spec-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin:22px 0; }
.spec { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; }
.spec .k { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.spec .v { font-weight:700; margin-top:2px; }
.side-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:sticky; top:88px; }

/* ---- EMI calculator ---- */
.emi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.emi .result { text-align:center; background: linear-gradient(135deg, var(--hero-from), var(--hero-to)); color:#fff;
  border-radius:var(--radius); padding:20px; margin-bottom:18px; }
.emi .result .amt { font-size:34px; font-weight:800; font-family:var(--font-heading); }
.emi .slider { margin-bottom:16px; }
.emi .slider .top { display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px; }
.emi .slider .top b { color:var(--primary); }
.emi input[type=range] { width:100%; accent-color: var(--primary); }
.emi .breakdown { display:flex; justify-content:space-between; font-size:14px; color:var(--muted); margin-top:6px; }

/* ---- Mobile sticky CTA bar (car detail) ---- */
.mobile-cta { display:none; }

/* ---- Breadcrumb / page header ---- */
.page-head { background: var(--surface); border-bottom:1px solid var(--line); padding:26px 0; }
.page-head h1 { margin:0; font-size: clamp(22px,3.5vw,30px); }
.crumb { color:var(--muted); font-size:14px; }

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 1000px) {
  .car-grid, .testi-grid, .why { grid-template-columns: repeat(2,1fr); }
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .side-card { position:static; }
  [data-hero="split"] .hero .grid { grid-template-columns:1fr; }
  [data-hero="split"] .hero .shot { display:none; }
  .searchbar, .hero-search { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  section { padding:40px 0; }
  header.site nav { position:fixed; inset:56px 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--surface); border-bottom:1px solid var(--line); padding:14px 20px; gap:14px;
    transform:translateY(-140%); transition:transform .25s; box-shadow:0 20px 40px rgba(0,0,0,.12); }
  header.site nav.open { transform:translateY(0); }
  header.site nav .nav-cta { justify-content:center; }
  .menu-toggle { display:block; }
  .car-grid, .testi-grid, .why, .services-grid, .contact-grid, .form-row, .spec-grid { grid-template-columns: 1fr; }
  .searchbar, .hero-search { grid-template-columns: 1fr; margin-top:20px; }
  footer.site .cols { grid-template-columns: 1fr; }
  .mobile-cta { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60; gap:10px;
    background:var(--surface); border-top:1px solid var(--line); padding:10px 14px; box-shadow:0 -6px 20px rgba(0,0,0,.10); }
  .mobile-cta .btn { flex:1; }
  body.has-mobile-cta { padding-bottom:74px; }
}

/* =====================================================================
   TEMPLATE STRUCTURAL VARIANTS
   Each template combines these to form a genuinely different layout —
   not just a recolour. Driven by data-* attributes on <body>.
   ===================================================================== */

/* ---- Button shapes ---- */
[data-btn="pill"]  .btn { border-radius: 999px; }
[data-btn="sharp"] .btn { border-radius: 0; }
[data-btn="sharp"] .btn.ghost { border-width: 1px; }

/* ---- Nav layouts ---- */
/* center: logo stacked above centered nav */
[data-nav="center"] header.site .bar { flex-direction: column; gap: 12px; padding: 18px 0; }
[data-nav="center"] header.site nav { gap: 24px; }
[data-nav="center"] header.site .logo { font-size: 26px; }

/* split: a slim info top-strip above a uppercase nav */
.topstrip { background: var(--footer-bg); color: var(--footer-text); font-size: 13px; }
.topstrip .wrap { display: flex; justify-content: space-between; align-items: center; padding: 7px 20px; }
[data-nav="split"] header.site nav a { text-transform: uppercase; letter-spacing: .05em; font-size: 13px; font-weight: 600; }

/* ---- Inventory (car) layouts ---- */
/* compact: dense 4-up marketplace grid */
[data-cars="compact"] .car-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
[data-cars="compact"] .car .info { padding: 12px; gap: 6px; }
[data-cars="compact"] .car h3 { font-size: 15px; }
[data-cars="compact"] .car .price { font-size: 17px; }
[data-cars="compact"] .car .photo { aspect-ratio: 16/11; }
[data-cars="compact"] .car .cta { padding: 8px 12px; font-size: 14px; }

/* wide: large 2-up cards with big imagery */
[data-cars="wide"] .car-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
[data-cars="wide"] .car .photo { aspect-ratio: 16/9; }
[data-cars="wide"] .car .info { padding: 22px; }
[data-cars="wide"] .car h3 { font-size: 23px; }
[data-cars="wide"] .car .price { font-size: 25px; }

/* list: horizontal editorial rows */
[data-cars="list"] .car-grid { grid-template-columns: 1fr; gap: 16px; }
[data-cars="list"] .car { flex-direction: row; align-items: stretch; }
[data-cars="list"] .car > a { flex: 0 0 320px; display: block; }
[data-cars="list"] .car .photo { height: 100%; min-height: 210px; aspect-ratio: auto; }
[data-cars="list"] .car .info { flex: 1; justify-content: center; }
[data-cars="list"] .car .cta { align-self: flex-start; padding-left: 26px; padding-right: 26px; }

/* ---- Services layouts ---- */
/* iconrow: icon-left rows with dividers */
[data-services="iconrow"] .services-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 40px; }
[data-services="iconrow"] .service { display: flex; align-items: flex-start; gap: 16px; text-align: left;
  border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 18px 2px; box-shadow: none; }
[data-services="iconrow"] .service:hover { transform: none; box-shadow: none; }
[data-services="iconrow"] .service .ico { margin: 0; flex: 0 0 auto; }

/* list: compact two-column list */
[data-services="list"] .services-grid { grid-template-columns: repeat(2, 1fr); gap: 6px 40px; }
[data-services="list"] .service { display: flex; align-items: center; gap: 14px; text-align: left;
  border: none; background: transparent; border-radius: 0; padding: 12px 0; box-shadow: none; }
[data-services="list"] .service:hover { transform: none; box-shadow: none; }
[data-services="list"] .service .ico { width: 42px; height: 42px; font-size: 20px; margin: 0; border-radius: 11px; }

/* split: elegant left-accent columns (luxury) */
[data-services="split"] .services-grid { grid-template-columns: repeat(2, 1fr); gap: 4px 44px; }
[data-services="split"] .service { text-align: left; border: none; border-left: 3px solid var(--primary);
  border-radius: 0; padding: 8px 0 14px 20px; margin-bottom: 12px; background: transparent; box-shadow: none; }
[data-services="split"] .service:hover { transform: none; box-shadow: none; }
[data-services="split"] .service .ico { width: 42px; height: 42px; font-size: 20px; margin-bottom: 8px; }

/* ---- Car card styles ---- */
[data-card="line"] .car { border: none; border-bottom: 2px solid var(--text); border-radius: 0; background: transparent; }
[data-card="line"] .car .photo { border-radius: 0; }
[data-card="line"] .car .info { padding-left: 0; padding-right: 0; }

/* ---- Section shaping ---- */
/* angled: sliced hero + skewed accent */
[data-section="angled"] .hero { clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%); padding-bottom: 78px; }
[data-section="angled"] section:nth-of-type(2n) { background:
  linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--bg)), var(--bg)); }

/* soft: rounded everything, pillowy hero */
[data-section="soft"] .hero { border-bottom-left-radius: 44px; border-bottom-right-radius: 44px; }
[data-section="soft"] .car,
[data-section="soft"] .service,
[data-section="soft"] .testi,
[data-section="soft"] .contact-card,
[data-section="soft"] .spec,
[data-section="soft"] .side-card { border-radius: 22px; }

/* lines: editorial rules between sections */
[data-section="lines"] section + section { border-top: 1px solid var(--line); }
[data-section="lines"] .section-head .eyebrow { border-bottom: 2px solid var(--primary); padding-bottom: 6px; }

/* gridlines: subtle tech grid over the hero */
[data-section="gridlines"] .hero {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(120deg, var(--hero-from), var(--hero-to));
  background-size: 34px 34px, 34px 34px, 100% 100%;
}

/* ---- Responsive fixes for the variants ---- */
@media (max-width: 1000px) {
  [data-cars="compact"] .car-grid { grid-template-columns: repeat(2, 1fr); }
  [data-cars="wide"] .car-grid { grid-template-columns: 1fr; }
  [data-cars="list"] .car-grid { grid-template-columns: 1fr; }
  [data-services="iconrow"] .services-grid,
  [data-services="list"] .services-grid,
  [data-services="split"] .services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  [data-cars="compact"] .car-grid { grid-template-columns: 1fr; }
  [data-cars="list"] .car { flex-direction: column; }
  [data-cars="list"] .car > a { flex: auto; }
  [data-cars="list"] .car .photo { min-height: 0; aspect-ratio: 16/10; }
  [data-nav="center"] header.site .bar { flex-direction: row; }
  .topstrip .wrap { justify-content: center; gap: 14px; }
}


/* =====================================================================
   POLISH: scroll-reveal, sticky-header shadow, and the new sections
   (video gallery, Google reviews, per-car QR share kit).
   ===================================================================== */

/* Scroll reveal (progressive enhancement). Hidden state only applies when JS is
   active (html.js), so no-JS users and crawlers always see the content.
   Sections fade only — the individual text/media elements inside do the moving
   (see .rise below), which mirrors the reference's per-element motion. */
.reveal { transition: opacity .6s ease; }
.js .reveal { opacity: 0; }
.js .reveal.in { opacity: 1; }

/* --- RISE: text & media pop up from below (the signature entrance) ---------
   Mirrors Framer Motion's initial={{opacity:0,y:24}} -> animate={{opacity:1,y:0}}
   with ease [0.22, 1, 0.36, 1]. Applied per element and staggered by JS. */
.js .rise { opacity: 0; transform: translateY(42px); will-change: transform, opacity; }
.js .rise.in {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .95s cubic-bezier(.22, 1, .36, 1);
}
/* media rises a little further and scales in slightly */
.js .rise-media { opacity: 0; transform: translateY(50px) scale(.96); }
.js .rise-media.in {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .rise, .js .rise-media { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Sticky header gains a shadow once the page is scrolled */
header.site { transition: box-shadow .2s ease; }
header.site.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.10); }

/* Card hover lift refinement */
.car, .service, .testi, .video { will-change: transform; }

/* Video gallery */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.video-frame { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000;
  box-shadow: 0 8px 26px rgba(0,0,0,.12); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-cap { padding: 12px 2px; }
.video-cap strong { display: block; }
.video-cap span { color: var(--muted); font-size: 14px; }

/* Google reviews */
.greviews { display: flex; gap: 26px; flex-wrap: wrap; align-items: stretch; }
.grev-score { flex: 0 0 320px; max-width: 100%; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; text-align: center; }
.g-logo { font-family: Arial, sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -1px; margin-bottom: 8px; }
.grev-rating { font-size: 54px; font-weight: 800; font-family: var(--font-heading); line-height: 1; color: var(--text); }
.grev-stars { color: #fbbc05; font-size: 22px; letter-spacing: 3px; margin: 8px 0 4px; }
.grev-embed { flex: 1; min-width: 280px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-height: 320px; }
.grev-embed iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }

/* Google review-card carousel (swipe on touch, arrows on desktop) */
.grev-main { flex: 1; min-width: 280px; }
.rev-carousel-wrap { position: relative; }
.rev-carousel { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 12px; scrollbar-width: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.rev-carousel::-webkit-scrollbar { display: none; }
.rev-card { scroll-snap-align: start; flex: 0 0 300px; max-width: 78%; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.rev-card .rtext { font-size: 15px; margin: 10px 0 12px; }
.rev-card .rwho { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rev-card .gmark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: #4285F4; font-weight: 800; font-family: Arial, sans-serif; border: 1px solid var(--line); font-size: 12px; }
.rev-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.rev-prev { left: -8px; } .rev-next { right: -8px; }
.rev-nav:hover { background: var(--primary); color: #fff; }
@media (max-width: 640px) { .rev-nav { display: none; } .rev-card { flex-basis: 82%; } }

/* Per-car QR + share kit (the windshield-to-phone differentiator) */
.sharekit { display: flex; gap: 20px; align-items: center; margin-top: 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.sharekit .qr { flex: 0 0 136px; width: 136px; height: 136px; background: #fff; border-radius: 12px; padding: 8px; }
.sharekit .qr svg { width: 100%; height: 100%; display: block; }
.share-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.sold-grid .car { opacity: .93; }

@media (max-width: 1000px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .video-grid { grid-template-columns: 1fr; }
  .sharekit { flex-direction: column; text-align: center; }
  .sharekit .qr { align-self: center; }
  .greviews { flex-direction: column; }
}

/* =====================================================================
   FUTURISTIC treatments (templates Nova / Vega): cinematic animated hero,
   glassmorphism cards, and the "neo" FX layer (gradient headings, glow, tilt).
   ===================================================================== */

/* Cinematic hero: animated gradient mesh + centered content */
[data-hero="cinematic"] .hero {
  position: relative; text-align: center; overflow: hidden;
  background:
    radial-gradient(55% 75% at 18% 12%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 60%),
    radial-gradient(50% 70% at 88% 18%, color-mix(in srgb, var(--primary) 50%, transparent), transparent 55%),
    linear-gradient(160deg, var(--hero-from), var(--hero-to));
  background-size: 200% 200%, 220% 220%, 100% 100%;
  animation: novaMesh 18s ease-in-out infinite;
}
@keyframes novaMesh {
  0%, 100% { background-position: 0% 0%, 100% 0%, 0 0; }
  50%      { background-position: 100% 100%, 0% 100%, 0 0; }
}
@media (prefers-reduced-motion: reduce) { [data-hero="cinematic"] .hero { animation: none; } }
[data-hero="cinematic"] .hero::after { /* subtle tech grid overlay */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
          mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
[data-hero="cinematic"] .hero .grid { padding: 104px 0; }
[data-hero="cinematic"] .hero .cta-row, [data-hero="cinematic"] .hero .stats { justify-content: center; }
[data-hero="cinematic"] .hero p.sub { margin-left: auto; margin-right: auto; }

/* Glassmorphism cards (looks best on the dark Nova template) */
[data-card="glass"] .car { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
[data-card="glass"] .car:hover { border-color: color-mix(in srgb, var(--primary) 65%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent); }
[data-card="glass"] .service, [data-card="glass"] .testi, [data-card="glass"] .contact-card,
[data-card="glass"] .spec, [data-card="glass"] .side-card, [data-card="glass"] .emi {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Neo FX layer: gradient headings, glow, hover lift/tilt */
[data-fx="neo"] .section-head h2 {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-fx="neo"] .hero h1 { text-shadow: 0 0 44px color-mix(in srgb, var(--primary) 45%, transparent); }
[data-fx="neo"] .eyebrow { color: var(--primary); }
[data-fx="neo"] .btn { box-shadow: 0 8px 30px color-mix(in srgb, var(--primary) 32%, transparent); }
[data-fx="neo"] .btn:hover { box-shadow: 0 12px 42px color-mix(in srgb, var(--primary) 52%, transparent); }
[data-fx="neo"] .car { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; transform-style: preserve-3d; }
[data-fx="neo"] .car:hover { transform: translateY(-6px); }
[data-fx="neo"] .service .ico { box-shadow: 0 0 26px color-mix(in srgb, var(--primary) 30%, transparent); }
[data-fx="neo"] .why .item .n { text-shadow: 0 0 22px color-mix(in srgb, var(--primary) 55%, transparent); }
[data-fx="neo"] .price { text-shadow: 0 0 18px color-mix(in srgb, var(--primary) 30%, transparent); }

/* =====================================================================
   EDITORIAL / BRUTALIST treatments (template "Volt").
   Inspired by the reference: volt-on-carbon, outlined stroke type, giant
   footer wordmark, marquee strip, asymmetric bento tiles, mono micro-labels,
   sharp corners, diamond accents and grain.
   ===================================================================== */

/* --- Outlined ("stroke") display type --- */
.text-outline { -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 30%, transparent); color: transparent; }
.text-outline-accent { -webkit-text-stroke: 1.5px color-mix(in srgb, var(--primary) 55%, transparent); color: transparent; }

/* --- Mono micro-labels (wide tracking, uppercase) --- */
[data-fx="brutal"] .eyebrow { font-family: var(--font-mono); letter-spacing: .3em; font-size: 11px; font-weight: 500; }
[data-fx="brutal"] .crumb, [data-fx="brutal"] .car .specs { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }

/* --- Brutalist type + selection --- */
[data-fx="brutal"] h1, [data-fx="brutal"] h2, [data-fx="brutal"] h3 {
  text-transform: uppercase; letter-spacing: -0.03em; font-weight: 900; line-height: .95; }
[data-fx="brutal"] ::selection { background: var(--primary); color: #090a0c; }
[data-fx="brutal"] .section-head { text-align: left; margin-left: 0; max-width: 900px; }
[data-fx="brutal"] .hero h1 { font-size: clamp(38px, 8vw, 92px); }
[data-fx="brutal"] .btn { font-family: var(--font-heading); text-transform: uppercase; font-weight: 800; letter-spacing: -0.01em; }
[data-fx="brutal"] .btn:not(.ghost):not(.wa) { background: var(--primary); color: #090a0c; }
[data-fx="brutal"] .price { font-family: var(--font-heading); font-weight: 900; }

/* --- Editorial hero: left-aligned giant type + outlined second line --- */
[data-hero="editorial"] .hero { background: var(--bg); border-bottom: 1px solid var(--line); position: relative; }
[data-hero="editorial"] .hero .grid { padding: 92px 0 76px; max-width: 1100px; }
[data-hero="editorial"] .hero .stats .n { font-family: var(--font-heading); }
[data-hero="editorial"] .hero .stats .l { font-family: var(--font-mono); letter-spacing: .18em; text-transform: uppercase; font-size: 10px; }

/* --- Grain overlay --- */
[data-section="grain"] .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-section="grain"] section + section { border-top: 1px solid var(--line); }

/* --- Panel cards (sharp, bordered, hover-lit) --- */
[data-card="panel"] .car { background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }
[data-card="panel"] .car:hover { border-color: rgba(255,255,255,.28); transform: none; }
[data-card="panel"] .car .photo { filter: grayscale(30%) contrast(1.15); transition: filter .5s, transform .7s; }
[data-card="panel"] .car:hover .photo { filter: none; transform: scale(1.04); }
[data-card="panel"] .car .tag { border-radius: 2px; font-family: var(--font-mono); letter-spacing: .12em; }
[data-card="panel"] .service, [data-card="panel"] .testi, [data-card="panel"] .contact-card,
[data-card="panel"] .spec, [data-card="panel"] .side-card, [data-card="panel"] .emi, [data-card="panel"] .rev-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }

/* --- Bento car grid: asymmetric spans (editorial rhythm) --- */
[data-cars="bento"] .car-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
[data-cars="bento"] .car-grid > * { grid-column: span 6; }
[data-cars="bento"] .car-grid > *:nth-child(6n+1) { grid-column: span 12; }
[data-cars="bento"] .car-grid > *:nth-child(6n+2) { grid-column: span 7; }
[data-cars="bento"] .car-grid > *:nth-child(6n+3) { grid-column: span 5; }
[data-cars="bento"] .car-grid > *:nth-child(6n+4) { grid-column: span 5; }
[data-cars="bento"] .car-grid > *:nth-child(6n+5) { grid-column: span 7; }
[data-cars="bento"] .car-grid > *:nth-child(6n+1) .photo { aspect-ratio: 21/9; }

/* --- Service chips (bordered mono tags) --- */
[data-services="chips"] .services-grid { display: flex; flex-wrap: wrap; gap: 12px; }
[data-services="chips"] .service { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--line); border-radius: 2px; padding: 12px 16px; text-align: left; box-shadow: none; }
[data-services="chips"] .service:hover { border-color: var(--primary); transform: none; box-shadow: none; }
[data-services="chips"] .service .ico { width: 30px; height: 30px; font-size: 16px; margin: 0; border-radius: 2px; background: transparent; }
[data-services="chips"] .service h3 { font-size: 13px; margin: 0; font-family: var(--font-mono); letter-spacing: .1em; }
[data-services="chips"] .service p { display: none; }

/* --- Marquee strip (scrolling outlined type with diamond separators) --- */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg); overflow: hidden; padding: 20px 0; }
.marquee-track { display: flex; width: max-content; animation: marqueeScroll 32s linear infinite; }
.marquee-track span.mq {
  font-family: var(--font-heading); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.03em; font-size: clamp(26px, 5vw, 52px); white-space: nowrap;
  padding: 0 26px; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 28%, transparent); color: transparent; }
.marquee-track i.dot { width: 12px; height: 12px; background: var(--primary);
  transform: rotate(45deg); margin: 0 22px; align-self: center; flex: 0 0 auto; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* --- Giant footer wordmark (the signature move) --- */
.wordmark { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.045em; line-height: .82; text-align: center; user-select: none;
  font-size: clamp(56px, 17vw, 260px); margin: 26px 0 6px;
  /* stroke derives from the footer text colour so it works on light AND dark footers */
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--footer-text) 30%, transparent);
  color: transparent; }
footer.site .wm-wrap { overflow: hidden; }
[data-fx="brutal"] footer.site { background: var(--bg); border-top: 1px solid var(--line); color: var(--text); }
[data-fx="brutal"] footer.site h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--primary); font-weight: 500; }
[data-fx="brutal"] footer.site .bottom { font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; }

/* --- Diamond brand accent in the header --- */
[data-fx="brutal"] header.site .logo::before { content: ""; width: 10px; height: 10px;
  background: var(--primary); transform: rotate(45deg); display: inline-block; margin-right: 4px;
  transition: transform .3s; }
[data-fx="brutal"] header.site .logo:hover::before { transform: rotate(90deg); }
[data-fx="brutal"] header.site .logo { font-family: var(--font-heading); text-transform: uppercase; font-weight: 900; }
[data-fx="brutal"] header.site nav a:not(.btn) { font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
[data-fx="brutal"] header.site nav a:not(.btn):hover { color: var(--primary); }

/* --- Numbered chapter blocks (01 / 02 / 03) --- */
.chapters { display: grid; gap: 54px; }
.chapter { display: flex; gap: 24px; align-items: flex-start; }
.chapter .num { font-family: var(--font-heading); font-weight: 900; line-height: .8;
  font-size: clamp(56px, 10vw, 128px); -webkit-text-stroke: 1.5px color-mix(in srgb, var(--primary) 55%, transparent);
  color: transparent; flex: 0 0 auto; }
.chapter .body h3 { font-size: clamp(20px, 3vw, 32px); margin-bottom: 10px; }
.chapter .body p { color: var(--muted); max-width: 46ch; }

@media (max-width: 900px) {
  [data-cars="bento"] .car-grid > *,
  [data-cars="bento"] .car-grid > *:nth-child(6n+1),
  [data-cars="bento"] .car-grid > *:nth-child(6n+2),
  [data-cars="bento"] .car-grid > *:nth-child(6n+3),
  [data-cars="bento"] .car-grid > *:nth-child(6n+4),
  [data-cars="bento"] .car-grid > *:nth-child(6n+5) { grid-column: span 12; }
  .chapter { gap: 16px; }
}


/* =====================================================================
   MOTION: running-text marquee (all templates) + pop-in scroll reveals
   ===================================================================== */

/* Marquee for NON-editorial templates: solid gradient type instead of outline */
body:not([data-fx="brutal"]) .marquee { background: color-mix(in srgb, var(--primary) 6%, var(--bg)); }
body:not([data-fx="brutal"]) .marquee-track span.mq {
  -webkit-text-stroke: 0; color: transparent;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  font-size: clamp(20px, 3.4vw, 40px); letter-spacing: -0.02em;
}
body:not([data-fx="brutal"]) .marquee-track i.dot { border-radius: 2px; width: 10px; height: 10px; }

/* Secondary marquee band (thinner, quieter) */
.marquee.slim { padding: 12px 0; }
.marquee.slim .marquee-track { animation-duration: 44s; }
.marquee.slim span.mq { font-size: clamp(16px, 2.2vw, 26px); }

/* --- Pop-in scroll reveal for cards & photos (staggered, alternating) --- */
.js .pop { opacity: 0; will-change: transform, opacity; }
/* default: rise + scale with a slight rotate for life */
.js .pop { transform: translateY(38px) scale(.92) rotate(-.6deg); }
/* alternate the entry direction so grids feel choreographed, not uniform */
.js .pop.from-left  { transform: translateX(-46px) translateY(26px) scale(.93) rotate(-1deg); }
.js .pop.from-right { transform: translateX(46px)  translateY(26px) scale(.93) rotate(1deg); }
.js .pop.in {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22, 1, .36, 1);
}
/* the image inside a popping card gets a longer, zoomier settle */
.js .pop .photo, .js .pop .video-frame { transform: scale(1.12); transition: transform 1.25s cubic-bezier(.22,1,.36,1); }
.js .pop.in .photo, .js .pop.in .video-frame { transform: scale(1); }

/* --- Parallax drift on car photos while scrolling --- */
.js .parallax .photo, .js .parallax .main { will-change: transform; }

/* --- Hero content stagger on load (rises from below, reference easing) --- */
.js .hero .copy > * { opacity: 0; transform: translateY(44px); animation: heroRise 1s cubic-bezier(.22,1,.36,1) forwards; }
.js .hero .copy > *:nth-child(1) { animation-delay: .10s; }
.js .hero .copy > *:nth-child(2) { animation-delay: .24s; }
.js .hero .copy > *:nth-child(3) { animation-delay: .38s; }
.js .hero .copy > *:nth-child(4) { animation-delay: .52s; }
.js .hero .copy > *:nth-child(5) { animation-delay: .66s; }
.js .hero .copy > *:nth-child(6) { animation-delay: .80s; }
@keyframes heroRise { to { opacity: 1; transform: none; } }
.js .hero .shot { opacity: 0; animation: shotIn 1.15s cubic-bezier(.22,1,.36,1) .34s forwards; }
@keyframes shotIn { from { opacity: 0; transform: translateY(34px) scale(1.06); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .pop, .js .pop .photo, .js .pop .video-frame,
  .js .hero .copy > *, .js .hero .shot {
    opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}

/* =====================================================================
   MODERN FX layer — brings futuristic polish to the classic city templates
   without erasing their identity: gradient section headings, glowing accents,
   sheen on hover, refined shadows and animated hero tint.
   ===================================================================== */

[data-fx="modern"] .section-head h2 {
  background: linear-gradient(92deg, var(--text) 30%, var(--primary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-fx="modern"] .eyebrow { position: relative; padding-left: 26px; }
[data-fx="modern"] .eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent)); transform: translateY(-50%);
}
[data-fx="modern"] .btn:not(.ghost) { box-shadow: 0 6px 22px color-mix(in srgb, var(--primary) 26%, transparent); }
[data-fx="modern"] .btn:not(.ghost):hover { box-shadow: 0 10px 32px color-mix(in srgb, var(--primary) 42%, transparent); }
[data-fx="modern"] .car { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s; }
[data-fx="modern"] .car:hover { transform: translateY(-7px); }
[data-fx="modern"] .car .photo { transition: transform .7s cubic-bezier(.16,1,.3,1); }
[data-fx="modern"] .car:hover .photo { transform: scale(1.05); }

/* animated sheen sweep across a card on hover */
[data-fx="modern"] .car { position: relative; overflow: hidden; }
[data-fx="modern"] .car::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg); opacity: 0; transition: opacity .2s;
}
[data-fx="modern"] .car:hover::after { opacity: 1; animation: sheen .85s ease forwards; }
@keyframes sheen { to { left: 120%; } }

/* glowing accent on the service icons + stat numbers */
[data-fx="modern"] .service .ico { box-shadow: 0 0 22px color-mix(in srgb, var(--primary) 22%, transparent); }
[data-fx="modern"] .why .item .n,
[data-fx="modern"] .hero .stats .n { text-shadow: 0 0 18px color-mix(in srgb, var(--primary) 35%, transparent); }

/* subtle animated tint over the hero so it feels alive */
[data-fx="modern"] .hero { position: relative; }
[data-fx="modern"] .hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(60% 60% at 78% 18%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 62%);
  animation: heroTint 14s ease-in-out infinite alternate;
}
@keyframes heroTint { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-4%, 3%, 0) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { [data-fx="modern"] .hero::after { animation: none; } }

/* =====================================================================
   GALLERY CARD TREATMENTS — clipped frames, index counters, badges,
   kicker overlays, hover zoom and spotlight glow. Base rules are neutral;
   the editorial "Volt" template (data-fx=brutal) shows the full treatment.
   ===================================================================== */

/* Clipped frame: the photo can scale without breaking the card layout */
.car .photo { overflow: hidden; }

/* Spotlight overlay — radial glow that fades in on hover to draw the eye */
.car .photo .spotlight {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .7s ease;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--primary) 22%, transparent), transparent 65%);
}
.car:hover .photo .spotlight { opacity: 1; }

/* Index counter (01 / 11) — technical monospace badge, top-left.
   Editorial-only: on other templates the tag stack already occupies this spot. */
.car .photo .idx { display: none; }
[data-fx="brutal"] .car .photo .idx {
  display: inline-block;
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  padding: 5px 10px; color: color-mix(in srgb, var(--text) 80%, transparent);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 2px;
}
/* index sits above the tag stack; nudge tags to the right side */
.car .tags { z-index: 2; }

/* Kicker / overline — small uppercase tagline over the photo, bottom-left */
.car .photo .kicker {
  position: absolute; bottom: 12px; left: 14px; right: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
/* Editorial (Volt): show the full treatment ------------------------------- */
[data-fx="brutal"] .car .photo .kicker { opacity: .95; transform: none; }
[data-fx="brutal"] .car .photo::after { /* readability scrim under the kicker */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.06) 42%, rgba(0,0,0,.28));
}
[data-fx="brutal"] .car .photo .spotlight,
[data-fx="brutal"] .car .photo .idx,
[data-fx="brutal"] .car .photo .kicker { z-index: 3; }

/* FEATURED badge — volt fill, top-right, mono uppercase */
[data-fx="brutal"] .car .tags { top: 12px; left: auto; right: 12px; }
[data-fx="brutal"] .car .tag.feat {
  background: var(--primary); color: #090a0c; border-radius: 2px;
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; padding: 5px 10px;
}
[data-fx="brutal"] .car .tag.year {
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-mono); letter-spacing: .16em;
}

/* Hover zoom — deliberate, slow scale inside the clipped frame */
[data-fx="brutal"] .car .photo { transition: filter .6s ease, transform .9s cubic-bezier(.22,1,.36,1); }
[data-fx="brutal"] .car:hover .photo { transform: scale(1.06); filter: none; }
[data-fx="brutal"] .car:hover { border-color: color-mix(in srgb, var(--primary) 60%, transparent); }

/* On non-editorial templates the kicker appears on hover only (subtler) */
body:not([data-fx="brutal"]) .car:hover .photo .kicker { opacity: .95; transform: none; }

/* =====================================================================
   FINE-TUNING FIXES
   ===================================================================== */

/* FIX: the nav "Call Now" button was invisible on templates where --text and
   --primary are both dark (e.g. Chandigarh: #111 on #111). The generic
   `header.site nav a` colour rule is more specific than `.btn`, so it overrode
   the button's foreground. Re-assert button colours inside the nav. */
header.site nav a.btn { color: var(--on-hero, #fff); }
header.site nav a.btn.ghost { color: var(--primary); }
header.site nav a.btn.wa { color: #fff; }
/* Chandigarh/mono-style palettes: make the CTA read as a solid dark button */
[data-btn="sharp"] header.site nav a.btn { border: 1px solid var(--primary); }

/* FIX: in the horizontal "list" car layout the line-card rule zeroed the
   horizontal padding, so text sat flush against the photo. Restore indentation
   (higher specificity than the [data-card="line"] rule). */
[data-cars="list"][data-card="line"] .car .info,
[data-cars="list"] .car .info { padding: 20px 24px; }
[data-cars="list"] .car > a { align-self: stretch; }
[data-cars="list"] .car .info h3 { font-size: 21px; }
[data-cars="list"] .car .specs { margin-top: 10px; }
[data-cars="list"] .car .cta { margin-top: 16px; }
/* keep the underline treatment sitting under the whole row, not the text block */
[data-cars="list"][data-card="line"] .car { padding-bottom: 4px; }

@media (max-width: 640px) {
  [data-cars="list"][data-card="line"] .car .info,
  [data-cars="list"] .car .info { padding: 16px 4px 18px; }
}

/* ---- Car photo gallery (thumbnail strip under the main image) ---- */
.gallery-thumbs { display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.gallery-thumbs::-webkit-scrollbar { display:none; }
.gthumb { flex:0 0 84px; height:62px; border-radius:calc(var(--radius) - 6px); border:2px solid transparent;
  background-size:cover; background-position:center; cursor:pointer; padding:0;
  opacity:.75; transition:opacity .2s, border-color .2s, transform .2s; }
.gthumb:hover { opacity:1; transform:translateY(-2px); }
.gthumb.active { opacity:1; border-color:var(--primary); }
@media (max-width:640px){ .gthumb { flex-basis:70px; height:52px; } }