/* ═══════════════════════════════════════════════════════════
   iCAUR V27 Model Page — 3D Landing Design
   Mirrors the markclaude React app in vanilla CSS
   ═══════════════════════════════════════════════════════════ */

/* ─── Page reset ─────────────────────────────────────────── */
.v27-page {
  --px: clamp(24px, 5vw, 80px);
  --dark: #080503;
  --orange: #F37021;
  --cream: #F5EFE5;
  font-family: 'GothamMedium', 'Gotham', 'Montserrat', sans-serif;
  background: #ffffff; /* white base so overview right side shows white behind car */
}

/* ─── 3D Canvas ───────────────────────────────────────────── */
#v27-canvas-wrap {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.5s ease;
  transform: translateY(-9vh);
}
#v27-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ─── Line clip / reveal util ────────────────────────────── */
.line-clip { display: block; overflow: hidden; }
.line-inner { display: block; }

/* ─── Unified section headlines ──────────────────────────── */
.v27-ext-h2, .v27-brand-h2, .eg-h2, .v27-about-h2, .v27-gallery-h2,
.v27-interior-h2, .v27-tech-h2, .v27-safety-h2, .v27-charging-h2,
.v27-trims-h2 {
  font-size: clamp(2.2rem, 3.8vw, 3.6rem) !important;
  font-weight: 700 !important;
  line-height: .96 !important;
  letter-spacing: -.03em !important;
  color: #1F0F08 !important;
}

/* ══════════════════════════════════════════════════════
   HERO — centered 3D model layout
══════════════════════════════════════════════════════ */
#v27-hero {
  position: relative;
  height: 160vh;
  background: transparent;
}
/* Speed-lines road — fixed behind the 3D car (z0 < canvas-wrap z1).
   Lives in the OVERVIEW section only; js/v27.js drives the opacity from
   that section's live geometry. The mask keeps the lanes off the copy
   column on the left, so only the car half of the split reads as road. */
.v27-hyper-wrap {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; background: transparent; opacity: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 30%);
          mask-image: linear-gradient(to right, transparent 4%, #000 30%);
}
.v27-hyper-wrap canvas { display: block; width: 100%; height: 100%; }
.v27-hero-sticky {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
  /* dark fallback so the copy stays readable if the video can't load */
  background: #0D0B09;
  z-index: 10;
  /* all hero copy stacks at the BOTTOM of the video frame */
  display: flex; flex-direction: column; justify-content: flex-end;
}

/* Full-bleed background video */
.v27-hero-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  display: block; pointer-events: none;
}
/* Black gradient rising from the bottom — guarantees copy contrast */
.v27-hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.72) 18%,
    rgba(0,0,0,.38) 40%,
    rgba(0,0,0,.10) 62%,
    rgba(0,0,0,0)   80%);
}

/* Copy block — bottom-anchored, white on the scrim */
.v27-hero-top {
  position: relative; z-index: 6;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 var(--px); text-align: center;
  margin-bottom: clamp(16px, 2.4vh, 28px);
  pointer-events: none;
}
/* V27 model badge */
.v27-model-badge {
  opacity: 0; margin-bottom: clamp(18px, 2.6vh, 28px);
  display: flex; align-items: center; justify-content: center;
}
.v27-model-logo-img {
  width: clamp(140px, 18vw, 240px); height: auto; display: block;
}
/* Hero headline — single bold line */
.v27-hero-h1 {
  font-size: clamp(2rem, 5.2vw, 5rem);
  font-weight: 700; line-height: 1; letter-spacing: -.04em;
  margin: 0 0 clamp(12px, 1.6vh, 18px); color: #fff;
  white-space: nowrap;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.v27-hero-h1 em { font-style: normal; color: var(--orange); }
/* Short paragraph */
.v27-hero-sub {
  font-size: clamp(.88rem, 1.05vw, .98rem); font-weight: 400;
  line-height: 1.7; color: rgba(255,255,255,.82); max-width: 40ch;
  margin: 0; opacity: 0;
  text-shadow: 0 1px 16px rgba(0,0,0,.4);
}
/* CTA — sits under the copy at the bottom of the video */
.v27-hero-bottom {
  position: relative; z-index: 6;
  margin-bottom: clamp(56px, 9vh, 110px);
  display: flex; justify-content: center;
  pointer-events: all; opacity: 0;
}

/* V27 logo inline in headline */
.v27-model-logo-inline {
  height: .72em;
  width: auto;
  display: inline-block;
  vertical-align: baseline;
  margin-left: .12em;
  position: relative;
  top: .05em;
  /* white to match the headline over the video */
  filter: brightness(0) invert(1);
}
.v27-hero-reserve-btn { pointer-events: all; }

/* ── Hero particles background (React Bits <Particles /> port) ── */
/* CTA buttons */
.v27-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 100px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; transition: all .22s;
}
.v27-cta-btn--dark {
  background: var(--orange); color: #fff; border: 2px solid var(--orange);
}
.v27-cta-btn--dark:hover {
  background: #d85a0f; border-color: #d85a0f;
  box-shadow: 0 10px 32px rgba(243,112,33,.35);
}
.v27-cta-btn--light {
  background: transparent; color: rgba(255,255,255,.85); border: 2px solid rgba(255,255,255,.3);
}
.v27-cta-btn--light:hover {
  border-color: rgba(255,255,255,.6); color: #fff;
}
.v27-cta-btn--outline {
  background: transparent; color: #1F0F08; border: 2px solid #1F0F08;
}
.v27-cta-btn--outline:hover {
  background: #1F0F08; color: #fff;
  box-shadow: 0 10px 28px rgba(31,15,8,.18);
}
/* Scroll cue */
.v27-scroll-cue {
  position: absolute; bottom: 18px; left: 50%; z-index: 8;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: rgba(35,24,21,.32);
  font-size: .58rem; letter-spacing: .28em; text-transform: uppercase;
  background: none; border: none; cursor: pointer;
}
.v27-scroll-cue svg { animation: v27ScrollBounce 1.9s ease-in-out infinite; }
@keyframes v27ScrollBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ══════════════════════════════════════════════════════
   OVERVIEW (front-view rotate on scroll)
══════════════════════════════════════════════════════ */
#v27-overview {
  position: relative; z-index: 2;
  height: 200vh;
  background: transparent; /* right half must stay transparent to show 3D canvas */
}
.v27-overview-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: stretch;
  overflow: hidden;
}
.v27-overview-inner {
  width: 100%; display: grid;
  grid-template-columns: 44% 56%; gap: 0;
  align-items: stretch;
}
.v27-overview-left {
  background: transparent;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(100px, 12vh, 130px) clamp(32px, var(--px), 72px) clamp(60px, 8vh, 90px) var(--px);
}
.v27-overview-right {
  background: transparent;
  pointer-events: none;
}
.v27-ov-cta {
  align-self: flex-start;
  width: auto !important;
}
.v27-ov-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--orange); letter-spacing: .28em;
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  margin-bottom: clamp(16px, 2vh, 22px);
}
.v27-ov-h2 {
  font-size: clamp(2.2rem, 3.8vw, 3.6rem); font-weight: 700;
  line-height: .96; letter-spacing: -.03em; color: #1F0F08;
  margin-bottom: clamp(20px, 2.6vh, 28px);
}
.v27-ov-para {
  font-size: clamp(.82rem, 1.05vw, .94rem); line-height: 1.82;
  color: rgba(35, 24, 21, .6);
  margin-bottom: clamp(28px, 3.5vh, 38px);
}
.v27-ov-divider {
  width: 100%; height: 1px;
  background: rgba(35, 24, 21, .1);
  margin-bottom: clamp(24px, 3vh, 32px);
}
.v27-ov-price-wrap {
  display: flex; flex-direction: column; gap: 5px;
  margin-bottom: clamp(28px, 3.5vh, 36px);
}
.v27-ov-price-label {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(35, 24, 21, .4);
}
.v27-ov-price {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 700; letter-spacing: -.03em; color: #1F0F08; line-height: 1;
}
.v27-ov-price em {
  font-style: normal; font-size: .42em; font-weight: 500;
  color: rgba(35, 24, 21, .42); margin-left: 6px;
}

/* ══════════════════════════════════════════════════════
   EXTERIOR — 360 Experience (sticky 3D drag section)
══════════════════════════════════════════════════════ */
#v27-exterior {
  position: relative; z-index: 5;
  height: 200vh; background: transparent;
}
.v27-ext-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.v27-ext-header {
  flex-shrink: 0; position: relative; z-index: 2;
  padding: clamp(80px,11vh,110px) var(--px) clamp(20px,2.5vh,32px);
  display: flex; justify-content: space-between; align-items: flex-start;
  background: transparent;
}
.v27-ext-h2 em { font-style: normal; color: var(--orange); }
.v27-ext-eyebrow {
  color: var(--orange); letter-spacing: .32em;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  margin-bottom: 8px; opacity: 0;
}
.v27-ext-window {
  flex: 1; background: transparent; position: relative; min-height: 0;
}
.v27-ext-glow { display: none; }
.v27-ext-drag-hint { display: none; }
.v27-swatches-wrap {
  flex-shrink: 0; background: transparent;
  padding: clamp(14px,2vh,20px) var(--px); position: relative; z-index: 2;
}
.v27-swatches {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 2vw, 26px); flex-wrap: wrap;
}
.v27-swatch {
  background: transparent; border: none; padding: 0; cursor: pointer;
  outline: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform .3s ease; opacity: 0;
  position: relative;
}
/* Loading spinner while a paint's GLB is still downloading */
.v27-swatch.is-loading img { opacity: .3; }
.v27-swatch.is-loading::after {
  content: ''; position: absolute; left: 50%; top: 40%;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(35,24,21,.18); border-top-color: var(--orange);
  animation: v27SwatchSpin .7s linear infinite;
}
@keyframes v27SwatchSpin {
  from { transform: translate(-50%,-50%) rotate(0);      }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
.v27-swatch img {
  width: 76px; height: auto; object-fit: contain;
  opacity: .72; display: block; user-select: none;
  transition: width .35s cubic-bezier(.34,1.2,.64,1), opacity .3s, filter .3s;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
}
.v27-swatch.active img {
  width: 110px; opacity: 1;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.28));
}
.v27-swatch-name {
  font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(35,24,21,.45); transition: color .3s;
}
.v27-swatch.active .v27-swatch-name { color: #231815; }

/* Mobile 360: the 7 swatches used to wrap into 3 rows and climb over
   the 3D car. Collapse them into a single horizontal-scroll strip on a
   frosted band pinned at the bottom, so the car has clear room above. */
@media (max-width: 768px) {
  .v27-ext-header { padding: clamp(64px,9vh,84px) var(--px) 10px; }
  .v27-swatches-wrap {
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(247,245,241,.82);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -8px 24px rgba(0,0,0,.06);
  }
  .v27-swatches {
    flex-wrap: nowrap; justify-content: flex-start;
    gap: 14px; padding: 0 16px 2px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .v27-swatches::-webkit-scrollbar { display: none; }
  .v27-swatch { flex: 0 0 auto; scroll-snap-align: center; }
  .v27-swatch img { width: 54px; }
  .v27-swatch.active img { width: 70px; }
  .v27-swatch-name { font-size: .5rem; letter-spacing: .06em; white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════
   EXTERIOR DESIGN — photo carousel (replaces brand)
══════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
   EXTERIOR GALLERY
══════════════════════════════════════════════════════ */
#exterior-gallery {
  position: relative; z-index: 5; background: #F5EFE5;
  padding: clamp(60px,8vh,100px) 0 0; overflow: hidden;
}

/* DotGrid canvas — fixed BEHIND the 3D car (z0 < canvas-wrap z1),
   faded in only while the 360 section is on screen */
.eg-dotgrid-wrap {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0;
  transition: opacity .5s ease;
}
.eg-dotgrid-wrap.is-on { opacity: 0.35; }
.eg-dotgrid-wrap canvas { display: block; width: 100%; height: 100%; }

/* Header */
.eg-header {
  position: relative; z-index: 1;
  padding: 0 var(--px); margin-bottom: 16px;
}
.eg-eyebrow {
  color: var(--orange) !important; letter-spacing: .32em !important;
  margin-bottom: 16px; display: inline-flex; align-items: center;
}
.eg-eyebrow-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin: 0 .65em; opacity: .55;
  transform: translateY(-1px);
}
.eg-h2 {
  font-size: clamp(2rem,4vw,3.5rem) !important; font-weight: 500 !important;
  line-height: 1.08 !important; letter-spacing: -.02em !important;
  color: #1F0F08 !important; margin: 0;
}

/* ══════════════════════════════════════════════════════
   ABOUT (VIDEO)
══════════════════════════════════════════════════════ */
#v27-about {
  position: relative; z-index: 5;
  height: 300vh; background: var(--dark);
}
.v27-about-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.v27-about-intro {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: var(--px);
}
.v27-about-eyebrow {
  color: var(--orange); letter-spacing: .32em; font-size: .7rem;
  font-weight: 700; text-transform: uppercase; margin-bottom: 20px;
}
.v27-about-h2 {
  font-size: clamp(2.4rem,6vw,5.5rem); font-weight: 500;
  line-height: .95; letter-spacing: -.03em; color: #fff;
  max-width: 12ch;
}
.v27-video-card {
  position: absolute; z-index: 3; border-radius: 16px; overflow: hidden;
  will-change: transform, width, height, top, left;
}
.v27-video-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.v27-about-stats {
  position: absolute; bottom: clamp(32px,5vh,60px); left: var(--px);
  z-index: 8; display: flex; gap: clamp(24px,4vw,48px);
}
.v27-about-stat-val {
  font-size: clamp(2rem,4vw,3.5rem); font-weight: 700; color: #fff;
  line-height: 1; letter-spacing: -.03em;
}
.v27-about-stat-label {
  font-size: .65rem; color: rgba(255,255,255,.45); letter-spacing: .14em;
  text-transform: uppercase; margin-top: 4px;
}

/* ══════════════════════════════════════════════════════
   GALLERY
══════════════════════════════════════════════════════ */
#v27-gallery {
  position: relative; z-index: 5; background: var(--cream);
  padding: clamp(80px,10vh,120px) 0;
}
.v27-gallery-head {
  padding: 0 var(--px); margin-bottom: clamp(40px,6vh,60px);
}
.v27-gallery-eyebrow {
  color: var(--orange); letter-spacing: .32em; font-size: .7rem;
  font-weight: 700; text-transform: uppercase; margin-bottom: 12px;
}
.v27-gallery-h2 {
  font-size: clamp(2rem,4vw,3.5rem); font-weight: 500; line-height: 1.05; color: #1F0F08;
}
.v27-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 8px; padding: 0 var(--px);
}
.v27-gallery-item {
  border-radius: 16px; overflow: hidden; cursor: zoom-in;
  aspect-ratio: 4/3; position: relative;
}
.v27-gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease; display: block;
}
.v27-gallery-item:hover img { transform: scale(1.04); }
/* ─── Edge Gallery (landing page style) ──────────────── */
/* 2-col grid; cards sweep in from alternating sides (GSAP) */
.v27-eg-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 28px);
  padding: 0 var(--px);
  margin-top: clamp(32px, 5vh, 64px);
}
.v27-eg-card {
  position: relative; display: block; padding: 0; border: none;
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: 16px; overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 16px 40px rgba(35, 24, 21, .18);
  will-change: transform, opacity;
  cursor: none;
}
.v27-eg-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  user-select: none; will-change: transform;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.v27-eg-card:hover img { transform: scale(1.06); }
/* Hover tag — image name, white on orange, 6px corners */
.v27-eg-tag {
  position: absolute; left: 16px; bottom: 16px;
  background: var(--orange); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase;
  padding: 8px 14px; border-radius: 6px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.v27-eg-card:hover .v27-eg-tag,
.v27-eg-card:focus-visible .v27-eg-tag { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) {
  .v27-eg-grid { grid-template-columns: 1fr; }
}

/* ─── Lightbox ───────────────────────────────────────── */
.v27-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8,4,2,.97);
  display: flex; align-items: center; justify-content: center;
  clip-path: circle(0% at 50% 50%);
  pointer-events: none;
  will-change: clip-path;
}
.v27-lightbox.lb-open { pointer-events: all; }

.v27-lb-stage {
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; width: 90vw; max-width: 980px;
  will-change: transform, opacity;
}
.v27-lb-frame {
  aspect-ratio: 10/6; max-height: 72vh; width: 100%;
  border-radius: 16px; overflow: hidden; position: relative;
  background: #0d0a08;
}
.v27-lb-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  will-change: transform;
}
.v27-lb-caption {
  font-size: clamp(.9rem,1.5vw,1.1rem); font-weight: 500;
  color: rgba(250,246,238,.78); letter-spacing: .04em;
  margin: 0; text-align: center;
}

/* close button */
.v27-lb-close {
  position: absolute; top: 24px; right: 24px;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, transform .3s; z-index: 2;
}
.v27-lb-close:hover { background: rgba(255,255,255,.22); transform: rotate(90deg); }

/* prev / next nav */
.v27-lb-btn {
  position: absolute; top: 50%; width: 56px; height: 56px; border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, transform .2s; z-index: 2;
}
.v27-lb-btn--prev { left: 24px; }
.v27-lb-btn--next { right: 24px; }
.v27-lb-btn:hover { background: rgba(255,255,255,.22); }
.v27-lb-btn--prev:hover { transform: translateY(-50%) translateX(-3px); }
.v27-lb-btn--next:hover { transform: translateY(-50%) translateX(3px); }
.v27-lb-btn svg { pointer-events: none; }

/* ══════════════════════════════════════════════════════
   MARQUEE TICKER
══════════════════════════════════════════════════════ */
.v27-marquee-wrap {
  position: relative; z-index: 5; overflow: hidden;
  padding: 0; background: var(--cream);
}
.v27-marquee-ribbon {
  display: flex; align-items: center; overflow: hidden;
  padding: 14px 0; white-space: nowrap;
}
.v27-marquee-ribbon--a {
  background: var(--orange); transform: rotate(-3.5deg) scaleX(1.08);
  margin-bottom: 6px;
}
.v27-marquee-ribbon--b {
  background: #009FE8; transform: rotate(-1.8deg) scaleX(1.06);
}
.v27-marquee-track {
  display: flex; animation: v27Marquee 22s linear infinite;
  font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.v27-marquee-ribbon--b .v27-marquee-track {
  animation-direction: reverse; animation-duration: 28s;
}
.v27-marquee-item { padding: 0 clamp(16px,2vw,28px); }
@keyframes v27Marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Exterior carousel marquee variant ── */
.v27-marquee-wrap--ext {
  background: var(--cream);
  overflow: visible;
  clip-path: inset(-14vw 0);
  padding: clamp(48px, 7vh, 80px) 0;
}
.v27-marquee-wrap--ext .v27-marquee-ribbon {
  padding: 32px 0;
}
.v27-marquee-wrap--ext .v27-marquee-ribbon--a {
  background: var(--orange);
  border-top: none;
  border-bottom: none;
  margin-bottom: 10px;
}
.v27-marquee-wrap--ext .v27-marquee-ribbon--a .v27-marquee-track {
  color: #fff;
}
.v27-marquee-wrap--ext .v27-marquee-ribbon--b {
  background: #00528E;
  border-top: none;
  border-bottom: none;
}
.v27-marquee-wrap--ext .v27-marquee-ribbon--b .v27-marquee-track {
  color: #fff;
}
.v27-marquee-wrap--ext .v27-marquee-track {
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
}
.v27-marquee-wrap--ext .v27-marquee-item {
  padding: 0 clamp(24px, 3vw, 44px);
}

/* ══════════════════════════════════════════════════════
   INTERIOR CAROUSEL
══════════════════════════════════════════════════════ */
#v27-interior {
  position: relative; z-index: 5; background: var(--cream);
  padding: clamp(80px,10vh,120px) 0 clamp(60px,8vh,100px); overflow: hidden;
}
.v27-interior-head { padding: 0 var(--px); margin-bottom: 48px; opacity: 0; }
.v27-interior-eyebrow {
  color: var(--orange); letter-spacing: .32em; font-size: .7rem;
  font-weight: 700; text-transform: uppercase; margin-bottom: 16px;
  display: inline-flex; align-items: center;
}
.v27-interior-h2 {
  font-size: clamp(2rem,4vw,3.5rem); font-weight: 500; line-height: 1.08; color: #1F0F08;
}
.v27-interior-h2 em { font-style: normal; color: var(--orange); }
.v27-carousel-outer { position: relative; padding: 14px 0 22px; overflow: hidden; }
.v27-carousel-track {
  display: flex; gap: 10px; will-change: transform;
}
.v27-carousel-slide {
  flex-shrink: 0; border-radius: 16px; overflow: hidden;
  background: #EDE5DA; position: relative;
  box-shadow: 0 32px 100px rgba(35,24,21,.10), 0 2px 8px rgba(35,24,21,.05);
  transition: opacity .38s, transform .38s;
}
.v27-carousel-slide img {
  width: 100%; height: clamp(300px,54vw,660px); object-fit: cover; display: block;
}
/* Slide tag — same orange chip as the exterior gallery's .v27-eg-tag */
.v27-carousel-slide-label {
  position: absolute; left: 16px; bottom: 16px; z-index: 5;
  background: var(--orange); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase;
  padding: 8px 14px; border-radius: 6px;
}
.v27-carousel-vignette {
  position: absolute; bottom: 0; left: 0; right: 0; height: 28%;
  background: linear-gradient(to top, rgba(10,6,4,.38), transparent);
  pointer-events: none; z-index: 3;
}
.v27-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(10,6,4,.5); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; outline: none; transition: background .22s;
}
.v27-carousel-arrow:hover { background: rgba(35,24,21,.8); }
.v27-carousel-arrow--prev { left: 100px; }
.v27-carousel-arrow--next { right: 100px; }
/* Hotspot */
.v27-hotspot {
  position: absolute; transform: translate(-50%,-50%); z-index: 4;
}
.v27-hotspot-ping {
  position: absolute; top: 50%; left: 50%; width: 18px; height: 18px;
  margin: -9px 0 0 -9px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.85);
  animation: v27HsPing 2.4s ease-out infinite; pointer-events: none;
}
.v27-hotspot-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.88); border: 1.5px solid rgba(255,255,255,.98);
  /* the brand arrow stays the cursor everywhere — no native pointer icon
     swap on hover (js/main.js scales the arrow instead) */
  cursor: none; position: relative; z-index: 2;
  box-shadow: 0 0 12px rgba(255,255,255,.7), 0 0 28px rgba(255,255,255,.35);
  animation: v27HsDotGlow 2.6s ease-in-out infinite;
  transition: transform .2s, background .2s;
}
.v27-hotspot-dot::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #231815; display: block;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.v27-hotspot-dot:hover, .v27-hotspot-dot.active {
  animation: none; transform: scale(1.4); background: #fff;
  box-shadow: 0 0 16px rgba(255,255,255,1), 0 0 40px rgba(255,255,255,.7);
}
/* The dot whose popup is open reads orange, so it's obvious which
   hotspot the visible card belongs to */
.v27-hotspot-dot.active::after { background: var(--orange); }
.v27-annot-card {
  position: absolute; width: 222px; border-radius: 16px; overflow: hidden;
  background: #F5EFE5; z-index: 10;
  box-shadow: 0 18px 52px rgba(35,24,21,.22), 0 2px 8px rgba(35,24,21,.10);
}
.v27-annot-card img { width: 100%; height: 128px; object-fit: cover; display: block; }
.v27-annot-body { padding: 10px 14px 13px; }
.v27-annot-title { font-size: .76rem; font-weight: 600; color: #1F0F08; margin-bottom: 4px; }
.v27-annot-desc { font-size: .66rem; line-height: 1.55; color: rgba(35,24,21,.6); }
.v27-annot-close {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.2);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  z-index: 2; outline: none;
}
@keyframes v27HsPing {
  0%   { transform: scale(1);   opacity: .75; }
  65%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}
@keyframes v27HsDotGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6), 0 0 8px rgba(255,255,255,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,0), 0 0 22px rgba(255,255,255,.9); }
}

/* ══════════════════════════════════════════════════════
   TECH — CarTechSection port
   Sticky fluid headline + scroll-over tech items
══════════════════════════════════════════════════════ */
#v27-tech {
  position: relative; z-index: 5; background: #0D0B09;
}

/* Sticky dark headline */
.v27-ct-sticky {
  position: sticky; top: 0; height: 100vh; z-index: 1;
  overflow: hidden; background: #0D0B09;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* optical lift: headline sits a touch above geometric center, which
     also shortens the black lead-in while the section scrolls into view */
  padding-bottom: clamp(64px, 14vh, 160px);
}

/* LiquidEther canvas wrapper — exact landing-page setup */
.v27-ct-liquid-bg {
  position: absolute; inset: 0; z-index: 0; opacity: 0.7;
  overflow: hidden;
}
.v27-ct-liquid-bg canvas { width: 100% !important; height: 100% !important; display: block; }

/* Dark radial vignette */
.v27-ct-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%, transparent 20%, rgba(13,11,9,.82) 100%),
    linear-gradient(to bottom, rgba(13,11,9,.5) 0%, transparent 25%, transparent 75%, rgba(13,11,9,.6) 100%);
}

/* Headline copy — centered over the fluid background.
   Kept NARROWER than the tech cards' image column (1.2fr of the
   1280px grid ≈ 440px) so the passing image fully covers it —
   no text peeking out of the sides */
.v27-ct-head {
  position: relative; z-index: 2; text-align: center;
  width: 100%; max-width: min(34vw, 420px); margin: 0 auto;
}
.v27-ct-eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
  /* --amber is defined globally in styles.css :root (same #F37021 as --orange,
     which is scoped to .v27-page and undefined on the innovation page) */
  color: var(--amber); margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
/* Brand dashes — same mark as the sitewide .eyebrow */
.v27-ct-eyebrow::before {
  content: '';
  flex-shrink: 0;
  width: 34px; height: 9px;
  background: url('../assets/images/dashes.svg') no-repeat center / contain;
}
/* Dot separator used inside eyebrows (was an unstyled, invisible span) */
.eyebrow-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .55; flex-shrink: 0;
}
.v27-ct-line-wrap {
  position: relative; overflow: hidden; display: block; margin-bottom: 2px;
}
.v27-ct-line1 {
  font-weight: 500; font-size: clamp(1.2rem,2vw,1.9rem); line-height: 1.1;
  letter-spacing: -.01em; color: #fff; opacity: 0;
  white-space: nowrap;
}
.v27-ct-line2 {
  font-weight: 500; font-size: clamp(1.2rem,2vw,1.9rem); line-height: 1.1;
  letter-spacing: -.01em; color: #555859; opacity: 0;
  white-space: nowrap;
}
.v27-ct-mask {
  position: absolute; inset: 0;
}
.v27-ct-sub {
  font-size: clamp(.82rem,1.05vw,1rem); color: rgba(255,255,255,.55);
  max-width: 380px; margin: 0 auto; line-height: 1.75; font-weight: 400;
  opacity: 0; transform: translateY(8px);
}

/* Tech items — scroll over the sticky */
.v27-ct-item {
  height: 100vh; position: relative; z-index: 2;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.v27-ct-item-inner {
  display: grid; grid-template-columns: 1fr 1.2fr 1fr;
  gap: clamp(20px,4vw,60px); align-items: center;
  max-width: calc(1280px + 2 * var(--px)); width: 100%;
  padding: 0 var(--px);
}
.v27-ct-left, .v27-ct-right {
  padding: 32px 24px;
  opacity: 0;
}
.v27-ct-title {
  font-weight: 500; font-size: clamp(2rem,3.2vw,3rem);
  line-height: 1.08; color: #fff; letter-spacing: -.01em; margin: 0;
}
.v27-ct-center { perspective: 1200px; transform-style: preserve-3d; }
.v27-ct-img {
  width: 100%; height: clamp(320px,60vh,680px);
  object-fit: cover; object-position: center;
  border-radius: 8px; display: block; will-change: transform;
  box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(85,88,89,.08);
}
.v27-ct-label {
  font-size: .58rem; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: #555859; margin: 0 0 18px;
}
.v27-ct-desc {
  font-size: clamp(.82rem,1vw,.96rem); color: rgba(255,255,255,.42);
  line-height: 1.8; font-weight: 400; margin: 0;
}
.v27-ct-deco {
  width: 28px; height: 1px;
  background: linear-gradient(90deg, #555859, transparent);
  margin-top: 28px;
}

@media (max-width: 768px) {
  .v27-ct-item-inner { grid-template-columns: 1fr; gap: 16px; }
  .v27-ct-left { display: none; }
  .v27-ct-right { padding: 16px 18px; }
  .v27-ct-img { height: clamp(240px,55vw,420px); }
}

/* ══════════════════════════════════════════════════════
   SAFETY — hover-image list (matches SafetySection.jsx)
══════════════════════════════════════════════════════ */
#v27-safety {
  position: relative; z-index: 5; background: #0A0A0A;
}
.v27-sf-card {
  background: #fff; overflow: hidden;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
}

/* ── Header ─────────────────────────────────────────── */
.v27-sf-header {
  padding: clamp(56px,7vh,96px) var(--px) clamp(28px,3.5vh,44px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px,4vw,64px); align-items: end;
}
.v27-sf-eyebrow {
  margin-bottom: 12px; color: var(--orange);
  letter-spacing: .28em; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px;
}
.v27-safety-h2 {
  font-size: clamp(1.9rem,3.8vw,3.2rem); font-weight: 500;
  line-height: 1.08; letter-spacing: -.025em; color: #1F0F08; margin: 0;
}
.v27-sf-intro {
  font-size: clamp(.85rem,1.05vw,.95rem); line-height: 1.75;
  color: rgba(35,24,21,.50); margin: 0; align-self: end;
}

/* ── Main: image + list ─────────────────────────────── */
.v27-sf-main {
  position: relative; padding-bottom: clamp(48px,6vh,72px);
}

/* Floating crossfade image — fills left column */
.v27-sf-img-wrap {
  position: absolute;
  left: var(--px); top: 0;
  width: calc(50% - var(--px) - clamp(12px,2vw,32px));
  aspect-ratio: 16/10;
  border-radius: 16px; overflow: hidden;
  pointer-events: none; z-index: 1;
  background: #F5EFE5;
  box-shadow: 0 24px 64px rgba(35,24,21,.16);
  will-change: transform;
}
.v27-sf-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  will-change: transform, opacity;
}
.v27-sf-img--default { opacity: 1; }
.v27-sf-feat-img { opacity: 0; }

/* Row grid mirrors the 1fr/1fr header split */
.v27-sf-list { position: relative; z-index: 2; }
.v27-sf-row-wrap {
  padding: 0 var(--px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px,4vw,64px);
}
.v27-sf-row-wrap > [aria-hidden] { /* left spacer column */ }

/* Right-column hover row */
.v27-sf-row {
  border-bottom: 1px solid rgba(35,24,21,.09);
  padding: clamp(14px,2vh,24px) 0;
  display: flex; align-items: baseline; gap: 16px;
  cursor: default; opacity: 0; transform: translateY(20px);
}
.v27-sf-row-wrap:first-child .v27-sf-row {
  border-top: 1px solid rgba(35,24,21,.09);
}
.v27-sf-row-body { flex: 1; min-width: 0; }

/* Title */
.sf-title {
  font-size: clamp(1.3rem,2.4vw,2.6rem); font-weight: 500;
  line-height: 1.05; letter-spacing: -.022em;
  color: rgba(35,24,21,.28); margin: 0;
  transition: color .35s ease; white-space: nowrap;
}
.v27-sf-row.is-on .sf-title { color: #1F0F08; }

/* Kicker — slides open on hover */
.sf-disc-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1);
}
.sf-disc-wrap > div { overflow: hidden; }
.v27-sf-row.is-on .sf-disc-wrap { grid-template-rows: 1fr; }
.sf-disc {
  margin: 8px 0 0; font-size: .78rem; line-height: 1.4;
  color: rgba(35,24,21,.58); letter-spacing: .01em;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s ease .06s, transform .35s ease .06s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v27-sf-row.is-on .sf-disc { opacity: 1; transform: translateY(0); }

/* Row number */
.sf-num {
  font-size: .58rem; font-weight: 700; letter-spacing: .18em;
  flex-shrink: 0; color: rgba(35,24,21,.20);
  transition: color .28s ease; margin-left: auto; padding-left: 24px;
}
.v27-sf-row.is-on .sf-num { color: #015699; }

@media (max-width: 767px) {
  .v27-sf-header { grid-template-columns: 1fr; }
  .v27-sf-row-wrap { grid-template-columns: 1fr; }
  .v27-sf-img-wrap { display: none; }
  .sf-title { font-size: clamp(1.3rem,6vw,1.9rem) !important; white-space: normal !important; }
}

/* ══════════════════════════════════════════════════════
   CHARGING
══════════════════════════════════════════════════════ */
#v27-charging {
  position: relative; z-index: 5; background: #0A0A0A;
  padding: clamp(120px,16vh,200px) var(--px); min-height: 90vh;
  display: flex; flex-direction: column; justify-content: center;
}
.v27-charging-eyebrow {
  color: var(--orange); letter-spacing: .32em; font-size: .7rem;
  font-weight: 700; text-transform: uppercase; margin-bottom: 16px;
}
.v27-charging-top {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: end; margin-bottom: clamp(80px,11vh,140px);
}
@media (max-width: 768px) { .v27-charging-top { grid-template-columns: 1fr; } }
.v27-charging-h2 {
  font-weight: 500; font-size: clamp(2.2rem,5vw,4rem); line-height: 1.04;
  color: #0A0A0A; letter-spacing: -.025em; margin: 0;
}
.v27-charging-h2 em { font-style: normal; color: var(--orange); }
.v27-charging-intro { font-size: 1rem; line-height: 1.75; color: rgba(10,10,10,.55); margin: 0; }
/* Track */
.v27-charge-track-wrap { position: relative; margin-bottom: 40px; }
.v27-charge-tooltip {
  position: absolute; bottom: calc(100% + 16px);
  background: #fff; color: #0A0A0A; font-size: .85rem; font-weight: 700;
  padding: 6px 12px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.15); letter-spacing: .02em;
  pointer-events: none; z-index: 5; transform: translateX(-50%);
}
.v27-charge-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff;
}
.v27-charge-track {
  position: relative; height: 68px; border-radius: 34px;
  background: rgba(0,0,0,.08); cursor: pointer; user-select: none; touch-action: none;
}
.v27-charge-fill {
  position: absolute; top: 0; left: 0; bottom: 0; border-radius: 34px;
  background: linear-gradient(90deg, #16A34A, #22C55E);
}
.v27-charge-thumb {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 72px; height: 72px; border-radius: 50%; background: #0A0A0A;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.25); z-index: 2; cursor: grab;
}
.v27-charge-stats {
  display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center;
}
.v27-charge-stat { text-align: center; padding: 16px 0; }
.v27-charge-stat-val {
  font-size: clamp(4rem,8vw,7rem); font-weight: 700; line-height: 1;
  color: #0A0A0A; font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.v27-charge-stat-unit { font-size: 45%; font-weight: 500; color: rgba(10,10,10,.5); }
.v27-charge-stat-label {
  font-size: .8rem; letter-spacing: .12em; color: rgba(10,10,10,.45); margin-top: 8px;
}
.v27-charge-divider { background: rgba(10,10,10,.12); height: 80px; width: 1px; }

/* ══════════════════════════════════════════════════════
   TRIMS
══════════════════════════════════════════════════════ */
#v27-trims {
  position: relative; z-index: 5; background: #fff;
  padding: clamp(96px,13vh,160px) var(--px) clamp(80px,10vh,130px);
}
.v27-trims-head { text-align: center; margin-bottom: clamp(48px,7vh,80px); }
.v27-trims-eyebrow {
  color: var(--orange); letter-spacing: .32em; font-size: .7rem;
  font-weight: 700; text-transform: uppercase; margin-bottom: 20px;
}
.v27-trims-h2 {
  font-weight: 500; font-size: clamp(2.4rem,5.5vw,4.4rem); line-height: 1.04;
  letter-spacing: -.028em; color: #1F0F08;
}
.v27-trims-table { position: relative; }
.v27-trims-col-heads {
  display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  border-bottom: 1px solid rgba(35,24,21,.10); padding-bottom: clamp(18px,2.5vh,28px);
}
.v27-trim-col-head {
  display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0;
}
.v27-trim-badge {
  font-size: .48rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase;
  color: #fff; background: var(--amber, #F37021); border-radius: 20px; padding: 4px 10px;
}
.v27-trim-name {
  font-size: clamp(.95rem,1.6vw,1.25rem); font-weight: 500; letter-spacing: -.01em; color: rgba(35,24,21,.4);
}
.v27-trim-name.flagship { color: #1F0F08; }
.v27-trim-group-head {
  width: 100%; background: none; border: none;
  border-bottom: 1px solid rgba(35,24,21,.10);
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px,2.5vh,28px) 0; cursor: pointer; opacity: 0;
}
.v27-trim-group-label {
  font-size: clamp(1.5rem,2.8vw,2.4rem); font-weight: 500;
  letter-spacing: -.022em; color: rgba(35,24,21,.35); text-align: left; transition: color .3s;
}
.v27-trim-group-head.open .v27-trim-group-label { color: #1F0F08; }
.v27-trim-toggle { font-size: 1.4rem; color: rgba(35,24,21,.3); transition: transform .35s, color .3s; }
.v27-trim-group-head.open .v27-trim-toggle { transform: rotate(45deg); color: #231815; }
.v27-trim-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1);
}
.v27-trim-body.open { grid-template-rows: 1fr; }
.v27-trim-body-inner { overflow: hidden; }
.v27-trim-row {
  display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  border-bottom: 1px solid rgba(35,24,21,.06);
  padding: clamp(10px,1.4vh,16px) 0; align-items: center;
}
.v27-trim-feature { font-size: .74rem; color: rgba(35,24,21,.45); letter-spacing: .035em; }
.v27-trim-cell { display: flex; align-items: center; justify-content: center; }
.v27-trim-check svg { width: 16px; height: 16px; }
.v27-trim-dash { color: rgba(35,24,21,.18); font-size: 1.1rem; }
.v27-trim-val { font-size: .82rem; font-weight: 600; color: #1F0F08; letter-spacing: .01em; }
.v27-trim-section-label {
  font-size: clamp(1.1rem,1.8vw,1.4rem); font-weight: 600; letter-spacing: -.015em;
  color: #1F0F08; padding: clamp(24px,3.5vh,36px) 0 clamp(10px,1.5vh,16px);
  border-top: 1px solid rgba(35,24,21,.10);
}
/* Responsive table — keep the three columns aligned on small screens (client V6) */
@media (max-width: 640px) {
  .v27-trims-col-heads,
  .v27-trim-row { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); }
  .v27-trim-feature { font-size: .68rem; padding-right: 8px; }
  .v27-trim-val { font-size: .74rem; text-align: center; }
  .v27-trim-name { font-size: .85rem; }
}

/* ── Overview heading logo (client V5) ────────── */
.v27-ov-logo { height: .4em; width: auto; display: inline-block; vertical-align: baseline; }

/* ── Call centre number in reserve brick (client V8) ────────── */
.v27-callcenter {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 18px; padding: 12px 18px;
  border: 1.5px solid rgba(35,24,21,.14); border-radius: 14px;
  color: #1F0F08; text-decoration: none;
  align-self: flex-start;
  transition: border-color .25s, background .25s;
}
.v27-callcenter:hover { border-color: var(--amber, #F37021); background: rgba(243,112,33,.06); }
.v27-callcenter svg { color: var(--amber, #F37021); flex-shrink: 0; }
.v27-callcenter__text {
  display: flex; flex-direction: column; line-height: 1.1;
  font-family: var(--f-display, inherit); font-weight: 800;
  font-size: clamp(20px, 2vw, 26px); letter-spacing: .02em;
}
.v27-callcenter__text small {
  font-size: .58rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(35,24,21,.45); margin-bottom: 3px;
}

/* ── PDF Download grid ────────────────────────────── */
/* ══════════════════════════════════════════════════════
   RESOURCES SECTION
══════════════════════════════════════════════════════ */
#v27-resources {
  background: #F5EFE5;
  padding: clamp(52px, 7vh, 88px) var(--px) clamp(64px, 9vh, 100px);
  text-align: center;
}
.v27-res-eyebrow {
  margin-bottom: 16px;
}
.v27-res-h2 {
  font-size: clamp(1.9rem, 3.5vw, 3rem); font-weight: 500;
  line-height: 1.08; letter-spacing: -.02em;
  color: #1F0F08; margin: 0 0 clamp(36px, 5vh, 56px);
}
/* Downloads use the shared .white-hover-cards component (css/styles.css);
   this is only the 4-up layout override — .dl-cards is a 2-up 620px grid. */
.v27-dl-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1180px;
}
@media (max-width: 1100px) {
  .v27-dl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; }
}
@media (max-width: 620px) {
  .v27-dl-cards { grid-template-columns: 1fr; max-width: 420px; }
}

/* RESERVE CTA — nothing lives here on purpose. The section is now the
   plain shared component (<section class="cta-video" id="cta">), so
   css/styles.css governs it and this page matches every other page.
   Anything re-added here would fork it again. */

/* ═══════════════════════════════════════════════════════════
   MOBILE — V27 Page
   Hide carousel arrows; let users swipe natively.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  :root { --px: 16px; }

  /* ─── Hide prev/next carousel arrows ─── */
  .v27-carousel-arrow { display: none !important; }
  .v27-lb-btn { display: none !important; }

  /* ─── Interior carousel: native scroll + peek ─── */
  .v27-carousel-outer { overflow: visible; padding: 8px 0 20px; }
  .v27-carousel-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: var(--px);
    padding-right: 0;
    gap: 10px;
    will-change: auto;
    transform: none !important;
  }
  .v27-carousel-track::-webkit-scrollbar { display: none; }

  .v27-carousel-slide {
    flex: 0 0 calc(100vw - 68px);
    scroll-snap-align: start;
  }
  .v27-carousel-slide img {
    height: clamp(200px, 56vw, 340px);
  }

  /* ─── Tech section: stack items vertically ─── */
  .v27-ct-item-inner { grid-template-columns: 1fr; gap: 16px; }
  .v27-ct-left { display: none; }
  .v27-ct-img { height: clamp(220px, 55vw, 360px); }

  /* ─── Safety section ─── */
  .v27-sf-header { grid-template-columns: 1fr; gap: 16px; }
  .v27-sf-img-wrap { display: none; }

  /* ─── Charging section ─── */
  .v27-charging-top { grid-template-columns: 1fr; }
}