/*!
 * Halo — variant B overrides on the Forecourt kit.
 *
 * Forecourt ships a signal-orange accent. Both of Halo's named competitors
 * (Reluvo and Denago) also lead with orange, so this variant is retinted to
 * the blue already present in Halo's own brand — same structure, distinct
 * shelf presence.
 */

:root {
  /* Bootstrap derives its whole primary family from this. Kept graphite rather
     than a colour so the stock buttons, links and focus rings sit with the
     chrome-and-near-black palette instead of fighting it. */
  --brand: oklch(34% 0.028 252);
}

/* Chrome wordmark, lifted from the Halo badge. */
.halo-word {
  font-weight: 800;
  letter-spacing: 0.28em;
  background: linear-gradient(175deg, #fff 0%, #c3c9d1 28%, #6e767f 48%,
    #eef1f4 62%, #9aa2ab 80%, #dfe4e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-bs-theme="light"] .halo-word {
  background: linear-gradient(175deg, #4a5158 0%, #20262c 45%, #6b747d 70%, #2b3238 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The demo-payment warning needs to read clearly in both themes. */
.demo-note {
  border: 1px solid color-mix(in oklab, #f0b429, transparent 65%);
  background: color-mix(in oklab, #f0b429, transparent 88%);
  border-radius: var(--bs-radius-4);
  padding: 1rem 1.25rem;
}

.spec-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1rem;
}

@media (width >= 768px) {
  .spec-strip { grid-template-columns: repeat(5, 1fr); }
}

.spec-strip .v {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.gal-grid {
  columns: 2;
  column-gap: 1rem;
}

@media (width >= 768px) { .gal-grid { columns: 3; } }

.gal-grid > * {
  margin-block-end: 1rem;
  break-inside: avoid;
}

.gal-grid img {
  width: 100%;
  height: auto;
  border-radius: var(--bs-radius-4);
  display: block;
}

/* ---------------------------------------------------------------
   Image defaults

   Unlike Tailwind's preflight, Bootstrap 6 does not normalise image height. Any
   rule that scales width alone therefore leaves the height pinned to the HTML
   `height` attribute — which is how the gallery ended up rendering 4:3 photos
   at 232x959. Class-level rules that genuinely want a fixed height (the hero
   scenics, the slideshow) out-specify this.
   --------------------------------------------------------------- */

img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------
   Light scheme with navy bands

   One fixed scheme: white ground, navy bands. No light/dark toggle.

   The carts were photographed in bright daylight, so translucent parts —
   windscreens, the plastic still wrapping the seats — carry sky values. On a
   dark ground those read as cut-out defects; on white they read as glass.
   So every section showing a cut-out PNG sits on white, and the navy carries
   the bands between them: header, spec strip, finance, footer.
   --------------------------------------------------------------- */

:root {
  --halo-navy: oklch(24% 0.055 258);
  --halo-navy-deep: oklch(18% 0.05 258);
  --halo-ice: oklch(96% 0.012 250);
}

/* The page is always light. `[data-bs-theme="dark"]` survives only as the
   mechanism that flips Bootstrap's own foreground and border tokens inside a
   .band-navy strip — it is not a user-facing mode. */
[data-bs-theme="light"] {
  --bs-bg-body: #ffffff;
  --bs-bg-2: var(--halo-ice);
}

[data-bs-theme="dark"] {
  --bs-bg-body: var(--halo-navy-deep);
  --bs-bg-2: var(--halo-navy);
}

/* A navy band inside a light page. Carries its own theme so Bootstrap's own
   fg/border tokens flip with it and text stays legible. */
.band-navy {
  background: var(--halo-navy-deep);
  color: var(--bs-fg-body);
}

.site-header {
  background: var(--halo-navy-deep);
}

/* --- Hero: light ground so the cut-out reads correctly --- */

.hero-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--halo-ice);
}

/* Real course photography behind the hero, cross-fading slowly. A generated
   grid read as stock AI filler; this is the environment the carts actually
   live in. */
.hero-scenics {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-scenic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.hero-scenic.is-on { opacity: 1; }

/* Knocks the photography back to roughly a fifth of its strength, heaviest
   behind the headline so the navy type keeps its contrast. */
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgb(255 255 255 / 0.70) 0%,
    rgb(255 255 255 / 0.56) 34%,
    rgb(249 252 254 / 0.34) 68%,
    rgb(245 250 253 / 0.26) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-scenic { transition: none; }
}

.hero-cart {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 26px rgb(16 28 54 / 0.28));
  animation: heroRise 1s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

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

.hero-shadow {
  width: 74%;
  height: 24px;
  margin: -1.25rem auto 0;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgb(16 28 54 / 0.34), rgb(16 28 54 / 0.12) 62%, transparent 100%);
  filter: blur(8px);
}

/* --- Colour studio: white stage, always --- */

.studio-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  border-radius: var(--bs-radius-4);
  background:
    radial-gradient(85% 65% at 50% 46%, var(--halo-ice) 0%, #fff 72%);
  border: 1px solid color-mix(in oklab, var(--halo-navy), transparent 88%);
}

.studio-stage canvas {
  max-width: 100%;
  max-height: 52vh;
  height: auto;
  filter: drop-shadow(0 22px 22px rgb(16 28 54 / 0.26));
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.swatch {
  aspect-ratio: 1;
  border-radius: var(--bs-radius-3);
  border: 2px solid color-mix(in oklab, var(--bs-fg-body), transparent 82%);
  cursor: pointer;
  padding: 0;
}

.swatch[aria-pressed="true"] {
  border-color: var(--bs-fg-body);
  outline: 2px solid color-mix(in oklab, var(--brand), transparent 40%);
  outline-offset: 2px;
}


/* ---------------------------------------------------------------
   Slideshow
   --------------------------------------------------------------- */

.slideshow-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--bs-radius-4);
  overflow: hidden;
  background: var(--halo-ice);
  box-shadow: 0 24px 44px rgb(16 28 54 / 0.16);
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}

.slide[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 2.5rem 1rem 0.9rem;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(to top, rgb(8 14 28 / 0.82), transparent);
}

.slideshow-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 0.9rem;
}

.slideshow-arrow {
  border: 1px solid color-mix(in oklab, var(--bs-fg-body), transparent 80%);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  cursor: pointer;
}

.slideshow-arrow:hover { border-color: var(--bs-fg-body); }

.slideshow-dots { display: flex; gap: 0.4rem; }

.slideshow-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: color-mix(in oklab, var(--bs-fg-body), transparent 76%);
}

.slideshow-dot[aria-selected="true"] {
  background: var(--brand);
  width: 1.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}

/* ---------------------------------------------------------------
   Colour teaser — front-on cut-out with live swatches
   --------------------------------------------------------------- */

.teaser {
  background: radial-gradient(70% 60% at 50% 42%, var(--halo-ice) 0%, #fff 74%);
}

.teaser-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.teaser-stage canvas {
  max-width: 100%;
  max-height: 46vh;
  height: auto;
  filter: drop-shadow(0 26px 24px rgb(16 28 54 / 0.26));
}

.teaser-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  /* Deliberately flex-start, not centre: Bootstrap's utilities live in a
     cascade layer, so an unlayered `center` here silently wins over
     `.justify-content-start` and pushes the row off the text margin. */
  justify-content: flex-start;
}

.teaser-swatches .swatch { width: 2.6rem; aspect-ratio: 1; }

/* ---------------------------------------------------------------
   Turntable
   --------------------------------------------------------------- */

.studio-stage { position: relative; }

.studio-stage canvas {
  cursor: grab;
  touch-action: pan-y;
  outline-offset: 4px;
}

.studio-stage canvas.is-dragging { cursor: grabbing; }

.drag-hint {
  position: absolute;
  inset-block-end: 0.9rem;
  inset-inline: 0;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bs-fg-body), transparent 40%);
  pointer-events: none;
  animation: hintPulse 2.4s ease-in-out infinite;
}

.drag-hint.is-gone { opacity: 0; animation: none; transition: opacity .4s ease; }

@keyframes hintPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .drag-hint { animation: none; }
}

.turn-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 1rem;
}

.turn-bar .form-range-input { flex: 1; }

/* Model picker in the studio */
.model-btn {
  border: 1px solid color-mix(in oklab, var(--bs-fg-body), transparent 82%);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.model-btn:hover { border-color: var(--bs-fg-body); }

.model-btn[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* The teaser shows one side profile; trim the canvas box so it does not float
   in dead space the way the nose-on frame did. */
.teaser-stage canvas { max-height: 48vh; }

/* ---------------------------------------------------------------
   Chrome headline

   Echoes the brushed-metal badge. The dark-ground version of this effect runs
   white through grey, which would disappear on this hero — so the ramp here is
   predominantly dark steel with lighter bands running through it. It reads as
   brushed metal while keeping the contrast of near-black text.
   --------------------------------------------------------------- */

.chrome-head {
  font-family: "Archivo", system-ui, sans-serif;
  font-variation-settings: "wdth" 116;
  font-weight: 600;
  letter-spacing: 0.045em;
  line-height: 1.08;
  text-wrap: balance;
  color: #1b2026;                       /* fallback wherever clipping is unsupported */
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .chrome-head {
    background-image: linear-gradient(
      177deg,
      #49525c 0%,
      #171c22 20%,
      #626c77 40%,
      #10151a 52%,
      #55606b 70%,
      #1a1f25 86%,
      #3c454e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Bebas has no lowercase, so it is set uppercase deliberately and given room. */
.showroom-title.chrome-head {
  font-size: clamp(2.1rem, 1rem + 4.2vw, 4.1rem);
  text-transform: uppercase;
}

/* The monthly figure carried the hero before the tagline took over; keep it
   prominent in the supporting line rather than losing the commercial hook. */
.hero-price {
  font-weight: 600;
  color: var(--halo-navy);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Video window

   Framed the same way as the hero photo deck rather than run full-bleed, so
   the two read as a pair. The clip is dark, which fought the light scheme when
   it bled to the page edges.
   --------------------------------------------------------------- */

/* The clip is a portrait phone recording (9:16). It was previously forced into
   a 16:9 window, so `cover` threw away roughly two thirds of the frame. */
.reel-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  max-width: 400px;
  margin-inline: auto;
  border-radius: var(--bs-radius-4);
  overflow: hidden;
  background: var(--halo-navy-deep);
  box-shadow: 0 28px 54px rgb(16 28 54 / 0.22);
}

.reel-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reel-caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 3.5rem 1.1rem 1.1rem;
  color: #fff;
  background: linear-gradient(to top, rgb(8 12 22 / 0.86), transparent);
  pointer-events: none;
}

.reel-caption strong {
  font-family: "Archivo", system-ui, sans-serif;
  font-variation-settings: "wdth" 114;
  font-weight: 600;
  font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.5rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  display: block;
  line-height: 1.15;
}

.reel-controls {
  position: absolute;
  inset-block-start: 0.9rem;
  inset-inline-end: 0.9rem;
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}

.reel-btn {
  border: 1px solid rgb(255 255 255 / 0.38);
  background: rgb(8 12 22 / 0.5);
  color: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.reel-btn:hover { border-color: #fff; }

/* Count-up figures settle rather than snapping in. */
.spec-strip .v { font-variant-numeric: tabular-nums; }