/* ============================================================
   QMM Hero v2 — Design system + scroll-scrubbed video.
   All design tokens are CSS variables (see :root) — swap freely.
   All rules scoped to #qmm-hero so it ports cleanly into WP.
   ============================================================ */

:root {
  /* ---- Colour ---- */
  --qmm-bg:      #0a0a0a;                  /* deep base */
  --qmm-fg:      #f8f5f0;                  /* warm white */
  --qmm-fg-dim:  #8a8580;                  /* secondary text */
  --qmm-accent:  #d4a447;                  /* warm metallic gold — swap for brand */
  --qmm-line:    rgba(248,245,240,0.12);

  /* ---- Type ---- */
  --qmm-display: 'Manrope', 'Helvetica Neue', system-ui, sans-serif;
  --qmm-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* ---- Spacing ---- */
  --qmm-pad:     clamp(1.5rem, 3.5vw, 3rem);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--qmm-bg);
  overflow-x: hidden;
}

#qmm-hero {
  position: relative;
  width: 100%;
  /* Scroll distance. The single biggest knob for scrub pacing.
       600vh  = snappy / brisk
      1200vh = cinematic / deliberate  ← current
      1800vh = very slow / contemplative
     Adjust to taste. */
  height: 1200vh;
  background: var(--qmm-bg);
  color: var(--qmm-fg);
  font-family: var(--qmm-display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

#qmm-hero *, #qmm-hero *::before, #qmm-hero *::after { box-sizing: border-box; }

/* ---------- Stage (pinned by ScrollTrigger) ---------- */

#qmm-hero .qmm-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

#qmm-hero .qmm-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #000;
}

/* Subtle vignette + bottom darken for text legibility */
#qmm-hero .qmm-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 50%, rgba(0,0,0,0.45) 100%),
    linear-gradient(to top, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.10) 40%, rgba(0,0,0,0) 70%);
}

/* ---------- UI chrome (top + bottom bars) ---------- */

#qmm-hero .qmm-ui {
  position: absolute;
  left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--qmm-pad);
  pointer-events: none;
}

#qmm-hero .qmm-ui-top    { top: 0; }
#qmm-hero .qmm-ui-bottom { bottom: 0; align-items: flex-end; }

#qmm-hero .qmm-brand-mark {
  font-family: var(--qmm-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  letter-spacing: 0.08em;
  line-height: 1;
}

#qmm-hero .qmm-brand-sub {
  margin-top: 0.45rem;
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
}

#qmm-hero .qmm-brand-logo {
  display: block;
  height: clamp(34px, 3.6vw, 50px);
  width: auto;
  /* Force the mid-grey source logo to pure white for legibility against busy
     factory frames, plus a soft drop-shadow so it stays readable even when
     the video behind it is bright. Swap the filter for an accent-tint if
     desired (e.g. filter: brightness(0) invert(72%) sepia(40%) ...). */
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.55));
  opacity: 0.95;
}

#qmm-hero .qmm-counter {
  font-family: var(--qmm-mono);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--qmm-fg-dim);
}

#qmm-hero .qmm-counter-num   { color: var(--qmm-fg); font-weight: 500; }
#qmm-hero .qmm-counter-sep   { margin: 0 0.4em; opacity: 0.5; }
#qmm-hero .qmm-counter-total { opacity: 0.7; }

/* ---------- Main text overlay ---------- */

#qmm-hero .qmm-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--qmm-pad);
  /* Leave breathing room above the bottom UI strip */
  padding-bottom: clamp(6rem, 13vh, 10rem);
  max-width: 92vw;
  pointer-events: none;
}

#qmm-hero .qmm-eyebrow {
  font-family: var(--qmm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--qmm-accent);
  margin-bottom: 1.1rem;
  opacity: 0;
  transform: translateY(0.4em);
  white-space: nowrap;
}

#qmm-hero .qmm-text {
  font-family: var(--qmm-display);
  /* Dialled-down from clamp(2.2rem, 6.2vw, 6.2rem). Still expressive
     but no longer eats the viewport. */
  font-size: clamp(1.9rem, 4.6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 0;
  max-width: 22ch;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}

/* Word wrapper. Each word becomes one inline-block box that can't
   break internally, so punctuation ("begins.") stays with its word.
   Line breaks still happen naturally at the text-node spaces
   between word spans. */
#qmm-hero .qmm-text .qmm-word {
  display: inline-block;
  white-space: nowrap;
}

#qmm-hero .qmm-text .qmm-char {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform;
}

/* ---------- Bottom UI: progress + vehicle name ---------- */

#qmm-hero .qmm-progress {
  width: clamp(180px, 22vw, 320px);
  height: 1px;
  background: var(--qmm-line);
  position: relative;
  overflow: hidden;
}

#qmm-hero .qmm-progress-fill {
  position: absolute;
  inset: 0;
  background: var(--qmm-accent);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

#qmm-hero .qmm-vehicle {
  font-family: var(--qmm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
}

/* ---------- Scroll cue ---------- */

#qmm-hero .qmm-cue {
  position: absolute;
  bottom: clamp(2rem, 5vh, 4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  pointer-events: none;
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  animation: qmm-bob 2.4s ease-in-out infinite;
}

#qmm-hero .qmm-cue-arrow {
  font-size: 1.05rem;
  opacity: 0.6;
}

@keyframes qmm-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

@media (prefers-reduced-motion: reduce) {
  #qmm-hero .qmm-cue { animation: none; }
}

/* ---------- Canvas (image-sequence stage) ---------- */

#qmm-hero .qmm-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: #000;
  display: block;
}

/* ---------- Loading overlay ---------- */

#qmm-hero .qmm-loading {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: var(--qmm-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

#qmm-hero .qmm-loading-text {
  font-family: var(--qmm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
}

#qmm-hero .qmm-loading-bar {
  width: 200px;
  height: 1px;
  background: var(--qmm-line);
  position: relative;
  overflow: hidden;
}

#qmm-hero .qmm-loading-fill {
  position: absolute;
  inset: 0;
  background: var(--qmm-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.12s linear;
}

/* ============================================================
   QMM SITE — beyond the hero.
   Site-wide nav, footer, section primitives, cards, vehicle
   template, EV skin, mobile drawer, sticky WhatsApp CTA.

   Convention: every new selector lives under `.qmm-site`
   (added to <body class="qmm-site">) so the existing #qmm-hero
   block stays isolated and the WordPress port stays clean.
   Skin switch: add `qmm-theme-ev` to the <body> for EV pages.
   ============================================================ */

/* ---- Token extensions (later :root wins → adds, doesn't replace) ---- */
:root {
  --qmm-max-w:     1280px;
  --qmm-pad-y:     clamp(5rem, 12vh, 9rem);
  --qmm-radius:    12px;
  --qmm-radius-lg: 20px;
  --qmm-ease:      cubic-bezier(0.22, 1, 0.36, 1);

  --qmm-bg-elev:    #111110;
  --qmm-bg-elev-2:  #161614;
  --qmm-whatsapp:   #25D366;
  --qmm-whatsapp-d: #1da851;

  --qmm-ev-bg:      #04060f;
  --qmm-ev-bg-elev: #0a1228;
  --qmm-ev-fg:      #eef4f7;
  --qmm-ev-fg-dim:  #7e93a6;
  --qmm-ev-blue:    #4dd0e1;
  --qmm-ev-green:   #34d399;
  --qmm-ev-line:    rgba(238,244,247,0.10);
}

/* ---------- Site root ---------- */

body.qmm-site {
  background: var(--qmm-bg);
  color: var(--qmm-fg);
  font-family: var(--qmm-display);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}
body.qmm-site,
body.qmm-site *,
body.qmm-site *::before,
body.qmm-site *::after { box-sizing: border-box; }
body.qmm-site a   { color: inherit; }
body.qmm-site img { display: block; max-width: 100%; }
body.qmm-site h1, body.qmm-site h2, body.qmm-site h3, body.qmm-site h4 {
  margin: 0;
  font-family: var(--qmm-display);
}

/* ---------- Reveal animations (driven by site.js) ---------- */

.qmm-site [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.9s var(--qmm-ease),
    transform 0.9s var(--qmm-ease);
  transition-delay: var(--qmm-reveal-delay, 0s);
  will-change: opacity, transform;
}
.qmm-site [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .qmm-site [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Section + type primitives ---------- */

.qmm-site .qmm-section {
  position: relative;
  padding: var(--qmm-pad-y) var(--qmm-pad);
}
.qmm-site .qmm-section-inner {
  max-width: var(--qmm-max-w);
  margin: 0 auto;
  position: relative;
}
.qmm-site .qmm-section--narrow .qmm-section-inner { max-width: 880px; }
.qmm-site .qmm-section--tight {
  padding-top:    clamp(3rem, 6vh, 5rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}
.qmm-site .qmm-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
  max-width: 64ch;
}
.qmm-site .qmm-section-head--center {
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  text-align: center;
}

.qmm-site .qmm-eyebrow-mono {
  font-family: var(--qmm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--qmm-accent);
  margin: 0 0 1.25rem;
}
.qmm-site .qmm-display {
  font-family: var(--qmm-display);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0 0 1.4rem;
  max-width: 22ch;
}
.qmm-site .qmm-display--xl { font-size: clamp(2.6rem, 7vw, 6.4rem); max-width: 18ch; }
.qmm-site .qmm-display--md { font-size: clamp(1.6rem, 3.4vw, 2.6rem); max-width: 28ch; }
.qmm-site .qmm-lede {
  font-family: var(--qmm-display);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--qmm-fg-dim);
  max-width: 56ch;
  margin: 0 0 2rem;
}
.qmm-site .qmm-meta-mono {
  font-family: var(--qmm-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
}

/* Buttons + links */
.qmm-site .qmm-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--qmm-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-bg);
  background: var(--qmm-accent);
  border: 1px solid var(--qmm-accent);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform  0.4s var(--qmm-ease),
    background 0.3s var(--qmm-ease),
    color      0.3s var(--qmm-ease);
}
.qmm-site .qmm-button:hover { transform: translateY(-2px); }
.qmm-site .qmm-button-arrow {
  display: inline-block;
  transition: transform 0.4s var(--qmm-ease);
}
.qmm-site .qmm-button:hover .qmm-button-arrow { transform: translateX(4px); }
.qmm-site .qmm-button--ghost {
  background: transparent;
  color: var(--qmm-fg);
  border-color: var(--qmm-line);
}
.qmm-site .qmm-button--ghost:hover { border-color: var(--qmm-fg); }
.qmm-site .qmm-button--whatsapp {
  background: var(--qmm-whatsapp);
  border-color: var(--qmm-whatsapp);
  color: #ffffff;
}
.qmm-site .qmm-button--whatsapp:hover {
  background: var(--qmm-whatsapp-d);
  border-color: var(--qmm-whatsapp-d);
}
.qmm-site .qmm-link {
  color: var(--qmm-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--qmm-line);
  transition: border-color 0.3s var(--qmm-ease);
}
.qmm-site .qmm-link:hover { border-color: var(--qmm-accent); }
.qmm-site .qmm-arrow-link {
  font-family: var(--qmm-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.qmm-site .qmm-arrow-link span {
  color: var(--qmm-accent);
  transition: transform 0.4s var(--qmm-ease);
}
.qmm-site .qmm-arrow-link:hover span { transform: translateX(6px); }

/* ---------- Navigation ---------- */

.qmm-site .qmm-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem var(--qmm-pad);
  background: rgba(10,10,10,0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--qmm-line);
}
.qmm-site .qmm-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
}
.qmm-site .qmm-nav-brand img {
  height: clamp(26px, 2.4vw, 34px);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.qmm-site .qmm-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.qmm-site .qmm-nav-links a {
  font-family: var(--qmm-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  text-decoration: none;
  transition: color 0.3s var(--qmm-ease);
  position: relative;
  padding: 0.4rem 0;
}
.qmm-site .qmm-nav-links a:hover,
.qmm-site .qmm-nav-links a.is-active { color: var(--qmm-fg); }
.qmm-site .qmm-nav-links a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--qmm-accent);
}
.qmm-site .qmm-nav-cta { display: inline-flex; align-items: center; gap: 0.5rem; }
.qmm-site .qmm-nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--qmm-line);
  border-radius: 999px;
  cursor: pointer;
  color: var(--qmm-fg);
  padding: 0;
}
.qmm-site .qmm-nav-burger span {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  position: relative;
}
.qmm-site .qmm-nav-burger span::before,
.qmm-site .qmm-nav-burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}
.qmm-site .qmm-nav-burger span::before { top: -5px; }
.qmm-site .qmm-nav-burger span::after  { top:  5px; }

@media (max-width: 880px) {
  .qmm-site .qmm-nav-links  { display: none; }
  .qmm-site .qmm-nav-cta    { display: none; }
  .qmm-site .qmm-nav-burger { display: inline-flex; }
}

/* ---------- Mobile menu drawer ---------- */

.qmm-site .qmm-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10,10,10,0.97);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  padding: 5rem var(--qmm-pad) 2rem;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition:
    opacity   0.5s var(--qmm-ease),
    transform 0.5s var(--qmm-ease);
}
.qmm-site .qmm-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.qmm-site .qmm-menu-close {
  position: absolute;
  top: 1.2rem;
  right: var(--qmm-pad);
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--qmm-line);
  border-radius: 999px;
  color: var(--qmm-fg);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.qmm-site .qmm-menu-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.qmm-site .qmm-menu-links a {
  font-family: var(--qmm-display);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--qmm-fg);
}
.qmm-site .qmm-menu-foot {
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid var(--qmm-line);
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ---------- Sticky mobile WhatsApp CTA ---------- */

.qmm-site .qmm-sticky {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 45;
  display: none;
}
@media (max-width: 880px) { .qmm-site .qmm-sticky { display: flex; } }
.qmm-site .qmm-sticky-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.2rem;
  background: var(--qmm-whatsapp);
  color: #fff;
  border-radius: 999px;
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.qmm-site .qmm-sticky-button svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- WhatsApp picker overlay ---------- */

.qmm-site .qmm-wa-picker {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(10,10,10,0.85);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--qmm-pad);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--qmm-ease);
}
@media (min-width: 720px) { .qmm-site .qmm-wa-picker { align-items: center; } }
.qmm-site .qmm-wa-picker.is-open { opacity: 1; pointer-events: auto; }
.qmm-site .qmm-wa-picker-inner {
  background: var(--qmm-bg-elev);
  border: 1px solid var(--qmm-line);
  border-radius: var(--qmm-radius-lg);
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transform: translateY(20px);
  transition: transform 0.4s var(--qmm-ease);
}
.qmm-site .qmm-wa-picker.is-open .qmm-wa-picker-inner { transform: translateY(0); }
.qmm-site .qmm-wa-picker h3 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.qmm-site .qmm-wa-picker p {
  margin: 0 0 0.5rem;
  color: var(--qmm-fg-dim);
  font-size: 0.92rem;
}
.qmm-site .qmm-wa-option {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  border: 1px solid var(--qmm-line);
  border-radius: var(--qmm-radius);
  text-decoration: none;
  color: var(--qmm-fg);
  transition: border-color 0.3s var(--qmm-ease), background 0.3s var(--qmm-ease);
}
.qmm-site .qmm-wa-option:hover {
  border-color: var(--qmm-whatsapp);
  background: rgba(37,211,102,0.08);
}
.qmm-site .qmm-wa-option strong { font-weight: 800; }
.qmm-site .qmm-wa-option span {
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
}
.qmm-site .qmm-wa-picker-close {
  margin-top: 0.5rem;
  background: transparent;
  border: 1px solid var(--qmm-line);
  color: var(--qmm-fg);
  padding: 0.7rem;
  border-radius: 999px;
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- Vehicle preview cards ---------- */

.qmm-site .qmm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.qmm-site .qmm-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}
.qmm-site .qmm-card-media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--qmm-radius);
  overflow: hidden;
  background: linear-gradient(135deg, #1a1815 0%, #0a0a0a 100%);
  border: 1px solid var(--qmm-line);
  transition:
    transform     0.6s var(--qmm-ease),
    border-color  0.3s var(--qmm-ease);
}
.qmm-site .qmm-card:hover .qmm-card-media {
  transform: translateY(-4px);
  border-color: rgba(248,245,240,0.22);
}
.qmm-site .qmm-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--qmm-ease);
}
.qmm-site .qmm-card:hover .qmm-card-media img { transform: scale(1.05); }
.qmm-site .qmm-card-tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  padding: 0.32rem 0.7rem;
  font-family: var(--qmm-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg);
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--qmm-line);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 2;
}
.qmm-site .qmm-card-tag--ev {
  color: var(--qmm-ev-blue);
  border-color: rgba(77,208,225,0.45);
}
.qmm-site .qmm-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.6rem;
  font-family: var(--qmm-mono);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(212,164,71,0.10) 0%, transparent 60%),
    linear-gradient(135deg, #1a1815 0%, #0a0a0a 100%);
}
.qmm-site .qmm-card-placeholder::before {
  content: '';
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.qmm-site .qmm-card-eyebrow {
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  margin: 0;
}
.qmm-site .qmm-card-name {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.qmm-site .qmm-card-arrow {
  color: var(--qmm-accent);
  transition: transform 0.4s var(--qmm-ease);
  display: inline-block;
}
.qmm-site .qmm-card:hover .qmm-card-arrow { transform: translateX(6px); }

/* ---------- Mutare locator disc ---------- */

.qmm-site .qmm-locator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
@media (max-width: 880px) { .qmm-site .qmm-locator { grid-template-columns: 1fr; } }
.qmm-site .qmm-locator-disc {
  position: relative;
  aspect-ratio: 1;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(212,164,71,0.05) 75%, transparent 76%),
    radial-gradient(circle at 50% 50%, transparent 80%, rgba(212,164,71,0.10) 90%, transparent 91%),
    radial-gradient(circle at 50% 50%, rgba(212,164,71,0.04) 0%, transparent 50%);
  border: 1px solid var(--qmm-line);
}
.qmm-site .qmm-locator-disc::before,
.qmm-site .qmm-locator-disc::after {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid var(--qmm-line);
}
.qmm-site .qmm-locator-disc::after { inset: 30%; opacity: 0.55; }
.qmm-site .qmm-locator-pin {
  position: absolute;
  /* Mutare sits east of centre in Zimbabwe → east of centre on the disc. */
  top: 42%;
  right: 22%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--qmm-accent);
  box-shadow:
    0 0 0 4px rgba(212,164,71,0.18),
    0 0 30px rgba(212,164,71,0.5);
  z-index: 2;
}
.qmm-site .qmm-locator-pin::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--qmm-accent);
  opacity: 0;
  animation: qmm-pulse 2.6s ease-out infinite;
}
@keyframes qmm-pulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.6); opacity: 0;   }
}
.qmm-site .qmm-locator-coords {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  white-space: nowrap;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .qmm-site .qmm-locator-pin::after { animation: none; }
}

/* ---------- Stats row ---------- */

.qmm-site .qmm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: 2.5rem;
  margin-top: 2rem;
  border-top: 1px solid var(--qmm-line);
}
.qmm-site .qmm-stat-num {
  font-family: var(--qmm-display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1;
}
.qmm-site .qmm-stat-num em {
  font-style: normal;
  color: var(--qmm-accent);
  font-weight: 400;
}
.qmm-site .qmm-stat-cap {
  margin-top: 0.7rem;
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
}

/* ---------- Two-up split + figure ---------- */

.qmm-site .qmm-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.qmm-site .qmm-split--start { align-items: start; }
.qmm-site .qmm-split--reverse > :first-child { order: 2; }
@media (max-width: 880px) {
  .qmm-site .qmm-split { grid-template-columns: 1fr; }
  .qmm-site .qmm-split--reverse > :first-child { order: 0; }
}

.qmm-site .qmm-figure {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--qmm-radius-lg);
  overflow: hidden;
  border: 1px solid var(--qmm-line);
  background: linear-gradient(135deg, #1a1815 0%, #0a0a0a 100%);
}
.qmm-site .qmm-figure--wide  { aspect-ratio: 16/10; }
.qmm-site .qmm-figure--tall  { aspect-ratio: 3/4;   }
.qmm-site .qmm-figure img    { width: 100%; height: 100%; object-fit: cover; }
.qmm-site .qmm-figure-tag {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  padding: 0.4rem 0.8rem;
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--qmm-line);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--qmm-fg);
}
.qmm-site .qmm-figure-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.6rem;
  font-family: var(--qmm-mono);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  text-align: center;
  padding: 1rem;
}
.qmm-site .qmm-figure-placeholder::before {
  content: '';
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

/* ---------- Partner cards ---------- */

.qmm-site .qmm-partners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 720px) { .qmm-site .qmm-partners { grid-template-columns: 1fr; } }
.qmm-site .qmm-partner-card {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--qmm-line);
  border-radius: var(--qmm-radius-lg);
  background: var(--qmm-bg-elev);
  transition: border-color 0.3s var(--qmm-ease);
}
.qmm-site .qmm-partner-card:hover { border-color: rgba(248,245,240,0.25); }
.qmm-site .qmm-partner-logo {
  min-height: 48px;     /* baseline; grows for taller (square) logos */
  display: flex;
  align-items: center;
}
.qmm-site .qmm-partner-logo img,
.qmm-site .qmm-partner-logo svg {
  height: 48px;
  width: auto;
  max-width: 220px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
/* Apex Auto is a square (1:1) lockup, while Selected Motors is a wide
   (3:1) wordmark. At the same height they look very different sizes.
   Bumping Apex specifically so the two logos read at roughly equal
   visual weight across every cobrand placement. */
.qmm-site .qmm-partner-logo img[src*="apex-logo"] {
  height: 80px;
  max-width: none;
}
.qmm-site .qmm-partner-logo--text {
  /* Apex Auto fallback: type-only wordmark until logo PNG/SVG arrives */
  font-family: var(--qmm-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--qmm-fg);
}
.qmm-site .qmm-partner-name { font-size: 1.25rem; font-weight: 800; margin: 0; }
.qmm-site .qmm-partner-loc {
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  margin: 0;
}
.qmm-site .qmm-partner-text {
  color: var(--qmm-fg-dim);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}
.qmm-site .qmm-partner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* ---------- Footer ---------- */

.qmm-site .qmm-footer {
  border-top: 1px solid var(--qmm-line);
  padding: clamp(3rem, 6vh, 5rem) var(--qmm-pad) 2.5rem;
  background: var(--qmm-bg);
}
.qmm-site .qmm-footer-inner {
  max-width: var(--qmm-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.qmm-site .qmm-footer-brand img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 1rem;
}
.qmm-site .qmm-footer-tag {
  color: var(--qmm-fg-dim);
  font-size: 0.95rem;
  max-width: 36ch;
  margin: 0;
  line-height: 1.55;
}
.qmm-site .qmm-footer-col h4 {
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  margin: 0 0 1.3rem;
  font-weight: 500;
}
.qmm-site .qmm-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.qmm-site .qmm-footer-col a {
  color: var(--qmm-fg);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s var(--qmm-ease);
}
.qmm-site .qmm-footer-col a:hover { color: var(--qmm-accent); }
.qmm-site .qmm-footer-bottom {
  max-width: var(--qmm-max-w);
  margin: clamp(3rem, 6vh, 5rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--qmm-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--qmm-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
}
.qmm-site .qmm-footer-partners {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.qmm-site .qmm-footer-partners a {
  display: inline-flex;
  align-items: center;
}
.qmm-site .qmm-footer-partners img,
.qmm-site .qmm-footer-partners svg {
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.3s var(--qmm-ease);
}
/* Same parity bump for the footer cobrand strip — Apex square logo
   sized up so it doesn't read as half the size of Selected Motors. */
.qmm-site .qmm-footer-partners img[src*="apex-logo"] {
  height: 40px;
}

/* ============================================================
   Vehicle-page additions (extended):
     · qmm-features    — 3-column safety/exterior/interior lists
     · qmm-swatches    — colour-option chips (no photography needed)
   ============================================================ */

.qmm-site .qmm-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
}
.qmm-site .qmm-feature-col h4 {
  font-family: var(--qmm-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qmm-accent);
  margin: 0 0 1rem;
}
.qmm-site .qmm-feature-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.qmm-site .qmm-feature-col li {
  font-family: var(--qmm-display);
  font-size: 0.93rem;
  color: var(--qmm-fg);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.45;
}
.qmm-site .qmm-feature-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.55em;
  height: 1px;
  background: var(--qmm-accent);
  opacity: 0.6;
}

/* Solid colour swatches — used when we want to show vehicle finishes
   before product photography arrives. Each chip uses --c for the dot. */
.qmm-site .qmm-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
}
.qmm-site .qmm-swatch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--qmm-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.25s, border-color 0.25s;
}
.qmm-site .qmm-swatch:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
}
.qmm-site .qmm-swatch-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c, #fff);
  border: 1px solid rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}
.qmm-site .qmm-swatch-name {
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
}
.qmm-site .qmm-footer-partners a:hover img,
.qmm-site .qmm-footer-partners a:hover svg { opacity: 1; }
.qmm-site .qmm-footer-partners-text {
  font-family: var(--qmm-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  color: var(--qmm-fg);
  opacity: 0.55;
  transition: opacity 0.3s var(--qmm-ease);
}
.qmm-site .qmm-footer-partners a:hover .qmm-footer-partners-text { opacity: 1; }
@media (max-width: 880px) {
  .qmm-site .qmm-footer-inner   { grid-template-columns: 1fr 1fr; }
  .qmm-site .qmm-footer-brand   { grid-column: 1 / -1; }
  .qmm-site .qmm-footer-bottom  { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .qmm-site .qmm-footer-inner { grid-template-columns: 1fr; }
}

/* ---------- Page header (non-homepage pages) ---------- */

.qmm-site .qmm-page-header {
  position: relative;
  padding: clamp(5rem, 12vh, 8rem) var(--qmm-pad) clamp(3rem, 6vh, 5rem);
  border-bottom: 1px solid var(--qmm-line);
  overflow: hidden;
}
.qmm-site .qmm-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(212,164,71,0.10) 0%, transparent 50%);
  pointer-events: none;
}
.qmm-site .qmm-page-header-inner {
  max-width: var(--qmm-max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.qmm-site .qmm-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
}
.qmm-site .qmm-crumbs a {
  color: var(--qmm-fg-dim);
  text-decoration: none;
  transition: color 0.3s var(--qmm-ease);
}
.qmm-site .qmm-crumbs a:hover { color: var(--qmm-fg); }
.qmm-site .qmm-crumbs span    { color: var(--qmm-line); }

/* ---------- Vehicle page hero ---------- */

.qmm-site .qmm-vhero {
  position: relative;
  height: clamp(70vh, 80vh, 90vh);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--qmm-pad);
  overflow: hidden;
  border-bottom: 1px solid var(--qmm-line);
  background: linear-gradient(135deg, #1a1815 0%, #0a0a0a 100%);
}
.qmm-site .qmm-vhero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.qmm-site .qmm-vhero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.qmm-site .qmm-vhero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.30) 50%, rgba(0,0,0,0.40) 100%);
  z-index: 1;
}
.qmm-site .qmm-vhero-content {
  position: relative;
  z-index: 2;
  max-width: var(--qmm-max-w);
  margin: 0 auto;
  width: 100%;
}
.qmm-site .qmm-vhero-tag {
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg);
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--qmm-line);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  margin-bottom: 1.5rem;
}
.qmm-site .qmm-vhero-title {
  font-size: clamp(2.6rem, 9vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0;
}
.qmm-site .qmm-vhero-sub {
  margin-top: 1rem;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: var(--qmm-fg);
  opacity: 0.78;
  max-width: 50ch;
}

/* ---------- Vehicle spec grid ---------- */

.qmm-site .qmm-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--qmm-line);
  border-bottom: 1px solid var(--qmm-line);
}
.qmm-site .qmm-spec {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
  border-right: 1px solid var(--qmm-line);
}
.qmm-site .qmm-spec:last-child { border-right: none; }
.qmm-site .qmm-spec-num {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1;
}
.qmm-site .qmm-spec-num em {
  font-style: normal;
  font-size: 0.5em;
  color: var(--qmm-accent);
  font-weight: 400;
  margin-left: 0.25em;
  letter-spacing: 0;
}
.qmm-site .qmm-spec-label {
  margin-top: 0.6rem;
  font-family: var(--qmm-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
}
@media (max-width: 600px) {
  .qmm-site .qmm-specs { grid-template-columns: 1fr 1fr; }
  .qmm-site .qmm-spec  { border-right: none; border-bottom: 1px solid var(--qmm-line); }
  .qmm-site .qmm-spec:nth-child(odd) { border-right: 1px solid var(--qmm-line); }
}

/* ---------- Gallery ---------- */

.qmm-site .qmm-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.qmm-site .qmm-gallery > * {
  aspect-ratio: 4/3;
  border-radius: var(--qmm-radius);
  overflow: hidden;
  background: linear-gradient(135deg, #1a1815 0%, #0a0a0a 100%);
  border: 1px solid var(--qmm-line);
  position: relative;
}
.qmm-site .qmm-gallery > *:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1.4 / 1;
}
@media (max-width: 720px) {
  .qmm-site .qmm-gallery { grid-template-columns: 1fr 1fr; }
  .qmm-site .qmm-gallery > *:first-child { grid-column: span 2; aspect-ratio: 16/10; }
}

/* ---------- Range filter chips ---------- */

.qmm-site .qmm-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--qmm-line);
}
.qmm-site .qmm-filter button {
  padding: 0.55rem 1rem;
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  background: transparent;
  border: 1px solid var(--qmm-line);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color        0.3s var(--qmm-ease),
    border-color 0.3s var(--qmm-ease);
}
.qmm-site .qmm-filter button:hover { color: var(--qmm-fg); }
.qmm-site .qmm-filter button.is-active {
  color: var(--qmm-bg);
  background: var(--qmm-accent);
  border-color: var(--qmm-accent);
}

/* ---------- Coming-soon vertical list ---------- */

.qmm-site .qmm-coming {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.qmm-site .qmm-coming li {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--qmm-line);
}
.qmm-site .qmm-coming-num {
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--qmm-fg-dim);
}
.qmm-site .qmm-coming-name {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 800;
  margin: 0;
}
.qmm-site .qmm-coming-meta {
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qmm-accent);
}
@media (max-width: 600px) {
  .qmm-site .qmm-coming li { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ---------- Tonal shift (homepage EV moment) ---------- */

.qmm-site .qmm-tonal-shift {
  position: relative;
  padding: clamp(6rem, 14vh, 10rem) var(--qmm-pad);
  background: var(--qmm-ev-bg);
  color: var(--qmm-ev-fg);
  overflow: hidden;
  border-top: 1px solid rgba(77,208,225,0.18);
}
.qmm-site .qmm-tonal-shift::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(77,208,225,0.20) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(52,211,153,0.14) 0%, transparent 55%);
  pointer-events: none;
  animation: qmm-ev-drift 24s ease-in-out infinite alternate;
}
@keyframes qmm-ev-drift {
  from { transform: translate(-2%, 0%) scale(1);     }
  to   { transform: translate(2%,  3%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .qmm-site .qmm-tonal-shift::before { animation: none; }
}
.qmm-site .qmm-tonal-shift .qmm-section-inner { position: relative; z-index: 1; }
.qmm-site .qmm-tonal-shift .qmm-eyebrow-mono  { color: var(--qmm-ev-blue); }
.qmm-site .qmm-tonal-shift .qmm-display       { font-weight: 200; }
.qmm-site .qmm-tonal-shift .qmm-display strong {
  font-weight: 800;
  background: linear-gradient(110deg, var(--qmm-ev-blue) 0%, var(--qmm-ev-green) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.qmm-site .qmm-tonal-shift .qmm-lede { color: rgba(238,244,247,0.78); }
.qmm-site .qmm-tonal-shift .qmm-card-media {
  background: linear-gradient(135deg, #0a1228 0%, #04060f 100%);
  border-color: rgba(238,244,247,0.10);
}
.qmm-site .qmm-tonal-shift .qmm-card-arrow { color: var(--qmm-ev-blue); }
.qmm-site .qmm-tonal-shift .qmm-card-eyebrow { color: var(--qmm-ev-fg-dim); }
.qmm-site .qmm-tonal-shift .qmm-card-name { color: var(--qmm-ev-fg); }
.qmm-site .qmm-tonal-shift .qmm-card-placeholder {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(77,208,225,0.16) 0%, transparent 60%),
    linear-gradient(135deg, #0a1228 0%, #04060f 100%);
  color: var(--qmm-ev-fg-dim);
}
.qmm-site .qmm-electric-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.7rem;
  background: linear-gradient(110deg, var(--qmm-ev-blue) 0%, var(--qmm-ev-green) 100%);
  color: var(--qmm-ev-bg);
  border-radius: 999px;
  font-family: var(--qmm-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  font-weight: 600;
  transition:
    transform   0.4s var(--qmm-ease),
    box-shadow  0.4s var(--qmm-ease);
}
.qmm-site .qmm-electric-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(77,208,225,0.25);
}

/* ---------- EV theme overrides (full-page skin) ---------- */

body.qmm-site.qmm-theme-ev {
  --qmm-bg:        var(--qmm-ev-bg);
  --qmm-bg-elev:   var(--qmm-ev-bg-elev);
  --qmm-fg:        var(--qmm-ev-fg);
  --qmm-fg-dim:    var(--qmm-ev-fg-dim);
  --qmm-accent:    var(--qmm-ev-blue);
  --qmm-line:      var(--qmm-ev-line);
  background: var(--qmm-ev-bg);
  color: var(--qmm-ev-fg);
}
body.qmm-site.qmm-theme-ev .qmm-display       { font-weight: 200; }
body.qmm-site.qmm-theme-ev .qmm-display strong {
  font-weight: 800;
  background: linear-gradient(110deg, var(--qmm-ev-blue) 0%, var(--qmm-ev-green) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
body.qmm-site.qmm-theme-ev .qmm-eyebrow-mono { color: var(--qmm-ev-blue); }
body.qmm-site.qmm-theme-ev .qmm-button {
  background: linear-gradient(110deg, var(--qmm-ev-blue) 0%, var(--qmm-ev-green) 100%);
  color: var(--qmm-ev-bg);
  border-color: transparent;
}
body.qmm-site.qmm-theme-ev .qmm-button--ghost {
  background: transparent;
  color: var(--qmm-ev-fg);
  border-color: var(--qmm-ev-line);
}
body.qmm-site.qmm-theme-ev .qmm-button--whatsapp {
  background: var(--qmm-whatsapp);
  border-color: var(--qmm-whatsapp);
  color: #ffffff;
}
body.qmm-site.qmm-theme-ev .qmm-page-header::before {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(77,208,225,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(52,211,153,0.15) 0%, transparent 55%);
}
body.qmm-site.qmm-theme-ev .qmm-card-media,
body.qmm-site.qmm-theme-ev .qmm-figure {
  background: linear-gradient(135deg, var(--qmm-ev-bg-elev) 0%, var(--qmm-ev-bg) 100%);
}
body.qmm-site.qmm-theme-ev .qmm-card-placeholder,
body.qmm-site.qmm-theme-ev .qmm-figure-placeholder {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(77,208,225,0.14) 0%, transparent 60%),
    linear-gradient(135deg, var(--qmm-ev-bg-elev) 0%, var(--qmm-ev-bg) 100%);
  color: var(--qmm-ev-fg-dim);
}
body.qmm-site.qmm-theme-ev .qmm-stat-num em { color: var(--qmm-ev-blue); }
body.qmm-site.qmm-theme-ev .qmm-vhero {
  background: linear-gradient(135deg, var(--qmm-ev-bg-elev) 0%, var(--qmm-ev-bg) 100%);
}
body.qmm-site.qmm-theme-ev .qmm-vhero::after {
  background: linear-gradient(to top, rgba(4,6,15,0.85) 0%, rgba(4,6,15,0.20) 50%, rgba(4,6,15,0.40) 100%);
}
body.qmm-site.qmm-theme-ev .qmm-locator-disc { display: none; }

/* ---------- EV decorative grid pattern (used on /electric) ---------- */
.qmm-site .qmm-ev-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(77,208,225,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,208,225,0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
  opacity: 0.6;
}

/* ============================================================
   CINEMATIC LAYER — Phase 2.1
   Closes the energy drop between the hero and post-hero sections.
   New primitives extend the original system; nothing gets removed.
   ============================================================ */

/* ---------- Body-scoped: homepage nav auto-hide ----------
   On the homepage, the nav stays invisible while the user is on
   the cinematic exhale section. Once they scroll past it, JS
   adds `.qmm-nav-revealed` and the nav fades in. Keeps the
   transition out of the hero feeling like one continuous breath. */
body.qmm-home .qmm-nav {
  opacity: 0;
  pointer-events: none;
  transition:
    opacity    0.7s var(--qmm-ease),
    transform  0.7s var(--qmm-ease);
  transform: translateY(-12px);
}
body.qmm-home.qmm-nav-revealed .qmm-nav {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ---------- Cinematic full-viewport sections ----------
   `.qmm-cinematic` is a 100vh stage. Used for:
     - The "exhale" first section after the hero pin-out.
     - The bridge moment before the EV strip.
   Background is a frame screenshot, heavily darkened, with a
   radial vignette and a soft top/bottom gradient so headlines
   land in the centre with cinematic weight. */
.qmm-site .qmm-cinematic {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 10vh, 8rem) var(--qmm-pad);
  overflow: hidden;
  isolation: isolate;
  background: var(--qmm-bg);
}
.qmm-site .qmm-cinematic-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.qmm-site .qmm-cinematic-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slight scale + slow drift = ambient breath. Pauses for
     prefers-reduced-motion users via media query below. */
  transform: scale(1.08);
  filter: brightness(0.42) contrast(1.08) saturate(0.85);
  animation: qmm-cinematic-drift 28s ease-in-out infinite alternate;
}
@keyframes qmm-cinematic-drift {
  0%   { transform: scale(1.08) translate(0, 0); }
  100% { transform: scale(1.14) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .qmm-site .qmm-cinematic-bg img { animation: none; }
}
.qmm-site .qmm-cinematic-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 55%, transparent 25%, rgba(10,10,10,0.55) 75%, rgba(10,10,10,0.85) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.15) 35%, rgba(10,10,10,0.85) 100%);
}
.qmm-site .qmm-cinematic-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--qmm-max-w);
  margin: 0 auto;
  text-align: center;
}
.qmm-site .qmm-cinematic-eyebrow {
  font-family: var(--qmm-mono);
  font-size: clamp(0.65rem, 0.8vw, 0.78rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--qmm-accent);
  margin: 0 0 clamp(1.5rem, 3vh, 2.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.qmm-site .qmm-cinematic-eyebrow::before,
.qmm-site .qmm-cinematic-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.qmm-site .qmm-cinematic-headline {
  font-family: var(--qmm-display);
  font-size: clamp(2.4rem, 9vw, 8rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin: 0 auto;
  max-width: 18ch;
  color: var(--qmm-fg);
}
/* Mixed-weight typographic contrast — the "thin" line is the
   atmospheric setup; the "strong" line is the punch. Same
   typeface, two weights, dramatic effect. */
.qmm-site .qmm-thin {
  font-weight: 200;
  color: var(--qmm-fg-dim);
}
.qmm-site .qmm-cinematic-headline strong {
  font-weight: 800;
  color: var(--qmm-fg);
}
.qmm-site .qmm-cinematic-sub {
  margin: clamp(2rem, 4vh, 3rem) auto 0;
  max-width: 48ch;
  font-family: var(--qmm-display);
  font-weight: 200;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  color: var(--qmm-fg-dim);
}
.qmm-site .qmm-cinematic-scroll-hint {
  position: absolute;
  bottom: clamp(2rem, 5vh, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--qmm-mono);
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  opacity: 0.75;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.qmm-site .qmm-cinematic-scroll-hint::after {
  content: '';
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: qmm-scroll-hint 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes qmm-scroll-hint {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .qmm-site .qmm-cinematic-scroll-hint::after { animation: none; }
}

/* ---------- Bridge moment ----------
   A short cinematic pause used between the warm-tone main site
   and the cool-tone EV section. Pure black, single thin line,
   one quiet sentence. Lets the EV palette arrive as a *moment*
   rather than just another section change. */
.qmm-site .qmm-bridge {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(5rem, 12vh, 9rem) var(--qmm-pad);
  background: #000;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.qmm-site .qmm-bridge::before {
  /* Faint horizon glow — readable on its own, but pre-tones the
     EV palette right before the next section blasts in cool. */
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 80vw;
  height: 50vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center bottom, rgba(77,208,225,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.qmm-site .qmm-bridge-line {
  width: 1px;
  height: clamp(60px, 10vh, 100px);
  background: linear-gradient(to bottom, transparent, var(--qmm-fg-dim), transparent);
  margin: 0 auto clamp(2rem, 4vh, 3rem);
  position: relative;
  z-index: 1;
}
.qmm-site .qmm-bridge-eyebrow {
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--qmm-ev-blue);
  margin: 0 0 1.5rem;
  position: relative;
  z-index: 1;
}
.qmm-site .qmm-bridge-headline {
  font-family: var(--qmm-display);
  font-size: clamp(2rem, 6vw, 4.4rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 auto;
  max-width: 22ch;
  color: var(--qmm-fg);
  position: relative;
  z-index: 1;
}
.qmm-site .qmm-bridge-headline strong {
  font-weight: 800;
  background: linear-gradient(110deg, var(--qmm-ev-blue) 0%, var(--qmm-ev-green) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- Bigger display sizes for cinematic sections ----------
   `.qmm-display--mega` is for headlines that need to compete
   with the hero's gravity. Used sparingly — one or two per page. */
.qmm-site .qmm-display--mega {
  font-size: clamp(2.6rem, 9vw, 7.5rem);
  font-weight: 200;
  line-height: 0.95;
  letter-spacing: -0.045em;
  max-width: 16ch;
}
.qmm-site .qmm-display--mega strong {
  font-weight: 800;
}

/* ---------- Section ambient backgrounds ----------
   Subtle gradient base for sections that need atmosphere
   without a full image. Layered radials that hint at depth. */
.qmm-site .qmm-section--ambient {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(212,164,71,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(212,164,71,0.04) 0%, transparent 50%),
    var(--qmm-bg);
}
.qmm-site .qmm-section--dark {
  background: linear-gradient(180deg, var(--qmm-bg) 0%, #050505 100%);
}

/* ---------- Showcase card grid (2-up, large) ----------
   Replaces the 4-up small-card grid for hero "what we build"
   moments. Two big cards per row at desktop, one stacked on
   mobile. Each card carries far more visual weight. */
.qmm-site .qmm-cards--showcase {
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 880px) {
  .qmm-site .qmm-cards--showcase { grid-template-columns: 1fr; }
}
.qmm-site .qmm-cards--showcase .qmm-card-media { aspect-ratio: 4/3; }
.qmm-site .qmm-cards--showcase .qmm-card-name {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.qmm-site .qmm-cards--showcase .qmm-card-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.32em;
}

/* ---------- Card art treatment ----------
   When a card uses a frame screenshot as ambient art (rather
   than literal product photography), darken it heavily and
   layer a brand wordmark + bottom gradient. Reads as "mood",
   not "this is the vehicle". When real photos arrive, swap the
   img src and remove the qmm-card-media--art modifier. */
.qmm-site .qmm-card-media--art img {
  filter: brightness(0.5) contrast(1.05) saturate(0.7);
  transition:
    transform 0.8s var(--qmm-ease),
    filter    0.8s var(--qmm-ease);
}
.qmm-site .qmm-card:hover .qmm-card-media--art img {
  filter: brightness(0.65) contrast(1.05) saturate(0.85);
  transform: scale(1.05);
}
.qmm-site .qmm-card-media--art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%),
    radial-gradient(ellipse at center, transparent 40%, rgba(10,10,10,0.4) 100%);
  pointer-events: none;
  z-index: 1;
}
.qmm-site .qmm-card-wordmark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.qmm-site .qmm-card-wordmark span {
  font-family: var(--qmm-display);
  font-weight: 200;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: 0.04em;
  color: var(--qmm-fg);
  opacity: 0.92;
  text-transform: uppercase;
  /* Subtle outline so the wordmark stays legible over any frame. */
  text-shadow: 0 2px 30px rgba(0,0,0,0.65);
}
.qmm-site .qmm-card-status {
  position: absolute;
  bottom: 0.9rem;
  right: 0.9rem;
  font-family: var(--qmm-mono);
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  opacity: 0.7;
  z-index: 2;
}
body.qmm-site.qmm-theme-ev .qmm-card-wordmark span { color: var(--qmm-ev-fg); }

/* ---------- Cinematic figure (used in splits) ----------
   Bigger, taller, with a frame-art treatment so split sections
   gain visual presence even when real photography is missing. */
.qmm-site .qmm-figure--cinematic {
  aspect-ratio: 5/6;
  border-radius: var(--qmm-radius-lg);
  overflow: hidden;
  position: relative;
}
.qmm-site .qmm-figure--cinematic img {
  filter: brightness(0.55) contrast(1.05) saturate(0.85);
  transition: transform 1.2s var(--qmm-ease), filter 1.2s var(--qmm-ease);
}
.qmm-site .qmm-figure--cinematic:hover img {
  filter: brightness(0.7) contrast(1.05) saturate(0.95);
  transform: scale(1.04);
}
.qmm-site .qmm-figure--cinematic::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, transparent 30%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

/* ---------- Mutare locator — bigger, more atmospheric ----------
   The original disc stays, but with: a much larger max size, a
   slowly-rotating outer ring of dotted ticks (compass feel), and
   a thin radial axis for "this is a map, not just a circle". */
.qmm-site .qmm-locator-disc {
  max-width: min(560px, 70vw);
}
.qmm-site .qmm-locator-disc--lg {
  max-width: min(640px, 80vw);
}
.qmm-site .qmm-locator-disc--lg::before { inset: 10%; }
.qmm-site .qmm-locator-disc--lg::after  { inset: 24%; }
/* Outer ring of dotted ticks — subtle compass. */
.qmm-site .qmm-locator-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      var(--qmm-fg-dim) 0deg 0.4deg,
      transparent 0.4deg 6deg
    );
  -webkit-mask: radial-gradient(circle, transparent 49%, #000 49.5%, #000 50.5%, transparent 51%);
          mask: radial-gradient(circle, transparent 49%, #000 49.5%, #000 50.5%, transparent 51%);
  opacity: 0.45;
  animation: qmm-locator-spin 60s linear infinite;
  pointer-events: none;
}
@keyframes qmm-locator-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .qmm-site .qmm-locator-ring { animation: none; }
}
/* Thin radial cross — implies axes / map. */
.qmm-site .qmm-locator-axis {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  pointer-events: none;
}
.qmm-site .qmm-locator-axis::before,
.qmm-site .qmm-locator-axis::after {
  content: '';
  position: absolute;
  background: var(--qmm-line);
  opacity: 0.7;
}
.qmm-site .qmm-locator-axis::before {
  top: 50%; left: 0; right: 0;
  height: 1px;
  transform: translateY(-50%);
}
.qmm-site .qmm-locator-axis::after {
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}
/* Bigger pin glow when used in the lg variant. */
.qmm-site .qmm-locator-disc--lg .qmm-locator-pin {
  width: 14px;
  height: 14px;
  box-shadow:
    0 0 0 6px rgba(212,164,71,0.18),
    0 0 50px rgba(212,164,71,0.55);
}
/* Standalone label outside the disc, clean typographic anchor. */
.qmm-site .qmm-locator-label {
  margin-top: clamp(2rem, 4vh, 3rem);
  text-align: center;
}
.qmm-site .qmm-locator-label-name {
  font-family: var(--qmm-display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 200;
  letter-spacing: 0.02em;
  color: var(--qmm-fg);
  margin: 0;
}
.qmm-site .qmm-locator-label-coords {
  font-family: var(--qmm-mono);
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  margin: 0.6rem 0 0;
}

/* ---------- Stat row, cinematic variant ----------
   Bigger numbers, mixed weights, more breath. */
.qmm-site .qmm-stats--big .qmm-stat-num {
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  font-weight: 200;
}
.qmm-site .qmm-stats--big .qmm-stat-cap {
  font-size: 0.65rem;
}

/* ---------- Section heading utility ---------- */
.qmm-site .qmm-section-head--big {
  margin-bottom: clamp(3.5rem, 8vh, 6rem);
}
.qmm-site .qmm-display strong {
  font-weight: 800;
}
.qmm-site .qmm-display--thin {
  font-weight: 200;
}
.qmm-site .qmm-display--thin strong {
  font-weight: 800;
}

/* ---------- Atmospheric grain over post-hero content ----------
   A very subtle SVG-noise overlay for cinematic film feel.
   Painted as a fixed background on body when `qmm-grain` class
   is present. Cheap, no JS, no extra HTTP request (data URI). */
body.qmm-site.qmm-grain::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) {
  body.qmm-site.qmm-grain::after { opacity: 0.03; }
}

/* ---------- Cinematic page header ----------
   Used on secondary pages (vehicles, electric, manufacturing,
   facility, etc.) to land a more atmospheric opening than the
   plain-block `.qmm-page-header` default. ~70vh, ambient frame
   image background, mega display headline. */
.qmm-site .qmm-page-header--cinematic {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  padding: clamp(8rem, 16vh, 12rem) var(--qmm-pad) clamp(4rem, 9vh, 7rem);
  border-bottom: 1px solid var(--qmm-line);
  overflow: hidden;
  isolation: isolate;
}
.qmm-site .qmm-page-header--cinematic::before { display: none; } /* drop the default radial */
.qmm-site .qmm-page-header--cinematic .qmm-page-header-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.qmm-site .qmm-page-header--cinematic .qmm-page-header-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  filter: brightness(0.4) contrast(1.08) saturate(0.85);
  animation: qmm-cinematic-drift 32s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .qmm-site .qmm-page-header--cinematic .qmm-page-header-bg img { animation: none; }
}
.qmm-site .qmm-page-header--cinematic .qmm-page-header-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.15) 40%, rgba(10,10,10,0.95) 100%),
    radial-gradient(ellipse at 80% 30%, rgba(212,164,71,0.10) 0%, transparent 60%);
}
body.qmm-site.qmm-theme-ev .qmm-page-header--cinematic .qmm-page-header-bg::after {
  background:
    linear-gradient(180deg, rgba(4,6,15,0.55) 0%, rgba(4,6,15,0.20) 40%, rgba(4,6,15,0.95) 100%),
    radial-gradient(ellipse at 80% 30%, rgba(77,208,225,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(52,211,153,0.14) 0%, transparent 55%);
}

/* ---------- Vehicle hero — ambient-art variant ----------
   Used on the EV detail pages (BAW Bagel, Skyworth) and any
   non-JAC vehicle pages where we don't yet have a real product
   shot. Uses an atmospheric frame as moody background + the
   same brand wordmark layered behind the hero copy. */
.qmm-site .qmm-vhero--art .qmm-vhero-bg {
  background: var(--qmm-bg);
}
.qmm-site .qmm-vhero--art .qmm-vhero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4) contrast(1.05) saturate(0.65);
  transform: scale(1.06);
  animation: qmm-cinematic-drift 32s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .qmm-site .qmm-vhero--art .qmm-vhero-bg img { animation: none; }
}
.qmm-site .qmm-vhero--art .qmm-vhero-wordmark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.qmm-site .qmm-vhero--art .qmm-vhero-wordmark span {
  font-family: var(--qmm-display);
  font-weight: 200;
  font-size: clamp(4rem, 16vw, 14rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--qmm-fg);
  opacity: 0.06;
  white-space: nowrap;
}

/* ============================================================
   v4 — VERTICAL FLOATING NAV (frosted glass, icons → hover-expand)
   Cleaned-up pass: tighter, lighter shadow, no gold-box on brand,
   thinner icons, single separator only.
   ============================================================ */

.qmm-vnav {
  position: fixed;
  left: clamp(0.85rem, 1.6vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.1rem;
  padding: 0.5rem;

  width: 56px;
  overflow: hidden;
  white-space: nowrap;

  background: rgba(14, 14, 14, 0.6);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 26px;
  box-shadow: 0 14px 36px -18px rgba(0, 0, 0, 0.55);

  transition:
    width 0.42s cubic-bezier(.2,.8,.2,1),
    padding 0.42s cubic-bezier(.2,.8,.2,1);
}

/* On the homepage main.js fades the nav in after the loading
   screen completes. Sub-pages keep it visible from page load. */
body.qmm-home .qmm-vnav { opacity: 0; }

.qmm-vnav:hover,
.qmm-vnav:focus-within {
  width: 224px;
}

.qmm-vnav-brand,
.qmm-vnav-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  /* horizontal padding = (container-content-width − icon-width) / 2
     = (40px − 28px) / 2 = 6px ≈ 0.375rem.
     This makes the icon land exactly on the vnav's vertical
     centre line when collapsed, and stays correct when expanded
     (icon stays put, label flows to the right of it). */
  padding: 0.55rem 0.375rem;
  border-radius: 999px;
  color: var(--qmm-fg-dim);
  text-decoration: none;
  transition: background 0.22s, color 0.22s;
  cursor: pointer;
  min-height: 44px;   /* touch target */
}

.qmm-vnav-brand:hover,
.qmm-vnav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--qmm-fg);
}

.qmm-vnav-item.is-active {
  color: var(--qmm-accent);
}

.qmm-vnav-brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  font-family: var(--qmm-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--qmm-fg);
  transition: color 0.22s;
}

.qmm-vnav-brand:hover .qmm-vnav-brand-mark {
  color: var(--qmm-accent);
}

.qmm-vnav-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.qmm-vnav-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke-width: 1.5;
}

.qmm-vnav-label {
  font-family: var(--qmm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.22s 0.06s,
    transform 0.32s cubic-bezier(.2,.8,.2,1) 0.06s;
}

.qmm-vnav:hover .qmm-vnav-label,
.qmm-vnav:focus-within .qmm-vnav-label {
  opacity: 1;
  transform: translateX(0);
}

.qmm-vnav-sep {
  height: 1px;
  margin: 0.3rem 0.7rem;
  background: rgba(255, 255, 255, 0.05);
}

.qmm-vnav-item--accent {
  color: var(--qmm-accent);
  margin-top: 0.15rem;
}

.qmm-vnav-item--accent:hover {
  background: rgba(212, 164, 71, 0.12);
  color: var(--qmm-accent);
}

/* Mobile: vnav becomes a centered horizontal dock at the bottom. */
@media (max-width: 720px) {
  .qmm-vnav {
    left: 50%;
    right: auto;
    top: auto;
    bottom: clamp(0.6rem, 2vh, 1rem);
    transform: translateX(-50%);

    flex-direction: row;
    gap: 0.1rem;
    width: auto;
    padding: 0.4rem 0.5rem;
    overflow: visible;
    border-radius: 24px;
  }
  .qmm-vnav:hover,
  .qmm-vnav:focus-within {
    width: auto;
  }
  .qmm-vnav-label { display: none; }
  .qmm-vnav-sep {
    height: auto;
    width: 1px;
    margin: 0.25rem 0.15rem;
  }
  .qmm-vnav-brand,
  .qmm-vnav-item {
    padding: 0.5rem;
    gap: 0;
  }
  .qmm-vnav-brand-mark,
  .qmm-vnav-icon {
    width: 26px;
    height: 26px;
  }
  .qmm-vnav-icon svg {
    width: 19px;
    height: 19px;
  }
  .qmm-vnav-item[data-vnav="coming-soon"] { display: none; }
  .qmm-vnav-item--accent { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .qmm-vnav,
  .qmm-vnav-label,
  .qmm-vnav-brand,
  .qmm-vnav-item { transition: none; }
}

/* ============================================================
   v4 — CONTEXTUAL CTAs (surface inside the scrub overlay)
   ============================================================ */

#qmm-hero .qmm-cta-row {
  display: flex;
  gap: 0.75rem;
  margin-top: clamp(1.25rem, 2.5vh, 2rem);
  flex-wrap: wrap;
  pointer-events: auto;
}

#qmm-hero .qmm-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;

  padding: 0.85em 1.5em;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);

  color: var(--qmm-fg);
  font-family: var(--qmm-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background 0.3s,
    transform 0.3s,
    border-color 0.3s,
    color 0.3s;

  /* Initial / pre-reveal state */
  opacity: 0;
  transform: translateY(0.4em);
}

#qmm-hero .qmm-cta:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

#qmm-hero .qmm-cta-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}

#qmm-hero .qmm-cta:hover .qmm-cta-arrow {
  transform: translateX(4px);
}

#qmm-hero .qmm-cta--accent {
  background: rgba(212, 164, 71, 0.18);
  border-color: rgba(212, 164, 71, 0.38);
  color: var(--qmm-accent);
}

#qmm-hero .qmm-cta--accent:hover {
  background: rgba(212, 164, 71, 0.3);
  border-color: rgba(212, 164, 71, 0.55);
  color: var(--qmm-fg);
}

@media (max-width: 720px) {
  #qmm-hero .qmm-cta {
    padding: 0.75em 1.2em;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
  }
  /* Push the overlay text up so it doesn't collide with the bottom dock nav */
  #qmm-hero .qmm-overlay {
    padding-bottom: clamp(8rem, 18vh, 12rem);
  }
}

/* ============================================================
   v4 — Adjustments: hide the empty top-left brand slot now
   that the brand lives in the vnav (no-op if not present).
   ============================================================ */

#qmm-hero .qmm-ui-top {
  justify-content: flex-end;   /* counter only, right-aligned */
}

/* Reserve space on the left so the scrub overlay text doesn't sit
   under the floating vnav. = vnav-left-offset + vnav-collapsed-width
   + a breathing gap. Hover-expanded vnav still covers the text
   briefly, which is fine — vnav is z-index 200 and the hover is a
   deliberate user gesture. */
#qmm-hero .qmm-overlay {
  padding-left: calc(clamp(0.85rem, 1.6vw, 1.5rem) + 56px + 1.5rem);
}

/* Mobile: vnav is a bottom dock, not a left rail — so reset the
   overlay's left padding to the normal value. */
@media (max-width: 720px) {
  #qmm-hero .qmm-overlay {
    padding-left: var(--qmm-pad);
  }
}

/* ============================================================
   Vehicle-page additions:
     · qmm-vhero--photo  — lighter darkening for real product shots
     · qmm-color-tiles   — colour-variant gallery
     · qmm-gallery       — interior / detail image grid
     · qmm-spec-list     — key/value spec table
   ============================================================ */

/* Lighter darkening than --art (which was brightness 0.4 for ambient
   factory frames). Real product photos already have good contrast,
   so we only need a soft bottom gradient for text legibility. */
.qmm-site .qmm-vhero--photo .qmm-vhero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.82) contrast(1.02);
  transform: scale(1.03);
}
.qmm-site .qmm-vhero--photo .qmm-vhero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10,10,10,0.20) 0%,
      rgba(10,10,10,0.00) 35%,
      rgba(10,10,10,0.85) 100%);
  pointer-events: none;
}
body.qmm-site.qmm-theme-ev .qmm-vhero--photo .qmm-vhero-bg::after {
  background:
    linear-gradient(180deg,
      rgba(4,6,15,0.25) 0%,
      rgba(4,6,15,0.00) 35%,
      rgba(4,6,15,0.90) 100%);
}

/* Colour tile grid — used by vehicle pages to show available finishes. */
.qmm-site .qmm-color-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
}
.qmm-site .qmm-color-tiles figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.qmm-site .qmm-color-tiles img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #111;
  border-radius: 10px;
  display: block;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.qmm-site .qmm-color-tiles figure:hover img {
  transform: scale(1.02);
}
.qmm-site .qmm-color-tiles figcaption {
  font-family: var(--qmm-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
}

/* Generic image gallery — used for interior shots, detail crops, etc. */
.qmm-site .qmm-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
}
.qmm-site .qmm-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Two-column key/value spec table. Each row is a <div> with <dt> + <dd>. */
.qmm-site .qmm-spec-list {
  display: block;
  margin: clamp(1.5rem, 3vh, 2.5rem) 0 0;
  border-top: 1px solid var(--qmm-line);
  max-width: 820px;
}
.qmm-site .qmm-spec-list > div {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--qmm-line);
}
.qmm-site .qmm-spec-list dt {
  font-family: var(--qmm-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qmm-fg-dim);
  margin: 0;
}
.qmm-site .qmm-spec-list dd {
  font-family: var(--qmm-display);
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--qmm-fg);
  margin: 0;
}
@media (max-width: 720px) {
  .qmm-site .qmm-spec-list > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.85rem 0;
  }
}