/* Component styles only — tokens, reset, typography, utilities and animations live in
   css/_tokens.css, _reset.css, _typography.css, _utilities.css, _animations.css.
   See templates/layouts/base.html for load order. */

/* Focus visibility — applies to every interactive element (a11y gap #6).
   :focus-visible so it shows for keyboard users without ringing on mouse clicks. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Shared shells emitted by templates/macros/. Individual card types layer on top
   of these via their own BEM classes. */
.media-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.media-card > *:not(img):not([aria-hidden="true"]) {
  position: relative;
  z-index: 2;
}

.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: rgba(245, 243, 243, 0.08);
}
.icon-circle--40 { width: 40px; height: 40px; }
.icon-circle--48 { width: 48px; height: 48px; }
.icon-circle--56 { width: 56px; height: 56px; }
.icon-circle--80 { width: 80px; height: 80px; }

.icon {
  flex-shrink: 0;
}

/* Buttons — PMV / vh_pmv gradient primary + glass-outline secondary CTA */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--font-size-base);
  line-height: 24px;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: opacity var(--ease-hover), transform var(--transition-premium),
    box-shadow var(--transition-premium), border-color var(--transition-premium),
    background var(--transition-premium);
}
.btn:not(.btn--primary):not(.btn--outline):hover {
  opacity: 0.85;
}
.btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--gradient-btn-primary);
  color: var(--color-bg);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.btn--primary:hover::before {
  transform: translateX(100%);
}
.btn--primary:hover {
  background: var(--gradient-btn-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-primary-hover);
  opacity: 1;
}
.btn--primary > *,
.btn--primary .btn__icon {
  position: relative;
  z-index: 1;
}
.btn--secondary {
  background: var(--color-text);
  color: var(--color-surface);
}
.btn--outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-text);
}
.btn--outline:hover {
  border-color: var(--color-accent);
  opacity: 1;
}
.btn--full {
  width: 100%;
}
/* Figma About CTA (1162:9711 / 1162:9715) uses 24px assets, not the 16px inline arrow. */
.btn__icon--asset {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}
/* Canonical content tag — matches Showroom .vehicle-list-card__badge (glass pill, orange
   border, uppercase Bebas label). Every badge/pill on the site should use .btn--pill or
   one of the positioning aliases below so tags stay visually consistent. */
.btn--pill,
.vehicle-list-card__badge,
.compare-table__badge,
.event-card__badge,
.saved-item__badge,
.ticket-bundle__badge,
.product-path-card__eyebrow,
.vehicle-pdp__pill,
.feature-card__pill {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 8px 16px;
  line-height: 24px;
  border-radius: 100px;
  border: 1px solid var(--color-accent);
  background: rgba(245, 243, 243, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f5f3f3;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.56px;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn--icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background-color: rgba(245, 243, 243, 0.9);
}
.btn--icon-circle img {
  width: 24px;
  height: 24px;
}

/* Cards — PMV glass surface + subtle border + orange accent on hover */
.card {
  position: relative;
  background: var(--gradient-card-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  transition:
    transform var(--transition-premium),
    border-color var(--transition-premium),
    box-shadow var(--transition-premium);
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: inherit;
  background: var(--gradient-card-accent-line);
  opacity: 0;
  transition: opacity var(--transition-premium);
  pointer-events: none;
  z-index: 1;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--border-card-hover);
  box-shadow: var(--shadow-card-hover);
}
.card:hover::before {
  opacity: 1;
}
.card > * {
  position: relative;
  z-index: 2;
}

/* Icons inside flex rows must not be squished by flex-shrink */
.btn img,
.btn--pill img,
.site-header__actions img,
.site-footer__social img,
.feature-card__icon img,
.contact-card__icon img,
.contact-card__link img,
.testimonial-card__stars img,
.faq-item img,
.video-block__play img {
  flex-shrink: 0;
}
.site-footer__social img {
  width: 24px;
  height: 24px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-bg);
  /* 8px, matching the 8px side gap: Figma places the header bar at Y56 in a frame whose first
     48px are the fake-browser toolbar, so the real page offset is 56 − 48 = 8. */
  padding-top: var(--frame-gap);
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  /* 8px, not the 72px content gutter: the Figma Header bar is X8 W1496 in the 1512 frame.
     The bar keeps its own 32px internal padding for the logo/nav. */
  padding: 0 var(--frame-gap);
}
.site-header__bar {
  position: relative;
  height: 88px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  /* Figma puts the menu icon at X64 inside a Header that starts at X8, i.e. absolute 72 —
     the same gutter every content section uses. 32px left the icon at x40, off the grid. */
  padding: 0 64px;
}
.site-header__menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  /* The SVG strokes are currentColor. Nothing set a colour here, so it fell back to the
     initial value — pure black — on a #201F1F header, i.e. all but invisible.
     Figma's `Menu / Menu_Alt_02` reports Design colors/F37021. */
  color: var(--color-accent);
}
.site-header__menu-toggle svg {
  /* Figma: 56×56, not 24. */
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.site-header__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.site-header__logo img {
  height: 44px;
  width: auto;
}
.site-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-header__actions a {
  display: inline-flex;
  align-items: center;
}
.header-icon-link {
  position: relative;
}
.header-icon-link__count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--color-accent);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}
.site-header__actions img {
  width: 24px;
  height: 24px;
}
.site-header__actions .btn--outline {
  margin-left: 8px;
}
@media (max-width: 767px) {
  /* Figma Mobile/Home Header (Group 2147216850): 359×56 bar at x8.
     Menu 32×32 @ x24 | Search 24×24 @ x72 | Logo 131×40 centred @ x122 |
     Account @ x287 | Cart @ x327. Logo must stay geometrically centred
     (frame mid 187.5) — do NOT switch to flex auto-margins (that pulled it
     ~34px left). Search sits on the LEFT of the logo; account+cart on the right. */
  .site-header__actions .btn--outline,
  .site-header__actions .header-icon-link--wishlist,
  .site-header__actions .header-icon-link--compare {
    display: none;
  }
  .site-header__bar {
    height: 56px;
    padding: 0 16px;
  }
  .site-header__menu-toggle svg {
    width: 32px;
    height: 32px;
  }
  .site-header__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 1;
  }
  .site-header__logo img { height: 40px; }
  /* Pull search out of the right cluster — Figma places it left of the logo. */
  .site-header__actions .header-icon-link--search {
    position: absolute;
    left: 64px; /* bar pad 16 + menu 32 + gap 16 */
    top: 50%;
    transform: translateY(-50%);
  }
  .site-header__actions {
    margin-left: auto;
    gap: 16px;
  }
}

/* Menu overlay (hamburger).
   The panel is NOT a rectangle: per the Figma (node 708-1258) its right edge is a diagonal
   from the top-right down to slightly-left at the bottom, with the dimmed page showing
   through beside it. That shape is the design; the transition is secondary and just expands
   the same polygon horizontally so the panel does not pop.
   Geometry and fill come from the --menu-* tokens. Desktop only: the diagonal would clip the
   nav on narrow screens, and mobile is a separately designed surface that has not been
   verified, so below 992px the panel stays full-width and square. */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  overflow-y: auto;
  opacity: 0;
  transition: opacity var(--duration-fade) var(--ease-reveal);
}
.menu-overlay.is-open {
  opacity: 1;
}
.menu-overlay[hidden] {
  display: none;
}
.menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  width: 100%;
  background: var(--menu-panel-bg);
  padding: 40px 24px;
}

/* The diagonal itself. Collapsed to zero width when closed so the open transition expands
   the same shape outward, keeping the angle visible the whole way. */
@media (min-width: 992px) {
  .menu-panel {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: clip-path var(--duration-menu) var(--ease-reveal);
    will-change: clip-path;
  }
  .menu-overlay.is-open .menu-panel {
    clip-path: polygon(0 0, 100% 0, var(--menu-edge-skew) 100%, 0 100%);
  }
}

/* Nav items settle in behind the wipe, top-down, so the eye follows the same diagonal. */
.menu-nav__item,
.menu-panel__socials {
  opacity: 0;
  transform: translate(14px, -10px);
  transition: opacity var(--duration-fade) var(--ease-reveal),
              transform var(--duration-fade) var(--ease-reveal);
}
.menu-overlay.is-open .menu-nav__item,
.menu-overlay.is-open .menu-panel__socials {
  opacity: 1;
  transform: none;
  transition-delay: var(--vh-stagger-delay, 0s);
}
/* The per-item delay is published as a custom property rather than set directly, so the
   desktop rule below can reuse the exact same timing on a different element. Custom
   properties inherit, plain transition-delay does not. */
.menu-overlay.is-open .menu-nav__item:nth-child(1) { --vh-stagger-delay: calc(var(--stagger-step) * 1); }
.menu-overlay.is-open .menu-nav__item:nth-child(2) { --vh-stagger-delay: calc(var(--stagger-step) * 2); }
.menu-overlay.is-open .menu-nav__item:nth-child(3) { --vh-stagger-delay: calc(var(--stagger-step) * 3); }
.menu-overlay.is-open .menu-nav__item:nth-child(4) { --vh-stagger-delay: calc(var(--stagger-step) * 4); }
.menu-overlay.is-open .menu-nav__item:nth-child(5) { --vh-stagger-delay: calc(var(--stagger-step) * 5); }
.menu-overlay.is-open .menu-nav__item:nth-child(6) { --vh-stagger-delay: calc(var(--stagger-step) * 6); }
.menu-overlay.is-open .menu-nav__item:nth-child(n+7) { --vh-stagger-delay: calc(var(--stagger-step) * 7); }
.menu-overlay.is-open .menu-panel__socials { --vh-stagger-delay: calc(var(--stagger-step) * 8); }

/* ⚠️ Desktop: the entrance travel must NOT sit on the <li>.
   A non-`none` transform makes an element the containing block for its absolutely
   positioned descendants — even at `position: static`. At >=992px `.menu-submenu` is
   absolute (`top:128px; left:400px`, anchored to `.menu-panel`), so while the stagger
   ran, the submenu resolved those offsets against the nav item instead and rendered far
   too low, then visibly SNAPPED up the moment the transform settled to `none`.
   Measured on live /home at 1512: submenu top 314px during the stagger vs 128px after —
   a 186px jump, which is the flicker the client reported.
   Fix keeps the identical motion by moving the travel onto the item's own row, which has
   no positioned descendants. Opacity stays on the <li> — opacity does not create a
   containing block, and keeping it there fades the submenu in with its parent. */
@media (min-width: 992px) {
  .menu-nav__item {
    transform: none;
  }
  .menu-nav__item > .menu-nav__toggle,
  .menu-nav__item > .menu-nav__link {
    transform: translate(14px, -10px);
    transition: transform var(--duration-fade) var(--ease-reveal);
  }
  .menu-overlay.is-open .menu-nav__item > .menu-nav__toggle,
  .menu-overlay.is-open .menu-nav__item > .menu-nav__link {
    transform: none;
    transition-delay: var(--vh-stagger-delay, 0s);
  }
}

/* Reduced motion: keep the diagonal (it is the design, not an effect) but drop the reveal,
   the stagger and the travel. The panel is simply there at its final shape. */
@media (prefers-reduced-motion: reduce) {
  .menu-panel { transition: none; }
  .menu-nav__item,
  .menu-panel__socials { opacity: 1; transform: none; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
  .menu-panel {
    clip-path: polygon(0 0, 100% 0, var(--menu-edge-skew) 100%, 0 100%);
  }
  /* The desktop travel now lives on the item's row, so reduced-motion has to clear it
     there too — otherwise these stay offset by 14/-10 permanently. */
  .menu-nav__item > .menu-nav__toggle,
  .menu-nav__item > .menu-nav__link {
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}
.menu-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(123, 123, 123, 0.3);
}
.menu-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  /* Same currentColor-with-no-colour bug as the header hamburger: the X resolved to the
     initial pure black on the #201F1F panel. Figma shows it in the light text colour. */
  color: var(--color-text);
}
.menu-panel__close svg {
  width: 24px;
  height: 24px;
}
.menu-panel__label {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-sm);
}

.menu-nav {
  max-width: 480px;
}
.menu-nav__item {
  border-bottom: 1px solid rgba(123, 123, 123, 0.3);
}
.menu-nav__link,
.menu-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 16px 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-h4);
  line-height: 32px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
}
.menu-nav__chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.menu-nav__item.is-open .menu-nav__toggle {
  color: var(--color-accent);
}
.menu-nav__item.is-open .menu-nav__chevron {
  transform: rotate(180deg);
}
.menu-submenu {
  display: none;
  padding: 0 0 16px;
}
.menu-nav__item.is-open .menu-submenu {
  display: block;
}
.menu-submenu li + li {
  margin-top: 4px;
}
.menu-submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  color: var(--color-text);
  font-size: var(--font-size-base);
  border-radius: 8px;
}
.menu-submenu__arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('/hubfs/raw_assets/public/VH2026/images/home/icon-arrow-up-right.svg') no-repeat center / contain;
  mask: url('/hubfs/raw_assets/public/VH2026/images/home/icon-arrow-up-right.svg') no-repeat center / contain;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.menu-submenu a:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}
.menu-submenu a:hover .menu-submenu__arrow {
  opacity: 1;
}

.menu-panel__socials {
  margin-top: 32px;
}
.menu-panel__socials-label {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 16px;
}
.menu-panel__social-icons {
  display: flex;
  gap: 12px;
}
.menu-panel__social-icons a {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu-panel__social-icons img {
  width: 16px;
  height: 16px;
}

/* Desktop: flush left panel (not full width) over the dimmed live page, submenu floats into right column */
@media (min-width: 992px) {
  .menu-panel {
    /* Sized to the diagonal's widest point (its top edge) so the clip-path percentages
       resolve correctly. Was a flat 760px, which is narrower than the Figma panel. */
    width: var(--menu-panel-width);
    max-width: none;
    padding: 48px;
  }
  .menu-nav {
    max-width: 320px;
  }
  /* The close/MENU row and its rule sit over the nav column only. With the panel now sized
     to the diagonal's widest point, space-between was throwing "MENU" out to the far right
     and stretching the divider the full width of the panel. */
  .menu-panel__top {
    max-width: 320px;
  }
  .menu-nav__item[data-menu-item] .menu-submenu {
    display: block;
    position: absolute;
    left: 400px;
    /* Fixed column, not `right: 48px`. Anchoring to the panel's right edge made the active
       item's highlight stretch the full width of the now-wider panel; the Figma column runs
       400 -> 692 in frame coordinates. */
    width: 292px;
    right: auto;
    top: 128px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .menu-nav__item[data-menu-item].is-open .menu-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .menu-submenu a {
    font-size: var(--font-size-lg);
  }
  .menu-nav__item.is-open .menu-submenu a.is-active {
    background: var(--color-accent);
    color: var(--color-bg);
  }
}

/* Hero */
.hero {
  position: relative;
  /* Full-bleed (0px side gap) was a real client decision, but that's a WIDTH choice — it does
     not override the shape's own corner radius. Figma's Rectangle 1 specifies radius:8
     regardless of position; zeroing it here was an unjustified extra step from that decision. */
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  /* Figma: header bar bottom 144, hero top 150 → a 6px gap, not 24. */
  margin: 6px 0 0;
  min-height: var(--hero-min, 714px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero--raffle {
  width: auto;
  margin: 6px 8px 0;
  min-height: 640px;
  align-items: stretch;
  justify-content: flex-start;
}
/* Figma 1482:18812 — dual 78% scrims on the hero photo (top fade + bottom fade). */
.hero--raffle .hero__overlay {
  background:
    linear-gradient(180deg, rgba(11, 33, 46, 0) 0%, rgba(11, 33, 46, 0.78) 100%),
    linear-gradient(180deg, rgba(11, 33, 46, 0.78) 0%, rgba(11, 33, 46, 0) 100%);
}
.hero--raffle .hero__content {
  width: 100%;
  max-width: none;
  min-height: 640px;
  padding: 98px 24px 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero--raffle .hero__intro {
  width: 100%;
}
.hero--raffle .h1 {
  max-width: 676px;
  margin-left: auto;
  margin-right: auto;
}
.hero--raffle .hero__content .body-lg {
  max-width: 906px;
  margin: 16px auto 0;
}
/* Figma: subheading ends y≈394, countdown digits y≈478 → 84px gap. */
.hero--raffle .hero__countdown {
  margin-top: 84px;
  width: 100%;
}

/* Figma raffle (1482:18810) — digit countdown HH : MM : SS (hero + footer CTA).
   Lives in main.css because require_css on countdown.module resolves to an empty href
   when the timer is rendered from hero/cta-banner rather than the countdown module. */
.countdown { text-align: center; }
.countdown--digits .countdown__timer--digits {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}
.countdown--digits .countdown__unit {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.countdown--digits .countdown__value {
  font-family: var(--font-heading);
  font-size: 120px;
  font-weight: 500;
  line-height: 120px;
  letter-spacing: 0;
  min-width: 1ch;
}
.countdown--digits .countdown__colon {
  font-family: var(--font-heading);
  font-size: 120px;
  font-weight: 400;
  line-height: 120px;
  padding: 0 24px;
  color: var(--color-text);
}
.countdown--digits .countdown__label {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text);
}
.countdown--digits .countdown__value--flip {
  display: inline-block;
  overflow: hidden;
  height: 120px;
}
.countdown--digits .countdown__value--flip.is-tick {
  animation: vh-cd-tick 0.4s ease-out;
}
@keyframes vh-cd-tick {
  0% { transform: translateY(-35%); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}
.countdown--hero.countdown--digits { margin-top: 0; }
.countdown--cta.countdown--digits { margin-top: 48px; }
.countdown--cta.countdown--digits .countdown__value,
.countdown--cta.countdown--digits .countdown__colon {
  font-size: 88px;
  line-height: 88px;
}
.countdown--cta.countdown--digits .countdown__value--flip { height: 88px; }
.countdown--cta.countdown--digits .countdown__colon { padding: 0 18px; }
@media (max-width: 767px) {
  .countdown--digits .countdown__value,
  .countdown--digits .countdown__colon {
    font-size: 48px;
    line-height: 48px;
  }
  .countdown--digits .countdown__colon { padding: 0 8px; }
  .countdown--digits .countdown__value--flip { height: 48px; }
  .countdown--digits .countdown__label { font-size: 14px; line-height: 20px; }
}

.raffle-adventure {
  position: relative;
  margin: 0 8px 96px;
}
.raffle-faq .faq-grid {
  margin-top: 0;
  padding-bottom: 0;
}
.raffle-fees {
  text-align: center;
  margin: 32px auto 0;
  padding: 0 var(--container-pad);
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  color: #F5F3F3;
}
.raffle-detail .feature-grid {
  padding-bottom: 0;
}
.raffle-fair .feature-grid {
  padding-bottom: 0;
}
/* Figma 1482:18903 — 330×360 fair-play cards, 16px gap, #2A2A2A fill. */
.raffle-fair .feature-card {
  min-height: 360px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  gap: 24px;
}
.raffle-fair .feature-card .h4 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  text-transform: none;
  letter-spacing: 0.96px;
}
.raffle-fair .feature-card > p {
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0.72px;
}
.raffle-fair .feature-card__icon img {
  filter: brightness(0) invert(1);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* PMV-style looping hero video — /vh_pmv reference */
.hero__video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: heroVideoSlowZoom 25s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroVideoSlowZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.hero--video .hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(11, 33, 46, 0.7) 0%,
    rgba(11, 33, 46, 0.55) 40%,
    rgba(11, 33, 46, 0.75) 80%,
    rgba(11, 33, 46, 1) 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { animation: none; }
}
/* Hero scrim.
   Figma builds the hero as ONE rectangle (`Rectangle 1`, 1504×714, radius 8) carrying two
   fills: a Linear gradient at 78% layer opacity ON TOP of the image at 100%.

   The stop VALUES are 100F0F @ 0 alpha -> 100F0F @ 1 alpha, but the stop POSITIONS are not
   0%/100% of the box — they sit at the gradient's actual handle positions, read from
   `gradientHandlePositions` in the raw API response: start handle y=-0.3172, end handle
   y=0.3370 (of the shape's own height). So the gradient reaches full strength (0.78 opacity)
   at ~34% down the hero, not at the bottom, and — since there's no stop past that — HOLDS at
   0.78 for the remaining ~66%. At the shape's literal top edge (y=0%) that already works out
   to ~38% opacity, not 0%. A naive 0%/100% CSS gradient (the previous version here) stays far
   too light until near the very bottom, which is why the live hero read visibly brighter and
   less moody than the Figma frame side by side. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 33, 46,0) -31.72%, rgba(11, 33, 46,0.78) 33.70%);
}
/* Figma: the hero H1 is a 1022-wide text box at x=245 in the 1512 frame, i.e. it spans the
   full content width with NO horizontal inset. The old `padding: 64px 24px` shrank the H1's
   box to 974 and pushed the buttons row in by the same 24px each side. Vertical padding of
   64 is correct and confirmed (Figma H1 sits 64 below the content box top).
   Horizontal padding is reinstated below 992px, where the hero is narrower than 1022 and the
   text would otherwise touch the edges. */
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1022px;
  box-sizing: border-box;
  padding: 64px 0;
}
@media (max-width: 991px) {
  .hero__content { padding: 64px 24px; }
}
.hero__content .body-lg {
  color: var(--color-text);
  max-width: 906px;
  margin: 24px auto 32px;
}
.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}
/* .hero is centred by default, so .hero--center needs no rules — only the left variant
   has to undo the centring. The hero module emits one of these two modifiers. */
.hero--left {
  text-align: left;
  justify-content: flex-start;
}
.hero--left .hero__content .body-lg {
  margin-left: 0;
  margin-right: 0;
}
.hero--left .hero__actions {
  justify-content: flex-start;
}
/* .hero__content's max-width:1022px auto-centres inside the 1512px hero when text-align is
   centred, which happens to land the content at Figma's x=245 for the home hero (see comment
   above). But .hero--left's flex-start collapses that auto-centring margin entirely, so left
   heroes rendered flush at x=0 with no gutter at all — confirmed against the Privacy Policy
   Figma frame, whose left-aligned heading sits at x=72, the site's standard --container-pad.
   Found 8 Aug 2026 while pixel-verifying Privacy Policy; affects every hero--left page
   (About, Careers, Warranty, Part Exchange, Brand Partnerships, VSO, and all 5 legal pages). */
@media (min-width: 992px) {
  .hero--left .hero__content {
    padding-left: var(--container-pad);
  }
}

/* Split hero — heading left, standfirst on the right, both on one row.
   Measured off the Privacy Policy frame (1498:35065, 1512 wide):
     heading      x=72  y=296  w=676   48/— weight 200 UPPER
     standfirst   x=937 y=288  w=503   18/— weight 400
   937 + 503 = 1440, i.e. the standfirst ends exactly on the right container gutter (1512-72),
   so the row spans the full content width and the two blocks sit at its outer edges.
   This is a SEPARATE variant rather than a change to .hero--left on purpose: hero--left is
   shared by About, Careers, Warranty, Part Exchange, Brand Partnerships and VSO, all already
   pixel-verified, and only the legal frames were measured as split. Light vs heavy
   uses Barlow Condensed 200/500 (see .h1--light). Size and position are matched exactly. */
@media (min-width: 992px) {
  .hero--split .hero__content {
    max-width: none;
    width: 100%;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
  }
  /* The two column widths differ per frame — legal is 676/503 (standfirst starting at x937),
     About is 734/561 (starting at x879) — while the standfirst's RIGHT edge is 1440 on both,
     because that is the container gutter. So the widths are variables with the legal frame's
     values as the default, and a page whose frame differs sets them on a wrapper around its
     own hero (see landing-about.html). Hardcoding either set would break the other page. */
  .hero--split .h1 {
    font-size: 48px;
    flex: 0 1 var(--hero-split-heading, 676px);
  }
  .hero--split .hero__content .body-lg {
    flex: 0 0 var(--hero-split-copy, 503px);
    max-width: var(--hero-split-copy, 503px);
    /* 8px lower than the heading in Figma (288 vs 296) — the standfirst is top-aligned to the
       heading's cap height, not its line box. */
    margin: 8px 0 0;
  }
}
/* Below 992 the two blocks stack, which is what the mobile frame (1499:35340) shows: heading
   then standfirst, both full width at the 24px mobile gutter. */
.hero--split {
  text-align: left;
  justify-content: flex-start;
}

/* Standalone button row (button-group module) */
.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 0 var(--container-pad);
}
.button-group--left {
  justify-content: flex-start;
}
.button-group--center {
  justify-content: center;
}
.button-group--right {
  justify-content: flex-end;
}

/* Section width cap.
   .container, .site-header__inner and .site-footer__inner were capped at --container-max and
   centred, but these section wrappers only set horizontal padding. Above 1512px they went
   full-bleed while the header and footer stayed in their column, so nothing lined up and the
   spacing read as inconsistent. They keep their own vertical padding; this only constrains
   and centres them. */
.button-group,
.split-section,
.feature-grid,
.category-grid,
.van-listing,
.faq-section,
.testimonial-section,
.gallery-section {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* Two-column feature section.
   Figma has the heading (copy column) and the media column both starting at the same Y —
   top-aligned, not vertically centred as a pair. align-items:center was letting the shorter
   copy column float to the middle of the 480px media height instead. Top padding is 128 (not
   120) so the row lands exactly on Figma's Y944 relative to the hero above it; bottom stays
   the standard 120. */
.split-section {
  display: grid;
  /* Figma's two columns are NOT equal: copy is 618 wide at x72, the image is 676 at x764, so
     the gutter between them is 74 (764 - 690), not 48. 618 + 74 + 676 = 1368, the exact
     content column. Equal 1fr columns made both 660 and left the image 16px narrow. */
  grid-template-columns: 618fr 676fr;
  gap: 74px;
  padding: 128px var(--container-pad) 120px;
  align-items: start;
}
/* Media-left flips WHICH column each item lands in, so it needs its own widths — the 618/676
   above belong to the copy-left frames (home, landing, lifestyle-landing). About's Pursuit
   section (1162:9655) measures image 676 at x72, copy 561 at x879, i.e. a 131 gutter:
   676 + 131 + 561 = 1368. Reusing the copy-left widths gave the image 618 and the copy 676,
   which is why the image read narrow and the text started ~113px left of Figma.
   Only About (live) and vehicle-detail (not yet bound to a page) use media-left. */
.split-section--media-left {
  grid-template-columns: 676fr 561fr;
  gap: 131px;
  /* The shared 128/120 vertical padding was calibrated when this section always sat inside a
     surface panel, where the panel edge was the visual top. With bg_style="none" that padding
     is bare space, and it pushed About's image to y702 against Figma's 576. Measured from the
     frame: image 576-1056, next section (feature cards) 1232, so 74 above and 176 below. */
  padding-top: 74px;
  padding-bottom: 176px;
}
/* Figma starts the copy 40px below the image's top edge (heading y616 vs image y576) rather
   than flush with it, which is what align-items:start alone gives. */
.split-section--media-left .split-section__copy {
  padding-top: 40px;
}
/* Figma: heading bottom (y1056) to paragraph 1 top (y1112) = 56px — the same
   --section-heading-gap used everywhere else on the page, just never applied here. */
.split-section__copy .h2 {
  margin-bottom: var(--section-heading-gap);
}
/* Figma: paragraph 1 bottom (y1272) to paragraph 2 top (y1296) = 24px, not 16. */
.split-section__copy p {
  margin: 0 0 24px;
}
@media (max-width: 991px) {
  .split-section {
    grid-template-columns: 1fr;
    padding: 64px var(--container-pad);
  }
}

/* Feature cards (4-up) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Figma: four 330px cards in the 1368px content column leaves 48px over three gutters, so
     the gap is 16, not 24. The 24 here made every card 324 — 6px narrow — which was enough to
     wrap "In-House Craftsmanship" (280px in Manrope) onto a second line inside a 274px content
     box and blow the whole row's equalised height out from 296 to 342. */
  gap: 16px;
  /* 56px, not the standard 120: Figma puts the "Start Your Project" button 56px below the
     cards (cards bottom 2120 -> button top 2176), and the full 120 belongs BELOW that button
     instead. The 120 here was double-counting and pushed this boundary 56px over. */
  padding: 0 var(--container-pad) 56px;
}
.feature-card {
  padding: 24px;
  /* No min-height. The card is content-driven in Figma, not a fixed box — measured across
     every frame that uses it: Careers 240, Menu 280, Workshop 288, About/Home 304,
     Contact 376. The old 296px floor came from one frame and forced Careers' 240px cards to
     296, which is what pushed that page's whole lower half out of position.
     The height falls out of the parts: 24 pad + 48 icon + 24 + 32 title + 24 + copy + 24 pad
     — e.g. Careers' 2-line copy (64) = 240, About's 4-line (128) = 304, both exact. */
  display: flex;
  flex-direction: column;
  /* Figma: icon -> title is 24, and title -> copy is also 24 (verified on About, Careers,
     Contact and Workshop). */
  gap: 24px;
}
/* Figma: title -> body is 48, not 24 — the extra 24 rides on top of the flex gap. The body
   is also filled F5F3F3 like the title, not the muted #B5B3B3 text style. */
.feature-card > p {
  /* Zero — the 24px flex gap above already IS Figma's title->copy gap. Adding another 24 here
     made it 48 and stretched every card on every page by 24px. Measured title-bottom to
     copy-top: About 24, Careers 24, Contact 24, Workshop 24. The bottom margin must stay 0
     too, or the default rides under the last line and breaks the 24px bottom padding. */
  margin: 0;
  color: var(--color-text);
}
/* In-card spec list — Warranty (Figma 1162:10234, cards 445x376 at y800).
   Card-relative: copy ends at 248, first spec row at 280, second at 320, card bottom 376
   (= 352 + the shared 24 bottom padding). So the list sits 32 below the copy, with a rule in
   that gap, and its rows are 40 apart (32 line + 8).
   Label column: the value starts ~96 in from the card's content edge on all three cards
   (96->194, 557->653, 1018->1110); Figma's 92-98 spread is just its text boxes hugging their
   content, so one 98px column reproduces all three.
   Spacing: the card's own 24px flex gap already puts this box at copy-end + 24 (272), which
   is where the rule goes; 8px of padding then lands the first row on 280. Adding a further
   32px on top of the flex gap — as this first did — pushed the card to 410 against its 376. */
.feature-card__specs {
  margin: 0;
  padding: 8px 0 0;
  position: relative;
}
.feature-card__specs::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background:
    radial-gradient(44% 44% at 52% -10%, rgba(123, 123, 123, 1) 0%, rgba(123, 123, 123, 0.16) 100%),
    radial-gradient(46% 46% at 66% 106%, rgba(123, 123, 123, 1) 0%, rgba(123, 123, 123, 0.16) 100%);
}
.feature-card__spec {
  display: grid;
  grid-template-columns: 98px 1fr;
  align-items: baseline;
}
.feature-card__spec + .feature-card__spec {
  margin-top: 8px;
}
.feature-card__spec dt {
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: 32px;
  color: var(--color-text);
  margin: 0;
}
.feature-card__spec dd {
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 32px;
  color: var(--color-text);
  margin: 0;
}

.feature-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  /* Figma fills this circle with the accent (Design colors/F37021) and puts a white glyph on
     top. It was built as an 8%-white wash, which reads as a dark grey disc instead. */
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-card__icon img {
  width: 24px;
  height: 24px;
}
/* Low BIK on Business Vans: the shield is a hollow outline, so the same 24px
   box reads smaller than percent / chart / calculator. Size only this file. */
.feature-card__icon img[src*="business-vans/icon-shield-bik"] {
  width: 28px;
  height: 28px;
}
@media (max-width: 991px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* Category cards */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 var(--container-pad) 120px;
}
/* Figma: pill pins to the TOP (32,32), title sits near the bottom (32,424) — they are two
   independent anchors, not one bottom-stacked group. space-between + an auto-margin on the
   pill produces that without absolute positioning, so the hover reveal can still push the
   title up naturally. Padding is 32, not 40 (Figma insets everything 32 from each edge). */
.category-card {
  position: relative;
  height: 488px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  border: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.category-card:hover {
  border-color: var(--color-accent);
}
.category-card img.category-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.4s ease;
}
.category-card:hover img.category-card__bg {
  transform: scale(1.06);
}
/* Card scrim — same fix as the hero overlay (main.css .hero__overlay), same root cause:
   Figma builds this as TWO stacked gradient layers, not one 3-stop gradient, and their real
   handle positions (read from gradientHandlePositions in the raw API response, not the
   flattened tool output) don't land where a naive 0%/42%/100% reading assumes:
   - top-fade:    y0 -> y0.4232, alpha 1->0, layer opacity 0.8   (this part was already right)
   - bottom-fade: y0.3186 -> y0.8811, alpha 0->1, layer opacity 0.78 (was assumed 42%->100%)
   Figma paints the bottom-fade ON TOP of the top-fade (later fills array index = higher
   z-order); CSS stacks background layers the opposite way (first-listed = frontmost), so the
   bottom-fade gradient is listed first here. Same values on .van-card__overlay below —
   confirmed identical in Figma across both card types. */
.category-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 33, 46,0) 31.86%, rgba(11, 33, 46,0.78) 88.11%),
    linear-gradient(180deg, rgba(11, 33, 46,0.8) 0%, rgba(11, 33, 46,0) 42.32%);
  z-index: 1;
  transition: background 0.25s ease;
}
.category-card:hover .category-card__overlay {
  background: linear-gradient(180deg, rgba(11, 33, 46,0.85) 0%, rgba(11, 33, 46,0.15) 42%, rgba(11, 33, 46,0.85) 100%);
}
.category-card > *:not(.category-card__bg):not(.category-card__overlay):not(.category-card__arrow) {
  position: relative;
  z-index: 2;
}
/* Pinned to the top of the card; everything else (title + hover reveal) groups at the bottom
   via the parent's space-between. margin-bottom:auto is what pushes that split. */
.category-card .btn--pill {
  align-self: flex-start;
  margin-bottom: auto;
}
/* Figma: 56x56 at (588,20) from the card's top-left — i.e. 32 in from the right edge, aligned
   with the pill row. Was 32x32 at 16/16, half the real size. Resting state is a transparent
   circle with a 1px light ring (the `Arrows` component's default); it fills accent on hover. */
.category-card__arrow {
  position: absolute;
  /* Figma: card abs(72,2576), arrow abs(660,2600) -> relative (588,24). top was 32, an 8px
     miss from an earlier pass in this session. */
  top: 24px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background var(--ease-default), border-color var(--ease-default),
              color var(--ease-default), transform var(--ease-default);
}
.category-card:hover .category-card__arrow,
.category-card__arrow:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text);
}
/* Masked so the glyph inherits currentColor from the button above — see the note in
   home.html on why this cannot be an <img>. */
.category-card__arrow-icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url('/hubfs/raw_assets/public/VH2026/images/home/icon-arrow-up-right.svg') no-repeat center / contain;
          mask: url('/hubfs/raw_assets/public/VH2026/images/home/icon-arrow-up-right.svg') no-repeat center / contain;
}
/* Hover reveal.
   Resting state is pill + title only; hovering reveals the copy and a full-width CTA, and
   the pill/title ride up as the revealed block claims its height (the card is
   justify-content: flex-end, so growth pushes upward on its own).

   The height animates via grid-template-rows 0fr -> 1fr, which is the only way to transition
   to an unknown content height without hardcoding a max-height that would clip longer copy.
   The inner element owns the overflow and the fade. */
.category-card__reveal {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--duration-fade) var(--ease-reveal);
}
.category-card__reveal-inner {
  overflow: hidden;
  min-height: 0;
}
.category-card__reveal .body-md {
  margin: 0;
}
.category-card__cta {
  /* Full width across the card, as in the design, rather than the inline-flex .btn default. */
  display: flex;
  width: 100%;
  margin-top: 24px;
}

/* Only pointer devices that can actually hover get the collapsed resting state. On touch
   there is no hover, and on keyboard the reveal is driven by :focus-within below, so the
   copy and CTA are never content that only a mouse can reach. */
@media (hover: hover) and (pointer: fine) {
  .category-card__reveal {
    grid-template-rows: 0fr;
  }
  .category-card__reveal-inner {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--duration-fade) var(--ease-reveal),
                transform var(--duration-fade) var(--ease-reveal);
  }
  .category-card:hover .category-card__reveal,
  .category-card:focus-within .category-card__reveal {
    grid-template-rows: 1fr;
  }
  .category-card:hover .category-card__reveal-inner,
  .category-card:focus-within .category-card__reveal-inner {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-card__reveal,
  .category-card__reveal-inner { transition: none; }
}
@media (max-width: 767px) {
  .category-grid { grid-template-columns: 1fr; }
}

/* Van listing */
.van-listing {
  /* Left gutter only. The carousel card is 1253 wide at 1512 and the next card peeks past the
     right edge, so the track must bleed to the viewport edge — a right gutter would clip it. */
  padding: 0 0 64px var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.van-listing__rail {
  display: flex;
  gap: 40px;
  /* No margin-bottom here: .van-listing is already flex column with gap:24px between its
     children (rail / viewport / dots), so a margin here was stacking a second, redundant gap
     on top of that — 56px of space where Figma's rhythm only wants the one. */
}
.van-listing__rail-item {
  font-weight: 500;
  font-size: var(--font-size-lg);
  letter-spacing: var(--letter-spacing);
  color: var(--color-text-muted);
  padding-bottom: 8px;
  cursor: pointer;
}
.van-listing__rail-item.active {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}
.van-listing__viewport {
  /* Arrows are overlaid (position:absolute) rather than inline, so the track starts at the 72px
     gutter — inline arrows were pushing the first card in by 72px (arrow 56 + 16 gap). */
  position: relative;
}
.van-listing__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  /* MUST be explicit. Per CSS overflow spec, setting one axis to a non-`visible` value
     computes the OTHER axis to `auto` — so `overflow-x: auto` alone silently made this a
     vertical scroll container too. It had 16px of real vertical overflow (scrollHeight 616
     vs clientHeight 600 — the hidden horizontal scrollbar's own gutter), which is enough for
     the browser to treat a wheel over the carousel as scrolling the track, not the page.
     Net effect: the page appeared frozen whenever the cursor was over this section. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.van-listing__track::-webkit-scrollbar {
  display: none;
}
.van-listing__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--color-accent);
  border: 2px solid var(--color-accent);
  color: var(--color-text, #f5f3f3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.2s ease;
}
/* Figma shows a single (next) arrow at rest. The prev arrow mirrors it on the left and is
   revealed by JS once the rail has scrolled off the start, so the carousel can be walked back.
   Both centre on the 13% line from their respective edges — symmetric with the next arrow. */
.van-listing__arrow--next {
  /* Centre on the card's right edge. The card is 87% of the track, so the peek is 13%; the
     arrow (56 wide) centres on the boundary → right = 13% of the track − half the arrow. */
  right: calc(13% - 28px);
}
.van-listing__arrow--prev {
  /* True mirror of the next arrow: next straddles the card's RIGHT edge, so prev straddles the
     card's LEFT edge (the gutter line, x=0 of the track). */
  left: -28px;
}
.van-listing__arrow:hover {
  opacity: 0.85;
}
/* The rail is a real filter control (js/carousel.js), so it needs button affordances. */
.van-listing__rail-item {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: opacity var(--ease-hover), color var(--ease-hover);
}
.van-listing__rail-item:hover { opacity: 0.85; }
.van-listing__rail-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Shown when the selected rail tab matches no cards. */
.van-listing__empty {
  text-align: center;
  padding: 64px 0;
  opacity: 0.7;
}
.van-listing__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.van-listing__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(245, 243, 243, 0.24);
  cursor: pointer;
}
.van-listing__dot.active {
  width: 24px;
  background: var(--color-accent);
}
.van-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  /* Figma: card is 1253 wide in the 1512 frame. As a share of the track (which spans the 72px
     gutter to the viewport edge, = 1440 at 1512) that is 87%, leaving a 13% peek of the next
     card. Was calc(46% - 12px) = 551px, less than half the intended width. */
  flex: 0 0 87%;
  /* 32px, not 40 — Figma insets the pill/title/button 32 from every edge. */
  padding: 32px;
  scroll-snap-align: start;
  /* B1d fidelity gap, closed: this card's own Figma stroke is a solid F5F3F3 1px, not the
     shared B1d radial-gradient ring every other .card surface carries (see the gradient-border
     block below). Same override pattern as .filter-pill's active state: suppress the inherited
     ring and use a real border instead. Markup keeps the .card class for its other shared
     styling (radius, overflow etc.) — only the border treatment is overridden here. */
  border: 1px solid #F5F3F3;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.van-card::before {
  content: none;
}
.van-card:hover {
  transform: none;
  border-color: #F5F3F3;
  box-shadow: none;
}
.van-card::after {
  content: none;
}
.van-card img.van-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Same fix and same reasoning as .category-card__overlay above — Figma's handle positions
   for this card's two gradient layers are confirmed identical (31.86%/88.11% and 0/42.32%). */
.van-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 33, 46,0) 31.86%, rgba(11, 33, 46,0.78) 88.11%),
    linear-gradient(180deg, rgba(11, 33, 46,0.8) 0%, rgba(11, 33, 46,0) 42.32%);
  z-index: 1;
}
/* Figma card layout: the pill pins to the TOP, and a bottom row holds the details (left) and
   the button (right). Body fills the card height so space-between can push them apart. */
.van-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.van-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
/* Figma's View Details button is a fixed 241x56, not a hug-content button: its label is 122px
   with ~44px of padding either side, whereas every hero button measures as 24px padding hugging
   its text (Browse Builds = 24+140+8+24+24 = 220, exactly Figma's 220). So .btn's shared 24px
   padding is right and must not change — this card just uses the wider fixed variant. */
.van-card__footer .btn {
  min-width: 241px;
}
/* The pill is a direct child of the flex-column body, so without this it stretches to the full
   card width (1187px) instead of hugging its text. Figma: 180×40. */
.van-card__body > .btn--pill {
  align-self: flex-start;
}
.van-card__info {
  display: flex;
  flex-direction: column;
}
.van-card__info .h3 { margin-top: 0; }
.van-card__info .body-md { margin: 16px 0 0; }
.van-card__price {
  margin: 16px 0 0;
  font-weight: 600;
  font-size: var(--font-size-h4);
  text-transform: uppercase;
}
@media (max-width: 991px) {
  .van-card { flex-basis: calc(80% - 12px); }
}
@media (max-width: 767px) {
  .van-card { padding: 24px; flex-basis: 88%; min-height: 480px; }
  .van-listing__arrow { width: 44px; height: 44px; }
}

/* FAQ */
/* DEAD RULE — kept only so an older template that still emits .faq-section keeps its spacing.
   The VH2026 faq-accordion module does NOT render this wrapper, so the padding below is
   applied to .faq-grid itself. Don't add anything new here. */
.faq-section {
  padding: 0 var(--container-pad) 120px;
}
/* Masonry variant — Figma packs FAQ cards into the shortest column rather than into equal
   grid rows. On Warranty (1162:10234) the right column's second card sits at y1608, tucked
   under a short card, where a plain grid pushes it to the next row boundary (1690) AND into
   the wrong column. Two real column containers, each stacking independently, reproduce it
   deterministically — no reliance on CSS column-balancing heuristics. */
.faq-grid--masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  /* Matches .faq-grid. Note this margin COLLAPSES through the dnd_area wrapper and has no
     effect on the heading->card gap — that 112 comes from .section-heading's own
     margin-bottom. Measured: 16/32/40/64 here all produce the same 112. Adjust the wrapper's
     padding, not this, to move the block. */
  margin-top: 64px;
  /* Same gutter/bottom spacing as .faq-grid below — this variant does not inherit it. */
  padding: 0 var(--container-pad) 120px;
  align-items: start;
}
.faq-grid__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (max-width: 767px) {
  .faq-grid--masonry { grid-template-columns: 1fr; }
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 64px;
  /* Gutter + bottom spacing moved off the dead .faq-section wrapper (see .section-heading).
     Figma: two 676px cards at x72 and x764 in the 1368 content column. Without this the grid
     ran full-bleed as 748px columns at x0. */
  padding: 0 var(--container-pad) 120px;
  /* Figma packs the two columns INDEPENDENTLY (left col y 5624/5912/6056, right col
     5624/5768/5912), so a short card never stretches to match an expanded neighbour's row.
     Default grid row alignment was stretching the first right-hand card from 144 to 234px. */
  align-items: start;
}
/* Figma: 32px padding (question at rel 32,32), not 24. */
.faq-item {
  padding: 32px;
  cursor: pointer;
}
/* Figma's FAQ question is 24/32 weight 600, letter-spacing 0.96, case TITLE — i.e. the h4
   step, not h5. The module marks it .h5 (20/32, ls 0.8, no transform), so every question was
   a step too small and in sentence case. Overridden here rather than by changing the module's
   class, because .h5 is shared with other components that are correctly 20px. */
.faq-item .h5 {
  font-size: var(--font-size-h4);
  letter-spacing: 0.96px;
  text-transform: capitalize;
}
.faq-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Figma FAQ icon: 56x56 circle, accent-filled with a diagonal up-right arrow when CLOSED,
   transparent with a light 1px ring and a genuine chevron-down when OPEN. Confirmed via a
   direct Figma screenshot 6 Aug 2026 — the two states are two different glyphs (arrow vs
   chevron), not one glyph rotated; an earlier version of this comment assumed rotation
   ("down-right open") and was wrong. */
.faq-item__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-text);
  transition: background var(--ease-default), border-color var(--ease-default),
              transform var(--ease-default);
}
.faq-item__icon::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url('/hubfs/raw_assets/public/VH2026/images/home/icon-arrow-up-right.svg') no-repeat center / contain;
          mask: url('/hubfs/raw_assets/public/VH2026/images/home/icon-arrow-up-right.svg') no-repeat center / contain;
}
.faq-item__icon-chevron {
  display: none;
  width: 24px;
  height: 24px;
}
.faq-item.open .faq-item__icon {
  background: transparent;
  border-color: var(--color-text);
}
/* Open state swaps to a real chevron-down, not a rotated arrow — Figma uses two distinct
   glyphs here (diagonal arrow closed, chevron down open), not one glyph turned 90deg. */
.faq-item.open .faq-item__icon::before {
  display: none;
}
.faq-item.open .faq-item__icon-chevron {
  display: block;
}
/* Animated open/close. grid-template-rows 0fr -> 1fr is the only way to transition to an
   unknown content height without a hardcoded max-height that would clip longer answers —
   same technique already used by .category-card__reveal. */
.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  color: var(--color-text-muted);
  transition: grid-template-rows var(--duration-fade) var(--ease-reveal),
              padding-top var(--duration-fade) var(--ease-reveal);
}
.faq-item__answer > * {
  overflow: hidden;
  min-height: 0;
  margin: 0;
}
.faq-item.open .faq-item__answer {
  grid-template-rows: 1fr;
  padding-top: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item__answer,
  .faq-item__icon,
  .faq-item__icon::before { transition: none; }
}
@media (max-width: 767px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* Testimonials.
   Like gallery-section, this had no top padding at all, so its heading landed flush against
   the gallery's own bottom padding instead of the standard 56px short of it. Bottom is 128,
   not 120: Figma's testimonial-card-bottom to Footer-top is 128, not the usual 176/120 pair.

   ⚠️ DEAD RULE on the VH2026 home page — nothing emits .testimonial-section (verified
   6 Aug 2026: 0 files across templates/, modules/ and sections/ render this class, and
   querySelector returns null live). Its top padding is instead supplied by the template's
   own dnd_section padding (top: 56). NOTE: do not write literal HubL tag syntax in a CSS
   comment — HubSpot parses HubL in .css files too and rejected this very rule on upload with
   "Missing end tag: end_dnd_section". Deliberately NOT re-homed onto
   .testimonial-marquee the way .faq-grid/.gallery-grid/.contact-grid were: with the other
   gutters restored the page measures 8964 against Figma's 8976, so adding another 128px of
   bottom padding here would overshoot. Kept for the Figma values recorded above. */
.testimonial-section {
  padding: 56px var(--container-pad) 128px;
  /* Not centred: Figma puts the heading at x72 and its paragraph at x879 — the same
     left/right two-column arrangement as every other section heading on the page. */
}
.testimonial-marquee {
  overflow: hidden;
  /* Figma: heading/paragraph bottom 7610 -> cards top 7671 = 61px. Collapses with
     .section-heading's 56px bottom margin, so the larger value wins and 61 is the result. */
  margin-top: 61px;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.testimonial-grid {
  display: flex;
  gap: 16px;
  width: max-content;
  text-align: left;
  animation: testimonial-scroll 32s linear infinite;
}
.testimonial-marquee:hover .testimonial-grid {
  animation-play-state: paused;
}
.testimonial-card {
  padding: 32px;
  position: relative;
  /* Figma: 567 x 313. It is a scrolling marquee, so the cards deliberately exceed the 1368
     content width — 3 x 567 does not have to fit. */
  flex: 0 0 567px;
  width: 567px;
  height: 313px;
  display: flex;
  flex-direction: column;
}
/* Quote mark left, stars right, on one row at the top of the card. */
.testimonial-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
/* Figma renders this glyph with NO fill and a 1px accent stroke — an outlined quote mark,
   not a solid one. -webkit-text-stroke is the only way to express that in CSS. */
.testimonial-card__quote {
  font-size: 64px;
  line-height: 40px;
  font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-accent);
  user-select: none;
}
.testimonial-card__stars {
  display: flex;
  /* Figma: stars sit at x435/455/475/495/515 — 20px apart at 20px wide, i.e. flush, no gap. */
  gap: 0;
  /* The star SVGs use fill="currentColor" so the rating follows the theme accent instead of
     a hex frozen into the markup. */
  color: var(--color-accent);
}
.testimonial-card__stars img,
.testimonial-card__stars svg {
  width: 20px;
  height: 20px;
}
/* Figma: top row ends ~y73, quote text starts y95 = 22px below. */
.testimonial-card > .body-md {
  margin: 22px 0 0;
  color: var(--color-text);
}
/* Figma puts the author on the card's last line (y243 + 35 = 278, against a 281 content
   bottom), so it is pinned to the bottom rather than spaced off the quote. */
.testimonial-card__author {
  margin-top: auto;
  margin-bottom: 0;
  font-weight: 600;
}
@media (max-width: 991px) {
  .testimonial-card { flex-basis: 300px; width: 300px; height: auto; }
}

/* Gallery */
/* ⚠️ DEAD RULE — nothing emits .gallery-section (see the note on .testimonial-section). The
   horizontal gutter has been moved onto .gallery-grid below; the 120px bottom is supplied by
   the template's dnd_section padding. Don't add anything new here. */
.gallery-section {
  padding: 0 var(--container-pad) 120px;
}
/* Figma measures the two rows as DIFFERENT column sets, which no single grid template can
   express, so this is a wrapping flex row with explicit proportional widths:
     row 1  388 / 555 / 388   (x72, x475, x1051 in the 1368 content column)
     row 2  445 / 445 / 445   (x72, x533, x994 — three equal thirds)
   The build had a 4-col grid with items 2 and 6 spanning 2, which made row 2 come out
   445/445/890 — the last tile double-width, which Figma does not do.
   Row height 344 and gap 16 are both Figma-measured. */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
  /* Gutter moved off the dead .gallery-section wrapper (see .section-heading). Figma starts
     both rows at x72. The tile widths below are percentages of this element's content box,
     so they resolve against the correct 1368 column once the padding is here. */
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.gallery-item {
  height: 344px;
  flex: 0 0 auto;
}
/* The two row shapes repeat every 6 tiles (6n+…), so a module instance with 12 or 18 images
   keeps the same rhythm instead of only working for the homepage's exact 6.
   Row A — 388/555/388 of the 1331px of tile width left after two 16px gaps. */
.gallery-item:nth-child(6n + 1),
.gallery-item:nth-child(6n + 3) { width: calc((100% - 32px) * 388 / 1331); }
.gallery-item:nth-child(6n + 2) { width: calc((100% - 32px) * 555 / 1331); }
/* Row B — equal thirds. */
.gallery-item:nth-child(6n + 4),
.gallery-item:nth-child(6n + 5),
.gallery-item:nth-child(6n)     { width: calc((100% - 32px) / 3); }

/* Figma: two 56px circles centred under the grid (x692/x764 in a 1512 frame = dead centre),
   56px below it. Prev is the outline variant, next the accent-filled one. */
.gallery-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 56px;
}
.gallery-nav__btn {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  transition: background var(--ease-hover), border-color var(--ease-hover),
              color var(--ease-hover), opacity var(--ease-hover);
}
.gallery-nav__btn--next {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.gallery-nav__btn:hover { opacity: 0.85; }
.gallery-nav__btn svg { width: 20px; height: 20px; }
.gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 24px;
  box-sizing: border-box;
}
.gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.gallery-item .btn--pill {
  position: relative;
  z-index: 1;
}
/* Gallery listing page rhythm: 3 equal tiles then 2 half-width tiles, repeating every 5
   (Figma node 885-3040 — 445px thirds at y912, then two 676px halves at y1272, repeating).
   Scoped to the modifier class so the home page's 6n rhythm above is untouched. */
.gallery-grid--listing {
  /* Overrides the home page's 40px (toolbar bottom 855 -> grid top 912 = 56/57, see
     .gallery-toolbar's own margin-top note). Source order after the base rule above wins. */
  margin-top: var(--section-heading-gap);
}
.gallery-grid--listing .gallery-item:nth-child(5n + 1),
.gallery-grid--listing .gallery-item:nth-child(5n + 2),
.gallery-grid--listing .gallery-item:nth-child(5n + 3) { width: calc((100% - 32px) / 3); }
.gallery-grid--listing .gallery-item:nth-child(5n + 4),
.gallery-grid--listing .gallery-item:nth-child(5n)     { width: calc((100% - 16px) / 2); }
/* Zoom-in icon, top-right, 16px inset (Figma "zoom-in-area", 24x24 at a consistent 16/16
   inset from each tile's own top-right corner — measured off 3 separate tiles). */
.gallery-item__zoom {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 24px;
  height: 24px;
  pointer-events: none;
}
/* The interactive Gallery-listing variant renders <button class="gallery-item"> instead of
   a plain <div> (see gallery-grid.module) so it's a real click-to-preview trigger — this
   resets it back to looking exactly like the div did. */
button.gallery-item {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (max-width: 991px) {
  .gallery-item:nth-child(n) { width: calc((100% - 16px) / 2); }
  .gallery-grid--listing .gallery-item:nth-child(n) { width: calc((100% - 16px) / 2); }
}
@media (max-width: 767px) {
  .gallery-item:nth-child(n) { width: 100%; }
  .gallery-grid--listing .gallery-item:nth-child(n) { width: 100%; }
}

/* Contact cards. (`.contact-section` removed — no markup referenced it.)
   Sibling grids (feature-grid, category-grid) all carry the standard 120px bottom padding
   that provides the gap to whatever comes next; this one never got it, so the next heading
   ("Technical Insights and Support") landed 120px too early. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 64px;
  /* Figma: three 445px cards at x72 / x533 / x994. This grid never had a wrapper supplying the
     gutter at all, so it ran full-bleed with 493px columns (see .section-heading). */
  padding: 0 var(--container-pad) 120px;
}
.contact-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  /* Accent-filled, like the feature-card icons — it was an 8% white wash, which renders as a
     dark grey disc instead of the orange circle the design shows. Same defect the feature
     cards had. */
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-card__icon img {
  width: 24px;
  height: 24px;
}
.contact-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
  font-weight: 600;
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  text-decoration: underline;
}
@media (max-width: 991px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* Video block */
.video-block {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Whole poster is the tap target (mobile/tablet). The 80px glyph alone was too easy to miss. */
.video-block:has([data-video-trigger][data-video-url]) {
  cursor: pointer;
}
.video-block > img,
.video-block .video-block__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Circle, border and icon are all baked into icon-play-button.svg now (the Figma export,
   Frame 2147216524) — this just positions the 80x80 button, it no longer paints anything.
   Do NOT use `.video-block img`: that also matched the play glyph and stretched it to the
   full 676×480 thumbnail. */
.video-block__play {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  padding: 0;
  border: none;
  background: none;
  display: block;
  cursor: pointer;
  pointer-events: auto;
}
.video-block__play img {
  position: static;
  inset: auto;
  width: 80px;
  height: 80px;
  object-fit: contain;
  pointer-events: none;
}

/* Section heading row.
   Figma pairs a left heading with a right paragraph, bottom-aligned, the paragraph flush to the
   container's right edge (its right edge is 1440 = 1512 - 72 in every instance measured).
   space-between + flex-end was already correct; what was missing is a cap on the h2. Without
   one it grew to the full 1368 content width, took the whole row, and pushed the paragraph
   below it — so every section heading on the page rendered stacked instead of two-up.

   --heading-col carries the cap. Figma sizes each heading's text box to its own content, so
   there is no single right number (measured: 618 for "Tailored to Your Ambition", 734 for
   "Define Your Journey"); sections whose Figma width has been read set it inline. The 759px
   fallback is simply what is left beside a 561px paragraph and a 48px gap, which restores the
   two-column layout everywhere even where the exact width has not been checked yet. */
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
  --heading-col: 759px;
  /* The 72px content gutter. This USED to come from wrapper classes (.faq-section,
     .gallery-section, .testimonial-section) that the old hardcoded home.html emitted. When the
     page was converted to dnd_area modules those wrappers stopped being rendered — verified
     6 Aug 2026: document.querySelector('.faq-section') and friends all return null on the live
     page — so every one of the 7 section headings was rendering at x=0/w=1512 instead of
     Figma's x=72, and every description paragraph at x=951 instead of x=879. Putting the
     gutter on the component itself (the same thing .feature-grid and .category-grid already
     do) makes it independent of any wrapper. */
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  /* Figma separates every section heading from its content by 56px; the build had 0, so the
     grids butted against their headings and the shortfall compounded down the page.
     The heading usually sits alone in a `.container` with no vertical padding, so this margin
     collapses through the parent and still produces the gap. */
  margin-bottom: var(--section-heading-gap);
}
/* Two shapes carry the cap: a bare <h2> (the hardcoded home page) and .section-heading__main
   (the module, which wraps the h2 with its optional eyebrow). Without the second selector the
   module's heading had no cap at all and pushed the description onto its own line. */
.section-heading > .h2,
.section-heading > .section-heading__main {
  flex: 0 1 var(--heading-col);
  max-width: var(--heading-col);
  min-width: 0;
}
.section-heading .body-md {
  flex: 0 1 561px;
  max-width: 561px;
  /* The default 18px paragraph margin sat inside the flex line, so flex-end bottom-aligned the
     margin box and left the text 18px shy of the heading's baseline row. Figma has the two
     boxes sharing an exact bottom edge. */
  margin: 0;
  /* Figma fills these F5F3F3 (--color-text), not the muted #B5B3B3 text style. Verified on the
     "Tailored to Your Ambition" and "Define Your Journey" rows. */
  color: var(--color-text);
}
/* Image-band variant (module.bg_image set — currently only the Gallery page intro, Figma node
   885-3042). The band itself is inset 8px like the header/footer (--frame-gap), but its TEXT
   still sits at the normal 72px content gutter — 8 + 64 = 72, so the padding here is reduced
   by exactly the margin that's now doing the other 8px. Height 400 and radius 8 are the
   rectangle's own values; align-items switches to center because Figma's text block isn't
   bottom-aligned in this band (144px above it, 112 below - closest to centred, and the H2's
   own leading eats a good part of that 144 anyway). Scrim: linear-gradient 0%->100%, #100F0F,
   at 78% layer opacity - the plain 0/100 version of the token used by the home hero, which is
   tuned to a different rectangle's gradient-handle geometry and would be wrong to reuse as-is. */
.section-heading.section-heading--image {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  height: 400px;
  align-items: center;
  margin: 0 var(--frame-gap);
  padding-left: calc(var(--container-pad) - var(--frame-gap));
  padding-right: calc(var(--container-pad) - var(--frame-gap));
}
.section-heading__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.section-heading__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 33, 46, 0) 0%, rgba(11, 33, 46, 0.78) 100%);
  z-index: 1;
}
/* Gallery intro (885:3042) — same bottom-up overlay as .hero__overlay so the H2 stays
   readable on the van photo. The 0→100 scrim above stays too light until the last few
   pixels; the hero stops reach full #100F0F at ~34% and hold to the bottom. Scoped so
   Wishlist's image band is unchanged. */
.gallery-intro .section-heading__scrim {
  background: linear-gradient(180deg, rgba(11, 33, 46,0) -31.72%, rgba(11, 33, 46,0.78) 33.70%);
}
.section-heading--image .section-heading__main,
.section-heading--image > .body-md {
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .section-heading.section-heading--image {
    height: auto;
    min-height: 320px;
    margin: 0;
  }
}

/* The module emits these modifiers; without rules its Layout and Alignment fields did nothing. */
.section-heading--stack {
  display: block;
}
/* Stacked headings are full-width by definition — drop the two-column cap. */
.section-heading--stack > .h2,
.section-heading--stack > .section-heading__main {
  flex: none;
  max-width: none;
}
.section-heading--stack .body-md {
  margin-top: 16px;
}
.section-heading.text-center {
  justify-content: center;
  text-align: center;
}
.section-heading.text-center .body-md {
  margin-left: auto;
  margin-right: auto;
}
.section-heading.text-right {
  justify-content: flex-end;
  text-align: right;
}

/* Footer */
.site-footer {
  background: var(--color-bg);
  padding-top: 80px;
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  /* Footer columns keep the 72px content gutter. Only the copyright bar sits at 8px — see
     .site-footer__bottom, which breaks out of this padding. */
  padding: 0 var(--container-pad);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  column-gap: 32px;
  row-gap: 56px;
  padding-bottom: 56px;
}
.site-footer__brand {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.site-footer__brand > img {
  height: 40px;
  margin-bottom: 16px;
}
.site-footer__col h4 {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-h4);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
  margin: 0 0 24px;
}
.site-footer__col-heading--spaced {
  margin-top: 24px !important;
}
.site-footer__col ul {
  margin: 0 0 0;
}
.site-footer__col ul li {
  margin-bottom: 12px;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing);
}
.site-footer__col ul li a:hover {
  color: var(--color-text);
}
.site-footer__li--spaced {
  margin-top: 24px;
}
.site-footer__social {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}
.site-footer__bottom {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px 32px;
  margin-bottom: 24px;
  /* Only THIS bar reaches 8px from each frame edge; the footer columns above stay at the 72px
     gutter. Break out of __inner's 72px padding by the difference (8 - 72 = -64px each side).
     Figma: the footer copyright bar is the one element inset 8px. */
  margin-left: calc(var(--frame-gap) - var(--container-pad));
  margin-right: calc(var(--frame-gap) - var(--container-pad));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.site-footer__copyright {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing);
  margin: 0;
  flex-shrink: 0;
}
.site-footer__legal {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 16px;
  letter-spacing: var(--letter-spacing);
  margin: 0;
  max-width: 720px;
}
@media (max-width: 1199px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: 48px;
  }
  .site-footer__brand {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}
@media (max-width: 767px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

/* Lightbox — shared by js/video.js and js/gallery.js */
.vh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  /* Backdrop fades; the panel fades + scales up from 96%, per js/video.js toggling .is-open a
     frame after `hidden` is cleared (and removing it before `hidden` is restored, so closing
     plays the same transition in reverse). */
  opacity: 0;
  transition: opacity var(--duration-fade) var(--ease-reveal);
}
.vh-lightbox[hidden] { display: none; }
.vh-lightbox.is-open { opacity: 1; }
.vh-lightbox__inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  transform: scale(0.96);
  transition: transform var(--duration-fade) var(--ease-reveal);
}
.vh-lightbox.is-open .vh-lightbox__inner { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .vh-lightbox,
  .vh-lightbox__inner { transition: none; }
}
/* 16:9 stage. Do NOT rely on padding-bottom + height:0 inside a column flex — on mobile
   `align-items: center` shrinks the frame to 0 width (abspos video has no intrinsic size),
   so padding-bottom resolves to 0 and the player vanishes while the X still shows. */
.vh-lightbox__frame {
  flex: 1 1 auto;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.vh-lightbox__frame iframe,
.vh-lightbox__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-md);
  background: #000;
  object-fit: contain;
}
.vh-lightbox__figure {
  flex: 1;
  margin: 0;
  text-align: center;
}
.vh-lightbox__figure img {
  max-height: 80vh;
  width: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
}
.vh-lightbox__close,
.vh-lightbox__nav {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--ease-hover);
}
.vh-lightbox__close:hover,
.vh-lightbox__nav:hover { background: var(--color-accent); color: var(--color-bg); }
.vh-lightbox__close {
  position: absolute;
  top: -60px;
  right: 0;
  z-index: 2;
}
/* Mobile + tablet: stack, stretch full width, keep close above the stage. */
@media (max-width: 1199px) {
  .vh-lightbox {
    padding: 72px 16px 24px;
    align-items: center;
  }
  .vh-lightbox__inner {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }
  .vh-lightbox__frame {
    flex: 0 0 auto;
    width: 100%;
    max-height: calc(100dvh - 120px);
  }
  .vh-lightbox__close {
    top: -56px;
    right: 0;
  }
}

/* ============================================================
   Dialogs — centred modals and edge drawers (Phase 4a)
   One behaviour (js/dialog.js), two presentations.
   ============================================================ */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
}
.dialog[hidden] { display: none; }

.dialog__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--ease-default);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.dialog.is-open .dialog__backdrop { opacity: 1; }

.dialog__panel {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  max-height: 100%;
  overflow-y: auto;
  transition: transform var(--ease-default), opacity var(--ease-default);
}

/* Centred modal */
.dialog--modal { align-items: center; justify-content: center; padding: var(--space-xl); }
.dialog--modal .dialog__panel {
  width: 100%;
  max-width: 560px;
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}
.dialog--modal.is-open .dialog__panel { opacity: 1; transform: none; }

/* Edge drawer — mobile filter screens */
.dialog--drawer { align-items: stretch; }
.dialog--drawer .dialog__panel {
  width: min(420px, 90vw);
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.dialog--drawer-left  { justify-content: flex-start; }
.dialog--drawer-right { justify-content: flex-end; }
.dialog--drawer-left  .dialog__panel { transform: translateX(-100%); border-left: 0; }
.dialog--drawer-right .dialog__panel { transform: translateX(100%); border-right: 0; }
.dialog--drawer.is-open .dialog__panel { transform: none; }

.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--color-border-subtle);
  flex: 0 0 auto;
}
.dialog__title { margin: 0; }
.dialog__body { padding: var(--space-xl); overflow-y: auto; flex: 1 1 auto; }
.dialog__footer {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--color-border-subtle);
  flex: 0 0 auto;
}
.dialog__footer .btn { flex: 1; }

.dialog__close {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--ease-hover), color var(--ease-hover);
}
.dialog__close:hover { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.dialog__close:active { transform: translateY(1px); }

@media (max-width: 767px) {
  .dialog--modal { padding: var(--space-md); }
  .dialog--modal .dialog__panel { padding: var(--space-xl); }
  .dialog--drawer .dialog__panel { width: 100%; }
}

/* ============================================================
   Filters — desktop bar + drawer body share these controls
   ============================================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border-subtle);
}
/* fieldset ships with a browser default border/padding — reset it, we only want the semantics */
.filter-group { display: flex; flex-direction: column; gap: var(--space-sm); border: 0; margin: 0; padding: 0; }
.filter-group__label {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
  color: var(--color-text-muted);
  margin: 0;
}
.filter-group__options { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Option chip — carries all six states */
.filter-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing);
  cursor: pointer;
  transition: border-color var(--ease-hover), background var(--ease-hover), color var(--ease-hover);
  user-select: none;
}
.filter-option input { position: absolute; opacity: 0; pointer-events: none; }
.filter-option:hover { border-color: var(--color-accent); }
.filter-option:active { transform: translateY(1px); }
.filter-option.is-selected { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); font-weight: 600; }
.filter-option:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.filter-option:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }

.filter-bar__meta { margin-left: auto; display: flex; align-items: center; gap: var(--space-md); }
.filter-count { font-size: var(--font-size-sm); color: var(--color-text-muted); letter-spacing: var(--letter-spacing); }
.filter-clear {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--color-accent);
  font: inherit; font-size: var(--font-size-sm); text-transform: uppercase;
  letter-spacing: var(--letter-spacing); text-decoration: underline;
}
.filter-clear:hover { color: var(--color-text); }

/* Mobile trigger for the drawer */
.filter-trigger { display: none; align-items: center; gap: var(--space-sm); }
.filter-trigger__badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-bg);
  font-size: var(--font-size-xs); font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.filter-trigger__badge[hidden] { display: none; }

.filter-empty { padding: var(--space-4xl) 0; text-align: center; }

@media (max-width: 991px) {
  .filter-bar { display: none; }          /* desktop facets collapse into the drawer */
  .filter-trigger { display: inline-flex; }
}

/* Drawer footer: two full-width buttons must fit a 375px viewport without clipping. */
@media (max-width: 420px) {
  .dialog__footer { padding: var(--space-md); gap: var(--space-sm); }
  .dialog__footer .btn { padding: 12px 12px; font-size: var(--font-size-sm); min-width: 0; }
}

/* ============================================================
   Footer columns as collapsible sections (audit finding M4)
   Figma's Footer/mobile is an accordion, not a reflowed grid.
   Desktop keeps the existing look exactly: the toggle renders as a plain
   heading, the chevron is hidden and the panel is always open.
   ============================================================ */
.site-footer__toggle {
  /* strip button chrome so it inherits the .site-footer__col h4 type styles */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: default;
}
.site-footer__chevron {
  flex-shrink: 0;
  display: none;                 /* desktop: no accordion affordance */
  transition: transform var(--ease-default);
}
.site-footer__section--spaced { margin-top: var(--space-lg); }

@media (max-width: 767px) {
  .site-footer__section {
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .site-footer__section--spaced { margin-top: 0; }

  /* the whole row is the hit target */
  .site-footer__col h4.site-footer__heading { margin: 0; }
  .site-footer__toggle {
    cursor: pointer;
    padding: var(--space-md) 0;
    min-height: 48px;            /* touch target */
  }
  .site-footer__chevron { display: block; }

  /* collapsed by default; js/main.js opens the first section */
  .site-footer__panel {
    display: none;
    padding-bottom: var(--space-md);
  }
  .site-footer__section.is-open .site-footer__panel { display: block; }
  .site-footer__section.is-open .site-footer__chevron { transform: rotate(180deg); }
  .site-footer__section.is-open .site-footer__toggle { color: var(--color-accent); }

  /* one column per row so each accordion header is full width */
  .site-footer__top { grid-template-columns: 1fr; row-gap: 0; }
  .site-footer__brand { margin-bottom: var(--space-xl); }
}

/* ============================================================
   System pages — 404, 500, password prompt, search, email preferences
   ============================================================ */
.system-page {
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-5xl);
  text-align: center;
}
.system-page--narrow { max-width: 560px; }
.system-page--results { text-align: left; max-width: 860px; }
.system-page .eyebrow { margin-bottom: var(--space-md); }
.system-page__code {
  font-size: 160px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
  margin: 0;
}
@media (max-width: 767px) {
  .system-page__code { font-size: 96px; }
}
.system-page__lead {
  max-width: 560px;
  margin: var(--space-lg) auto 0;
}
.system-page--results .system-page__lead { margin-left: 0; }

.system-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-2xl);
}

/* Figma 1231:7043 — full-bleed photo + 67% black overlay, light type, 3 CTAs.
   Positions are FIXED px from the Figma frame (1512×934), measured under the
   88px header (content origin = frame y − 96):
     404 TEXT 1231:7065 → frame y184 → section top 88px, 320/328
     title group         → frame y398 → section top 302px
   Title lands 214px into the 328px watermark (~65%). Do NOT use % tops — they
   stretch the gap on tall viewports and break the overlap. Absolute path for
   CSS url (HubSpot compile — project gotcha 1). */
.system-page--404 {
  position: relative;
  display: block;
  min-height: max(838px, calc(100dvh - 88px));
  margin: 0;
  padding: 0 24px 96px;
  color: #F5F3F3;
  text-align: center;
  background-color: var(--color-bg);
  background-image: url("/hubfs/raw_assets/public/VH2026/images/system/404-bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.system-page--404::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.67);
  pointer-events: none;
  z-index: 0;
}
/* Back-layer watermark — Figma y184 → 88px below header. */
.system-page--404__watermark {
  position: absolute;
  left: 50%;
  top: 88px;
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(140px, 21.16vw, 320px); /* 320 / 1512 */
  font-weight: 400;
  line-height: 1.025; /* 328 / 320 */
  letter-spacing: 0.04em; /* 12.8 / 320 */
  color: #F5F3F3;
  opacity: 0.22;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
/* Foreground copy — Figma group y398 → 302px below header. */
.system-page--404__inner {
  position: absolute;
  left: 50%;
  top: 302px;
  transform: translateX(-50%);
  z-index: 2;
  width: 100%;
  max-width: 792px;
  padding: 0 24px;
  box-sizing: border-box;
}
.system-page--404__title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 3.17vw, 48px); /* 48 / 1512 */
  font-weight: 400;
  line-height: 1.17; /* 56 / 48 */
  letter-spacing: 0.04em; /* 1.92 / 48 */
  text-transform: uppercase;
  color: #F5F3F3;
  margin: 0;
}
.system-page--404__lead {
  max-width: 792px;
  margin: 16px auto 0; /* Figma lead y470 − title bottom 454 */
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  color: #F5F3F3;
}
.system-page--404 .system-page__actions {
  margin-top: 48px; /* Figma buttons y582 − lead bottom 534 */
  gap: 16px;
}
.system-page--404__btn-primary {
  color: #F5F3F3;
}
.system-page--404__arrow {
  display: inline-block;
  width: 14px;
  height: 12px;
  margin-left: 4px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M1 6h12M8 1l5 5-5 5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M1 6h12M8 1l5 5-5 5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.system-page--404__btn-light {
  background: #F5F3F3;
  color: #2A2A2A;
  border: 0;
}
.system-page--404__btn-outline {
  color: #F5F3F3;
  border-color: var(--color-accent);
  background: transparent;
}
@media (max-width: 767px) {
  .system-page--404 {
    min-height: max(640px, calc(100dvh - 72px));
    padding: 0 16px 72px;
  }
  .system-page--404__watermark {
    top: 56px;
    font-size: clamp(100px, 36vw, 180px);
  }
  .system-page--404__inner {
    top: 168px;
    padding: 0 16px;
  }
  .system-page--404 .system-page__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .system-page--404 .system-page__actions .btn {
    width: 100%;
  }
}

.system-search {
  display: flex;
  gap: var(--space-md);
  max-width: 560px;
  margin: var(--space-2xl) auto 0;
}
.system-page--results .system-search { margin-left: 0; }
.system-search__input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing);
}
.system-search__input::placeholder { color: var(--color-text-muted); }
.system-search__input:hover { border-color: var(--color-accent); }
.system-search__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* Search results system page — no Figma frame; matched to VH2026 theme language
   (heading scale, 72px gutter, 56px controls, accent CTAs, result rows). */
.system-page--search {
  text-align: left;
  padding: 96px 0 120px;
  background: var(--color-bg);
  color: var(--color-text);
}
.system-page--search__inner {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.system-page--search .eyebrow {
  margin-bottom: 16px;
  color: var(--color-accent);
}
.system-page--search__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: var(--font-weight-heading, 500);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
}
.system-page--search__title-light {
  font-weight: var(--font-weight-heading-light, 200);
  opacity: 0.72;
}
.system-page--search__lead {
  margin: 16px 0 0;
  max-width: 640px;
  font-size: 18px;
  line-height: 32px;
  color: var(--color-text-muted);
}
.system-page--search .system-search--lg {
  max-width: none;
  margin: 40px 0 0;
  gap: 16px;
}
.system-page--search .system-search__input {
  height: 64px;
  padding: 0 24px;
  border-radius: 0;
  border-color: #7B7B7B;
  background: var(--color-surface);
  font-size: 18px;
}
.system-page--search .system-search__submit {
  flex: 0 0 auto;
  min-width: 168px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 0;
}
.system-page--search__arrow {
  display: inline-block;
  width: 14px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M1 6h12M8 1l5 5-5 5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M1 6h12M8 1l5 5-5 5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.system-page--search__suggest {
  margin-top: 32px;
}
.system-page--search__suggest-label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.system-page--search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.system-page--search__chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #7B7B7B;
  background: transparent;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color var(--ease-hover), color var(--ease-hover), background var(--ease-hover);
}
.system-page--search__chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.system-page--search__results {
  margin-top: 56px;
}

/* HubSpot @hubspot/search_results — restyle into VH2026 result rows */
.system-page--search .hs-search-results-title,
.system-page--search .hs-search-sr-message-container {
  /* We render our own H1; keep HubSpot's for screen readers only when present */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space:nowrap;
  border: 0;
}
.system-page--search .hs-search-results {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.system-page--search .hs-search-results__listing,
.system-page--search .hs-search-results > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.system-page--search .hs-search-results__listing > li,
.system-page--search .hs-search-results__item,
.system-page--search article.hs-search-results__listing {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid rgba(123, 123, 123, 0.35);
}
.system-page--search .hs-search-results__listing > li:last-child,
.system-page--search .hs-search-results__item:last-child {
  border-bottom: 1px solid rgba(123, 123, 123, 0.35);
}
.system-page--search .hs-search-results__featured-image-wrapper {
  width: 120px;
  height: 90px;
  overflow: hidden;
  background: var(--color-surface);
}
.system-page--search .hs-search-results__featured-image,
.system-page--search .hs-search-results__featured-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.system-page--search .hs-search-results__category {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.system-page--search .hs-search-results__title,
.system-page--search .hs-search-results__title a {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
}
.system-page--search .hs-search-results__title a:hover {
  color: var(--color-accent);
}
.system-page--search .hs-search-results__description {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.system-page--search .hs-search-results__message {
  margin: 0;
  padding: 40px 0;
  border-top: 1px solid rgba(123, 123, 123, 0.35);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.system-page--search .hs-search-results__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 40px;
  padding-top: 24px;
}
.system-page--search .hs-search-results__pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #7B7B7B;
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.system-page--search .hs-search-results__pagination__link:hover,
.system-page--search .hs-search-results__pagination__link--active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.system-page--search .hs-search-results__pagination__link-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
@media (max-width: 767px) {
  .system-page--search {
    padding: 64px 0 80px;
  }
  .system-page--search__inner {
    padding: 0 16px;
  }
  .system-page--search .system-search--lg {
    flex-direction: column;
  }
  .system-page--search .system-search__submit {
    width: 100%;
  }
  .system-page--search .hs-search-results__listing > li,
  .system-page--search .hs-search-results__item,
  .system-page--search article.hs-search-results__listing {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .system-page--search .hs-search-results__featured-image-wrapper {
    width: 100%;
    height: 180px;
  }
}

.system-page__form,
.system-page__results { margin-top: var(--space-2xl); text-align: left; }

.system-page__link { color: var(--color-accent); text-decoration: underline; }
.system-page__link:hover { color: var(--color-text); }

/* HubSpot's own system modules ship unstyled inputs — bring them into the theme. */
.system-page__form input[type="password"],
.system-page__form input[type="email"],
.system-page__form input[type="text"] {
  width: 100%;
  height: 56px;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.system-page__form input[type="submit"],
.system-page__form button[type="submit"] {
  margin-top: var(--space-md);
  height: 56px;
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--gradient-btn-primary);
  color: var(--color-bg);
  font: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
  transition: transform var(--transition-premium), box-shadow var(--transition-premium),
    background var(--transition-premium);
}
.system-page__form input[type="submit"]:hover,
.system-page__form button[type="submit"]:hover {
  background: var(--gradient-btn-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-primary-hover);
}
  cursor: pointer;
  transition: opacity var(--ease-hover);
}
.system-page__form input[type="submit"]:hover,
.system-page__form button[type="submit"]:hover { opacity: 0.85; }
.system-page__form label { display: block; margin-bottom: var(--space-sm); }

@media (max-width: 767px) {
  .system-page { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
  .system-search { flex-direction: column; }
  .system-search .btn { width: 100%; }
}

/* ============================================================
   Gradient border (audit finding B1d — resolved against raw Figma stroke data)

   Figma does not use a flat border, and it is not even ONE radial gradient — every bordered
   surface (cards, header bar, footer bar) carries TWO stacked radial-gradient strokes, each
   #7B7B7B fading 100% -> 16% opacity:

     - Gradient A centred just above top-middle (bright near the top edge)
     - Gradient B centred just outside the bottom-right corner (bright near bottom-right)

   Read directly from `strokes[].gradientHandlePositions` in the raw API response (percentages
   relative to the shape's own box) — the previous single `at 50% 0%` guess only ever captured
   half of this and was flagged unconfirmed (B1d) for exactly that reason.

   Cards + footer bar share one set of radii; the header bar's own numbers are different
   (its 1496x88 aspect ratio is nothing like a card's) but were verified the same way.

   The element keeps `border: 1px solid transparent` so every box measurement stays
   identical to the flat-border version — this is a paint change, not a layout change.
   The ring is drawn at inset:-1px so it sits exactly where the border was. */
.gradient-border {
  position: relative;
  border-color: transparent;
}
.gradient-border::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(44% 44% at 52% -10%, rgba(123, 123, 123, 1) 0%, rgba(123, 123, 123, 0.16) 100%),
    radial-gradient(46% 46% at 66% 106%, rgba(123, 123, 123, 1) 0%, rgba(123, 123, 123, 0.16) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Surfaces that carry it. Dialog/lightbox/form controls are deliberately excluded — they are
   our own UI, not Figma components, so they keep the flat border. */
.site-footer__bottom,
.partner-logo,
.filter-pill,
.gallery-toolbar__toggle,
.gallery-toolbar__sort {
  position: relative;
  border-color: transparent;
}
.site-footer__bottom::after,
.partner-logo::after,
.filter-pill::after,
.gallery-toolbar__toggle::after,
.gallery-toolbar__sort::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(44% 44% at 52% -10%, rgba(123, 123, 123, 1) 0%, rgba(123, 123, 123, 0.16) 100%),
    radial-gradient(46% 46% at 66% 106%, rgba(123, 123, 123, 1) 0%, rgba(123, 123, 123, 0.16) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* Filter pill row (Gallery page, Figma node 885-3040). 6 photo cards, 215x160, 16px gap,
   starting at the content gutter. Active pill (Figma: a solid F5F3F3 stroke on the first card
   only) suppresses the shared ring above and uses a real border instead. */
.filter-pill-row {
  display: flex;
  gap: 16px;
  padding: 0 var(--container-pad);
  flex-wrap: wrap;
}
.filter-pill {
  position: relative;
  /* Figma draws these 215 wide, but its own gaps are 16/14/16/16/16 — so six 215s at a
     uniform 16 gap total 1370 against a 1368 content column and the last pill wrapped to a
     second row. Flex-filling gives (1368 - 5x16) / 6 = 214.67, i.e. Figma's intent to within
     a third of a pixel, and it can never wrap. */
  flex: 1 1 0;
  min-width: 0;
  height: 160px;
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filter-pill__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.filter-pill__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 33, 46, 0.66);
  z-index: 1;
}
.filter-pill__label {
  position: relative;
  z-index: 2;
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--font-size-h4);
  line-height: 32px;
  letter-spacing: var(--letter-spacing);
}
.filter-pill--active {
  border-color: var(--color-text);
}
.filter-pill--active::after {
  content: none;
}
@media (max-width: 767px) {
  /* Horizontal scroll on mobile. flex-basis has to come back here, otherwise `flex: 1 1 0`
     plus nowrap squashes six pills into the viewport width instead of overflowing it. */
  .filter-pill-row { overflow-x: auto; flex-wrap: nowrap; }
  .filter-pill { flex: 0 0 215px; }
}

/* Gallery toolbar: Photos/Video toggle + Sort, Figma node 885-3040. */
.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--container-pad);
  /* Figma: filter row bottom 736 -> toolbar top 791 = 55, and toolbar bottom 855 -> grid top
     912 = 57. Both round to the same --section-heading-gap (56) used everywhere else on this
     page; the 1-2px either way is font-metric noise (B2), not a distinct design value. */
  margin-top: var(--section-heading-gap);
  flex-wrap: wrap;
  gap: 16px;
}
.gallery-toolbar__toggle,
.gallery-toolbar__sort {
  display: flex;
  align-items: center;
  height: 64px;
  border-radius: 8px;
}
/* Fixed widths, not hug-content: Figma sizes both of these as controls (toggle x72 w330,
   sort x1168 w272, both ending flush at the 1440 content edge), so hugging their text left
   them 84px and 15px short respectively. */
.gallery-toolbar__toggle {
  gap: 4px;
  padding: 0 8px;
  width: 330px;
}
.gallery-toolbar__view {
  flex: 1;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--font-size-lg);
  line-height: 32px;
  letter-spacing: var(--letter-spacing);
  cursor: pointer;
}
.gallery-toolbar__view--active {
  background: var(--color-accent);
}
.gallery-toolbar__sort {
  gap: 8px;
  padding: 0 24px;
  width: 272px;
  justify-content: center;
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--font-size-lg);
  line-height: 32px;
  letter-spacing: var(--letter-spacing);
}
.gallery-toolbar__sort-icon {
  flex-shrink: 0;
  color: var(--color-text);
}
/* Real, functional Sort. The visible control is a button + listbox, NOT a native <select>:
   a select's option list is drawn by the OS, so on this dark theme it rendered as a
   white/blue macOS popup that could not be styled. The native select is still in the DOM
   (.sr-only) carrying the value, so gallery-controls.js's sort logic is unchanged. */
.gallery-toolbar__sort {
  position: relative;
  cursor: default;
}
.gallery-toolbar__sort-trigger {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--font-size-lg);
  line-height: 32px;
  letter-spacing: var(--letter-spacing);
  cursor: pointer;
}
.gallery-toolbar__sort-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.gallery-toolbar__sort-trigger[aria-expanded="true"] .gallery-toolbar__sort-icon {
  transform: rotate(180deg);
}
.gallery-toolbar__sort-icon {
  transition: transform var(--duration-fade) var(--ease-reveal);
}

/* Panel. Sits under the control, matched to its width, using the theme's own surface + the
   shared radial ring rather than anything browser-drawn. */
.gallery-toolbar__sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.gallery-toolbar__sort-menu[hidden] {
  display: none;
}
.gallery-toolbar__sort-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: var(--font-size-base);
  line-height: 24px;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.gallery-toolbar__sort-item:hover,
.gallery-toolbar__sort-item:focus-visible {
  background: var(--color-surface-hover);
  outline: none;
}
.gallery-toolbar__sort-item.is-selected {
  color: var(--color-accent);
}

/* Video panel — the Photos/Video toggle switches [data-media-panel]. */
[data-media-panel][hidden] {
  display: none;
}
.gallery-video {
  padding: 0 var(--container-pad);
}
.gallery-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.gallery-video__frame video,
.gallery-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.gallery-video__note {
  margin: 16px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

/* Results count + Load More (Gallery page, Figma node 885-3040). */
.results-count-row {
  text-align: center;
}
.results-count-row__load-more {
  margin-top: 48px;
}
/* Intentionally disabled (see module.html) - keep the real Figma appearance instead of the
   browser's default greyed-out disabled look. */
.results-count-row__load-more:disabled {
  opacity: 1;
  cursor: default;
}

/* Header bar — same two-gradient pattern, different radii (verified separately against
   Header > Rectangle 17 in the raw stroke data; its extreme aspect ratio vs. a card's means
   the numbers don't carry over). */
.site-header__bar {
  position: relative;
  border-color: transparent;
}
.site-header__bar::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(37% 37% at 52% -10%, rgba(123, 123, 123, 1) 0%, rgba(123, 123, 123, 0.16) 100%),
    radial-gradient(30% 30% at 55% 105%, rgba(123, 123, 123, 1) 0%, rgba(123, 123, 123, 0.16) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   About — timeline tab content (landing-about.html, Figma 1162:9655).
   Hand-authored inside tab-panel's richtext, the established pattern for one-off layouts no
   module covers. Deliberately NOT tab-panel__split: that is Business Vans' layout — a 421/841
   card with a surface, ring and padding. About's equivalent has no card at all and different
   columns, measured off the frame:
     copy   x72  w618   |  gutter 74  |  image x764 w676   → 618 + 74 + 676 = 1368 content width
   .tab-panel already supplies the 72px gutter, so nothing here adds one (gotcha 9).
   ============================================================ */
.about-timeline {
  display: grid;
  grid-template-columns: 618fr 676fr;
  gap: 74px;
  align-items: start;
}
.about-timeline__copy > :first-child {
  margin-top: 0;
}
.about-timeline__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Figma image box 676x456. */
  aspect-ratio: 676 / 456;
  object-fit: cover;
  border-radius: var(--radius-md);
}
/* Stat cards. Figma `Group 2147216617/8/21` at y2824: three 157x128 cards, radius 8, fill
   #2A2A2A with the shared B1d radial ring, 16px apart, contents centred. They sit INSIDE the
   tab's left column beneath the copy — the build had them as a separate full-width stats-row
   module spanning the whole 1512 viewport, which is why the section read as two stacked bands
   instead of one two-column block. Fixed width (not 1fr) so three cards occupy 503 of the 618
   column exactly as Figma has them, rather than stretching to fill it. */
.about-stats {
  display: flex;
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.about-stats li {
  width: 157px;
  min-height: 128px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 8px;
  text-align: center;
}
.about-stats__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: var(--font-weight-heading);
  line-height: 40px;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
}
.about-stats__label {
  display: block;
  font-size: var(--font-size-md);
  line-height: 32px;
  color: var(--color-text);
}
@media (max-width: 991px) {
  .about-timeline {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  /* Figma's mobile About frame leads with the photo, same as tab-panel__media does. */
  .about-timeline__media { order: -1; }
  .about-stats li { flex: 1 1 140px; width: auto; }
}

/* ============================================================
   Legal pages (legal.html — privacy, cookies, terms, accessibility,
   consumer rights). Figma: LEGAL & COMPLIANCE section, one frame per page.
   The top band (Rectangle 2, 400px, image + gradient overlay + heading) is just the
   existing `hero` module at a shorter min_height — not a separate component. Only the
   section list below (title/body pairs with divider rules) is legal-page-specific.
   ============================================================ */
.legal-sections {
  max-width: var(--container-max);
  margin: 0 auto;
  /* Figma: hero bottom (504) to first heading top (576) = 72px, not 64.
     Bottom is 0: last-line → footer is 64px on every legal 1512 frame, and
     .site-footer already has padding-top 80. Extra 120 here plus the
     dnd_section’s 96 stacked to ~296px of empty space above the logo. */
  padding: 72px var(--container-pad) 0;
}
.legal-page .dnd-section {
  padding-bottom: 0 !important;
}
/* Section dividers. Three corrections against the Figma frame (1498:35065), which carries
   ELEVEN `Line` nodes for eleven sections — one under each, including the last:
     1. the last divider was explicitly removed (`:last-child { border-bottom: none }`), so the
        rule that Figma draws at y=3800, immediately above the footer at y=3816, was missing;
     2. every line is full-bleed — x=0, w=1512, i.e. the whole frame width — while a plain
        border-bottom here stops at the 72px content gutter on both sides;
     3. the stroke is not flat: it is the same shared "Radial" style as B1d (686:1057), two
        stacked radial gradients of #7B7B7B fading 100% -> 16%, not a single solid rgba.
   Drawn as a pseudo-element because a CSS `border` can be neither gradient-filled nor pushed
   outside its own box; the negative insets cancel the container's --container-pad so the line
   reaches both frame edges regardless of viewport width. */
.legal-section {
  padding: 40px 0;
  position: relative;
}
.legal-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(-1 * var(--container-pad));
  right: calc(-1 * var(--container-pad));
  height: 1px;
  background:
    radial-gradient(44% 44% at 52% -10%, rgba(123, 123, 123, 1) 0%, rgba(123, 123, 123, 0.16) 100%),
    radial-gradient(46% 46% at 66% 106%, rgba(123, 123, 123, 1) 0%, rgba(123, 123, 123, 0.16) 100%);
  pointer-events: none;
}
.legal-section:first-child {
  padding-top: 0;
}
/* Figma (Privacy Policy frame 1498:35065, node y=576): 32/40, UPPER. Section titles
   use --font-heading (Barlow Condensed) at Figma's 500. */
.legal-section__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 24px;
  max-width: 907px;
}
.legal-section__body {
  max-width: 1022px;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.78;
}
.legal-section__body p {
  margin: 0 0 24px;
}
.legal-section__body p:last-child {
  margin-bottom: 0;
}
.legal-section__body strong {
  font-weight: 600;
}
/* Privacy Policy labels (Figma 1498:35096 etc.): 20/32 weight 600, case UPPER.
   Body copy stays sentence case; only these kickers transform. Work Sans 600
   is a real cut, unlike heading weight on Bebas Neue. */
.legal-section__kicker {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 24px;
}
/* Bullets. _reset.css sets `list-style: none` globally, so a <ul> here indented but rendered
   NO marker at all — the bullet lists under "Processed under the lawful basis of…" read as
   stray indented paragraphs. Same failure already hit once on Business Vans' tab-panel.
   Figma's marker is a 6x6 accent dot, so it's drawn with ::before rather than restoring
   `list-style: disc` (which would give a browser-default glyph in the text colour). */
.legal-section__body ul {
  margin: 0 0 24px;
  padding-left: 24px;
  list-style: none;
}
.legal-section__body li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
}
.legal-section__body li::before {
  content: "";
  position: absolute;
  left: 0;
  /* Centres the dot on the first line's cap height rather than the line box, so it still
     lines up when an item wraps to several lines. */
  top: calc((1.78em - 6px) / 2);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.legal-section__body li:last-child {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .legal-sections { padding: 40px var(--container-pad) 0; }
}

/* Legal heroes — Figma two-weight H1 + 18px standfirst. Scoped so About's
   shared .hero--split (734/561, 20px standfirst) is unchanged.
   Desktop (1512): Privacy 1498:35065 PRIVACY(500)+POLICY(200) one line;
   Cookies single 500; Terms 1162:27003 TERMS &(200) / CONDITIONS(500) wrap;
   A11y 1162:27059 ACCESSIBILITY(500) / STATEMENT(200); Rights 1162:26801
   E-COMMERCE &(500) / CONSUMER RIGHTS(200). Mobile frames keep the same
   splits at 35/48, 16px gutter (see _responsive.css). */
.hero--heading-stack .h1 .h1--light {
  display: block;
}
/* About two-weight heading stacks — Figma About/Who We Are? 1162:9655. The lighter
   clause is its own line (.h1--light/.h2--light = Barlow Condensed 200).
   Pursuit 1162:9662 THE PURSUIT(500) / of Perfection(200); Minds 1162:9730 THE MINDS
   BEHIND(200) / the Craft(500); CTA 1162:9707 READY TO WRITE(500) / Your Own Chapter?(200). */
.split-section--heading-stack .h2 .h2--light,
.section-heading--heading-stack .h2 .h2--light,
.cta-banner--heading-stack .h2 .h2--light,
.section-heading--heading-stack .h2 .h2__after {
  display: block;
}
/* ── Thank-you pages (Figma ADDITIONAL PAGES 3021:16618 et al.) ─────────────
   Full-bleed photo + 72% black scrim, centred Check_fill, ExtraLight/Medium H2.
   Stack layout normally kills --heading-col (see .section-heading--stack); restore
   it here so Order wraps to Figma's 3 lines at 906 and test-drive to 2 at 610. */
.thank-you-page {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px 0 64px;
  overflow: hidden;
}
.thank-you-page__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.thank-you-page__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.thank-you-page__scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.72;
}
.thank-you-page__content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.thank-you-page__check {
  display: block;
  width: 148px;
  height: 148px;
  margin: 0 auto 32px;
}
.thank-you-page .section-heading {
  margin-bottom: 32px;
}
.thank-you-page .button-group {
  margin-top: 0;
}
.thank-you-page__note {
  display: block;
  width: 100%;
  max-width: 446px;
  margin: 40px auto 0;
  padding: 0;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.64px;
  color: var(--color-text);
}
.thank-you-page__note a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Order note lives outside dnd now; hide any stale rich-text snapshot still on the page. */
.thank-you-page .rich-text {
  display: none;
}

/* Stack normally sets max-width:none — thank-you needs the Figma box width. */
.thank-you-heading--order.section-heading--stack > .section-heading__main,
.thank-you-heading--testdrive.section-heading--stack > .section-heading__main,
.thank-you-heading.section-heading--stack > .section-heading__main {
  flex: none;
  max-width: var(--heading-col);
  margin-left: auto;
  margin-right: auto;
}
.thank-you-heading--order {
  --heading-col: 906px;
}
/* Order H2: base ExtraLight 200; Medium 500 only on "What's Next?" (styleOverride 2). */
.thank-you-heading--order .h2 {
  font-weight: var(--font-weight-heading-light);
}
.thank-you-heading--order .h2 .h2__after {
  font-weight: var(--font-weight-heading);
}
.thank-you-heading--order .body-md {
  max-width: 1022px;
  margin-left: auto;
  margin-right: auto;
}
.thank-you-heading,
.thank-you-heading--testdrive {
  --heading-col: 906px;
}
/* Non-order thank-yous are uniform ExtraLight (Figma Titles/H2/EXTRALIGHT). */
.thank-you-heading .h2,
.thank-you-heading--testdrive .h2 {
  font-weight: var(--font-weight-heading-light);
}
/* Thank-you /test-drive Figma 3045:8165 — heading box 610×112 */
.thank-you-heading--testdrive {
  --heading-col: 610px;
}
/* Contact form heading 896:3013 — "Start Your"(200) "Bespoke"(500) / "Journey Today"(500).
   The lighter clause stays on line 1 with Bespoke; heading_after drops to line 2. */
.contact-journey-heading .h2 .h2__after {
  display: block;
}
/* Contact: map bottom y1888 → heading y2064 = 176px. Form card 896:3061 is 676×560
   with 24px inset (fields at x96). Footer band after the 2792 form bottom. */
.contact-journey-heading {
  padding-top: 176px;
  padding-bottom: 96px;
}
/* About CTA → footer: Figma 1162:9706 band bottom y4424, footer y4552 = 128px; footer pt 80. */
.about-cta {
  padding-bottom: 48px;
}
/* Road 1162:9779 is THREE runs on TWO lines: THE ROAD(500) / to(200) Excellence(500).
   A display:block on .h2--light would put Excellence on a third line. Insert the
   break BEFORE the light word so "to Excellence" stays together. */
.about-road-heading .h2 .h2--light::before {
  content: "\A";
  white-space: pre;
}
.legal-page .hero--split .hero__content .body-lg {
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0.72px;
}
/* Cookies / Terms / A11y / Rights standfirst is 445, not Privacy's 503. */
.legal-page--cookie-policy,
.legal-page--terms-of-use,
.legal-page--accessibility-statement,
.legal-page--consumer-rights {
  --hero-split-copy: 445px;
}
/* Desktop tracking: Privacy/Cookies/Terms +1.92 (already .h1 0.04em).
   A11y + Rights H1 letterSpacing is 0. */
@media (min-width: 992px) {
  .legal-page--accessibility-statement .hero--split .h1,
  .legal-page--consumer-rights .hero--split .h1 {
    letter-spacing: 0;
  }
  .legal-page--accessibility-statement .hero--split .hero__content .body-lg {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

/* ============================================================
   Contact page "Direct Channels" cards (contact-channel-card-row module).
   Same card language as .contact-card (accent icon circle, 24px padding/gap) plus a
   label:value row list for the two data points each card carries in Figma.
   ============================================================ */
.contact-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 64px;
  /* No horizontal padding here previously, so the 3 cards ran full-bleed edge to edge
     instead of Figma's 72px --container-pad column (cards measured x=72..1439 in Figma,
     x=0..1512 live). Found 8 Aug 2026 pixel-verifying the Contact page. */
  padding: 0 var(--container-pad) 120px;
}
.contact-channel-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-channel-card--link {
  text-decoration: none;
  color: inherit;
}
.contact-channel-card--link:hover {
  border-color: var(--color-accent);
}
.contact-channel-card__row dd a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-channel-card__row dd a:hover {
  color: var(--color-accent);
}
.contact-channel-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-channel-card__icon img {
  width: 24px;
  height: 24px;
}
.contact-channel-card__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.contact-channel-card__row {
  display: flex;
  gap: 4px;
  font-size: 18px;
  line-height: 1.5;
}
.contact-channel-card__row dt {
  font-weight: 600;
}
.contact-channel-card__row dd {
  margin: 0;
  font-weight: 400;
}
@media (max-width: 767px) {
  .contact-channel-grid { grid-template-columns: 1fr; }
}

/* map-embed's fallback <img> had no styling at all — every template calling it (Contact,
   Finance, Events) passed embed="" and no image either, so the module rendered nothing but
   a caption paragraph with no map visual. Now that templates pass a real fallback image
   (extracted from Figma via the Images API), give it the same framing as the site's other
   full-bleed image bands: 8px frame-gap inset (matching the home hero pattern), Figma's own
   472px band height and radius 8. Figma's address text lives on an overlay card ON the map
   image itself, not a caption below it — reproducing that overlay card is a flagged
   simplification; the caption below remains the honest stand-in for that content. */
.map-embed {
  margin: 0 var(--frame-gap);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.map-embed__frame,
.map-embed img {
  display: block;
  width: 100%;
  height: 472px;
  object-fit: cover;
}
.map-embed__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.map-embed__caption {
  margin-top: 24px;
  padding: 0 var(--container-pad);
  color: var(--color-text-muted);
}
.map-embed__card {
  position: absolute;
  left: 20px;
  top: 64px;
  width: min(445px, calc(100% - 40px));
  background: #F5F3F3;
  color: #2A2A2A;
  border-radius: 8px;
  padding: 24px;
  z-index: 2;
}
.map-embed__addr,
.map-embed__travel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.map-embed__addr img,
.map-embed__travel img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  filter: invert(48%) sepia(93%) saturate(1486%) hue-rotate(346deg) brightness(98%) contrast(96%);
}
.map-embed__note,
.map-embed__links {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.map-embed__card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  text-transform: uppercase;
}

.events-listing__top {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 32px;
  padding: 0;
  flex-wrap: nowrap;
}
.events-listing__top .gallery-filter-row {
  padding: 0;
}
.events-filters .gallery-filter-row__pill {
  padding: 0 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-weight: 400;
}
.events-filters .gallery-filter-row__pill--active {
  background: transparent;
  color: var(--color-accent);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}
.events-next {
  max-width: 330px;
  background: #F5F3F3;
  color: #2A2A2A;
  border-radius: 8px;
  padding: 16px 20px;
}
.events-next p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.events-next strong {
  font-weight: 600;
}
@media (max-width: 991px) {
  .map-embed--card { overflow: hidden; }
  .map-embed__card {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    border-radius: 0;
  }
  .events-listing__top { flex-direction: column; align-items: flex-start; }
  .events-next { max-width: none; }
}

/* Part Exchange valuation form (landing-part-exchange.html). Field styling comes from
   _calculator.css's .calc-field/.calc-fields classes; this just spaces the h3 group
   headings the calculator doesn't have. Same missing-gutter pattern as .compare-table/
   .gallery-filter-row/.saved-items-grid - rich-text--full has no padding of its own. */
.part-exchange-form {
  padding: 0 var(--container-pad);
}
.part-exchange-form h3 {
  margin: 40px 0 16px;
}
.part-exchange-form h3:first-child {
  margin-top: 0;
}
.part-exchange-form > p.body-sm:last-child {
  margin-top: 16px;
  color: var(--color-text-muted);
}

/* Gallery page category-filter row (landing-gallery.html) — static, see template comment. */
.gallery-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  /* Same missing-gutter pattern as .compare-table - rich-text--full has no padding of its
     own, and this class never had one either. Used by Events and Wishlist. */
  padding: 0 var(--container-pad);
}
.gallery-filter-row__pill {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}
.gallery-filter-row__pill--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* Split compare hero (Figma 1239:5953): heading box 618, standfirst 445 at x995. */
.hero--compare {
  --hero-split-heading: 618px;
  --hero-split-copy: 445px;
}

/* Compare Vans table styles live on compare-table.module — the old rich-text
   .compare-table rules were for a static 2-column demo and would fight the HubDB module. */

/* Wishlist page (landing-wishlist.html) — saved-items grid, same visual language as
   ticket-bundle/contact-channel cards. */
.saved-items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  /* Same missing-gutter pattern as .compare-table/.gallery-filter-row. */
  padding: 0 var(--container-pad);
}
.saved-item {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.saved-item img {
  width: 100%;
  /* Figma: 429x304 per card image. */
  aspect-ratio: 429 / 304;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: var(--space-sm);
}
.saved-item__badge {
  align-self: flex-start;
  margin: 0 0 var(--space-sm);
}
.saved-item h3 {
  margin: 0;
}
.saved-item__price {
  font-weight: 600;
  margin: 0;
}
.saved-item__finance {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}
@media (max-width: 991px) {
  .saved-items-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .saved-items-grid { grid-template-columns: 1fr; }
}
.wishlist-page .saved-items-grid:not([data-wish-grid]),
.wishlist-page .gallery-filter-row:not([data-wish-filters]) {
  display: none;
}
.wishlist-live {
  padding-bottom: 96px;
}
.wishlist-live__empty {
  padding: 0 var(--container-pad);
}
.wishlist-basket-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 24px var(--container-pad);
}
.saved-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}
.vh-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 80;
  transform: translateX(-50%) translateY(12px);
  background: #201f1f;
  color: #f5f3f3;
  padding: 12px 20px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.vh-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   BUSINESS VANS (Figma "Lifestyle Landing Page Template: Business Vans", node 1162-7801).
   Every number below is measured from work-logs/VH2026_FIGMA_SPEC_BUSINESS_VANS.json, not
   estimated. All four blocks carry the 72px content gutter on the grid itself rather than on a
   wrapper — see CLAUDE.md gotcha 0b for why wrappers cannot be relied on in a dnd_area page.
   ============================================================ */

/* NOTE: the six card-internal rules below are scoped under .rich-text on purpose. These blocks
   are authored inside a rich-text module, and that module's own `.rich-text p` and
   `.rich-text h3` rules (specificity 0,1,1) outrank a bare class (0,1,0) — without the prefix
   they silently reset every margin set here. */
/* Partner logos — Figma: eight 330x145 cards, 4 across, two rows at y2526 / y2687, 16px gaps,
   logo artwork ~261x40 centred. The logo-bar module had NO css at all, so it rendered as an
   unstyled run of images. */
.logo-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 var(--container-pad);
  /* The preceding .section-heading already contributes --section-heading-gap (56px), which is
     exactly Figma's heading-bottom 2470 → cards 2526. The extra 64 here stacked on top of it. */
  margin-top: 0;
}
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 145px;
  /* Figma `Rectangle 2177` (y2526) fills these cards #3D3D3D — a lighter, raised surface than
     --color-surface (#2A2A2A), which is what the build was using, so the wall read as flat
     against the page. Literal rather than a token: it is the only place this value appears. */
  background: #3D3D3D;
  /* Border comes from the shared radial-ring rule below (B1d), matching Figma's Radial stroke;
     a flat --color-border was wrong here. */
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}
/* Figma's logo lockup is a fixed 261x40 centred in the 330x145 card (35px side / 53px top
   insets). `width: 80%` made it scale with the card instead. */
.partner-logo img {
  width: 261px;
  max-width: calc(100% - 48px);
  height: 40px;
  object-fit: contain;
}
.partner-logo__name { color: var(--color-text-muted); }
@media (max-width: 991px) { .logo-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .logo-bar { grid-template-columns: 1fr; } }

/* "Uncompromising Professional Standards" — Figma: two 676x598 image cards at x72 / x764,
   16px gap, radius 8, caption inset 24px from the card's left and bottom (caption y2094 h64
   against a card ending at 2182). The left card carries the same 80x80 play button as the
   home page's video block, centred on the card. NOT icon+title feature cards, which is what
   this section was built as. */
.standards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 var(--container-pad);
  margin-top: 64px;
}
.standards-card {
  position: relative;
  min-height: 598px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.standards-card:has([data-video-trigger][data-video-url]) {
  cursor: pointer;
}
.standards-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Same two-layer scrim as the category cards so the caption stays legible on any photo. */
.standards-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 33, 46,0) 40%, rgba(11, 33, 46,0.78) 100%);
  pointer-events: none;
}
.rich-text .standards-card__caption {
  position: relative;
  z-index: 1;
  max-width: 594px;
  margin: 0;
}
.standards-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}
@media (max-width: 991px) {
  .standards-grid { grid-template-columns: 1fr; }
  .standards-card { min-height: 420px; }
}

/* "A Refined Journey" — Figma: four 330x304 cards, 16px gaps, 24px padding. The step number is
   its own 56/56 weight-400 element above the title (y4240 number, y4312 title, y4368 copy), so
   it cannot be folded into the title string the way "01: Strategic Consultation" did. */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 var(--container-pad);
  margin-top: 64px;
}
.process-card {
  min-height: 304px;
  padding: 24px;
}
.rich-text .process-card__num {
  font-size: 56px;
  line-height: 56px;
  font-weight: 400;
  color: var(--color-accent);
  margin: 0 0 16px;
}
.rich-text .process-card__title {
  font-size: var(--font-size-h4);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0.96px;
  text-transform: capitalize;
  margin: 0 0 24px;
}
.rich-text .process-card__copy { margin: 0; color: var(--color-text-muted); }
@media (max-width: 991px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .process-grid { grid-template-columns: 1fr; } }

/* Business Vans FAQ — Figma shows six 445x168 cards in a 3x2 grid (x72/533/994, y4808/4992)
   with the question AND answer both visible and no expand control. It is deliberately NOT the
   faq-accordion used elsewhere: nothing here opens or closes. Card padding 32 (question x104
   against a card at x72). */
.faq-static-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 var(--container-pad);
  margin-top: 64px;
}
.faq-static-card {
  min-height: 168px;
  padding: 32px;
}
.rich-text .faq-static-card__q {
  font-size: var(--font-size-h4);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0.96px;
  text-transform: capitalize;
  margin: 0 0 24px;
}
.rich-text .faq-static-card__a { margin: 0; color: var(--color-text-muted); font-size: 16px; line-height: 24px; }
@media (max-width: 991px) { .faq-static-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .faq-static-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SHOWROOM (Figma "Showroom (Listing Page)", node 1162-12911; "Showroom Used Vans",
   node 1207-5939 — same layout, filtered content). Persistent left sidebar (388px) +
   single-column list of horizontal cards, not the top-filter-bar + 3-col grid this page
   was previously built with. All measurements below are from the Figma spec pull, not
   estimated.
   ============================================================ */
/* Hero: hand-built two-column split, NOT the shared `hero` module (see showroom.html's
   header comment for why). Reuses .hero__bg/.hero__overlay as-is (already correct/verified
   elsewhere) for the background image + gradient treatment. */
.showroom-hero {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
}
.showroom-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
  width: 100%;
  padding: 116px var(--container-pad) 96px;
}
.showroom-hero__content .h1 { flex: 0 1 676px; max-width: 676px; margin: 0; }
.showroom-hero__title .h1__line,
.showroom-hero__title .h1--light { display: block; }
.showroom-hero__content .body-lg { flex: 0 1 503px; max-width: 503px; margin: 0; color: var(--color-text-muted); }
@media (max-width: 767px) {
  .showroom-hero__content { flex-direction: column; align-items: flex-start; padding: 64px 24px; }
}

.showroom-layout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 var(--container-pad);
}
/* Figma 1162:12913 filter panel — 388 wide, r8, 24px inset. Model = checkboxes;
   Year/Drivetrain/Lead/Location = 340×64 selects; Budget = dual range; Colour = 32px swatches. */
.showroom-sidebar {
  flex: 0 0 388px;
  min-width: 0;
  padding: 32px 24px 24px;
  background: var(--color-surface);
  border-radius: 8px;
}
.showroom-sidebar__heading {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
  margin: 0 0 24px;
}
.showroom-sidebar__icon { flex: 0 0 32px; display: block; }
.showroom-sidebar .filter-group {
  padding: 0 0 24px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--color-border-subtle);
  gap: 8px;
}
.showroom-sidebar .filter-group:last-of-type { margin-bottom: 16px; }
.showroom-sidebar .filter-group__label {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
  color: var(--color-text);
  margin: 0 0 8px;
  padding: 0;
}
.showroom-sidebar .filter-group__label--colour { line-height: 1.25; margin-bottom: 16px; }
.showroom-sidebar .filter-group__label-muted {
  color: var(--color-text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
}
.showroom-sidebar .filter-group__options { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.sidebar-filter-option {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 32px;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  line-height: 32px;
  color: var(--color-text);
}
.sidebar-filter-option input { position: absolute; opacity: 0; pointer-events: none; }
.sidebar-filter-option__box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid #F5F3F3;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: transparent;
  transition: border-color var(--ease-hover), background var(--ease-hover);
}
.sidebar-filter-option__box svg { opacity: 0; }
.sidebar-filter-option input:checked ~ .sidebar-filter-option__box svg { opacity: 1; }
.sidebar-filter-option input:checked ~ .sidebar-filter-option__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.sidebar-filter-option:has(input:focus-visible) .sidebar-filter-option__box { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.showroom-sidebar .filter-select { position: relative; }
.showroom-sidebar .filter-select select {
  appearance: none;
  width: 100%;
  height: 64px;
  padding: 16px 48px 16px 24px;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 32px;
  border: 1px solid rgba(123, 123, 123, 0.55);
  border-radius: 8px;
  cursor: pointer;
}
.showroom-sidebar .filter-select::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid #F5F3F3;
  border-bottom: 1.5px solid #F5F3F3;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.budget-slider { padding-top: 8px; }
.budget-slider__track {
  position: relative;
  height: 24px;
  margin: 0 0 12px;
}
.budget-slider__track::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 2px;
  background: rgba(123, 123, 123, 0.55);
  transform: translateY(-50%);
}
.budget-slider__fill {
  position: absolute;
  left: 12px;
  top: 50%;
  height: 2px;
  background: var(--color-accent);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}
.budget-slider__input {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.budget-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.budget-slider__input::-moz-range-thumb {
  pointer-events: auto;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
}
.budget-slider__labels {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: var(--color-text);
}

.colour-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
}
.colour-swatch { position: relative; width: 40px; height: 40px; cursor: pointer; }
.colour-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.colour-swatch span {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(245, 243, 243, 0.12);
}
.colour-swatch:has(input:checked)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid #F5F3F3;
  pointer-events: none;
}

.showroom-sidebar .filter-clear {
  display: inline-block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.showroom-main { flex: 1; min-width: 0; }
.showroom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--space-xl);
}
.showroom-toolbar__count { font-size: var(--font-size-lg); color: var(--color-text); }
.showroom-sort { position: relative; flex: 0 0 auto; }
.showroom-sort__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 8px 16px 8px 20px;
  background: transparent;
  border: 1px solid rgba(245, 243, 243, 0.35);
  border-radius: 8px;
  color: #f5f3f3;
  cursor: pointer;
  font: inherit;
}
.showroom-sort__label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.64px;
  text-transform: uppercase;
}
.showroom-sort__value {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-transform: none;
}
.showroom-sort__icon { display: block; flex: 0 0 20px; }
.showroom-sort__trigger[aria-expanded="true"] .showroom-sort__icon { transform: rotate(180deg); }
.showroom-sort__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 100%;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid rgba(245, 243, 243, 0.22);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.showroom-sort__menu[hidden] { display: none; }
.showroom-sort__item {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 24px;
  color: #f5f3f3;
  cursor: pointer;
  white-space: nowrap;
}
.showroom-sort__item:hover,
.showroom-sort__item.is-selected { color: var(--color-accent); }

/* Single-column list of horizontal cards. Figma: card 964x320, photo 447x304 inset 8px into
   a card that otherwise has no visible padding — content column starts 24px past the photo. */
.vehicle-list { display: flex; flex-direction: column; gap: 16px; }
.vehicle-list-card[hidden] { display: none !important; }
.vehicle-list-card.is-paginated-hidden { display: none !important; }
.vehicle-list-card {
  display: flex;
  gap: 24px;
  padding: 8px;
  min-height: 320px;
}
.vehicle-list-card__media {
  position: relative;
  flex: 0 0 447px;
  width: 447px;
  height: 304px;
  min-height: 304px;
  align-self: flex-start;
  border-radius: 4px;
  overflow: hidden;
  background: #161313;
}
.vehicle-list-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.showroom-layout .vehicle-list-card__img {
  /* Dragon2000 mini JPEGs ship with letterboxed white bars — scale past the frame. */
  transform: scale(1.28);
  transform-origin: center center;
}
.showroom-layout .vehicle-list-card__slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.showroom-layout .vehicle-list-card__slides .vehicle-list-card__img {
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.showroom-layout .vehicle-list-card__slides .vehicle-list-card__img.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Figma Rectangle 2178 — image fill stack: photo + two linear scrims at 78% layer opacity.
   Top: #100F0F 80%→0%; bottom: #100F0F 0%→100%. Keeps badge, icons and dots legible. */
.showroom-layout .vehicle-list-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(16, 15, 15, 0.624) 0%, rgba(16, 15, 15, 0) 100%),
    linear-gradient(180deg, rgba(16, 15, 15, 0) 0%, rgba(16, 15, 15, 0.78) 100%);
}
.vehicle-list-card__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 3;
}
.vehicle-list-card__tools {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
}
.vehicle-list-card__tools a,
.vehicle-list-card__tools button {
  display: flex;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.vehicle-list-card__tools img {
  width: 24px;
  height: 24px;
  display: block;
  filter: brightness(0) invert(1);
}
.showroom-layout .vehicle-list-card__wish .wish-on { display: none; }
.showroom-layout .vehicle-list-card__wish.is-on .wish-off { display: none; }
.showroom-layout .vehicle-list-card__wish.is-on .wish-on {
  display: block;
  filter: none;
}
.vehicle-list-card__dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
.vehicle-list-card__dot {
  display: block;
  width: 12px;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
}
.vehicle-list-card__dot.is-active {
  width: 24px;
  background: #f5f3f3;
}
/* Showroom Used Vans only: reg-year + mileage as two standard tags side by side. */
.vehicle-list-card__meta {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100% - 48px);
}
/* "DVLA Verified" (new) vs "Certified Used" (used) — same visual treatment, different label,
   so both are just content passed into the same .vehicle-list-card__dvla class. */
.vehicle-list-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 24px 24px 0;
}
.vehicle-list-card__title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.vehicle-list-card__spec,
.vehicle-list-card__feature {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 32px;
  color: #b5b3b3;
}
.vehicle-list-card__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
}
.vehicle-list-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}
.vehicle-list-card__price {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}
.vehicle-list-card__dvla {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 8px 16px;
  background: rgba(245, 243, 243, 0.08);
  border: 1px solid rgba(245, 243, 243, 0.16);
  border-radius: 100px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.56px;
  text-transform: uppercase;
  color: #f5f3f3;
  white-space: nowrap;
  flex-shrink: 0;
}
.vehicle-list-card__dvla-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.vehicle-list-card__dvla-icon img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}
.vehicle-list-card__dvla-label {
  display: block;
  line-height: 24px;
}
.vehicle-list-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(245, 243, 243, 0.24);
  border-radius: 8px;
  background: rgba(245, 243, 243, 0.06);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.56px;
  text-transform: uppercase;
  color: #f5f3f3;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.vehicle-list-card__cta::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("/hubfs/raw_assets/public/VH2026/images/home/icon-arrow-up-right.svg") no-repeat center / contain;
  mask: url("/hubfs/raw_assets/public/VH2026/images/home/icon-arrow-up-right.svg") no-repeat center / contain;
}
.vehicle-list-card__cta:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(245, 243, 243, 0.1);
}

/* Showroom listing pagination — Figma 1162:12936 / 1162:12925. */
.showroom-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 40px 0 0;
  margin-top: 16px;
}
.showroom-pagination__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 157px;
  padding: 12px 24px;
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.004);
  color: #f5f3f3;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.64px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--transition-premium), border-color var(--transition-premium);
}
.showroom-pagination__more:hover { opacity: 0.85; }
.showroom-pagination__pages {
  display: flex;
  align-items: center;
  gap: 8px;
}
.showroom-pagination__num,
.showroom-pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: rgba(245, 243, 243, 0.7);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 32px;
  cursor: pointer;
  transition: color var(--transition-premium), border-color var(--transition-premium), background var(--transition-premium);
}
.showroom-pagination__num {
  width: 50px;
  height: 56px;
  border-radius: 6px;
}
.showroom-pagination__num.is-active {
  color: #f5f3f3;
  border: 1.5px solid var(--color-accent);
}
.showroom-pagination__arrow {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}
.showroom-pagination__arrow--next:not(:disabled) {
  background: var(--color-accent);
  color: var(--color-bg);
}
.showroom-pagination__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 991px) {
  .showroom-layout { flex-direction: column; }
  .showroom-sidebar { display: none; }
  .showroom-sidebar.is-mobile-open { display: block; flex: 1 1 auto; }
  .vehicle-list-card { flex-direction: column; }
  .vehicle-list-card__media { flex-basis: auto; height: 240px; }
  .vehicle-list-card__body { padding: var(--space-lg) 0 0; }
}

/* Form pages (book-a-test-drive, rsvp, submit-resume, vso-enquiry). Figma specifies a
   complete field-by-field layout for each (labels x72, fields x88 w504) that form-section's
   own native form embed can't render since no real HubSpot Form exists yet on this portal.
   Hand-built using _calculator.css's .calc-field/.calc-options, same pattern already proven
   on Part Exchange's disabled valuation form. Own gutter per gotcha 9 — rich-text--full has
   none of its own. */
.form-page-fields { padding: 0 var(--container-pad); }
.form-page-fields form { max-width: 561px; }
.form-page-fields .calc-field__help {
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 0;
}
.form-page-fields textarea.calc-field__input {
  height: auto;
  min-height: 120px;
  padding: 16px;
  resize: vertical;
  font-family: inherit;
}
.form-page-fields select.calc-field__input { appearance: none; }

/* HubSpot Forms v4 developer embed (.hs-form-html). Matches Figma form fields
   (same 561×64 inputs as .calc-field). The iframe/<span id="hs_cos_wrapper_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form" ><h3 id="hs_cos_wrapper_form_606302261_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text"></h3>

</span> embed cannot be styled. */
.hs-form-html {
  max-width: 561px;
  margin-top: 32px;
}
.hs-form-html form,
.hs-form-html fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.hs-form-html label,
.hs-form-html .hs-form-field > label,
.hs-form-html legend {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 8px;
}
.hs-form-html .hs-form-field,
.hs-form-html .hs-fieldtype-text,
.hs-form-html .hs-fieldtype-textarea,
.hs-form-html .hs-fieldtype-select,
.hs-form-html .hs-fieldtype-phonenumber,
.hs-form-html .hs-fieldtype-date,
.hs-form-html .hs-fieldtype-file,
.hs-form-html .hs-fieldtype-number {
  margin-bottom: 24px;
}
.hs-form-html input[type="text"],
.hs-form-html input[type="email"],
.hs-form-html input[type="tel"],
.hs-form-html input[type="url"],
.hs-form-html input[type="number"],
.hs-form-html input[type="date"],
.hs-form-html input[type="time"],
.hs-form-html input[type="file"],
.hs-form-html select,
.hs-form-html textarea,
.hs-form-html .hs-input {
  display: block;
  width: 100%;
  height: 64px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 18px;
  box-sizing: border-box;
}
.hs-form-html textarea,
.hs-form-html textarea.hs-input {
  height: auto;
  min-height: 120px;
  padding: 16px;
  resize: vertical;
}
.hs-form-html input::placeholder,
.hs-form-html textarea::placeholder {
  color: var(--color-text-muted);
}
.hs-form-html input:focus-visible,
.hs-form-html select:focus-visible,
.hs-form-html textarea:focus-visible,
.hs-form-html .hs-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-text);
}
.hs-form-html .hs-error-msgs,
.hs-form-html .hs-error-msg,
.hs-form-html .hs-main-font-element {
  color: #e07a7a;
  font-size: 14px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.hs-form-html ul.hs-error-msgs { margin: 8px 0 0; padding: 0; }
.hs-form-html input[type="submit"],
.hs-form-html button[type="submit"],
.hs-form-html .hs-button,
.hs-form-html .hs-submit input,
.hs-form-html .hsfc-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 56px;
  padding: 12px 24px;
  margin-top: 8px;
  border: none;
  border-radius: 8px;
  background: var(--gradient-btn-primary);
  color: var(--color-bg);
  font-weight: 600;
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--transition-premium), box-shadow var(--transition-premium),
    background var(--transition-premium);
}
.hs-form-html input[type="submit"]::before,
.hs-form-html button[type="submit"]::before,
.hs-form-html .hs-button::before,
.hs-form-html .hsfc-Button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.hs-form-html input[type="submit"]:hover,
.hs-form-html button[type="submit"]:hover,
.hs-form-html .hs-button:hover,
.hs-form-html .hsfc-Button:hover {
  background: var(--gradient-btn-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-primary-hover);
  opacity: 1;
}
.hs-form-html input[type="submit"]:hover::before,
.hs-form-html button[type="submit"]:hover::before,
.hs-form-html .hs-button:hover::before,
.hs-form-html .hsfc-Button:hover::before {
  transform: translateX(100%);
}
.hs-form-html .legal-consent-container,
.hs-form-html .hs-richtext,
.hs-form-html .hs-form-required,
.hs-form-html .hs-form-html__description {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.hs-form-html input[type="checkbox"],
.hs-form-html input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-accent);
}
.hs-form-html .hs-form-booleancheckbox-display,
.hs-form-html .hs-form-radio-display,
.hs-form-html .inputs-list label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
  font-size: 16px;
  margin: 0 0 12px;
}
.newsletter__form .hs-form-html { margin-top: 0; max-width: none; }

/* Hero offer panel — VSO (Figma 1219:7575). Two LIGHT cards floated over the hero's right
   side: a badge card (330x152 at x1110 y152) and a spec card (330x329 at y320), 16px apart.
   x1110 + 330 = 1440, i.e. the panel's right edge is the content gutter, and the hero is 592
   tall here rather than the usual 400.
   Cards are #F5F3F3 with dark text — the only inverted surface in the theme, which is why the
   colours below are literal rather than tokens (the tokens are all built for dark-on-dark). */
.hero__offer {
  position: absolute;
  top: 48px;
  right: var(--container-pad);
  z-index: 2;
  width: 330px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero__offer-badge,
.hero__offer-spec {
  border-radius: var(--radius-md);
  padding: 24px;
}
.hero__offer-spec {
  background: #f5f3f3;
  color: #201f1f;
}
/* Figma 1221:8005 — 330×152 glass card: #F5F3F3 at 16% fill + 1px stroke, white type,
   48px orange clock centred, 8px to the 20/32 centred caption. */
.hero__offer-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: rgba(245, 243, 243, 0.16);
  border: 1px solid rgba(245, 243, 243, 0.16);
  color: #f5f3f3;
  text-align: center;
  /* Figma 1221:8005 carries a GLASS effect (REST only exposes type=GLASS). */
  overflow: hidden;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.hero__offer-badge p {
  margin: 0;
  width: 282px;
  max-width: 100%;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--font-weight-heading);
  line-height: 32px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.hero__offer-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero__offer-icon img,
.hero__offer-icon svg { width: 24px; height: 24px; }
.hero__offer-title {
  margin: 0 0 16px;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 24px;
}
.hero__offer-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero__offer-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-size-md);
  line-height: 24px;
}
/* Figma draws these as ticked checkboxes; a real <input> would imply the visitor can change
   them, so it is a static mark. */
.hero__offer-check {
  width: 19px;
  height: 19px;
  border-radius: 4px;
  background: transparent;
  border: 1.5px solid #b5b3b3;
  flex-shrink: 0;
  position: relative;
}
.hero__offer-list li.is-checked .hero__offer-check {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.hero__offer-list li.is-checked .hero__offer-check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hero__offer-cta {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
/* Below 992 the panel stops floating and stacks under the hero copy. */
@media (max-width: 991px) {
  .hero__offer {
    position: static;
    width: auto;
    margin: var(--space-xl) var(--container-pad) 0;
  }
}

/* VSO gallery mosaic — Figma 1219:7575 y1632. Two 676 columns with 16px gutters; the FIRST
   tile is 676x672, i.e. it spans both rows of the right column's two 676x328 tiles, then a
   further pair sits underneath. The existing "home"/"listing" rhythms are position-based
   nth-child rules for 6- and 5-tile pages and neither produces this shape. */
.gallery-grid--vso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 var(--container-pad);
  margin-top: 0; /* shared .gallery-grid adds 40px; section-heading already has the 56px gap */
}
/* Both selectors below are doubled up (.gallery-grid.gallery-grid--vso) to outrank the
   position-based width rules the home/listing rhythms set with .gallery-item:nth-child(),
   which are the same specificity and were still sizing the first tile to 346. */
.gallery-grid.gallery-grid--vso .gallery-item {
  /* !important because the home/listing rhythms set width with a long chain of
     .gallery-item:nth-child() rules; this variant is grid-tracked instead and the two cannot
     both be right. Scoped to --vso, so the other two rhythms are untouched.
     height:auto overrides the shared .gallery-item { height: 344px } — without it the
     mosaic tracks were 676 wide but every tile stayed 344 tall. */
  width: auto !important;
  height: auto;
  aspect-ratio: 676 / 328;
}
.gallery-grid.gallery-grid--vso .gallery-item:first-child {
  grid-row: span 2;
  aspect-ratio: 676 / 672;
}
@media (max-width: 767px) {
  .gallery-grid--vso { grid-template-columns: 1fr; }
  .gallery-grid--vso .gallery-item:first-child { grid-row: auto; aspect-ratio: 676 / 328; }
}

/* Vehicle list as a GRID of vertical cards — VSO (Figma 1219:7575 y3168): six 445x504 cards
   three across, each with a 429x304 image inset 8 on TOP and the body beneath.
   The default .vehicle-list is the Showroom's single-column list of HORIZONTAL cards (image
   left, body right), so this flips both the container and the card. Only applies when the
   module is asked for 2-4 columns; unset/1 keeps the Showroom behaviour.
   `.vso-allocation .vehicle-list` is a page-scoped duplicate of --3: HubSpot has been
   serving a cached copy of vehicle-grid.module that still emits a bare `.vehicle-list`
   class, so the columns class never landed. Showroom is untouched. */
.vso-allocation .vehicle-list,
.vehicle-list--2,
.vehicle-list--3,
.vehicle-list--4 {
  display: grid;
  gap: 16px;
  padding: 0 var(--container-pad);
}
.vehicle-list--2 { grid-template-columns: repeat(2, 1fr); }
.vso-allocation .vehicle-list,
.vehicle-list--3 { grid-template-columns: repeat(3, 1fr); }
.vehicle-list--4 { grid-template-columns: repeat(4, 1fr); }
.vso-allocation .vehicle-list-card,
.vehicle-list--2 .vehicle-list-card,
.vehicle-list--3 .vehicle-list-card,
.vehicle-list--4 .vehicle-list-card {
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  min-width: 0; /* grid items default min-width:auto and would not shrink into a 445 column */
  width: 100%;
}
.vso-allocation .vehicle-list-card__media,
.vehicle-list--2 .vehicle-list-card__media,
.vehicle-list--3 .vehicle-list-card__media,
.vehicle-list--4 .vehicle-list-card__media {
  /* flex: 0 0 447px is the Showroom photo WIDTH; in a column flex that becomes HEIGHT,
     so the mosaic image would be 447 tall instead of 304. */
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 429 / 304;
  border-radius: 4px;
  overflow: hidden;
}
/* image.bg() is position:absolute (it fills a sized parent). In the vertical card the
   media box has no in-flow content, so aspect-ratio would collapse to 0. Put the img
   back in flow here. */
.vso-allocation .vehicle-list-card__img,
.vehicle-list--2 .vehicle-list-card__img,
.vehicle-list--3 .vehicle-list-card__img,
.vehicle-list--4 .vehicle-list-card__img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 429 / 304;
  object-fit: cover;
}
/* Tile image slider stacks slides absolutely — the static rule above is for the
   single-image (non-slider) vertical card. */
.vso-allocation .vehicle-list-card__slides .vehicle-list-card__img,
.vehicle-list--2 .vehicle-list-card__slides .vehicle-list-card__img,
.vehicle-list--3 .vehicle-list-card__slides .vehicle-list-card__img,
.vehicle-list--4 .vehicle-list-card__slides .vehicle-list-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.vso-allocation .vehicle-list-card__body,
.vehicle-list--2 .vehicle-list-card__body,
.vehicle-list--3 .vehicle-list-card__body,
.vehicle-list--4 .vehicle-list-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 0 8px 8px;
}
@media (max-width: 991px) {
  .vso-allocation .vehicle-list,
  .vehicle-list--3, .vehicle-list--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .vso-allocation .vehicle-list,
  .vehicle-list--2, .vehicle-list--3, .vehicle-list--4 { grid-template-columns: 1fr; }
}

/* VSO allocation heading — Figma 1325:9168: CURRENT \n VSO ALLOCATION, 676×112,
   48px / +1.92 tracking. Light clause is its own line (weight 200 → .h2--light
   opacity); the second line stays full colour. Scoped so other two-tone headings
   that sit on one line are untouched. */
.vso-allocation .section-heading .h2--light { display: block; }

/* HubSpot's module wrapper inserts leading newlines that sit the CTA 16px
   into this section's padding-bottom (live: 32px to footer, not 48). 64 here
   restores Figma's 128px CTA→logo gap (48 remainder + 80 footer pad). */
.vso-cta {
  padding-bottom: 64px !important;
}

/* VSO / wishlist tile card — Figma 1325:9204, 445×504. Title + price + 413×56
   orange VIEW DETAILS. Spec line, DVLA pill and underlined link are Showroom-only.
   Selectors also hook .vso-allocation so a cached module HTML without --tile still
   restyles (same cache-bust pattern as the 3-up grid). Showroom is inline markup
   and never sits under .vso-allocation. */
.vso-allocation .vehicle-list-card__body p.body-md,
.vso-allocation .vehicle-list-card__dvla,
.vehicle-list-card--tile .vehicle-list-card__body p.body-md,
.vehicle-list-card--tile .vehicle-list-card__dvla { display: none; }

.vso-allocation .vehicle-list-card__body,
.vehicle-list-card--tile .vehicle-list-card__body {
  justify-content: flex-start;
  gap: 0;
  padding: 0 8px 8px;
}
.vso-allocation .vehicle-list-card__body h3,
.vehicle-list-card--tile .vehicle-list-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-text);
  margin: 0 0 16px;
}
.vso-allocation .vehicle-list-card__price,
.vehicle-list-card--tile .vehicle-list-card__price {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-text);
  margin: 0 0 24px;
}
.vso-allocation .vehicle-list-card__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.vso-allocation .vehicle-list-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  padding: 12px 24px;
  background: var(--color-accent);
  color: var(--color-text);
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--font-size-base);
  line-height: 24px;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
}
.vso-allocation .vehicle-list-card__cta:hover { color: var(--color-text); opacity: 0.85; }
.vso-allocation .vehicle-list-card__cta::after { content: none; width: 0; height: 0; }

.vehicle-list-card__actions {
  position: absolute;
  top: 32px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 2;
}
.vehicle-list-card__action {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--color-text);
}
.vehicle-list-card__action--wish { color: var(--color-accent); background: none; border: 0; padding: 0; cursor: pointer; }
.vehicle-list-card__action--wish.is-on svg path { fill: currentColor; }
.vehicle-list-card__action svg,
.vehicle-list-card__action img {
  display: block;
  width: 24px;
  height: 24px;
}
/* Per-card image slider (Figma wishlist tile 1325:9204 — 4 dashes). Slides stack and
   fade; only .is-active is visible. Dots are the sole control (no arrows in Figma). */
.vehicle-list-card__media--slider {
  position: relative;
}
.vehicle-list-card__slides {
  position: relative;
  width: 100%;
  aspect-ratio: 429 / 304;
}
.vehicle-list-card__slides .vehicle-list-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.vehicle-list-card__slides .vehicle-list-card__img.is-active {
  opacity: 1;
  pointer-events: auto;
}
.vehicle-list-card__dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.vehicle-list-card__dot {
  display: block;
  width: 12px;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
}
.vehicle-list-card__dot.is-active {
  width: 24px;
  background: #fff;
}
.vehicle-list-card__dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* HubSpot Forms v4 developer embed (hsfc-*). HubSpot injects light-theme tokens
   (label color rgb(33,45,58)) which disappear on VH2026's dark pages. Override
   those tokens and the hsfc classes so the REAL form matches Figma. */
.hs-form-html {
  --hsf-default-field-label__color: #F5F3F3;
  --hsf-default-field-label__font-family: inherit;
  --hsf-default-field-label__font-size: 18px;
  --hsf-default-field-description__color: #B5B3B3;
  --hsf-default-field-footer__color: #B5B3B3;
  --hsf-default-field-input__color: #F5F3F3;
  --hsf-default-field-input__background-color: transparent;
  --hsf-default-field-input__placeholder-color: #B5B3B3;
  --hsf-default-field-input__border-color: rgba(123, 123, 123, 0.55);
  --hsf-default-field-input__border-radius: 8px;
  --hsf-default-field-textarea__color: #F5F3F3;
  --hsf-default-field-textarea__background-color: transparent;
  --hsf-default-field-textarea__placeholder-color: #B5B3B3;
  --hsf-default-field-textarea__border-color: rgba(123, 123, 123, 0.55);
  --hsf-default-field-textarea__border-radius: 8px;
  --hsf-default-richtext__color: #B5B3B3;
  --hsf-default-richtext__font-family: inherit;
  --hsf-default-heading__color: #F5F3F3;
  --hsf-default-button__background-color: #F37021;
  --hsf-default-button__color: #201F1F;
  --hsf-default-button__border-radius: 8px;
  --hsf-default-button__font-family: inherit;
  --hsf-default-erroralert__color: #e07a7a;
  font-family: inherit;
}
.hs-form-html .hsfc-FieldLabel,
.hs-form-html .hsfc-FieldLabel__RequiredIndicator {
  color: #F5F3F3 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
}
.form-section .hsfc-RichText {
  display: none !important;
}
.hs-form-html .hsfc-TextInput,
.hs-form-html .hsfc-TextareaInput,
.hs-form-html .hsfc-DropdownInput,
.hs-form-html .hsfc-DateInput,
.hs-form-html .hsfc-PhoneInput {
  height: 64px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #F5F3F3 !important;
  font-size: 18px !important;
  font-family: inherit !important;
}
.hs-form-html .hsfc-TextareaInput {
  height: 144px !important;
  padding: 16px !important;
}
.hs-form-html .hsfc-Button {
  background: var(--gradient-btn-primary) !important;
  color: var(--color-bg) !important;
  height: 56px !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border: 0 !important;
}
.hs-form-html .hsfc-Row {
  max-width: 561px;
}
.form-section--split .hs-form-html,
.form-section--split .hs-form-html .hsfc-Row {
  max-width: 628px;
}
/* Contact form card 896:3061 — Figma 676×560, 24px inset, 306+16+306 field pairs,
   labels 18/600 UPPER #F5F3F3, inputs 64×8 radius with #7B7B7B dual-radial stroke,
   placeholders #F5F3F3 at 0.7, submit 628×56 orange with white label + arrow. */
.form-section--split {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.form-section--split .form-section__copy {
  position: relative;
  padding: 24px;
  background: var(--gradient-card-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
  border: 1px solid var(--border-card);
  box-sizing: border-box;
  min-height: 560px;
  transition:
    transform var(--transition-premium),
    border-color var(--transition-premium),
    box-shadow var(--transition-premium);
}
.form-section--split .form-section__copy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: inherit;
  background: var(--gradient-card-accent-line);
  opacity: 0;
  transition: opacity var(--transition-premium);
  pointer-events: none;
  z-index: 1;
}
.form-section--split .form-section__copy:hover {
  border-color: var(--border-card-hover);
  box-shadow: var(--shadow-card-hover);
}
.form-section--split .form-section__copy:hover::before {
  opacity: 1;
}
.form-section--split .form-section__copy::after {
  content: none;
}
.form-section--split .form-section__copy > * {
  position: relative;
  z-index: 1;
}
.form-section--split .form-section__media,
.form-section--split .form-section__media img {
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  border-radius: 8px;
}
.form-section--split .form-section__media img {
  border: 1px solid #3C3C3C;
  box-sizing: border-box;
}
.form-section--split .hs-form-html {
  --hsf-default-field-input__placeholder-color: rgba(245, 243, 243, 0.7);
  --hsf-default-field-textarea__placeholder-color: rgba(245, 243, 243, 0.7);
  --hsf-default-button__color: var(--color-bg);
  --hsf-default-field-label__color: #F5F3F3;
  --hsf-default-field-input__color: #F5F3F3;
  --hsf-default-field-input__border-color: rgba(123, 123, 123, 0.45);
  margin: 0;
  max-width: none;
  width: 100%;
}
.form-section .hs-form-html .hsfc-FormWrapper,
.form-section .hs-form-html .hsfc-Renderer,
.form-section .hs-form-html .hsfc-Form,
.form-section .hs-form-html .hsfc-Step,
.form-section .hs-form-html form {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.form-section .hs-form-html .hsfc-FieldLabel,
.form-section .hs-form-html label {
  color: #F5F3F3 !important;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 32px !important;
  letter-spacing: 0.72px !important;
  text-transform: uppercase;
  margin: 0 0 8px !important;
}
.form-section .hs-form-html .hsfc-FieldLabel__RequiredIndicator,
.form-section .hs-form-html .hsfc-FieldDescription,
.form-section .hs-form-html .hs-field-desc {
  display: none !important;
}
.form-section .hsfc-Step {
  display: block !important;
}
.form-section--split .hsfc-Step__Content {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
.form-section--full .hsfc-Step__Content {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 561px;
  box-sizing: border-box;
}
.form-section .hsfc-Row,
.form-section .hsfc-NavigationRow {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column;
  grid-template-columns: 1fr !important;
}
.form-section .hsfc-Row:not(:has(input, textarea, select, .hsfc-TextInput, .hsfc-DropdownInput, .hsfc-TextareaInput, .hsfc-Button)) {
  display: none !important;
}
/* HubSpot puts First Name + Last Name in one row — keep both, 306+16+306. */
.form-section .hsfc-Step__Content > .hsfc-Row:has(.hsfc-TextField + .hsfc-TextField) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 16px;
  grid-column: 1 / -1;
}
.form-section .hsfc-TextField,
.form-section .hsfc-EmailField,
.form-section .hsfc-PhoneField,
.form-section .hsfc-SelectField,
.form-section .hsfc-TextAreaField,
.form-section .hsfc-DropdownField {
  width: 100%;
  max-width: none;
}
/* Open subject menu must stack above the submit row (DOM paints later). */
.form-section .hsfc-DropdownField {
  position: relative;
  z-index: 5;
}
.form-section .hsfc-PhoneInput {
  display: flex !important;
  align-items: center;
  overflow: visible;
  padding: 0 !important;
  box-sizing: border-box;
}
/* Country flag UI is not in Figma — hide it; keep a single bordered phone field. */
.form-section .hsfc-PhoneInput__FlagAndCaret {
  display: none !important;
}
.form-section .hsfc-NavigationRow__Alerts {
  display: none !important;
}
.form-section .hsfc-NavigationRow__Buttons {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}
.form-section .form-section__wide,
.form-section .hsfc-Step__Content > .hsfc-Row:has(textarea),
.form-section .hsfc-Step__Content > .hsfc-Row:has(.hsfc-TextareaInput),
.form-section .hsfc-NavigationRow,
.form-section .hs-form-html .hsfc-Button {
  grid-column: 1 / -1;
}
/* Figma Contact fields: one transparent fill + one thin stroke. HubSpot nests a
   TextInput inside PhoneInput / DropdownInput — border ONLY the outer shell or
   you get the double-box ring (phone) and caret segment (subject). */
.form-section .hs-form-html .hsfc-TextInput,
.form-section .hs-form-html .hsfc-TextareaInput,
.form-section .hs-form-html .hsfc-DropdownInput,
.form-section .hs-form-html .hsfc-PhoneInput,
.form-section .hs-form-html input[type="text"],
.form-section .hs-form-html input[type="email"],
.form-section .hs-form-html input[type="tel"],
.form-section .hs-form-html select,
.form-section .hs-form-html textarea,
.form-section .hs-form-html .hs-input {
  height: 64px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(123, 123, 123, 0.45) !important;
  color: #F5F3F3 !important;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 32px !important;
  letter-spacing: 0.72px !important;
  box-shadow: none !important;
  box-sizing: border-box;
}
/* Nested controls: strip their own border so only PhoneInput / DropdownInput rings. */
.form-section .hs-form-html .hsfc-PhoneInput {
  padding: 0 !important;
}
.form-section .hs-form-html .hsfc-PhoneInput > input.hsfc-TextInput,
.form-section .hs-form-html .hsfc-DropdownInput > input.hsfc-TextInput,
.form-section .hs-form-html .hsfc-DropdownInput > .hsfc-TextInput--button {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  height: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  padding: 0 16px !important;
  border-radius: 0 !important;
}
.form-section .hs-form-html .hsfc-DropdownInput {
  display: flex !important;
  align-items: center;
  position: relative;
  overflow: visible;
  padding: 0 !important;
  -webkit-appearance: none;
          appearance: none;
  z-index: 2;
  isolation: isolate;
}
.form-section .hs-form-html .hsfc-DropdownInput > input.hsfc-TextInput,
.form-section .hs-form-html .hsfc-DropdownInput > .hsfc-TextInput--button {
  padding-right: 48px !important;
}
.form-section .hs-form-html .hsfc-DropdownInput__Caret {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%);
  border: 0 !important;
  background: transparent !important;
  pointer-events: none;
  color: #F5F3F3 !important;
}
.form-section .hs-form-html .hsfc-DropdownInput__Caret svg,
.form-section .hs-form-html .hsfc-DropdownInput__Caret path {
  stroke: #F5F3F3 !important;
  fill: #F5F3F3 !important;
}
/* Country picker menu under phone — not in Figma; keep hidden. */
.form-section .hs-form-html .hsfc-PhoneInput > .hsfc-DropdownOptions {
  display: none !important;
}
/* Subject menu: HubSpot ships light (#F5F8FA) panels + light text = unreadable. */
.form-section .hs-form-html .hsfc-DropdownOptions {
  position: absolute !important;
  z-index: 50 !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 4px) !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  max-height: 280px;
  overflow: auto;
  border-radius: 8px !important;
  border: 1px solid rgba(123, 123, 123, 0.55) !important;
  background: var(--color-surface) !important;
  color: #F5F3F3 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
  opacity: 1 !important;
}
/* Keep submit under the open subject menu when they overlap. */
.form-section .hs-form-html .hsfc-NavigationRow,
.form-section .hs-form-html .hsfc-Button {
  position: relative;
  z-index: 1;
}
.form-section .hs-form-html .hsfc-DropdownOptions__Search {
  padding: 8px 12px !important;
  border: 0 !important;
  background: transparent !important;
}
.form-section .hs-form-html .hsfc-DropdownOptions__Search .hsfc-TextInput {
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(123, 123, 123, 0.45) !important;
  background: var(--color-bg) !important;
  color: #F5F3F3 !important;
}
.form-section .hs-form-html .hsfc-DropdownOptions__List {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.form-section .hs-form-html .hsfc-DropdownOptions__List__ListItem {
  padding: 10px 16px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #F5F3F3 !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 24px !important;
  cursor: pointer;
}
.form-section .hs-form-html .hsfc-DropdownOptions__List__ListItem:hover,
.form-section .hs-form-html .hsfc-DropdownOptions__List__ListItem--selected,
.form-section .hs-form-html .hsfc-DropdownOptions__List__ListItem[aria-selected="true"] {
  background: #3A3A3A !important;
  color: #F5F3F3 !important;
}
.form-section .hs-form-html textarea,
.form-section .hs-form-html .hsfc-TextareaInput {
  height: 144px !important;
  padding: 16px !important;
  resize: vertical;
}
.form-section .hs-form-html input::placeholder,
.form-section .hs-form-html textarea::placeholder,
.form-section .hs-form-html .hs-input::placeholder,
.form-section .hs-form-html [class*="Placeholder"] {
  color: rgba(245, 243, 243, 0.7) !important;
  opacity: 1 !important;
  font-weight: 400;
}
.form-section .hs-form-html .hsfc-Button,
.form-section .hs-form-html button[type="submit"],
.form-section .hs-form-html input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: none;
  height: 56px !important;
  margin-top: 0;
  padding: 12px 24px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--gradient-btn-primary) !important;
  color: var(--color-bg) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  letter-spacing: 0.64px !important;
  text-transform: uppercase !important;
  transition: transform var(--transition-premium), box-shadow var(--transition-premium),
    background var(--transition-premium) !important;
}
.form-section .hs-form-html .hsfc-Button:hover,
.form-section .hs-form-html button[type="submit"]:hover,
.form-section .hs-form-html input[type="submit"]:hover {
  background: var(--gradient-btn-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-primary-hover);
}
.form-section .hs-form-html .hsfc-Button::after,
.form-section .hs-form-html button[type="submit"]::after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);
  -webkit-mask: url("/hubfs/raw_assets/public/VH2026/images/home/icon-arrow-up-right.svg") no-repeat center / contain;
          mask: url("/hubfs/raw_assets/public/VH2026/images/home/icon-arrow-up-right.svg") no-repeat center / contain;
}
.form-section .hs-form-html .legal-consent-container,
.form-section .hs-form-html .hsfc-RichText {
  display: none !important;
}
@media (max-width: 1199px) {
  .form-section--split { grid-template-columns: 1fr; }
  .form-section--split .form-section__media img { min-height: 320px; }
}
@media (max-width: 767px) {
  .form-section .hsfc-Step__Content { grid-template-columns: 1fr; }
}

/* Journal listing — Figma Design > Blog 1460:17102 (1512, real height 3824).
   Sidebar 272 @ x72; 3× 330×496 cards @ x418/764/1110, 16px gutters; hero 1496×400 @ y104. */
.blog-journal {
  padding-top: 8px;
}
.blog-journal__layout {
  display: flex;
  gap: 74px;
  align-items: flex-start;
  padding: 72px var(--container-pad) 0;
}
.blog-sidebar {
  width: 272px;
  flex: 0 0 272px;
}
.blog-search {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 4px 4px 4px 16px;
  border-radius: 8px;
  background: #2C2C2C;
  gap: 8px;
}
.blog-search__input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 18px;
  line-height: 32px;
}
.blog-search__input::placeholder { color: var(--color-text-muted); }
.blog-search__submit {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.blog-sidebar__heading {
  margin: 32px 0 16px;
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--font-weight-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}
.blog-cats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blog-cat {
  width: 272px;
  height: 64px;
  border: 0;
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 18px;
  line-height: 32px;
  font-weight: 600;
  cursor: pointer;
}
.blog-cat.is-active {
  outline: 1px solid var(--color-accent);
  outline-offset: 0;
  background: var(--color-surface);
}
.blog-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.blog-top__item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  color: var(--color-text);
  text-decoration: none;
}
.blog-top__thumb {
  position: relative;
  width: 58px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.blog-top__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-top__title {
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
}
.blog-journal__main { flex: 1; min-width: 0; }
.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 330px);
  gap: 16px;
  justify-content: start;
}
.blog-card {
  width: 330px;
  min-height: 496px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid rgba(245, 243, 243, 0.14);
  padding: 8px 8px 16px;
  display: flex;
  flex-direction: column;
}
.blog-card__media {
  position: relative;
  display: block;
  width: 314px;
  height: 216px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.blog-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 8px 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-muted);
}
.blog-card__cat,
.blog-card__date {
  color: var(--color-text-muted);
}
.blog-card__cat:empty,
.blog-card__cat:empty + .blog-card__dot {
  display: none;
}
.blog-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}
.blog-card__title {
  margin: 8px 8px 0;
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
}
.blog-card__title a { color: var(--color-text); text-decoration: none; }
.blog-card__excerpt {
  margin: 8px 8px 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-muted);
  flex: 1;
}
.blog-card__more {
  margin: 16px 8px 0;
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.blog-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 56px 0 64px;
}
.blog-pagination__more { min-width: 157px; }
.blog-pagination__pages {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-pagination__num,
.blog-pagination__arrow {
  width: 50px;
  height: 56px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text);
  font-size: 18px;
  line-height: 32px;
  cursor: pointer;
}
.blog-pagination__arrow {
  width: 56px;
  border-radius: 50%;
}
.blog-pagination__num.is-active {
  background: rgba(245, 243, 243, 0.08);
}
.blog-journal .newsletter--journal {
  margin: 0 var(--container-pad) 96px;
}
.newsletter--journal .hs-form-html .hsfc-Label,
.newsletter--journal .hs-form-html label,
.newsletter--journal .hs-form-html .hsfc-RichText { display: none !important; }
.newsletter--journal .hs-form-html,
.newsletter--journal .hs-form-html form,
.newsletter--journal .hs-form-html .hsfc-Row {
  max-width: none !important;
}
.newsletter--journal .hs-form-html .hsfc-Step {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  background: #F5F3F3;
  border-radius: 8px;
  height: 56px;
  padding: 4px;
  gap: 0;
}
.newsletter--journal .hs-form-html .hsfc-TextInput {
  height: 48px !important;
  background: transparent !important;
  color: #201F1F !important;
  border: 0 !important;
  padding: 0 16px !important;
}
.newsletter--journal .hs-form-html .hsfc-TextInput::placeholder {
  color: #7B7B7B !important;
}
.newsletter--journal .hs-form-html .hsfc-Button,
.newsletter--journal .hs-form-html button[type="submit"] {
  width: auto !important;
  min-width: 176px !important;
  height: 48px !important;
  flex-shrink: 0;
  color: var(--color-bg) !important;
  background: var(--gradient-btn-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 6px !important;
}
.newsletter--journal .hs-form-html .hsfc-Button::after,
.newsletter--journal .hs-form-html button[type="submit"]::after {
  content: "→";
  font-size: 16px;
  line-height: 1;
  color: var(--color-bg);
}
@media (max-width: 1199px) {
  .blog-card-grid { grid-template-columns: repeat(2, 330px); }
}
@media (max-width: 991px) {
  .blog-journal__layout { flex-direction: column; padding: 40px 24px 0; gap: 32px; }
  .blog-sidebar { width: 100%; flex: none; }
  .blog-cat { width: 100%; }
  .blog-card-grid { grid-template-columns: 1fr; justify-items: center; }
}

/* Article — Figma Design > Article 1474:14089 (1512×6648).
   Share rail @ x72; body 727–733 @ x303; meta 272 @ x1168; related 4×330 cards @ y3440. */
.blog-article {
  padding-top: 8px;
}
.blog-article .newsletter--journal {
  margin: 0 var(--container-pad) 96px;
}
.blog-article__layout {
  display: grid;
  grid-template-columns: 40px minmax(0, 733px) 272px;
  justify-content: space-between;
  column-gap: 80px;
  padding: 80px var(--container-pad) 0;
  align-items: start;
}
.blog-article__share {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.blog-article__share-label {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.blog-article__share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.blog-article__byline {
  margin: 0 0 16px;
}
.blog-article__title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  color: var(--color-text);
}
.blog-article__body {
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.blog-article__body p { margin: 0 0 16px; }
.blog-article__body h2,
.blog-article__body h3 {
  margin: 16px 0 16px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.blog-article__body img,
.blog-article__body iframe,
.blog-article__body video {
  display: block;
  width: 100%;
  max-width: 733px;
  height: auto;
  min-height: 0;
  border-radius: 4px;
  margin: 16px 0 24px;
}
.blog-article__body ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.blog-article__body li {
  position: relative;
  padding-left: 36px;
  margin: 0 0 8px;
}
.blog-article__body li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
.blog-article__meta,
.blog-article__bio {
  width: 272px;
  border-radius: 8px;
  background: var(--color-surface);
  padding: 16px;
  margin-bottom: 16px;
}
.blog-article__meta { min-height: 216px; }
.blog-article__bio { min-height: 304px; }
.blog-article__meta-kicker,
.blog-article__bio-kicker {
  margin: 0;
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.blog-article__rule {
  border: 0;
  border-top: 1px solid rgba(245, 243, 243, 0.16);
  margin: 16px 0;
}
.blog-article__dl { margin: 0; }
.blog-article__dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 24px;
}
.blog-article__dl dt { font-weight: 500; }
.blog-article__dl dd { margin: 0; font-weight: 400; text-align: right; }
.blog-article__dl-cat:has(dd:empty) { display: none; }
.blog-article__bio-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.blog-article__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #d9d9d9;
  flex-shrink: 0;
}
.blog-article__bio-name {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.blog-article__bio-role {
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-muted);
}
.blog-article__bio-text {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.04em;
}
.blog-article__related {
  padding: 80px var(--container-pad) 0;
}
.blog-article__related > .h2 { margin: 0 0 56px; }
.blog-card-grid--related {
  grid-template-columns: repeat(4, 330px);
}
.blog-card-grid--related .blog-card:nth-child(n+5) { display: none; }
.blog-article__comments {
  padding: 64px var(--container-pad) 48px;
  max-width: calc(1022px + 2 * var(--container-pad));
}
.blog-article__comments-title {
  margin: 0 0 16px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.blog-article__comments input[type="text"],
.blog-article__comments input[type="email"],
.blog-article__comments textarea,
.blog-article__comments .hs-input {
  width: 100%;
  background: var(--color-surface);
  border: 0;
  border-radius: 8px;
  color: var(--color-text);
  font-size: 18px;
  line-height: 32px;
  padding: 16px;
}
.blog-article__comments textarea { min-height: 128px; }
.blog-article__comments .comment-form > div,
.blog-article__comments form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.blog-article__comments textarea,
.blog-article__comments .hs-submit,
.blog-article__comments input[type="submit"] {
  grid-column: 1 / -1;
}
.blog-article__comments input[type="submit"],
.blog-article__comments .hs-button {
  width: 239px;
  height: 56px;
  border: 0;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 1199px) {
  .blog-card-grid--related { grid-template-columns: repeat(2, 330px); }
  .blog-article__layout {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 40px;
  }
  .blog-article__meta-col { grid-column: 2; display: flex; gap: 16px; flex-wrap: wrap; }
}
@media (max-width: 991px) {
  .blog-article__layout {
    grid-template-columns: 1fr;
    padding: 40px 24px 0;
    gap: 32px;
  }
  .blog-article__share { flex-direction: row; flex-wrap: wrap; }
  .blog-article__meta, .blog-article__bio { width: 100%; }
  .blog-article__related { padding: 48px 24px 0; }
  .blog-article__comments { padding: 48px 24px; }
}

.is-hidden { display: none !important; }

/* Vehicle PDP — Figma 1189:12295 (1512). Sticky bar is the scroll overlay at y160. */
/* Listing dnd_area cannot be wrapped in HubL if/else (empties the pages). Hide it on PDP. */
body:has([data-vehicle-pdp]) .showroom-hero,
body:has([data-vehicle-pdp]) .showroom-layout,
body:has([data-vehicle-pdp]) .cta-banner {
  display: none !important;
}

.vehicle-pdp {
  box-sizing: border-box;
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: 16px var(--container-pad) 96px;
  color: var(--color-text);
}
.vehicle-pdp__crumb {
  margin: 0 0 24px;
  color: #BBBBBB;
  letter-spacing: 0.04em;
}
.vehicle-pdp__crumb a { color: inherit; }

.vehicle-pdp-sticky {
  position: fixed;
  top: 0;
  left: 50%;
  width: min(1368px, calc(100% - (var(--container-pad) * 2)));
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -8px, 0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.vehicle-pdp-sticky.is-visible {
  pointer-events: auto;
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}
.vehicle-pdp-sticky[hidden] { display: none !important; }
.vehicle-pdp-sticky__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 136px;
  padding: 16px 24px 16px 16px;
  background: var(--color-bg);
  border: 1px solid rgba(245, 243, 243, 0.12);
  border-radius: 8px;
}
.vehicle-pdp-sticky__thumb {
  width: 126px;
  height: 104px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid #F5F3F3;
}
.vehicle-pdp-sticky__title {
  margin: 0;
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.vehicle-pdp-sticky__title-light {
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.72px;
}
.vehicle-pdp-sticky__price {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.vehicle-pdp-sticky__actions {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  margin-left: auto;
}
.vehicle-pdp-sticky__cta,
.vehicle-pdp-sticky__ghost {
  width: 272px;
  padding: 0 16px;
}
.vehicle-pdp-sticky__ghost {
  background: transparent;
  border: 1px solid #F5F3F3;
  color: #F5F3F3;
}

.vehicle-pdp__layout {
  display: grid;
  grid-template-columns: minmax(0, 734px) minmax(0, 561px);
  column-gap: 73px;
  align-items: start;
  width: 100%;
}
.vehicle-pdp-gallery {
  display: grid;
  grid-template-columns: 99px minmax(0, 619px);
  gap: 16px;
  margin-bottom: 16px;
}
.vehicle-pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vehicle-pdp-thumbs__btn {
  position: relative;
  width: 99px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface);
  cursor: pointer;
}
.vehicle-pdp-thumbs__btn.is-active {
  outline: 1px solid var(--color-accent);
  outline-offset: 0;
}
.vehicle-pdp-thumbs__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vehicle-pdp-thumbs__btn.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  background: url("/hubfs/raw_assets/public/VH2026/images/home/icon-play.svg") center / 16px no-repeat;
  pointer-events: none;
}
.vehicle-pdp-stage {
  position: relative;
  width: 100%;
  height: 544px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface);
}
.vehicle-pdp-stage__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vehicle-pdp-stage__tools {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  gap: 16px;
}
.vehicle-pdp-stage__tool {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.vehicle-pdp-stage__tool img {
  width: 24px;
  height: 24px;
}
.vehicle-pdp-stage__tool .wish-on { display: none; }
.vehicle-pdp-stage__tool.is-on .wish-off { display: none; }
.vehicle-pdp-stage__tool.is-on .wish-on { display: block; }
.vehicle-pdp-360 {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.vehicle-pdp-360__arrows {
  display: flex;
  gap: 0;
  background: var(--color-accent);
  border-radius: 8px;
  overflow: hidden;
}
.vehicle-pdp-360__btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.vehicle-pdp-360__btn--next img {
  transform: scaleX(-1);
}
.vehicle-pdp-360__label {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.vehicle-pdp-360__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 2px;
}
.vehicle-pdp-360__dot {
  height: 2px;
  width: 12px;
  padding: 0;
  border: 0;
  background: rgba(245, 243, 243, 0.32);
  cursor: pointer;
}
.vehicle-pdp-360__dot.is-active {
  width: 24px;
  background: #F5F3F3;
}

.vehicle-pdp-cards {
  display: grid;
  grid-template-columns: 359px 359px;
  gap: 16px;
}
.vehicle-pdp-card {
  min-height: 256px;
  padding: 24px 16px;
  background: var(--color-surface);
  border-radius: 8px;
}
.vehicle-pdp-card__title {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.04em;
  text-transform: capitalize;
}
.vehicle-pdp-card__dl {
  margin: 0;
}
.vehicle-pdp-card__dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 24px;
}
.vehicle-pdp-card__dl dt {
  font-weight: 500;
  color: #F5F3F3;
}
.vehicle-pdp-card__dl dd {
  margin: 0;
  color: #B5B3B3;
  text-align: right;
}
.vehicle-pdp-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vehicle-pdp-card__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 24px;
}
.vehicle-pdp-card__list li span:last-child {
  color: #B5B3B3;
}

.vehicle-pdp__title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 1.28px;
  text-transform: none;
}
.vehicle-pdp__title-light {
  font-weight: 200;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.96px;
}
.vehicle-pdp__price-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  flex-wrap: wrap;
}
.vehicle-pdp__price {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0.04em;
}
.vehicle-pdp__pill {
  flex-shrink: 0;
}
.vehicle-pdp__stock {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: #7CB342;
}
.vehicle-pdp__stock--out { color: var(--color-text-muted); }
.vehicle-pdp__rule {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid rgba(245, 243, 243, 0.16);
}
.vehicle-pdp-feats {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vehicle-pdp-feats li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
}
.vehicle-pdp-feats img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.vehicle-pdp-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 12px 16px;
  min-height: 56px;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  font-size: 18px;
  line-height: 32px;
}
.vehicle-pdp-alert img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.vehicle-pdp-alert strong { font-weight: 600; }
.vehicle-pdp-alert--thin {
  border-color: rgba(245, 243, 243, 0.16);
  margin-bottom: 16px;
}
.vehicle-pdp__ctas {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.vehicle-pdp__cta,
.vehicle-pdp__ghost {
  width: 272px;
  padding: 0 12px;
}
.vehicle-pdp__ghost {
  background: transparent;
  border: 1px solid #F5F3F3;
  color: #F5F3F3;
}
.vehicle-pdp__cta-arrow-dark {
  filter: brightness(0);
}
.vehicle-pdp-trust {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 16px;
  min-height: 107px;
  padding: 24px;
  margin-bottom: 16px;
  background: var(--color-surface);
  border-radius: 8px;
}
.vehicle-pdp-trust__fca {
  display: flex;
  align-items: center;
  min-width: 0;
}
.vehicle-pdp-trust__fca img {
  width: 153px;
  height: 50px;
  display: block;
}
.vehicle-pdp-trust__google:hover {
  opacity: 0.85;
}
.vehicle-pdp-trust__google-name {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}
.vehicle-pdp-trust__google-row {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
}
.vehicle-pdp-trust__stars {
  display: inline-flex;
  gap: 0;
}
.vehicle-pdp-trust__stars img {
  width: 19px;
  height: 19px;
  filter: brightness(0) saturate(100%) invert(52%) sepia(86%) saturate(1804%) hue-rotate(347deg) brightness(99%) contrast(94%);
}
.vehicle-pdp-trust__plus {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  text-align: right;
}
.vehicle-pdp-trust__years-label {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  text-align: right;
}

.vehicle-pdp-bundle {
  padding: 24px;
  background: var(--color-surface);
  border-radius: 8px;
}
.vehicle-pdp-bundle__title {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.04em;
  text-transform: capitalize;
}
.vehicle-pdp-bundle__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  min-height: 32px;
  margin-bottom: 8px;
  cursor: pointer;
}
.vehicle-pdp-bundle__row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vehicle-pdp-bundle__check {
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(245, 243, 243, 0.45);
  border-radius: 4px;
  background: transparent;
}
.vehicle-pdp-bundle__row input:checked + .vehicle-pdp-bundle__check {
  border-color: var(--color-accent);
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2L4.6 8.8L10 3.2' fill='none' stroke='%23F5F3F3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.vehicle-pdp-bundle__name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}
.vehicle-pdp-bundle__price {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  white-space: nowrap;
}
.vehicle-pdp-bundle__total {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 12px;
  margin: 24px 0 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 243, 243, 0.16);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}
.vehicle-pdp-bundle__save {
  grid-column: 2;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #B5B3B3;
  justify-self: end;
}
.vehicle-pdp-bundle__cta { height: 56px; }

@media (max-width: 1199px) {
  .vehicle-pdp__layout,
  .vehicle-pdp-gallery,
  .vehicle-pdp-cards { grid-template-columns: 1fr; }
  .vehicle-pdp-stage { height: 420px; }
  .vehicle-pdp-thumbs { flex-direction: row; overflow-x: auto; }
  .vehicle-pdp-sticky__inner { height: auto; flex-wrap: wrap; padding: 12px; }
  .vehicle-pdp-sticky__cta,
  .vehicle-pdp-sticky__ghost,
  .vehicle-pdp__cta,
  .vehicle-pdp__ghost { width: auto; flex: 1 1 200px; }
  .vehicle-pdp-trust { grid-template-columns: 1fr; padding: 16px; row-gap: 12px; }
}
@media (max-width: 991px) {
  .vehicle-pdp { padding-left: 24px; padding-right: 24px; }
  .vehicle-pdp-sticky {
    top: 0;
    width: calc(100% - 48px);
  }
}

.vehicle-pdp-rest {
  box-sizing: border-box;
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding-bottom: 48px;
}
.vehicle-pdp-rest .section-heading { padding-top: 56px; }
.vehicle-pdp-rest .faq-grid,
.vehicle-pdp-rest .faq-grid--masonry { padding-bottom: 56px; }
.vehicle-pdp-rest .testimonial-marquee {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 0 80px;
}

.pdp-spec {
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pdp-spec-card {
  background: var(--color-surface);
  border: 1px solid rgba(245, 243, 243, 0.16);
  border-radius: 8px;
  padding: 24px 32px;
  color: inherit;
}
.pdp-spec-card .pdp-spec-card__row.faq-item__row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  align-items: center;
  justify-content: initial;
  gap: 24px;
  min-height: 56px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pdp-spec-card.open .pdp-spec-card__row.faq-item__row {
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) 56px;
  min-height: 152px;
}
.pdp-spec-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.pdp-spec-card__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-h3);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
}
.pdp-spec-card__desc {
  display: none;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-muted);
}
.pdp-spec-card.open .pdp-spec-card__desc { display: block; }
.pdp-spec-card__photo {
  display: none;
  width: 100%;
  height: 152px;
  object-fit: cover;
  border-radius: 8px;
}
.pdp-spec-card.open .pdp-spec-card__photo { display: block; }
.pdp-spec-card .faq-item__icon {
  margin: 0;
  justify-self: end;
}
.pdp-spec-card.open .faq-item__icon {
  background: transparent;
  border-color: var(--color-text);
}
.pdp-spec-card.open .faq-item__icon::before { display: none; }
.pdp-spec-card.open .faq-item__icon-chevron { display: block; }
.pdp-spec-card .faq-item__answer,
.pdp-spec-card.open .faq-item__answer {
  padding: 0;
  grid-template-rows: 0fr;
}

.pdp-finance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
  align-items: start;
  margin: 0 var(--container-pad);
  padding: 40px 48px;
  border: 1px solid rgba(245, 243, 243, 0.28);
  border-radius: 8px;
  background: var(--color-bg);
}
.pdp-finance__price,
.pdp-finance__monthly {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pdp-finance__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
}
.pdp-finance .calc-field__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(245, 243, 243, 0.7);
}
.pdp-finance select.calc-field__input {
  appearance: none;
  -webkit-appearance: none;
  height: 56px;
  padding: 0 44px 0 16px;
  border-radius: 4px;
  border: 1px solid rgba(245, 243, 243, 0.35);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5' stroke='%23F5F3F3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  color: var(--color-text);
  font-size: 16px;
}
.pdp-finance__note {
  margin: -16px 0 24px;
  font-size: 14px;
  color: var(--color-text-muted);
}
.pdp-finance__dl { margin: 0 0 28px; }
.pdp-finance__dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 24px;
}
.pdp-finance__dl dt { color: var(--color-text-muted); }
.pdp-finance__dl dd { margin: 0; color: var(--color-text); }
.pdp-finance__ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.pdp-finance__ctas .btn {
  width: 100%;
  justify-content: center;
  min-height: 56px;
}
.pdp-finance__legal {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.pdp-shop-wrap {
  padding: 0;
}
.pdp-shop-wrap .pdp-shop {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 0 var(--container-pad);
  transition: transform 0.4s ease;
}
.pdp-shop-wrap {
  overflow: hidden;
}
.pdp-shop__card {
  box-sizing: border-box;
  width: calc((min(1512px, 100vw) - 144px - 32px) / 3);
  background: var(--color-surface);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.pdp-shop__media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 429 / 304;
  margin-bottom: 16px;
  background: var(--color-surface);
}
.pdp-shop__slides {
  position: absolute;
  inset: 0;
}
.pdp-shop__slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.pdp-shop__slides img.is-active {
  opacity: 1;
  pointer-events: auto;
}
.pdp-shop__media .btn--pill {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
}
.pdp-shop__title {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}
.pdp-shop__price {
  margin: 0 0 16px;
  font-size: 18px;
}
.pdp-shop .btn--full {
  margin-top: auto;
  min-height: 56px;
  justify-content: center;
}
.pdp-shop-wrap > .gallery-nav {
  margin-top: 32px;
}

@media (max-width: 1199px) {
  .pdp-finance,
  .pdp-finance__ctas { grid-template-columns: 1fr; }
  .pdp-shop__card { width: calc((100vw - 96px - 16px) / 2); }
  .pdp-spec-card.open .pdp-spec-card__row.faq-item__row {
    grid-template-columns: minmax(0, 1fr) 56px;
  }
  .pdp-spec-card.open .pdp-spec-card__photo {
    grid-column: 1 / -1;
    height: 180px;
  }
}
@media (max-width: 767px) {
  .pdp-shop__card { width: calc(100vw - 48px); }
}


/* ============================================================
   Product landings (Shillingstone / Edition 73 / Tax Efficient)
   Theme-composed pages. Navy ground, stronger hierarchy, no Figma.
   ============================================================ */

/* Full-bleed quote band */
.product-quote-band {
  padding: 72px var(--container-pad);
  background: var(--color-surface);
  position: relative;
  overflow: hidden;
}
.product-quote-band::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-accent);
}
.product-quote {
  max-width: 1008px;
  position: relative;
  z-index: 1;
}
.product-quote__kicker {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.product-quote__mark {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(80px, 12vw, 140px);
  line-height: 0.7;
  color: var(--color-accent);
  opacity: 0.35;
  pointer-events: none;
}
.product-quote__text {
  margin: -24px 0 28px;
  font-family: var(--font-heading);
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  max-width: 18ch;
}
.product-quote__aside {
  margin: 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 32px;
  color: var(--color-text-muted);
}

/* Spec bullets inside accordion answers */
.product-spec-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.product-spec-list li {
  position: relative;
  padding: 12px 16px 12px 40px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  background: rgba(11, 33, 46, 0.45);
  border-radius: 6px;
}
.product-spec-list li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.25);
}

/* Dual path cards (Tax Efficient) */
.product-path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 var(--container-pad);
}
.product-path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 360px;
  padding: 40px 36px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface);
  isolation: isolate;
}
.product-path-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.product-path-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-path-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(11, 33, 46, 0.35) 0%, rgba(11, 33, 46, 0.92) 72%);
}
.product-path-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  margin-top: auto;
}
.product-path-card__eyebrow {
  align-self: flex-start;
  margin: 0;
}
.product-path-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--color-text);
}
.product-path-card__copy {
  margin: 0 0 auto;
  max-width: 36ch;
  font-size: 17px;
  line-height: 28px;
  color: rgba(245, 243, 243, 0.82);
}
.product-path-card .btn {
  align-self: flex-start;
  margin-top: 8px;
  text-decoration: none;
}
.product-path-card .btn--outline {
  color: var(--color-text);
}
.product-path-card .btn--primary {
  color: var(--color-bg);
}

/* Scarcity / limited strip */
.product-scarcity {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px 40px;
  align-items: center;
  padding: 40px var(--container-pad);
  background: var(--color-surface);
  border-top: 1px solid rgba(123, 123, 123, 0.28);
  border-bottom: 1px solid rgba(123, 123, 123, 0.28);
}
.product-scarcity__price {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  text-transform: uppercase;
}
.product-scarcity__meta {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.product-scarcity__copy {
  margin: 0;
  max-width: 48ch;
  font-size: 18px;
  line-height: 32px;
  color: var(--color-text);
}
.product-scarcity .btn {
  white-space: nowrap;
  text-decoration: none;
  align-self: center;
}
.product-scarcity .btn--primary {
  color: var(--color-bg);
}

@media (max-width: 991px) {
  .product-path-grid { grid-template-columns: 1fr; }
  .product-quote__text { font-size: 36px; max-width: none; }
  .product-quote-band { padding: 56px var(--container-pad); }
  .product-scarcity {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
  }
  .product-path-card { min-height: 320px; }
}

/* Sticky WhatsApp CTA — icon only, fixed bottom-left. Hidden while menu overlay is open. */
.whatsapp-sticky {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: auto;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-decoration: none;
  transition:
    transform var(--transition-premium),
    opacity var(--duration-fade) var(--ease-reveal);
}
.whatsapp-sticky:hover {
  transform: translateY(-2px);
}
.whatsapp-sticky__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: box-shadow var(--transition-premium), transform var(--transition-premium);
}
.whatsapp-sticky:hover .whatsapp-sticky__icon {
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.5);
}
.whatsapp-sticky__icon svg {
  width: 28px;
  height: 28px;
}
body:has(.menu-overlay.is-open) .whatsapp-sticky {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 767px) {
  .whatsapp-sticky {
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    left: max(16px, env(safe-area-inset-left, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-sticky { transition: opacity var(--duration-fade) var(--ease-reveal); }
  .whatsapp-sticky:hover,
  .whatsapp-sticky:hover .whatsapp-sticky__icon { transform: none; }
}

/* HubSpot Live Chat — bottom-right launcher (WhatsApp stays bottom-left). */
#hubspot-messages-iframe-container,
#hubspot-messages-iframe-container.vh-hubspot-chat {
  right: 24px !important;
  left: auto !important;
  bottom: 24px !important;
  z-index: 90;
}
body.vh-chat-hidden #hubspot-messages-iframe-container {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 767px) {
  #hubspot-messages-iframe-container,
  #hubspot-messages-iframe-container.vh-hubspot-chat {
    right: max(16px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }
}