/* =====================================================================
   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); }
/* Logo presentation.
   A blanket `background:#fff` used to sit behind EVERY logo. That rescued
   transparent dark marks on dark templates but drew an obvious white border
   around opaque logos that already carry their own background. The plate is now
   chosen from what the image actually is (see uploads.js analyseLogo):
     none  - opaque image, show as-is
     light - transparent with dark ink, needs a pale plate to stay visible
     dark  - transparent with light ink, needs a dark plate                     */
header.site .logo img { height:42px; width:auto; border-radius:8px; display:block; }
header.site .logo img[data-plate="none"] { background:none; padding:0; }
header.site .logo img[data-plate="light"] { background:#fff; padding:4px 6px; }
header.site .logo img[data-plate="dark"] { background:#14161a; padding:4px 6px; }
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) ---- */
/* The search bar is designed to ride UP over the bottom of the hero. That pull
   must only apply when it actually follows the hero: templates with a marquee
   insert it between the two, and an unconditional negative margin then drags the
   search panel over the marquee text instead. Scope by adjacency rather than
   applying it globally. */
.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:0; position:relative; z-index:5; }
.hero + .wrap .searchbar { margin-top:-42px; }
.marquee + .wrap .searchbar { margin-top:26px; }
.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;
  /* Size must account for the DEALER NAME LENGTH, not just the viewport. A fixed
     17vw fits "ROYAL CARS" but overflows "SPEEDLINE MOTORS", which then gets
     clipped by the wrapper's overflow:hidden. --wm-div is set inline per tenant
     (roughly 0.66 x longest word length) so the longest word always fits the
     1140px content box. */
  font-size: min(clamp(44px, 17vw, 260px), calc(min(100vw - 40px, 1140px) / var(--wm-div, 4)));
  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; } }