/* site.css — Push to Start Australia (PTS) public site components.

   Refined modern luxury: a dark, gallery-like canvas that lets vehicle
   photography dominate, editorial serif headings, a single fiery-orange
   accent (--accent) reserved for CTAs / price / focus, and generous negative
   space. Every value references a design token from tokens.css — no raw hex —
   so the visual system stays consistent across pages (Requirement 7.1).

   Imagery is always presented without aspect-ratio distortion via fixed
   aspect-ratio boxes + object-fit: cover (Requirement 7.2). Motion is
   restrained (transform/opacity, 150–300ms); the reduced-motion baseline lives
   in base.css. */

/* =======================================================================
   Page shell — centred content column with generous gutters.
   ======================================================================= */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Responsive safeguard (Requirements 6.1, 6.3): never allow a stray wide
     child (an oversized image, a long unbroken token, a blown-out grid track)
     to introduce horizontal scrolling between 320px and 1920px. Vertical
     scrolling is unaffected. */
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Prevent the centred column itself from ever exceeding the viewport. */
  min-width: 0;
}

/* =======================================================================
   Site header — brand lockup + primary navigation.
   ======================================================================= */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
  /* Span the hero height so the brand centers vertically within it. */
  min-height: clamp(347px, 53vw, 547px);
  margin-inline: auto;
  padding: var(--space-24) var(--gutter);
  background: transparent;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-header__brand:hover {
  text-decoration: none;
}

/* Brand emblem — centered and large, floating over the hero. */
.site-header__logo {
  height: clamp(277px, 37.8vw, 529px);
  width: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
}

/* Nav links pinned to the top-right corner, at ~2x the previous size. */
.site-nav {
  position: absolute;
  top: var(--space-24);
  right: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-24);
  max-width: 55%;
}

.site-nav__link {
  color: var(--accent);
  font-size: clamp(0.8rem, 0.8vw + 0.4rem, 1.3rem);
  font-weight: var(--fw-display-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding-block: var(--space-4);
  border-bottom: 2px solid transparent;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  transition: color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

.nav-toggle {
  display: none;
}

.nav-toggle__icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 768px) {
  /* Stack on small screens: centered logo, links centered below it. */
  .site-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--gutter);
  }

  .site-nav {
    position: static;
    justify-content: center;
    max-width: none;
    gap: var(--space-16);
    margin-top: var(--space-12);
  }
}

/* =======================================================================
   Hero Visual — full-bleed brand hero with Corvette image + gradient scrim
   + wordmark/tagline overlay (Requirement 13).

   The section is position:relative so the image fills it edge-to-edge,
   the gradient scrim sits over the image for text contrast (>= 4.5:1),
   and the overlay text is positioned centrally above the scrim.
   The hero breaks out of the centred content column via negative margins
   so it spans the full viewport width (full-bleed).
   ======================================================================= */

.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  /* Contain the absolutely-positioned children */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(347px, 53vw, 547px);
}

/* Full-bleed breakout: shift left by the gutter + reclaim full viewport */
@supports (margin-inline-start: calc(50% - 50vw)) {
  .hero {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

.hero__image,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Gradient scrim: darkened at BOTH the top (so the floating header — orange
   links + logo — stays legible) and the bottom (for the tagline), with the
   middle left clearer so the video reads through. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(11, 11, 12, 0.72) 0%,
    rgba(11, 11, 12, 0.3) 20%,
    rgba(11, 11, 12, 0.28) 55%,
    rgba(11, 11, 12, 0.8) 100%
  );
  pointer-events: none;
}

/* Text overlay: tagline anchored to the bottom of the hero. */
.hero__overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-32) var(--space-32) var(--space-48);
  gap: var(--space-12);
}

.hero__wordmark {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-8), 5vw + 1rem, var(--fs-12));
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

.hero__tagline {
  font-size: clamp(1.05rem, 2.1vw + 0.7rem, 2.1rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

/* Four overlay links over the hero video — bright orange pill buttons that
   match the logo accent. Orange outline + text by default; solid orange fill
   on hover/focus for a confident, on-brand interaction. */
.hero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-16);
}

.hero__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-12) var(--space-32);
  border: 2px solid var(--accent);
  border-radius: var(--radius-pill);
  background-color: rgba(11, 11, 12, 0.45);
  color: var(--accent);
  font-size: var(--fs-3);
  font-weight: var(--fw-display-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.hero__link:hover,
.hero__link:focus-visible {
  background-color: var(--accent);
  color: var(--accent-contrast);
  transform: translateY(-2px);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__link:hover,
  .hero__link:focus-visible {
    transform: none;
  }
}

/* Fallback when the hero image fails to load: a neutral dark gradient
   replaces the missing image so the section still looks intentional. */
.hero--fallback {
  background: linear-gradient(
    135deg,
    var(--bg-base) 0%,
    var(--bg-elevated) 50%,
    var(--bg-base) 100%
  );
}

.hero--fallback .hero__scrim {
  /* Scrim not needed when showing fallback gradient */
  display: none;
}

/* Full-bleed orange divider placed directly beneath the hero on both pages. */
.hero-divider {
  border: 0;
  height: 3px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-block: 0;
  background: var(--accent);
}

/* =======================================================================
   Fleet Showcase — section heading + editorial grid of vehicle cards.
   ======================================================================= */

#fleet-showcase {
  padding-block: var(--space-48) var(--space-64);
}

.fleet-grid {
  display: grid;
  /* Single vertical column; larger cards, centred on the page. */
  grid-template-columns: 1fr;
  gap: var(--space-48);
  width: 100%;
  max-width: 858px;
  margin-inline: auto;
}

/* --- Vehicle card --------------------------------------------------------
   A keyboard-operable link. The card is a quiet panel on the dark canvas;
   restrained hover elevation invites interaction without shouting. */
.vehicle-card {
  display: flex;
  flex-direction: column;
  /* Grid children default to min-width:auto, which lets wide content (a long
     image or unbroken token) blow the track past the viewport. Pinning to 0
     keeps the card within its track so there is no horizontal scroll. */
  min-width: 0;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}

.vehicle-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  text-decoration: none;
}

.vehicle-card__media {
  aspect-ratio: 2.78 / 1;
  overflow: hidden;
  background-color: var(--bg-base);
}

/* object-fit: cover within a fixed aspect-ratio box prevents distortion
   (Requirement 7.2). A restrained zoom-on-hover adds gallery polish. */
.vehicle-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-out);
}

.vehicle-card:hover .vehicle-card__image {
  transform: scale(1.04);
}

/* Auto-rotating image stack (e.g. the Corvette card): images are stacked and
   crossfade between each other. Only the active image is visible. */
.vehicle-card__media--rotating .vehicle-card__image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
}

.vehicle-card__media--rotating .vehicle-card__image.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .vehicle-card__media--rotating .vehicle-card__image {
    transition: none;
  }
}

.vehicle-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
}

.vehicle-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-6);
  line-height: var(--lh-heading);
  color: var(--accent);
  /* Long vehicle names wrap (and break if truly unbreakable) so they never
     widen the card past its grid track (Requirement 6.3). */
  overflow-wrap: anywhere;
}

.vehicle-card__price {
  font-size: var(--fs-4);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Coming Soon card variant (Requirements 14.2, 6.5, 7.1) --------------
   A non-navigable preview card with a muted/dimmed appearance and a visible
   "Coming Soon" badge. The card is not a link — cursor stays default to signal
   it is not interactive. */

.vehicle-card--coming-soon {
  cursor: default;
  pointer-events: none;
}

/* Dimmed/desaturated treatment on the image to signal placeholder status. */
.vehicle-card--coming-soon .vehicle-card__image {
  opacity: 1.0;
  filter: saturate(1.0);
}

/* Remove interactive hover effects — the card is non-navigable. */
.vehicle-card--coming-soon:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

.vehicle-card--coming-soon:hover .vehicle-card__image {
  transform: none;
}

/* --- "Coming Soon" badge (Requirement 14.2) --------------------------------
   Positioned over the media area (top-right corner). Pill-shaped, fiery orange
   on dark, bold uppercase — readable as visible text, never color-only. */

.vehicle-card__badge {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  padding: var(--space-4) var(--space-12);
  background-color: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--fs-1);
  font-weight: var(--fw-display-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  line-height: 1.4;
  white-space: nowrap;
  z-index: 1;
}

/* The media container needs relative positioning so the badge can be
   absolutely positioned over it. */
.vehicle-card__media {
  position: relative;
}

/* --- Available cards: touch-target guarantee (Requirement 6.5) ---------------
   Available vehicle cards are `<a>` elements that must remain at least
   44×44 CSS pixels to satisfy the touch-target rule on mobile viewports. The
   card naturally exceeds this (the full card area is the touch target), but we
   add an explicit min-size guard for safety. */

a.vehicle-card {
  min-height: 44px;
  min-width: 44px;
}

/* Inline data-unavailable message (Requirement 11.5). */
.fleet-unavailable {
  padding: var(--space-48);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--bg-elevated);
}

/* =======================================================================
   Image Carousel (Requirements 2.5–2.8, 7.3, 8.4).

   An auto-rotating slideshow with CSS opacity crossfade, prev/next controls,
   and pause-on-hover/focus/reduced-motion behavior.
   ======================================================================= */

.carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--bg-elevated);
}

.carousel__slides {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms ease-out;
  pointer-events: none;
}

.carousel__slide.active {
  opacity: 1;
  pointer-events: auto;
}

.carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Prev/next controls: positioned at left/right edges, 44px touch targets */
.carousel__prev,
.carousel__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-pill);
  background-color: rgba(11, 11, 12, 0.7);
  color: var(--text-primary);
  font-size: var(--fs-8);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out),
    opacity var(--motion-fast) var(--ease-out);
}

.carousel__prev {
  left: var(--space-12);
}

.carousel__next {
  right: var(--space-12);
}

.carousel__prev:hover,
.carousel__next:hover {
  background-color: rgba(11, 11, 12, 0.9);
}

.carousel__prev svg,
.carousel__next svg {
  display: block;
}

.carousel__prev:focus-visible,
.carousel__next:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Visually-hidden live region is handled inline (sr-only pattern). */

/* Reduced motion: disable the opacity crossfade transition (Requirement 7.3). */
@media (prefers-reduced-motion: reduce) {
  .carousel__slide {
    transition: none;
  }
}

/* =======================================================================
   Vehicle Detail View.
   ======================================================================= */

.vehicle-detail {
  padding-block: var(--space-48) var(--space-64);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.vehicle-detail__name {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-8), 4vw + 1rem, var(--fs-11));
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
}

.vehicle-detail__price {
  font-size: var(--fs-6);
  font-weight: var(--fw-medium);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Gallery — full-bleed-feeling editorial images; one column on mobile,
   two on wider viewports. */
.vehicle-detail__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  margin-block: var(--space-16);
}

@media (min-width: 768px) {
  .vehicle-detail__gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* The first image leads as a full-width hero. */
  .vehicle-detail__figure:first-child {
    grid-column: 1 / -1;
  }
}

.vehicle-detail__figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--bg-elevated);
}

/* aspect-ratio + object-fit: cover keeps imagery undistorted (Requirement 7.2).
   The JS sets a 16:9 box via inline style; cover ensures no stretching. */
.vehicle-detail__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vehicle-detail__description {
  font-size: var(--fs-4);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: var(--content-narrow);
}

/* Specifications — an editorial label/value list. */
.vehicle-detail__specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-block: var(--space-16);
  border-top: 1px solid var(--border);
}

@media (min-width: 600px) {
  .vehicle-detail__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-48);
  }
}

.vehicle-detail__spec-label {
  padding-top: var(--space-16);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

.vehicle-detail__spec-value {
  margin: 0;
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-4);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* =======================================================================
   Categorised Specifications Grid (Requirement 2.9)
   Editorial spec-grid layout: 2–3 columns on desktop, single-column on mobile.
   ======================================================================= */

.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  margin-block: var(--space-24);
}

@media (min-width: 768px) {
  .spec-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-32);
  }
}

.spec-category-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.spec-category-group__header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.spec-category-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}

.spec-category-group__icon svg {
  width: 24px;
  height: 24px;
}

.spec-category-group__heading {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  color: var(--text-primary);
  margin: 0;
}

.spec-category-group__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.spec-category-group__label {
  padding-top: var(--space-12);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

.spec-category-group__value {
  margin: 0;
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-3);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.spec-category-group__value:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* "Enquire Now" — primary CTA in the fiery orange accent (Requirements 2.3, 2.11).
   min-height/min-width 44px guarantees the touch-target rule (Requirement 6.5). */
.vehicle-detail__enquire {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-16);
  padding: var(--space-16) var(--space-32);
  min-height: 44px;
  min-width: 44px;
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-2);
  text-decoration: none;
  transition: transform var(--motion-fast) var(--ease-out),
    opacity var(--motion-fast) var(--ease-out);
}

.vehicle-detail__enquire:hover {
  transform: translateY(-2px);
  opacity: 0.92;
  text-decoration: none;
}

/* Back link + not-found / unavailable message panels (Requirement 11.5). */
.vehicle-detail__message-title {
  font-family: var(--font-display);
  font-size: var(--fs-8);
}

.vehicle-detail__message {
  font-size: var(--fs-4);
  color: var(--text-secondary);
}

/* "Back to fleet" navigation link (Requirements 2.10, 11.5).
   Used both inside the article (available vehicle) and in message panels.
   Styled as a subtle secondary control: muted color, small font, flex with
   gap for icon alignment, hover shifts to accent. Native <a> so already
   keyboard-focusable. */
.vehicle-detail__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}

.vehicle-detail__back:hover,
.vehicle-detail__back:focus-visible {
  color: var(--accent);
  text-decoration: none;
}

.vehicle-detail__back-icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

/* =======================================================================
   Concierge messaging section.
   ======================================================================= */

.concierge {
  padding-block: var(--space-64);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-24);
  border-top: 1px solid var(--border);
}

.concierge__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-7), 3vw + 0.5rem, var(--fs-9));
  line-height: var(--lh-display);
  color: var(--accent);
}

.concierge__lead {
  font-size: var(--fs-5);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  max-width: var(--content-narrow);
}

.concierge__detail {
  font-size: var(--fs-4);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: var(--content-narrow);
}

/* =======================================================================
   Enquiry section + form.
   ======================================================================= */

.enquiry {
  padding-block: var(--space-64);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-24);
  border-top: 1px solid var(--border);
}

.enquiry__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-7), 3vw + 0.5rem, var(--fs-9));
  line-height: var(--lh-display);
  color: var(--accent);
}

.enquiry__lead {
  font-size: var(--fs-4);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: var(--content-narrow);
}

.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  max-width: 40rem;
  margin-top: var(--space-16);
  margin-inline: auto;
  padding: var(--space-32);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* Reset to left-aligned inside the form so labels/inputs read naturally. */
  text-align: left;
}

.enquiry-form__title {
  font-family: var(--font-display);
  font-size: var(--fs-6);
}

.enquiry-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.enquiry-field__label {
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.enquiry-field__input {
  padding: var(--space-12) var(--space-16);
  background-color: var(--bg-base);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-3);
  transition: border-color var(--motion-fast) var(--ease-out);
}

.enquiry-field__input:hover {
  border-color: var(--text-secondary);
}

/* Comment box (textarea) — taller, vertically resizable, same field styling. */
textarea.enquiry-field__input {
  min-height: 7rem;
  resize: vertical;
  font-family: inherit;
  line-height: var(--lh-body);
}

.enquiry-field__input[aria-invalid="true"] {
  border-color: var(--danger);
}

/* Per-field validation message: colour is paired with a non-colour warning
   icon and the message text, so errors never rely on colour alone
   (Requirement 8.3 colour-independence). The ⚠ glyph is rendered via a
   ::before only when the message has content, so empty error containers stay
   silent. */
.field-error {
  margin: 0;
  font-size: var(--fs-2);
  color: var(--danger);
  min-height: 1em;
}

.field-error:not(:empty)::before {
  content: "⚠";
  margin-right: var(--space-8);
  font-weight: var(--fw-display-bold);
}

.field-error:empty {
  display: none;
}

/* Submit CTA — the metallic accent. */
.enquiry-form__submit {
  align-self: flex-start;
  padding: var(--space-16) var(--space-32);
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-2);
  transition: transform var(--motion-fast) var(--ease-out),
    opacity var(--motion-fast) var(--ease-out);
}

.enquiry-form__submit:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

.enquiry-guidance {
  margin: 0;
  padding: var(--space-16);
  border-left: var(--focus-ring-width) solid var(--accent);
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-size: var(--fs-3);
  line-height: var(--lh-body);
}

/* =======================================================================
   Site footer — brand lockup + contact channels.
   ======================================================================= */

.site-footer {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-48) var(--gutter);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
}

.site-footer__brand:hover {
  text-decoration: none;
}

.site-footer__logo {
  height: clamp(96px, 12vw, 140px);
  width: auto;
}

.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--fs-6);
}

.contact-channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-32);
}

.contact-channels__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-channels__label {
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

.contact-channels__link {
  font-size: var(--fs-4);
  color: var(--accent);
  font-weight: var(--fw-medium);
}

.site-footer__note {
  font-size: var(--fs-2);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wide);
}

/* =======================================================================
   Reduced-motion handling (Requirement 7.3).

   base.css already zeroes transition/animation durations globally for users who
   prefer reduced motion. This block makes the handling explicit and robust for
   the public site's decorative motions: it removes the hover transforms
   (card lift, image zoom, CTA lift) outright so no positional/scale shift
   occurs at all — not merely an instant one. Non-decorative affordances
   (colour/border changes, the focus ring) are preserved.
   ======================================================================= */

@media (prefers-reduced-motion: reduce) {
  /* Hero: disable any entrance animation or transition on the hero section,
     image, overlay, and scrim (Requirement 7.3). The hero must appear fully
     rendered without any fade-in, slide, or scale entrance effect. */
  .hero,
  .hero__image,
  .hero__overlay,
  .hero__scrim {
    animation: none !important;
    transition: none !important;
  }

  .vehicle-card:hover {
    transform: none;
  }

  .vehicle-card:hover .vehicle-card__image {
    transform: none;
  }

  .vehicle-detail__enquire:hover,
  .enquiry-form__submit:hover {
    transform: none;
  }
}

/* =======================================================================
   Vehicle Detail — Editorial Dark-Luxury Layout
   Cinematic hero → intro + sticky pricing rail → spec grid → gallery.
   One committed direction: imagery dominates, whitespace carries hierarchy,
   minimal competing borders, subtle scroll-reveal motion.
   ======================================================================= */

.vehicle-detail--editorial {
  display: block;
  padding-block: 0 var(--space-96);
}

.vehicle-detail--editorial .vehicle-detail__back {
  margin-bottom: var(--space-24);
}

/* Shared section title (Specifications / Gallery). */
.vd-section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-6), 1.5vw + 0.5rem, var(--fs-8));
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 var(--space-24);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--border);
}

/* --- 1. Cinematic hero — full-bleed across the page (like the homepage) -- */
.vd-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  min-height: clamp(347px, 53vw, 547px);
  display: flex;
  align-items: flex-end;
}

.vd-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.vd-hero--fallback {
  background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-elevated) 50%, var(--bg-base) 100%);
}

.vd-hero--fallback .vd-hero__img {
  display: none;
}

.vd-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    var(--bg-base) 0%,
    rgba(11, 11, 12, 0.55) 32%,
    rgba(11, 11, 12, 0) 65%
  );
  pointer-events: none;
}

.vd-hero__overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(var(--space-24), 4vw, var(--space-48)) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.vd-hero__eyebrow {
  margin: 0;
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}

.vd-hero__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-8), 2.5vw + 0.5rem, var(--fs-10));
  line-height: var(--lh-heading);
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-wrap: balance;
}

.vd-hero__location {
  margin: 0;
  font-size: var(--fs-4);
  color: var(--text-secondary);
}

/* --- 2. Description lead (full width under the hero) -------------------- */
.vd-intro {
  padding-block: var(--space-48) 0;
}

.vd-lead {
  margin-inline: auto;
  font-size: clamp(var(--fs-4), 1vw + 0.75rem, var(--fs-5));
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: var(--content-narrow);
  text-align: center;
}

.vd-lead::first-letter {
  font-family: var(--font-display);
  font-size: 1.5em;
  font-weight: var(--fw-display);
  color: var(--text-primary);
}

/* --- 3. Cost & Hire Terms — two columns, no divider -------------------- */
.vd-costterms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-32), 6vw, var(--space-96));
  padding-block: var(--space-48) 0;
  align-items: start;
}

.vd-ct-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}

@media (max-width: 699px) {
  /* Stack on narrow viewports. */
  .vd-costterms {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
}

.vd-ct-title {
  margin: 0;
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Enquire CTA beneath the cost/terms block, centred. */
.vd-ct-actions {
  display: flex;
  justify-content: center;
  padding-block: var(--space-48) 0;
}

.vd-ct-cta {
  min-width: min(100%, 22rem);
  justify-content: center;
}

/* The "From" prefix sits inline before the headline price. */
.vd-booking__from-prefix {
  font-family: var(--font-body);
  font-size: var(--fs-3);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  margin-right: var(--space-8);
}

.vd-booking__from-label {
  margin: 0;
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

.vd-booking__from-amount {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-size: var(--fs-9);
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.vd-booking__per {
  font-family: var(--font-body);
  font-size: var(--fs-4);
  color: var(--text-secondary);
  margin-left: var(--space-4);
}

/* A subtitle that introduces the Hire Terms block within the same panel,
   sharing the pricing rows' rhythm so the two read as one system. */
.vd-booking__subtitle {
  margin: var(--space-8) 0 0;
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

/* Shared row treatment for BOTH pricing tiers and hire terms — one language. */
.vd-booking__rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12) var(--space-16);
  margin: 0;
  padding-top: var(--space-16);
  border-top: 1px solid var(--border);
}

.vd-booking__row-label {
  font-size: var(--fs-3);
  color: var(--text-secondary);
}

.vd-booking__row-value {
  margin: 0;
  font-size: var(--fs-3);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* CTA fills the panel width for a confident, intentional button. */
.vd-booking__cta {
  align-self: stretch;
  margin-top: var(--space-8);
  width: 100%;
}

/* --- 3. Specifications grid (full-width, balanced multi-column) ---------- */
.vd-specs {
  padding-block: var(--space-48) 0;
}

.vd-specs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-32) var(--space-48);
  align-content: start;
}

.vd-spec-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.vd-spec-group__header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}

.vd-spec-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.vd-spec-group__icon svg {
  width: 20px;
  height: 20px;
}

.vd-spec-group__heading {
  margin: 0;
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}

.vd-spec-group__list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8) var(--space-16);
  margin: 0;
}

.vd-spec-group__label {
  font-size: var(--fs-3);
  color: var(--text-secondary);
}

.vd-spec-group__value {
  margin: 0;
  font-size: var(--fs-3);
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- 4. Gallery — full-bleed across the page, no blend ------------------ */
.vd-gallery {
  padding-block: var(--space-48) 0;
}

.vd-gallery .vehicle-detail__carousel {
  max-width: 660px;
  margin-inline: auto;
}

/* Match the homepage fleet card framing. */
.vd-gallery .carousel {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.vd-gallery .carousel__slides {
  aspect-ratio: 16 / 10;
  height: auto;
}

/* --- Scroll-reveal motion (checklist #6) -------------------------------- */
.vd-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
}

.vd-reveal--in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .vd-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =======================================================================
   Experience Packages — configurable pricing/terms block (vehicle page).
   Orange-on-black panels with circular icons, mirroring the brand artwork.
   ======================================================================= */

.vd-experience {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-block: var(--space-64) 0;
}

.vd-exp__title {
  margin: 0;
  text-align: center;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: clamp(var(--fs-5), 1.5vw + 0.5rem, var(--fs-7));
  font-weight: var(--fw-display-bold);
}

/* Shared circular icon badge. */
.vd-exp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
}

.vd-exp__icon svg {
  width: 24px;
  height: 24px;
}

.vd-exp__icon--lg {
  width: 56px;
  height: 56px;
}

/* --- Packages panel --- */
.vd-exp__panel,
.vd-exp__bondpanel,
.vd-exp__foot {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

.vd-exp__panel {
  border: 1px solid rgba(242, 106, 33, 0.5);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-24) var(--space-16);
  min-width: 0;
}

/* "EXPERIENCE PACKAGES" sits centered on the top border; the fieldset breaks
   the border around the legend (stops before the text, resumes after it). */
.vd-exp__legend {
  margin-inline: auto;
  padding: 0 var(--space-16);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: clamp(var(--fs-4), 1.5vw + 0.5rem, var(--fs-6));
  font-weight: var(--fw-display-bold);
}

.vd-exp__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-24);
  padding-block: var(--space-16);
  border-bottom: 1px solid rgba(242, 106, 33, 0.25);
}

.vd-exp__row:last-child {
  border-bottom: none;
}

.vd-exp__label {
  font-size: var(--fs-4);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  min-width: 0;
}

.vd-exp__price {
  font-size: clamp(var(--fs-6), 1.5vw + 1rem, var(--fs-8));
  font-weight: var(--fw-display-bold);
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.vd-exp__unit {
  font-size: var(--fs-3);
  margin-left: 2px;
}

/* --- Bond + concierge panel --- */
.vd-exp__bondpanel {
  border: 1px solid rgba(242, 106, 33, 0.5);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  align-items: center;
}

.vd-exp__bond {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.vd-exp__bond-text {
  margin: 0;
  font-size: clamp(var(--fs-6), 1.2vw + 0.75rem, var(--fs-8));
  font-weight: var(--fw-display-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-wide);
}

.vd-exp__concierge {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-16);
  border-left: 1px solid rgba(242, 106, 33, 0.3);
  padding-left: var(--space-24);
}

.vd-exp__concierge-lines {
  text-align: right;
}

.vd-exp__concierge-line {
  margin: 0;
  font-size: var(--fs-3);
  line-height: var(--lh-heading);
  color: var(--text-primary);
}

.vd-exp__concierge-line.is-accent {
  color: var(--accent);
  font-weight: var(--fw-medium);
}

/* --- Minimum age + license footer --- */
.vd-exp__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
}

.vd-exp__foot-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
}

.vd-exp__foot-item:last-child {
  border-left: 1px solid rgba(242, 106, 33, 0.3);
}

.vd-exp__foot-text {
  display: flex;
  flex-direction: column;
}

.vd-exp__foot-label {
  font-size: var(--fs-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}

.vd-exp__foot-value {
  font-size: var(--fs-5);
  font-weight: var(--fw-display-bold);
  color: var(--accent);
}

@media (max-width: 699px) {
  .vd-exp__bondpanel,
  .vd-exp__foot {
    grid-template-columns: 1fr;
  }

  .vd-exp__concierge {
    justify-content: flex-start;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(242, 106, 33, 0.3);
    padding-top: var(--space-16);
  }

  .vd-exp__foot-item:last-child {
    border-left: none;
    border-top: 1px solid rgba(242, 106, 33, 0.3);
    padding-top: var(--space-16);
  }
}

/* =======================================================================
   Vehicle name card — title block (left) + car image (right), below hero.
   ======================================================================= */

.vd-namecard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-24), 4vw, var(--space-64));
  max-width: 1040px;
  margin-inline: auto;
  padding-block: var(--space-48) 0;
}

.vd-namecard__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-8);
  min-width: 0;
}

.vd-namecard__line1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-7), 2vw + 0.5rem, var(--fs-9));
  line-height: var(--lh-heading);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.vd-namecard__line2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-8), 2.5vw + 0.5rem, var(--fs-10));
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--accent);
}

.vd-namecard__tagline {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Car card = gallery-sized auto-rotating carousel, beside the title. */
.vd-namecard__card {
  width: min(560px, 100%);
  max-width: 560px;
  margin-inline: 0;
}

.vd-namecard .carousel {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.vd-namecard .carousel__slides {
  aspect-ratio: 16 / 10;
  height: auto;
}

/* Stack and center on narrow viewports. */
@media (max-width: 760px) {
  .vd-namecard {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .vd-namecard__title {
    align-items: center;
    text-align: center;
  }

  .vd-namecard__card {
    width: 100%;
    margin-inline: auto;
  }
}