/* ============================================================================
   home.css — homepage-only visual polish (index.html)
   Loaded AFTER 5w-trailers.css so it layers on top. Scoped to `.page-home`.

   Contents:
     1. Continuous glow canvas (light pools that flow down the whole page)
     2. Flat floating panels + responsive spacing + trust-stats band
     3. Bold animations (one-shot gradient-heading sweep, centered-heading reveal)
     4. Hover polish (locations / brand / in-stock cards)
     5. Hero parallax buffer (transform driven by home-animations.js)
     6. Reduced-motion guards
   Uses only the design tokens defined in 5w-trailers.css :root.
   ============================================================================ */

/* ── 1. Continuous glow canvas ─────────────────────────────────────────────
   One light field behind <main>, sized to the full scroll height so the red
   "pools" scroll with the page and read as a single continuous surface. The
   body base color (#0e0e0e) shows through the low-alpha radial gradients. */
main.home-canvas {
  position: relative;
  isolation: isolate; /* keep the ::before layer local to <main> */
}

main.home-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      42rem 42rem at 18% 15%,
      var(--color-primary-container-a12) 0%,
      transparent 60%
    ),
    radial-gradient(
      48rem 48rem at 85% 48%,
      var(--color-primary-container-a12) 0%,
      transparent 58%
    ),
    radial-gradient(
      40rem 40rem at 12% 82%,
      var(--color-primary-container-a12) 0%,
      transparent 60%
    );
  background-repeat: no-repeat;
  transform-origin: center;
  animation: homeGlowDrift 26s ease-in-out infinite alternate;
}

/* Content rides above the glow. Transparent sections let the pools show
   through the gaps; opaque cards keep their own text contrast. */
main.home-canvas > section {
  position: relative;
  z-index: 1;
}

@keyframes homeGlowDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(0, -1.5%, 0) scale(1.06);
  }
}

/* ── 2. Flat floating panels ────────────────────────────────────────────────
   Applied to alternating sections (Trade-In, Reviews, Quote — every third
   section, so panels never sit adjacent) plus the trust band. Clean rounded
   cards floating on the glow: straight
   edges, side gutters (so the glow shows around them), a subtle border, and a
   soft drop shadow. */
.page-home .section-panel {
  width: min(100% - 3rem, 1800px);
  margin-inline: auto;
  /* Outer breathing room so panels never touch each other or crowd adjacent
     sections. !important overrides the Bootstrap `my-0` utility on some panels. */
  margin-block: clamp(1.5rem, 3.5vw, 2.75rem) !important;
  border-radius: 1rem;
  border: 1px solid var(--color-outline-variant-a15);
  background:
    linear-gradient(
      180deg,
      var(--color-white-a06) 0%,
      transparent 28%
    ),
    rgba(27, 27, 27, 0.82); /* --color-surface-container-low @ 82% */
  box-shadow: 0 10px 30px var(--color-black-a60);
}

@media (max-width: 767.98px) {
  .page-home .section-panel {
    width: min(100% - 1.5rem, 1800px);
    border-radius: 0.75rem;
  }
}

/* Responsive section rhythm — tighten the fixed py-7 gaps on smaller screens
   (homepage only; the global .py-7 utility is unchanged for other pages).
   !important is required to beat the .py-7 utility's own !important. */
.page-home section.py-7 {
  padding-top: clamp(3rem, 6vw, 5.5rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem) !important;
}

/* ── Hero trust stats (absorbed into the docking-hero head) ─────────────────── */
.page-home .trust-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 8rem;
}

.page-home .trust-stat__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1;
  color: var(--color-primary-bright);
}

.page-home .trust-stat__label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
}

/* ── Welcome storefront collage ────────────────────────────────────────────
   Desktop: three storefront photos as staggered, overlapping, slightly rotated
   cards with a floating 5W logo chip. Tablet: a clean 3-up grid. Mobile:
   stacked. Each card links to that lot's inventory. */
.page-home .welcome-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.02;
}

.page-home .welcome-loc {
  position: absolute;
  width: 62%;
  aspect-ratio: 4 / 3;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--color-outline-variant-a15);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
  transition: var(--transition-lift);
}

.page-home .welcome-loc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Bottom scrim so the label stays legible over any photo */
.page-home .welcome-loc::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, var(--color-black-a60), transparent);
  pointer-events: none;
}

.page-home .welcome-loc__label {
  position: absolute;
  left: 0.75rem;
  bottom: 0.7rem;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Staggered, slightly rotated placement (desktop) */
.page-home .welcome-loc--1 {
  top: 0;
  left: 0;
  z-index: 2;
  transform: rotate(-2deg);
}

.page-home .welcome-loc--2 {
  top: 26%;
  right: 0;
  z-index: 1;
  transform: rotate(2.5deg);
}

.page-home .welcome-loc--3 {
  bottom: 0;
  left: 14%;
  z-index: 3;
  transform: rotate(-1.5deg);
}

.page-home .welcome-loc:hover {
  z-index: 5;
  transform: rotate(0deg) translateY(-4px);
  box-shadow: var(--shadow-lift), var(--shadow-glow-red);
  border-color: var(--color-primary-container-a40);
}

.page-home .welcome-loc:hover img {
  transform: scale(1.06);
}

.page-home .welcome-loc:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  z-index: 5;
}

/* Floating 5W logo chip over the centre where the cards meet */
.page-home .welcome-collage__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  border-radius: var(--pill-border-radius);
  background: var(--color-surface-container);
  border: 1px solid var(--color-primary-container-a40);
  box-shadow: var(--shadow-glow-red);
}

.page-home .welcome-collage__badge img {
  height: 26px;
  width: auto;
  display: block;
}

/* Tablet: static 3-up grid, no rotation, badge hidden */
@media (max-width: 991.98px) {
  .page-home .welcome-collage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    aspect-ratio: auto;
  }
  .page-home .welcome-loc {
    position: static;
    width: 100%;
    min-width: 0; /* let grid items shrink below the image's intrinsic width */
    aspect-ratio: 16 / 9;
    transform: none;
  }
  .page-home .welcome-loc:hover {
    transform: translateY(-4px);
  }
  .page-home .welcome-collage__badge {
    display: none;
  }
}

/* Mobile: single-column stack */
@media (max-width: 575.98px) {
  .page-home .welcome-collage {
    grid-template-columns: 1fr;
  }
}

/* ── 3. Bold animations ────────────────────────────────────────────────────
   3a. Gradient heading sweep — a single shine that fires once when the heading
   is revealed (is-revealed set by home-animations.js), not a loop. At rest the
   heading shows a static red gradient. */
.page-home .header-font-linear-gradient {
  background: linear-gradient(
    100deg,
    var(--color-primary-container) 0%,
    var(--color-primary-gradient-start) 22%,
    #ffdede 50%,
    var(--color-primary-gradient-start) 78%,
    var(--color-primary-container) 100%
  );
  background-size: 250% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-home .section-title.is-revealed .header-font-linear-gradient {
  animation: homeGradientSweep 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}

@keyframes homeGradientSweep {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: 0% center;
  }
}

/* 3b. Centered section headings get an accent underline that wipes in when the
   heading scrolls into view (is-revealed toggled by home-animations.js). */
.page-home .text-center .section-title {
  position: relative;
}

.page-home .text-center .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.65rem;
  width: 96px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--color-primary-container),
    var(--color-primary)
  );
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

.page-home .text-center .section-title.is-revealed::after {
  transform: translateX(-50%) scaleX(1);
}

/* ── 4. Hover polish ──────────────────────────────────────────────────────── */
.page-home .availability-card {
  transition: var(--transition-lift);
}

.page-home .availability-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift), var(--shadow-glow-red);
  border-color: var(--color-primary-container-a40);
}

/* Single-line address: street then city/state/zip inline, past the pin */
.page-home .loc-card__street {
  font-weight: 600;
  color: var(--color-on-surface);
}

/* City/state/zip stays inline but keeps the pink accent */
.page-home .loc-card__citystate {
  color: var(--color-on-surface-variant);
}

.page-home a.brand-logo-card:hover {
  box-shadow: var(--shadow-glow-red);
}


/* ── 5. Hero parallax buffer ────────────────────────────────────────────────
   Oversize + offset the hero background so home-animations.js can translate it
   for a parallax drift without ever exposing an edge inside the hero. */
.page-home .hero-bg {
  top: -70px;
  height: calc(100% + 140px);
  will-change: transform;
}

/* ── 7. Docking hero ────────────────────────────────────────────────────────
   The hero video plays full-bleed on load, then home-animations.js adds
   `.is-docked` after a beat: the video card shrinks into a corner, the big
   intro headline fades out, and the docked content panel (tagline + trust
   stats + live trailer picks + quick-link tiles) slides in. Two visual states
   on one section, driven purely by the `.is-docked` class. */

/* Section shell — full viewport on load; grows to fit content once docked. */
.page-home .hero-dockable {
  min-height: clamp(520px, calc(100svh - var(--header-height, 100px)), 900px);
  align-items: stretch;
  padding-top: 0;
}

/* Docked: the base .hero-section caps height + clips overflow (for the full-bleed
   video). Once docked the panel is taller than that, so grow to content and stop
   clipping — otherwise the bottom tiles get cut off. */
.page-home .hero-dockable.is-docked {
  height: auto;
  overflow: visible;
}

/* ── Video card ──────────────────────────────────────────────────────────────
   State A: fills the whole section. Docked: animates to a rounded corner card.
   The .hero-bg parallax buffer from section 5 is neutralized here (the video
   docks + freezes now, so it no longer drifts on scroll). */
.page-home .hero-video-card.hero-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  /* Ease-in-out (gentle accelerate + decelerate) reads far smoother than an
     easeOut here — easeOut snaps the shrink into motion at full speed. The
     shadow + scrim ease alongside so nothing pops in at the end. */
  transition:
    top 1.2s cubic-bezier(0.65, 0, 0.35, 1),
    left 1.2s cubic-bezier(0.65, 0, 0.35, 1),
    width 1.2s cubic-bezier(0.65, 0, 0.35, 1),
    height 1.2s cubic-bezier(0.65, 0, 0.35, 1),
    border-radius 1.2s ease,
    box-shadow 1.2s ease;
  will-change: top, left, width, height;
}

/* Cross-fade the legibility scrim as the video docks (the docked state swaps its
   gradient), so it blends instead of snapping. */
.page-home .hero-video-card.hero-bg::after {
  transition: background 1.2s ease;
}

/* Docked (desktop): tucks into the top-right, leaving the left column for text. */
@media (min-width: 992px) {
  .page-home .hero-dockable.is-docked .hero-video-card.hero-bg {
    top: 72px;
    left: calc(100% - 42% - 3vw);
    width: 42%;
    /* Height tracks the left column instead of the viewport height: the square
       New/Used/Special cards scale with the column width (~0.2·vw), so a
       width-based height keeps the video's bottom edge level with those cards
       across screen sizes (fixed 56vh drifted higher as the cards grew). */
    height: min(20vw + 236px, 760px);
    border-radius: 1rem;
    box-shadow: 0 18px 44px var(--color-black-a60);
  }
  /* Soften the legibility scrim once the video is a small card. */
  .page-home .hero-dockable.is-docked .hero-video-card.hero-bg::after {
    background: linear-gradient(
      to top,
      var(--color-black-a60) 0%,
      transparent 55%
    );
  }
}

/* Docked (mobile/tablet): video becomes a banner on top, content flows below.
   The video is absolutely positioned so it doesn't push layout — the docked
   panel reserves the banner height with padding-top to clear it. */
@media (max-width: 991.98px) {
  .page-home .hero-dockable.is-docked .hero-video-card.hero-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 44vh;
    border-radius: 0 0 1rem 1rem;
  }
  .page-home .hero-dockable.is-docked .hero-dock {
    padding-top: calc(44vh + 1.5rem);
  }
}

/* ── Big intro headline (State A only) ─────────────────────────────────────── */
.page-home .hero-intro {
  align-self: flex-start;
  width: 100%;
  padding-top: clamp(1.5rem, 7vh, 4rem);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.65, 0, 0.35, 1),
    visibility 0.7s;
}

/* Docked: drop the intro out of the flex flow so the panel owns the section. */
.page-home .hero-dockable.is-docked .hero-intro {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  pointer-events: none;
}

/* Intro accents — mirror the trade-in page hero (.page-eyebrow + .page-hero--accent):
   a red dash before the eyebrow and a short red underline under the headline, plus
   the same lead line the docked panel carries, so both hero states read alike. */
.page-home .hero-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary-bright);
  margin-bottom: 0.85rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.page-home .hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background-color: var(--color-primary);
  vertical-align: middle;
  margin-right: 0.6rem;
  border-radius: var(--radius-sm);
}

.page-home .hero-title--line::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 1rem;
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
}

.page-home .hero-intro-lead {
  max-width: 46ch;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--color-on-surface);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

/* ── Docked content panel ──────────────────────────────────────────────────── */
.page-home .hero-dock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding-top: clamp(1.5rem, 4vh, 3rem);
  padding-bottom: clamp(1.25rem, 3vh, 2.5rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-home .hero-dockable.is-docked .hero-dock {
  position: relative;
  width: 100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.9s ease 0.3s;
}

/* Each block rises + fades in with a small stagger once docked. A shorter travel
   (1rem) + gentle decel reads calmer than a longer shoot-up. flex-shrink:0 keeps
   the column from collapsing any child — the brand ticker has overflow:hidden,
   whose flex auto-min-size is 0 and would otherwise squash it. */
.page-home .hero-dock > * {
  flex-shrink: 0;
  transform: translateY(1rem);
  opacity: 0;
}

.page-home .hero-dockable.is-docked .hero-dock > * {
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease;
}

/* Choreographed to trail the video's dock: the panel begins settling as the
   video finishes shrinking, each block a beat behind the last. */
.page-home .hero-dockable.is-docked .hero-dock__head { transition-delay: 0.45s; }
.page-home .hero-dockable.is-docked .hero-dock__brands { transition-delay: 0.6s; }
.page-home .hero-dockable.is-docked .hero-dock__picks { transition-delay: 0.75s; }
.page-home .hero-dockable.is-docked .hero-dock__links { transition-delay: 0.9s; }

/* Head: tagline + lead + trust stats. On desktop it sits in the left column,
   clearing the docked video on the right and reserving its full height so the
   picks row always starts below the video. */
.page-home .hero-dock__eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-bright);
  margin-bottom: 0.75rem;
}

/* Same trade-in red dash before the eyebrow. */
.page-home .hero-dock__eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background-color: var(--color-primary);
  vertical-align: middle;
  margin-right: 0.6rem;
  border-radius: var(--radius-sm);
}

.page-home .hero-dock__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.02;
  margin-bottom: 1rem;
  color: var(--color-on-surface);
}

/* Same trade-in red underline under the headline (left-aligned; the centered
   .section-title underline only applies inside .text-center, so no collision). */
.page-home .hero-dock__title::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 0.85rem;
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
}

.page-home .hero-dock__lead {
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--color-on-surface-muted);
  margin-bottom: 1.5rem;
}

/* 3-column grid so each stat sits directly above its shop card below. */
.page-home .hero-dock__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  text-align: center;
}

.page-home .hero-dock__stats .trust-stat {
  min-width: 0;
  align-items: center;
}

@media (min-width: 992px) {
  .page-home .hero-dock__head {
    padding-right: 46%;
    /* Reserve the docked video's ACTUAL height so the full-width brand ticker
       below always clears its bottom edge. The video is top:72px + height
       min(20vw + 236px, 760px) — a width-based measure. The old height-based
       min(56vh, 460px) decoupled the two: on a short window the reserved height
       shrank while the video stayed tall (fixed 236px term), so the video
       overhung and covered the brand bar. Mirror the video's formula (minus the
       dock's own top padding) so head height tracks video height at any size. */
    min-height: calc(72px + min(20vw + 236px, 760px) - clamp(1.5rem, 4vh, 3rem));
  }
}

/* Shop-by-condition row (New / Used / Special Deals) under the trust stats.
   Same location-gate flow as the brands. */
.page-home .hero-shop-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 1.4rem;
}

/* Square, photo-backed tiles. The photo shows its centered ~half
   (background-size: 200% auto → the middle 1/2 of the image width fills the card),
   under a scrim so the icon + label stay legible. */
.page-home .hero-shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  aspect-ratio: 1 / 1;
  padding: 0.75rem;
  border-radius: 0.7rem;
  background-color: var(--color-surface-container-low);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 200% auto;
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  overflow: hidden;
  transition: var(--transition-lift);
}

.page-home .hero-shop-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--color-black-a20) 0%,
    var(--color-black-a60) 100%
  );
  z-index: 0;
}

.page-home .hero-shop-card > * {
  position: relative;
  z-index: 1;
}

/* No border — a stronger drop shadow on the icon and label carries the
   definition against the photo instead. */
.page-home .hero-shop-card i {
  font-size: 2.6rem;
  color: var(--color-primary-bright);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95);
}

.page-home .hero-shop-card span {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.page-home .hero-shop-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift), var(--shadow-glow-red);
}

.page-home .hero-shop-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.page-home .hero-shop-card--new  { background-image: url("../img/Backgrounds/hero-new.jpg"); }
.page-home .hero-shop-card--used { background-image: url("../img/Backgrounds/hero-used.jpg"); }
.page-home .hero-shop-card--deals { background-image: url("../img/Backgrounds/hero-deals.jpg"); }

/* Smaller screens: keep the icon from crowding the tiny square. */
@media (max-width: 575.98px) {
  .page-home .hero-shop-card {
    font-size: 0.85rem;
    gap: 0.35rem;
  }
  .page-home .hero-shop-card i {
    font-size: 1.9rem;
  }
}

/* ── Location picker modal cards (styled like the Check Availability section) ── */
.page-home .loc-pick-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: left;
  border: 1px solid var(--color-outline-variant-a15);
  border-radius: 0.75rem;
  background: var(--color-surface-container-low);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-lift);
}

.page-home .loc-pick-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary-container-a40);
  box-shadow: var(--shadow-lift), var(--shadow-glow-red);
}

.page-home .loc-pick-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.page-home .loc-pick-card__img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-container);
}

.page-home .loc-pick-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .loc-pick-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0.85rem;
}

.page-home .loc-pick-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-on-surface);
}

.page-home .loc-pick-card__meta {
  display: flex;
  gap: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--color-on-surface-muted);
}

.page-home .loc-pick-card__meta i {
  flex-shrink: 0;
  color: var(--color-primary-bright);
}

.page-home .loc-pick-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--color-outline-variant-a15);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary-bright);
}

/* ── Location picker row (below the brand ticker) ──────────────────────────── */
.page-home .hero-locpick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  /* Trade-in hero panel background (.page-hero--panel) + a full red-tinted border. */
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0 1px,
                              transparent 1px 8px),
    radial-gradient(ellipse at top left, var(--color-primary-container-a05),
                    transparent 55%),
    linear-gradient(180deg, var(--color-surface-container, #1c1c1c) 0%,
                    transparent 100%);
  border: 1px solid var(--color-primary-container-a40);
}

.page-home .hero-locpick__label {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-on-surface);
}

/* The 3 buttons ride together in one group so they wrap under the label as a
   unit (never split apart), then stack full-width on the narrowest screens. */
.page-home .hero-locpick__btns {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .page-home .hero-locpick__btns {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .page-home .hero-locpick__btn {
    width: 100%;
  }
}

.page-home .hero-locpick__btn {
  padding: 0.5rem 1.1rem;
  border-radius: var(--pill-border-radius);
  border: 1px solid var(--color-primary-container-a40);
  background: transparent;
  color: var(--color-on-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-lift);
}

.page-home .hero-locpick__btn:hover {
  background: var(--color-primary-container-a12);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

/* Currently-remembered lot — this row doubles as a lot switcher. */
.page-home .hero-locpick__btn--selected {
  background: var(--color-primary-container-a12);
  border-color: var(--color-primary);
  color: var(--color-primary-container);
}

/* ── Quick-link tiles ──────────────────────────────────────────────────────── */
.page-home .hero-dock__links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 576px) {
  .page-home .hero-dock__links { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .page-home .hero-dock__links { grid-template-columns: repeat(4, 1fr); }
}

.page-home .hero-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    180deg,
    var(--color-white-a06) 0%,
    transparent 40%
  ), var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant-a15);
  text-decoration: none;
  transition: var(--transition-lift);
}

.page-home .hero-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.page-home .hero-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift), var(--shadow-glow-red);
  border-color: var(--color-primary-container-a40);
}

.page-home .hero-tile:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.page-home .hero-tile__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.6rem;
  font-size: 1.35rem;
  color: var(--color-primary-bright);
  background: var(--color-primary-container-a12);
}

.page-home .hero-tile__title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-on-surface);
}

.page-home .hero-tile__sub {
  display: block;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--color-on-surface-muted);
}

/* ── Storefront crossfade rotator ─────────────────────────────────────────────
   Sits inside the video card. home-animations.js activates it once the video
   has frozen, then crossfades the three dealership storefronts (decorative). */
/* The rotator is the hero card's primary media from load: the first slide's
   drone video plays full-bleed as the intro. A dark base shows during the brief
   pre-play/crossfade moments so nothing flashes through. */
.page-home .hero-card-rotator {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--color-surface-container-low);
}

/* Each slide is a link to that lot's inventory and pairs a drone VIDEO with the
   storefront PHOTO. Crossfading the whole slide (media + label) keeps the label
   in step — visibility flips at the ends of the fade so only the active slide is
   clickable/focusable. */
.page-home .hero-card-rotator__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 1.1s ease;
}

.page-home .hero-card-rotator__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Video + photo stack in the same slide; the active phase crossfades between
   them. Video shows first (plays once), then `.is-showing-image` swaps to the
   still photo (home-animations.js drives the phase). */
.page-home .hero-card-rotator__video,
.page-home .hero-card-rotator__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease;
}

.page-home .hero-card-rotator__video {
  opacity: 1;
}

.page-home .hero-card-rotator__img {
  opacity: 0;
}

.page-home .hero-card-rotator__slide.is-showing-image .hero-card-rotator__video {
  opacity: 0;
}

.page-home .hero-card-rotator__slide.is-showing-image .hero-card-rotator__img {
  opacity: 1;
}

/* Bottom scrim so the label stays legible over any storefront photo. */
.page-home .hero-card-rotator__slide::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, var(--color-black-a60), transparent);
  pointer-events: none;
}

.page-home .hero-card-rotator__label {
  position: absolute;
  left: 0.75rem;
  bottom: 0.7rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
}

.page-home .hero-card-rotator__label i {
  color: var(--color-primary);
}

.page-home .hero-card-rotator__slide:hover .hero-card-rotator__label,
.page-home .hero-card-rotator__slide:focus-visible .hero-card-rotator__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-home .hero-card-rotator__slide:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ── Brand ticker (full-width loop card, under the trust stats) ────────────────
   An infinite marquee of brand logos. Two identical sets ride in one track;
   translating the track by -50% (keyframes scroll-left, defined in
   5w-trailers.css) loops seamlessly. Clicking a logo prompts for a lot then
   deep-links to that brand's inventory (home-brand-ticker.js). */
.page-home .hero-dock__brands {
  border-radius: 0.75rem;
  /* No panel background: each logo sits in its own card (.hero-brand-item). */
  overflow: hidden;
}

.page-home .hero-brand-ticker {
  display: flex;
  align-items: center;
  min-height: 4.1rem; /* reserve the logo strip so it never collapses pre-load */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.page-home .hero-brand-track {
  display: flex;
  width: max-content;
  animation: scroll-left 34s linear infinite;
}

.page-home .hero-brand-ticker:hover .hero-brand-track {
  animation-play-state: paused;
}

.page-home .hero-brand-set {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: 0.85rem clamp(1rem, 2vw, 1.75rem);
}

/* Each logo is a rounded card. Default is dark (for light/silver/colored logos);
   dark-ink logos get the --bright modifier so they read (see index.html). */
.page-home .hero-brand-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  background: var(--color-surface-container-low);
  border-radius: 0.625rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-home .hero-brand-item--bright {
  background: var(--color-white);
}

.page-home .hero-brand-item img {
  height: 2rem;
  width: auto;
  max-width: 168px;
  object-fit: contain;
}

.page-home .hero-brand-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.page-home .hero-brand-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  opacity: 1;
}

/* ── 8. Reduced-motion: stop all homepage motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  main.home-canvas::before {
    animation: none;
  }
  .page-home .header-font-linear-gradient,
  .page-home .section-title.is-revealed .header-font-linear-gradient {
    animation: none;
    background-position: 0% center;
  }
  .page-home .text-center .section-title::after {
    transition: none;
    transform: translateX(-50%) scaleX(1);
  }
  .page-home .hero-bg {
    top: 0;
    height: 100%;
    transform: none !important;
  }
  /* Docking hero: no transitions — home-animations.js docks instantly, so the
     panel + video simply render in their final positions. */
  .page-home .hero-video-card.hero-bg,
  .page-home .hero-intro,
  .page-home .hero-dock,
  .page-home .hero-dock > *,
  .page-home .hero-card-rotator,
  .page-home .hero-card-rotator__slide,
  .page-home .hero-card-rotator__video,
  .page-home .hero-card-rotator__img {
    transition: none !important;
  }
  .page-home .hero-dock > * {
    transform: none;
    opacity: 1;
  }
  /* Brand ticker: no marquee — show one static, scrollable row. */
  .page-home .hero-brand-track {
    animation: none !important;
  }
  .page-home .hero-brand-set:nth-child(2) {
    display: none;
  }
  .page-home .hero-brand-ticker {
    overflow-x: auto;
  }
}