/*!
 * Halo — sport layer.
 *
 * Anchored on the manufacturer's own spec sheets rather than invented: deep
 * navy ground, gold as the hero accent, cyan as the electric secondary, heavy
 * condensed italic capitals, and the double-slash motif that runs across their
 * material. Gold also separates Halo from both named competitors, who lead with
 * orange.
 *
 * Textures are taken from the carts themselves — diamond-stitch upholstery,
 * tread plate, tyre blocks — so the page furniture belongs to the product.
 */

:root {
  /* Premium, not loud. The badge is polished chrome, so the accent is metal
     rather than a colour: near-black for anything you can press, a cool steel
     for rules and labels, and a chrome ramp on the figures that matter.
     Swap these to retint the whole site. */
  --ink: #101823;           /* primary action + display */
  --ink-soft: #26303f;
  --steel: #737f92;         /* rules, labels, quiet type */
  --platinum: #c3ccd8;
  --accent: var(--ink);
  --accent-deep: var(--ink-soft);
  --carbon: #0a0e15;
  --navy-1: #101a2e;
  --navy-2: #16233d;

  --fx-display: "Archivo", system-ui, sans-serif;
  --fx-body: "Manrope", system-ui, sans-serif;
}

body { font-family: var(--fx-body); }

/* ----- Display type: heavy, condensed, raked forward ----- */

/* Wide, upright and tracked out. Condensed italic reads athletic; luxury
   marques go the other way — width and air instead of weight and rake. The
   width axis is what does the work here, not the weight. */
.fx-display {
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 116;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  line-height: 1.04;
  text-wrap: balance;
}

.fx-xl { font-size: clamp(2.1rem, 1rem + 4.2vw, 4.1rem); }
.fx-lg { font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.6rem); }

/* Gold-through-white metal ramp for headline emphasis. */
.fx-accent {
  background-image: linear-gradient(172deg, #ffffff 0%, #cfd7e2 26%, #78838f 46%, #eef2f7 60%, #9aa5b3 80%, #dfe5ec 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* On light grounds the same idea, weighted dark so it stays legible. */
.fx-steel {
  background-image: linear-gradient(174deg, #47505c 0%, #131922 26%, #5d6875 48%, #0d1219 62%, #4a5560 84%, #171d26 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- Slash kicker, straight off their spec sheets ----- */

.fx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 112;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.76rem;
  color: var(--steel);
}

.fx-kicker::before {
  content: "";
  width: 26px;
  height: 12px;
  background: repeating-linear-gradient(115deg,
    var(--ink) 0 4px, transparent 4px 8px);
}

/* On the dark bands the same kicker inverts to platinum. */
.fx-band .fx-kicker,
.band-navy .fx-kicker { color: var(--platinum); }

.fx-band .fx-kicker::before,
.band-navy .fx-kicker::before {
  background: repeating-linear-gradient(115deg, var(--platinum) 0 4px, transparent 4px 8px);
}

/* ----- Racing stripe rules and dividers ----- */

.fx-stripe {
  height: 3px;
  background: linear-gradient(90deg,
    var(--ink) 0 42%, var(--steel) 42% 62%, transparent 62%);
}

.fx-angled-top { clip-path: polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%); }
.fx-angled-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%); }

/* ----- Textures lifted from the cart ----- */

/* Diamond-stitch, as on the upholstery. */
.fx-quilt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.10;
  background-image:
    repeating-linear-gradient(60deg, currentColor 0 1px, transparent 1px 42px),
    repeating-linear-gradient(-60deg, currentColor 0 1px, transparent 1px 42px);
  pointer-events: none;
}

/* Aluminium tread plate, as on the floor. */
.fx-tread::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.08;
  background-image:
    repeating-linear-gradient(38deg, currentColor 0 2px, transparent 2px 13px),
    repeating-linear-gradient(-38deg, currentColor 0 2px, transparent 2px 13px);
  pointer-events: none;
}

/* ----- Dark performance band ----- */

.fx-band {
  position: relative;
  isolation: isolate;
  color: #eef2f7;
  background:
    radial-gradient(120% 100% at 15% 0%, var(--navy-2) 0%, transparent 60%),
    linear-gradient(160deg, var(--navy-1) 0%, var(--carbon) 100%);
}

.fx-band .fg-2 { color: rgb(238 242 247 / 0.72); }
.fx-band .fg-3 { color: rgb(238 242 247 / 0.55); }

/* ----- Pillars, mirroring their gold badge row ----- */

.fx-pillars {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (width >= 900px) { .fx-pillars { grid-template-columns: repeat(4, 1fr); } }

.fx-pillar {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.fx-pillar-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--ink), transparent 78%);
  color: var(--ink);
}

.fx-pillar h3 {
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 114;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.98rem;
  letter-spacing: 0.09em;
  margin: 0 0 0.15rem;
}

/* ----- Buttons with a forward rake ----- */

.fx-btn {
  --fx-btn-bg: var(--ink);
  --fx-btn-fg: #f6f8fb;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  padding: 0.95rem 1.9rem;
  border: 0;
  cursor: pointer;
  color: var(--fx-btn-fg);
  background: var(--fx-btn-bg);
  transition: filter .18s ease, transform .18s ease;
  text-decoration: none;
}

.fx-btn:hover { filter: brightness(1.16); }

/* The rake is a clip-path, which crops an inset border down to two floating
   lines. So the secondary button is a frosted chip rather than an outline. */
.fx-btn.is-ghost {
  --fx-btn-bg: rgb(255 255 255 / 0.72);
  --fx-btn-fg: var(--ink);
  backdrop-filter: blur(6px);
}

.fx-band .fx-btn.is-ghost,
.band-navy .fx-btn.is-ghost {
  --fx-btn-bg: rgb(255 255 255 / 0.14);
  --fx-btn-fg: #fff;
}

/* ----- Stat figures ----- */

.fx-stat {
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 118;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.02em;
  background-image: linear-gradient(174deg, #ffffff 0%, #d6dde7 30%, #8b96a4 52%, #f2f5f9 70%, #aeb8c6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fx-stat-label {
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 110;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.74rem;
  color: rgb(238 242 247 / 0.52);
}

/* ----- Range cards ----- */

.car {
  position: relative;
  border: 1px solid color-mix(in oklab, var(--navy-1), transparent 88%);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transition: transform .25s ease, box-shadow .25s ease;
  background: #fff;
}

.car:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgb(16 28 54 / 0.16);
}

/* Gold rule that draws in on hover. */
.car::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ink) 0 55%, var(--steel) 55% 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
  z-index: 2;
}

.car:hover::after { transform: scaleX(1); }

.car-name {
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 116;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: 0.1em;
}

.car-trim {
  font-family: var(--fx-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.68rem;
  color: color-mix(in oklab, var(--navy-1), transparent 45%);
}

.car-pm {
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 116;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--navy-1);
}

.car-flag {
  font-family: var(--fx-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  background: var(--ink);
  color: #f6f8fb;
  padding: 0.25rem 0.9rem;
}

/* ----- Section headings across the page ----- */

.section h2.fs-3xl,
.section h1.fs-3xl {
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 116;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 1.08;
  font-size: clamp(1.6rem, 1rem + 2.1vw, 2.5rem);
}

/* Keep the chrome ramp, now on the raked face. */
.chrome-head { font-family: var(--fx-display); font-variation-settings: "wdth" 116; font-weight: 600; font-style: normal; }

/* ----- Finance band picks up the dark treatment ----- */

.band-navy {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 100% at 15% 0%, var(--navy-2) 0%, transparent 60%),
    linear-gradient(160deg, var(--navy-1) 0%, var(--carbon) 100%);
}

.calc-figure {
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 118;
  font-weight: 500;
  line-height: 1;
  background-image: linear-gradient(174deg, #ffffff 0%, #d6dde7 30%, #8b96a4 52%, #f2f5f9 70%, #aeb8c6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- Model + swatch controls ----- */

.model-btn {
  font-family: var(--fx-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  border-radius: 0;
}

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

.swatch[aria-pressed="true"] {
  outline-color: var(--ink);
}

/* ----- Reveal on scroll ----- */

@media (prefers-reduced-motion: no-preference) {
  .fx-rise {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  }
  .fx-rise.is-in { opacity: 1; transform: none; }
}

/* ----- Hairline feature list -----
   Used where a short paragraph sits beside tall media and leaves a void. Real
   specification lines carry that space better than padding does. */

.fx-speclist {
  display: grid;
  gap: 0;
  border-block-start: 1px solid color-mix(in oklab, var(--ink), transparent 88%);
}

@media (width >= 620px) {
  .fx-speclist { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

.fx-speclist li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.85rem;
  border-block-end: 1px solid color-mix(in oklab, var(--ink), transparent 88%);
  list-style: none;
}

.fx-speclist .k {
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 110;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
  color: var(--steel);
  flex: 0 0 40%;
}

.fx-speclist .v { font-size: 0.95rem; }

/* ---------------------------------------------------------------
   Range showcase

   One cart at a time, large, cross-fading. The four cut-outs are pre-aligned
   to a common cart height and baseline, so the fade reads as one vehicle being
   swapped rather than four photographs of different sizes.
   --------------------------------------------------------------- */

.showcase { position: relative; overflow: hidden; }

.showcase-stage {
  position: relative;
  aspect-ratio: 989 / 620;
  width: 100%;
}

.showcase-cart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1);
  filter: drop-shadow(0 30px 26px rgb(16 28 54 / 0.22));
}

.showcase-cart.is-on { opacity: 1; transform: none; }

/* Text swaps on the same beat as the cart. */
.showcase-panel { position: relative; }

.showcase-copy {
  transition: opacity .35s ease, transform .35s ease;
}

.showcase-copy.is-swapping {
  opacity: 0;
  transform: translateY(8px);
}

.showcase-name {
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 118;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.05;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem);
}

.showcase-price {
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 116;
  font-weight: 500;
  font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem);
  line-height: 1;
}

/* Model selector */
.showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-block-start: 1px solid color-mix(in oklab, var(--ink), transparent 88%);
  padding-block-start: 1rem;
}

.showcase-tab {
  flex: 1 1 auto;
  background: none;
  border: 0;
  padding: 0.6rem 0.4rem 0.7rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 112;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--steel);
  border-block-start: 2px solid transparent;
  margin-block-start: -1rem;
  transition: color .2s ease, border-color .2s ease;
}

.showcase-tab:hover { color: var(--ink); }

.showcase-tab[aria-selected="true"] {
  color: var(--ink);
  border-block-start-color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .showcase-cart, .showcase-copy { transition: none; }
}

/* Full-width variant. .fx-btn is inline-flex, so Bootstrap's w-100 alone
   leaves the label hugging the left edge. */
.fx-btn.is-block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* The header sits on near-black, where the default dark button would vanish.
   Invert it to platinum so the phone number stays the brightest thing up there. */
.site-header .fx-btn {
  --fx-btn-bg: var(--platinum);
  --fx-btn-fg: var(--ink);
  font-size: 0.74rem;
  padding: 0.6rem 1.1rem;
}

.site-header .fx-btn:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------------
   Feature hotspots

   The manufacturer's spec sheets are callout diagrams; this is that idea made
   interactive. Points are positioned as percentages so they track the image at
   any size.
   --------------------------------------------------------------- */

.spots {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 594;
}

.spots img { width: 100%; height: 100%; object-fit: contain; display: block; }

.spot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  font: 600 0.78rem/1 var(--fx-display);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9), 0 6px 14px rgb(16 28 54 / 0.3);
  transition: transform .18s ease, background .18s ease;
}

.spot:hover { transform: translate(-50%, -50%) scale(1.14); }

.spot[aria-expanded="true"] {
  background: var(--steel);
  transform: translate(-50%, -50%) scale(1.14);
}

/* A slow pulse on the unopened points, so they read as interactive. */
.spot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  opacity: 0;
  animation: spotPulse 2.6s ease-out infinite;
}

.spot[aria-expanded="true"]::after,
.spots.is-touched .spot::after { animation: none; opacity: 0; }

@keyframes spotPulse {
  0%   { opacity: .5; transform: scale(.85); }
  70%  { opacity: 0;  transform: scale(1.35); }
  100% { opacity: 0;  transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .spot::after { animation: none; opacity: 0; }
}

.spot-panel {
  border-block-start: 2px solid var(--ink);
  padding-block-start: 1.1rem;
  min-height: 7.5rem;
}

.spot-panel h3 {
  font-family: var(--fx-display);
  font-variation-settings: "wdth" 114;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  margin: 0 0 .5rem;
}

.spot-count {
  font-family: var(--fx-display);
  font-weight: 500;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--steel);
}