/*
 * Global CSS definitions for the CarOffers website.
 * Colours and layout variables make it simple to tweak the look
 * and feel throughout the site.  The design emphasises clarity
 * and readability while remaining responsive on smaller screens.
 */

:root {
  /*
   * Colour palette derived from the DriveHaus branding.  The primary colour
   * reflects the deep blue of the “Ride” text, while the secondary colour
   * picks up the warm golden accent from the underline in the logo.  The
   * background colours are light tints of the logo’s sky‑blue gradient to
   * unify the look across the entire site.  Hover colours are darker
   * shades for visual feedback.
   */
  --primary-color: #1a377b; /* deep navy for primary accents */
  --primary-color-hover: #112559;
  --secondary-color: #FBB649; /* vibrant gold accent */
  --secondary-color-hover: #e5a33b;
  --text-color: #334155; /* deep slate for body text readability */
  --light-bg: #ffffff; /* pure white surface for cards and panels */
  --bg-color: #f8fafc; /* crisp off-white for page backgrounds */
  --border-radius: 12px;
  --max-width: 1200px;
  --font-display: 'Sora', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Function: prefers local brand fonts without blocking render on remote font CSS. */
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Function: keeps body text fast by relying on local/system fonts. */
  --type-body: 1rem; /* Function: sets the baseline body size across the site. */
  --type-small: 0.875rem; /* Function: sets the shared small-copy size for meta text and helper copy. */
  --type-label: 0.75rem; /* Function: sets the shared label and eyebrow size. */
  --type-h1: clamp(2.35rem, 5vw, 4.75rem); /* Function: sets the responsive display scale for page-leading headings. */
  --type-h2: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); /* Function: sets the shared section-heading scale. */
  --type-h3: clamp(1.15rem, 1rem + 0.45vw, 1.45rem); /* Function: sets the shared card and subsection heading scale. */
  --leading-body: 1.65; /* Function: improves readability for paragraphs and long-form copy. */
  --leading-heading: 1.08; /* Function: keeps premium headings compact without clipping. */
  --tracking-heading: -0.025em; /* Function: gives display typography a refined modern rhythm. */
  --tracking-label: 0.08em; /* Function: normalizes uppercase labels without excessive spacing. */

  /*
   * Gradient colours used for the page and header backgrounds.  The
   * values here are sampled from the original DriveHaus logo to ensure
   * the blue backdrop behind the car icon blends seamlessly with the
   * rest of the page.  Use these variables when defining gradient
   * backgrounds so that future adjustments need only be made in one
   * place.
   */
  --gradient-top: #f2f6fc;
  --gradient-bottom: #e9eff8;
  --header-top: #1a377b;
  --header-bottom: #274c8c;
  --modal-banner-offset: 60px;
  --inventory-max-width: 92rem; /* Function: lets the inventory area use more desktop space without becoming overly wide. */
  --offer-modal-max-width: var(--max-width);
  --offer-card-gap: 1rem; /* Function: tightens spacing between the compact offer cards. */
  --offer-card-target-width: 270px; /* Function: sets a more compact target width for offer cards. */
  --offer-card-max-width: 19rem; /* Function: caps inventory cards close to the original compact width while allowing slight growth. */
  --offer-card-scale: 1.0; /* 1.0 scale ratio */
  --offer-card-min-width: 230px; /* Function: lets compact offer cards fit narrow mobile screens with side margins. */
  --offer-card-figma-bg: #ffffff;
  --offer-card-figma-foreground: #1a1a1a;
  --offer-card-figma-border: #dee2e6;
  --offer-card-figma-muted: #6c757d;
  --offer-card-figma-accent: #e8f1f8;
  --offer-card-figma-accent-foreground: #274c8c;
  --offer-card-figma-primary: #274c8c;
  --offer-card-figma-primary-foreground: #ffffff;
  --offer-card-figma-danger: #dc3545;
  --offer-card-figma-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  --offer-card-figma-radius: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Fix for browser autofill changing input background and text colour */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
  -webkit-text-fill-color: inherit !important;
}

html,
body {
  -webkit-text-size-adjust: 100%; /* Function: prevents iOS Safari from enlarging mobile text beyond the CSS sizes. */
  text-size-adjust: 100%; /* Function: keeps browser text autosizing consistent with desktop mobile emulation. */
  font-family: var(--font-body); /* Function: applies the shared Inter body stack before later page overrides. */
  font-size: var(--type-body); /* Function: anchors the sitewide text scale at the shared body size. */
  line-height: var(--leading-body); /* Function: improves paragraph rhythm across public and admin pages. */
  color: var(--text-color);
  scroll-behavior: smooth;
  /*
   * A crisp, neutral canvas lets the photography and UI elements pop.
   */
  background-color: var(--bg-color);
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display); /* Function: gives headings the premium Sora display voice by default. */
  line-height: var(--leading-heading); /* Function: keeps heading blocks compact and modern. */
  letter-spacing: var(--tracking-heading); /* Function: normalizes refined display tracking across pages. */
}

p,
li {
  line-height: var(--leading-body); /* Function: keeps body copy readable after the font modernization. */
}

/* Homepage typography */
.home h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

.home h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
  color: #0f1824;
  font-size: var(--type-h2);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

.home h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Modern Text Gradients for Headings */
.text-gradient {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #2563eb; /* Fallback */
}

/*
========================================
   Floating Glass Navbar
========================================
*/
.navbar-classic {
  position: fixed; /* Function: keeps the teardrop navbar pinned above the page content. */
  top: 0; /* Function: anchors the navbar to the viewport top instead of floating with a gap. */
  left: 0; /* Function: lets the centered navbar use the full viewport as its positioning frame. */
  right: 0; /* Function: balances the fixed positioning frame on both sides. */
  z-index: 1000; /* Function: keeps the floating navbar above page content and hero media. */
  width: 100%; /* Function: gives the wrapper enough room to center the inner pill. */
  padding: 0 clamp(0.75rem, 2vw, 1.5rem); /* Function: protects the top-attached shape from touching viewport edges. */
  background: transparent; /* Function: removes the old full-width blue bar. */
  box-shadow: none; /* Function: moves the visual depth to the pill itself. */
  pointer-events: none; /* Function: keeps the transparent wrapper from blocking page interactions. */
  transition: transform 0.3s ease; /* Function: preserves smooth future position changes without animating paint-heavy filters. */
}

.navbar-classic__content {
  max-width: min(var(--max-width), 100%); /* Function: caps the floating pill while staying fluid on narrow screens. */
  min-height: 64px; /* Function: keeps the navbar touch targets comfortable inside the pill. */
  margin: 0 auto; /* Function: centers the floating pill in the viewport. */
  padding: 0.55rem clamp(1rem, 2vw, 1.4rem); /* Function: gives the pill balanced internal spacing. */
  display: flex; /* Function: lays out the logo, nav, and actions in one row. */
  align-items: center; /* Function: vertically centers every navbar item. */
  justify-content: space-between; /* Function: anchors the logo and actions while the nav stays centered. */
  position: relative; /* Function: gives the centered nav an internal positioning context. */
  border: none; /* Function: outlines the floating glass surface. */
  border-radius: 0 0 34px 34px; /* Function: creates the rounded lower shoulder of the teardrop shape. */
  background: #0A2463; /* Function: a high-contrast, vibrant navy blue. */
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); /* Function: gives the navbar a strong, distinct drop shadow. */
  pointer-events: auto; /* Function: restores clicks inside the actual navbar surface. */
}

/* Left: Logo */
.navbar-classic__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  z-index: 2; /* Keep above mobile menu */
}

.navbar-classic__logo-img {
  height: 42px;
  width: auto;
  display: block;
}

/* Center: Navigation Links */
.navbar-classic__nav {
  flex: 1;
  display: flex;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  z-index: 2; /* Function: keeps nav links layered above the navbar surface. */
  left: 50%;
  transform: translateX(-50%);
}

.navbar-classic__links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

/* Separate adjacent navbar controls without drawing resting button borders. */
.navbar-classic__links li + li {
  position: relative;
}


/* Modern, low-chrome controls for the live navbar links. */
.navbar-classic__links li a {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  min-height: 40px;
  padding: 0 1.1rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  -webkit-tap-highlight-color: rgba(251, 182, 73, 0.24);
  touch-action: manipulation;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.navbar-classic__links li a:hover {
  color: #FBB649;
  background: rgba(255, 255, 255, 0.08);
}

.navbar-classic__links li a.active {
  color: #FBB649;
  background: transparent;
}

.navbar-classic__links li a:active,
.navbar-classic__links li a.is-pressed {
  color: #FBB649;
  background: transparent;
  transform: translateY(1px);
}

.navbar-classic__links li a:focus-visible {
  outline: 2px solid rgba(251, 182, 73, 0.86);
  outline-offset: 3px;
  color: #FBB649;
  background: rgba(255, 255, 255, 0.12);
}

/* Function: offsets non-home pages because the floating navbar is removed from normal document flow. */
body:not(.home) > main {
  padding-top: clamp(5.35rem, 4.5rem + 1.8vw, 6.4rem); /* Function: prevents first-page content from hiding beneath the fixed navbar. */
}

/* Function: trims the sell hero's own top padding after the shared fixed-navbar offset is applied. */
body:not(.home) > main > .trade-in-hero:first-child {
  padding-top: 0.5rem; /* Function: keeps the sell form close to the floating navbar without collision. */
}

/* Function: pulls the buy-finder section up to bleed under the transparent navbar. */
body:not(.home) > main > .buy-finder:first-child {
  margin-top: calc(-1 * clamp(5.35rem, 4.5rem + 1.8vw, 6.4rem));
}

/* Right: Actions (CTA + Mobile Toggle) */
.navbar-classic__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

/* Get an Offer CTA Button */
.navbar-classic__cta {
  background: #FBB649;
  color: #1a1a1a;
  font-family: var(--font-body); /* Function: keeps CTA typography aligned with the shared UI font stack. */
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
  display: none; /* Hidden on mobile */
}

.navbar-classic__cta:hover {
  background: #f0a32f; /* Subtly richer gold on hover, no jumping or glowing */
}

@media (min-width: 901px) {
  .navbar-classic__cta {
    display: inline-flex;
    align-items: center;
  }
}

/* Mobile Toggle */
.navbar-classic__mobile-toggle {
  align-items: center;
  justify-content: center;
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 10000;
  margin-left: 1rem;
  -webkit-tap-highlight-color: rgba(251, 182, 73, 0.24);
  touch-action: manipulation;
  box-shadow: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.navbar-classic__mobile-toggle::before,
.navbar-classic__mobile-toggle::after {
  background: currentColor;
  border-radius: 999px;
  content: "";
  display: block;
  height: 2.6px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  width: 26px;
}

.navbar-classic__mobile-toggle:hover,
.navbar-classic__mobile-toggle.is-open {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.navbar-classic__mobile-toggle:active {
  transform: translateY(1px);
  background: rgba(255, 255, 255, 0.16);
}

.navbar-classic__mobile-toggle:focus-visible {
  outline: 2px solid rgba(251, 182, 73, 0.86);
  outline-offset: 3px;
  background: rgba(255, 255, 255, 0.12);
}

/* Function: morphs the hamburger into a clear close state when the mobile menu is open. */
.navbar-classic__mobile-toggle svg {
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar-classic__mobile-toggle svg line {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-box: view-box;
  transform-origin: center;
}

.navbar-classic__mobile-toggle.is-open svg {
  opacity: 0;
  transform: scale(0.82);
}

.navbar-classic__mobile-toggle.is-open::before {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg);
}

.navbar-classic__mobile-toggle.is-open::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Desktop safe wrappers for the mobile drawer structure */
@media (min-width: 901px) {
  .drawer-scroller, .drawer-sheet {
    display: contents;
  }
}

@media (max-width: 900px) {
  .navbar-classic { /* Function: sizes the floating navbar wrapper for mobile viewports. */
    top: 0; /* Function: attaches the mobile teardrop navbar to the top edge. */
    padding: 0 0.85rem; /* Function: protects the mobile pill from touching narrow screen edges. */
  }

  .navbar-classic__content { /* Function: lays out the mobile navbar shell. */
    justify-content: flex-end; /* Function: keeps the mobile toggle pinned to the right while the logo is centered. */
    min-height: 44px; /* Function: preserves the mobile navbar height after centering the logo absolutely. */
    padding: 0.45rem 0.85rem; /* Function: tightens the floating pill while preserving touch space. */
    border-radius: 0 0 24px 24px; /* Function: creates a compact top-attached teardrop shoulder on mobile. */
  }

  .navbar-classic__logo { /* Function: centers the DriveHaus logo in the mobile navbar. */
    position: absolute; /* Function: removes the mobile logo from flex spacing so it can center exactly. */
    left: 50%; /* Function: anchors the mobile logo at the horizontal center of the navbar. */
    transform: translateX(-50%); /* Function: offsets the mobile logo by half its own width for true centering. */
    margin: 0; /* Function: prevents inherited spacing from nudging the centered mobile logo. */
  }

  .navbar-classic__nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(26, 55, 123, 0.85) 0%, rgba(17, 37, 89, 0.95) 100%) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
    z-index: 9999 !important;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    will-change: opacity;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
  }

  .navbar-classic__nav.is-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s, 0s;
  }

  .navbar-classic__nav::before {
    display: none;
  }

  .drawer-scroller {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .drawer-scroller::before {
    display: none;
  }

  .drawer-sheet {
    width: 100%;
    max-width: 600px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .navbar-classic__links {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    padding: 0;
  }
  .navbar-classic__links li {
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .navbar-classic__nav.is-open .navbar-classic__links li {
    opacity: 1;
    transform: translateY(0);
  }

  .navbar-classic__nav.is-open .navbar-classic__links li:nth-child(1) { transition-delay: 0.10s; }
  .navbar-classic__nav.is-open .navbar-classic__links li:nth-child(2) { transition-delay: 0.15s; }
  .navbar-classic__nav.is-open .navbar-classic__links li:nth-child(3) { transition-delay: 0.20s; }
  .navbar-classic__nav.is-open .navbar-classic__links li:nth-child(4) { transition-delay: 0.25s; }
  .navbar-classic__nav.is-open .navbar-classic__links li:nth-child(5) { transition-delay: 0.30s; }
  
  .navbar-classic__links li + li::before {
    display: none;
  }
  .navbar-classic__links li a {
    display: inline-flex;
    justify-content: center;
    width: auto;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border-radius: 16px;
    padding: 0.5rem 1.5rem;
    transition: transform 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
  }
  .navbar-classic__links li a:active {
    transform: scale(0.96);
  }
  .navbar-classic__links li a:hover,
  .navbar-classic__links li a.active {
    background: transparent;
    color: #FBB649;
    text-shadow: 0 0 24px rgba(251, 182, 73, 0.4);
  }
  .navbar-classic__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0; /* Function: prevents extra spacing from pushing the toggle against the pill edge. */
  }

  .navbar-classic__actions {
    z-index: 10001; /* Function: keeps the mobile close button above the full-screen drawer when nested in actions. */
  }

  body.nav-is-open .navbar-classic {
    z-index: 999999 !important;
  }
}

@media (max-width: 360px) { /* Function: protects the centered mobile logo on the narrowest phone widths. */
  .navbar-classic .navbar-classic__logo-img { /* Function: overrides later logo sizing only when space is tight. */
    height: 38px !important; /* Function: prevents the centered logo from touching the hamburger on narrow screens. */
  }
}

.logo-block {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-size: 2.2rem;
  font-weight: 700;
  color: inherit;
}

/* Car icon used in the header logo. */
.logo-car-icon {
  width: auto;
  height: 2.2rem;
  display: block;
}

/* Colour the separate parts of the wordmark using CSS variables. */
.logo-text .next {
  color: var(--secondary-color);
}

.logo-text .ride {
  color: var(--primary-color);
}


.nav-links li a {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background: #f4f5f7;
  color: #0f1824;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.nav-links li a:hover {
  background: #e4e8ed;
}
/* Highlight the primary action (Sell) */
.nav-links li:last-child a {
  background: #0f1824;
  color: #ffffff;
}
.nav-links li:last-child a:hover {
  background: #1a2533;
}


.nav-links li a {
  transition: transform 120ms ease, box-shadow 120ms ease;
  transform-origin: center;
}

.nav-links li a:active,
.nav-links li a.is-pressed {
  transform: translateY(2px) scale(0.96);
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.18);
}

/* Optional: stronger hover lift so the press feels more dramatic by contrast */
.nav-links li a:hover {
  transform: translateY(-2px) scale(1.01);
}

/* Keyboard focus treatment */
.nav-links li a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35);
  transform: translateY(-1px) scale(1.005);
}


.nav-links li a:hover,
.nav-links li a.active {
  background: linear-gradient(145deg, #ffd57e, var(--secondary-color));
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.15);
}


.nav-links li a:hover,
.nav-links li a.active {
  background: var(--secondary-color);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Hover state for navigation links */
.nav-links li a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Hero section */
.hero {
  position: relative;
  width: 100%;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* The background image for the hero is an absolutely positioned
   element.  Using an <img> element avoids cross‑origin issues with
   CSS background images when served via file://. */
.hero .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Soft gradient with a hint of blur for improved text legibility */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.1) 100%);
  backdrop-filter: blur(2px);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding: 0 1rem;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  line-height: 1.4;
}

/* Buttons */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-primary {
  background: var(--primary-color);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(26, 55, 123, 0.15);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(26, 55, 123, 0.25);
    background: var(--primary-color-hover);
  }
}

/* Animated flare to draw attention to primary calls-to-action */
.cta-pulse {
  position: relative;
}

.cta-pulse::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid rgba(219, 169, 78, 0.45);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transition: opacity var(--dh-motion-medium, 260ms) ease, transform var(--dh-motion-medium, 260ms) ease;
}

.cta-pulse:hover::after,
.cta-pulse:focus-visible::after {
  opacity: 0.5;
  transform: scale(1.04);
}

.btn-secondary {
  background: var(--secondary-color);
  color: #0f1824;
  box-shadow: 0 4px 12px rgba(219, 169, 78, 0.2);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(219, 169, 78, 0.3);
  background: var(--secondary-color-hover);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(17, 30, 62, 0.15);
  background: rgba(246, 248, 255, 0.6);
  color: rgba(17, 30, 62, 0.75);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(26, 55, 123, 0.12);
  color: var(--primary-color);
  border-color: rgba(26, 55, 123, 0.25);
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.12);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.btn-label {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}

/* Consistent spacing for top-level page sections */
section {
  margin-block: 4rem;
}

.offers-list {
  margin-block: 0;
}

.hero,
.page-hero,
.hero-slider {
  margin-block: 0;
}

.home main > section {
  margin-block: 0;
}

/* Function: styles the homepage pre-approval confidence section. */
.home-confidence {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #eff6ff 100%);
  overflow: visible; /* Allow visual to bleed out of the section */
  padding: 0;
  position: relative;
  width: 100%;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

/* Function: constrains and splits the pre-approval section content. */
.home-confidence__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: min(100%, 1200px);
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  position: relative;
}

@media (min-width: 901px) {
  .home-confidence__inner {
    padding-top: 88px; /* Function: keeps desktop financing copy clear of the rounded card edge without viewport-unit scaling drift. */
    padding-bottom: 24px; /* Function: replaces inherited section margins with fixed in-card spacing across display-scale settings. */
  }
}

/* Function: keeps the pre-approval copy readable in the left column. */
.home-confidence__copy {
  flex: 1;
  max-width: 75%;
  padding-right: 2rem;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
}

/* Function: styles the DriveHaus financing eyebrow above the heading. */
.home-confidence__eyebrow {
  color: var(--primary-color);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 0.85rem;
  text-transform: uppercase;
  grid-column: 1 / -1;
}

/* Function: styles the pre-approval section heading. */
.home-confidence__copy h2 {
  color: #0f1824;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 clamp(2rem, 4vw, 3.2rem);
  grid-column: 1 / -1;
}

.home-confidence__title-highlight {
  background: linear-gradient(135deg, var(--primary-color) 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
  padding-right: 0.1em; /* prevents clipping on italic or stylized fonts */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.1em;
}

/* Function: resets and spaces the pre-approval checklist. */
.home-confidence__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  list-style: none;
  margin: 0 0 2.5rem;
  max-width: 520px; /* Forces list items to wrap before hitting the truck */
  padding: 0;
  grid-column: 1 / 2;
}

/* Function: lays out each confidence checklist item. */
.home-confidence__list li {
  align-items: flex-start;
  color: #1e293b;
  display: grid;
  font-size: clamp(1.05rem, 1.8vw, 1.15rem);
  font-weight: 500;
  gap: 1.15rem;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  line-height: 1.6;
}

/* Function: styles the bare SVG icons. */
.home-confidence__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  flex-shrink: 0;
  margin-top: 0.1rem;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease, background 0.3s ease;
}
.home-confidence__list li:hover .home-confidence__icon-wrap {
  transform: scale(1.08);
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.home-confidence__icon-wrap svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* Function: styles the pre-approval call to action. */
.home-confidence__cta {
  align-items: center;
  display: inline-flex;
  font-size: 1.08rem;
  font-weight: 600;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0;
  min-height: 3.5rem;
  padding: 0 2rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  grid-column: 1 / 2;
  justify-self: center;
}

.home-confidence__cta .cta-arrow {
  width: 1.2rem;
  height: 1.2rem;
  transition: transform 0.2s ease;
}

/* Function: lifts the pre-approval CTA on hover. */
.home-confidence__cta:hover {
  transform: translateY(-2px);
}

.home-confidence__cta:hover .cta-arrow {
  transform: translateX(4px);
}

/* Function: positions the massive bleeding image. */
.home-confidence__visual {
  position: absolute;
  top: 50%;
  right: -5vw;
  transform: translateY(-50%);
  width: clamp(450px, 45vw, 650px);
  z-index: 1;
  pointer-events: none;
}

.home-confidence__vehicle {
  margin: 0;
  width: 100%;
}

.home-confidence__vehicle img {
  display: block;
  height: auto;
  width: 100%;
}

/* Function: slightly enlarges the financing cars image on desktop without affecting the car finder image. */
@media (min-width: 901px) {
  .home-confidence:not(.home-confidence--finder) .home-confidence__vehicle img {
    transform: scale(1.08);
    transform-origin: center right;
  }
}

.home-finder__image {
  transform: scale(1.5) translate(-5%, 0);
  transform-origin: center right;
}



@media (min-width: 901px) {
  .home-confidence--finder .home-confidence__inner {
    gap: clamp(2rem, 5vw, 4rem);
    justify-content: space-between;
  }

  .home-confidence--finder .home-confidence__visual {
    flex: 0 1 min(48%, 560px);
    order: 1;
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: min(48%, 560px);
    margin-right: -8rem;
  }

  .home-confidence--finder .home-confidence__copy {
    flex: 1 1 52%; /* Function: preserves the right-side text column width for the finder layout. */
    grid-template-columns: minmax(0, 560px); /* Function: keeps finder text and button aligned to the same readable column. */
    margin-left: 2rem; /* Function: nudges the finder copy slightly right on desktop. */
    max-width: 620px; /* Function: prevents the finder copy from stretching too wide. */
    order: 2; /* Function: keeps finder copy to the right of the image on desktop. */
    padding-left: 0; /* Function: removes shared left padding from the finder copy column. */
    padding-right: 0; /* Function: removes shared right padding from the finder copy column. */
  }

  .home-confidence--finder .home-confidence__cta {
    justify-self: center; /* Function: centers the finder CTA within the text column. */
  }

  .home-confidence--finder .home-confidence__copy h2,
  .home-confidence--finder .home-confidence__eyebrow {
    grid-column: 1;
  }
}

@media (max-width: 1150px) {
  .home-confidence__copy {
    padding-right: 1rem;
    max-width: 52%; /* Function: prevents text from bleeding into the large image column on narrow desktops. */
  }
  .home-confidence__visual {
    width: clamp(400px, 55vw, 550px);
    right: -8vw;
  }
  .home-confidence--finder .home-confidence__visual {
    margin-right: -2rem; /* Function: prevents the large finder image from pushing too far left over the text on narrow desktops. */
  }
}

/* Function: gives the financing artwork a touch more clearance from text on narrow desktop layouts only. */
@media (min-width: 901px) and (max-width: 1150px) {
  .home-confidence:not(.home-confidence--finder) .home-confidence__visual {
    right: -10vw; /* Function: nudges the financing art slightly right so it no longer grazes the copy. */
    width: clamp(380px, 52vw, 520px); /* Function: trims the narrow-desktop art just enough to preserve text clearance. */
  }

  .home-confidence:not(.home-confidence--finder) .home-confidence__vehicle img {
    transform: scale(1.04); /* Function: keeps the financing art large while removing the tiny overlap with copy. */
  }
}

/* Function: keeps the car-finder artwork large on narrow desktop widths before the tablet stack begins. */
@media (min-width: 901px) and (max-width: 1150px) {
  .home-confidence--finder .home-confidence__inner {
    gap: clamp(0.5rem, 1.5vw, 1rem); /* Function: keeps the narrow-desktop copy close to the finder art. */
  }

  .home-confidence--finder .home-confidence__visual {
    flex: 0 0 clamp(440px, 48vw, 540px); /* Function: keeps the finder art prominent without forcing the copy column to the far right. */
    margin-left: clamp(-3.5rem, -4vw, -2rem); /* Function: keeps a gentle left bleed instead of the previous abrupt crop. */
    margin-right: clamp(-4.5rem, -5vw, -3rem); /* Function: pulls the copy column closer to the visible finder image. */
    width: clamp(440px, 48vw, 540px); /* Function: matches the fixed flex basis for a smoother narrow-desktop transition. */
  }

  .home-confidence--finder .home-confidence__copy {
    margin-left: clamp(-1.25rem, -1.5vw, -0.5rem); /* Function: removes the base desktop right nudge that made the copy snap away from the image. */
  }
}

/* Function: stacks the pre-approval section on tablet and mobile screens. */
@media (max-width: 900px) {
  .home-confidence {
    --home-section-mobile-gutter: clamp(1rem, 5vw, 1.5rem); /* Function: shares the mobile side gutter with the adjacent sell section. */
    padding: 0;
  }

  .home-confidence__inner {
    display: flex;
    flex-direction: column;
    padding-inline: var(--home-section-mobile-gutter); /* Function: matches the mobile copy and CTA gutter to the sell section. */
    padding-top: 1rem !important; /* Force reduce top padding on mobile */
    padding-bottom: 2rem !important; /* Force reduce bottom padding on mobile */
    position: relative;
    z-index: 1;
  }

  .home-confidence__copy {
    display: contents;
  }

  .home-confidence__eyebrow {
    order: 1;
    text-align: center;
    width: 100%;
  }

  .home-confidence__copy h2 {
    order: 2;
    margin-bottom: 0 !important; /* Function: preserves the full mobile heading box before the image overlap begins. */
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 6; /* Function: keeps every painted line above the following visual on mobile. */
    transform: translateZ(0);
    isolation: isolate;
  }

  /* Function: keeps overlapping mobile headings above their section visuals. */
  #home-confidence-title,
  #home-finder-title {
    z-index: 7; /* Function: ensures the heading paints in front of the lower image on mobile. */
  }

  .home-confidence__copy h2 .home-confidence__title-highlight {
    display: block; /* Function: gives the mobile highlighted line its own unclipped text box. */
    line-height: 1.16; /* Function: preserves descenders and gradient-painted glyphs on mobile browsers. */
    padding-bottom: 0.18em; /* Function: gives WebKit enough paint room for the bottom of the highlighted text. */
  }

  #home-finder-title {
    margin-bottom: 0;
  }

  .home-confidence__visual {
    order: 3;
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 650px;
    align-self: center;
    margin: -0.5rem auto 0 !important; /* Function: leaves a small gap between the mobile heading and image while keeping the composition tight, !important ensures override of desktop margins */
    z-index: 0; /* Function: keeps mobile imagery below positioned copy without sending it behind the card. */
  }

  .home-confidence--finder .home-confidence__visual {
    margin: -4rem auto 0 auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
  }

  .home-confidence--finder .home-confidence__vehicle img {
    transform: scale(1.15) !important; /* Function: keeps the finder image centered on tablet while preserving its enlarged mobile composition. */
  }

  .home-confidence__list {
    order: 4;
    gap: 1rem;
    margin-bottom: 1.5rem;
    width: 100%;
    margin-top: -2.5rem; /* Function: pulls the text up into the empty whitespace below the cars image on mobile. */
    position: relative;
    z-index: 2;
  }

  .home-confidence--finder .home-confidence__list {
    margin-top: -4.5rem; /* Function: pulls the list up into the empty transparent space under the car tires. */
    position: relative;
    z-index: 2;
    padding-right: 2rem; /* Function: ensures the text wraps before it overlaps the magnifying glass handle on the right. */
  }

  .home-confidence__list li {
    font-size: 1.05rem;
    gap: 0.8rem;
  }

  .home-confidence__cta {
    order: 5;
    margin-top: 0;
    align-self: center;
  }

  .home-confidence__vehicle img {
    transform-origin: center center;
    transform: none;
  }
}

/* Function: keeps the pre-approval visual from overflowing very small phones. */
@media (max-width: 520px) {
  .home-confidence__copy h2 {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .home-confidence__list {
    gap: 1rem;
  }

  .home-confidence__list li {
    font-size: 1rem;
    gap: 0.8rem;
  }

  .home-confidence__vehicle {
    margin-left: 50%;
    margin-top: -2.5rem;
    transform: translateX(-50%);
    width: min(138vw, 560px);
  }

  .home-confidence__cta {
    width: 100%;
  }
}

/* Function: styles the homepage instant-offer selling section. */
.home-sell-direct {
  background: #ffffff;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  position: relative;
  width: 100%;
}

@media (min-width: 901px) {
  .home-sell-direct {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Function: lays out the selling visual and copy in a balanced two-column row. */
.home-sell-direct__inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 4vw, 4.25rem); /* Function: keeps desktop columns close enough to fit comfortably inside the rounded card. */
  grid-template-columns: minmax(380px, 1fr) minmax(380px, 1.1fr); /* Function: balances the shrinkage so the phone image stays prominently sized on narrow desktop views. */
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 2.75rem); /* Function: gives the sell block breathing room without relying on oversized empty columns. */
  width: min(100%, 1080px); /* Function: centers the desktop sell content within the larger white overlap card. */
}

/* Function: anchors the phone mockup and floating offer card. */
.home-sell-direct__visual {
  align-items: center; /* Function: vertically centers the replacement phone art in the visual column. */
  display: flex; /* Function: lets the replacement artwork center without absolute positioning. */
  justify-content: center; /* Function: horizontally centers the replacement phone art. */
  position: relative; /* Function: keeps the visual column compatible with existing animation hooks. */
}

/* Function: frames the flat CSS iPhone mockup inside the sell-direct section. */
.home-iphone-mockup {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 2rem; /* Adds breathing room below the mockup to prevent text overlap */
}

/* Flat iPhone Mockup Frame */
.home-iphone-mockup__bezel {
  background: #1e1e1e;
  border-radius: 46px;
  box-shadow: inset 0 0 0 2px #3f3f46, 0 30px 60px -15px rgba(15, 23, 42, 0.4);
  padding: 12px;
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 9 / 19.5;
  display: flex;
  flex-direction: column;
}

/* Function: slightly reduces the instant-offer phone on narrow desktop widths while preserving the tablet stack on iPad. */
@media (min-width: 901px) and (max-width: 1280px) {
  html:not(.is-ios-webkit) .home-iphone-mockup__bezel {
    width: min(100%, clamp(286px, 26vw, 300px)); /* Function: keeps the desktop phone smaller so the copy can remain comfortably side by side. */
  }
}

.home-iphone-mockup__island {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 28px;
  background: #000000;
  border-radius: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
}

.home-iphone-mockup__camera {
  width: 12px;
  height: 12px;
  background: #111;
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgba(255,255,255,0.2);
}

.home-iphone-mockup__screen {
  background: #0A2463; /* Match DriveHaus navbar blue */
  border-radius: 36px;
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Screen Content */
.home-iphone-mockup__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 48px 20px 12px;
  z-index: 2;
  position: relative;
}

.home-iphone-mockup__logo {
  height: 28px;
  width: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.home-iphone-mockup__menu {
  color: #fff;
}

.home-iphone-mockup__hero {
  padding: 0 20px;
  z-index: 2;
}

.home-iphone-mockup__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 6px;
}

.home-iphone-mockup__title .gold {
  color: #FBB649;
}

.home-iphone-mockup__subtitle {
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  opacity: 0.9;
  max-width: 95%;
  margin-bottom: 8px;
}

/* Modal Overlay inside screen */
.home-iphone-mockup__modal {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  z-index: 5;
  overflow: hidden;
  margin: 0 16px;
  position: absolute;
  top: 146px;
  left: 0;
  right: 0;
}

.home-iphone-mockup__modal-header {
  background: transparent;
  color: #1a377b;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  text-align: center;
  padding: 16px 16px 4px;
}

.home-iphone-mockup__modal-content {
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-iphone-mockup__car {
  width: 100%;
  max-width: 200px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
  mix-blend-mode: darken; /* Removes the light background against the white card */
}

.home-iphone-mockup__car-title {
  font-weight: 800;
  color: #0f172a;
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.home-iphone-mockup__car-meta {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 8px;
}

.home-iphone-mockup__price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: #1a377b;
  margin-bottom: 12px;
  line-height: 1;
}

.home-iphone-mockup__btn-accept {
  width: 100%;
  background: #FBB649;
  color: #1a1a1a;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 12px;
  border-radius: 99px;
  margin-bottom: 8px;
}

.home-iphone-mockup__btn-decline {
  width: 100%;
  background: transparent;
  color: #64748b;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px;
  border-radius: 99px;
  margin-bottom: 10px;
}

.home-iphone-mockup__disclaimer {
  font-size: 0.65rem;
  color: #94a3b8;
}

/* Function: preserves the in-phone offer card proportions when the desktop mockup is reduced. */
@media (min-width: 901px) and (max-width: 1280px) {
  html:not(.is-ios-webkit) .home-iphone-mockup__modal {
    border-radius: 18px; /* Function: scales the card corner radius with the smaller desktop phone. */
    margin-inline: 12px; /* Function: gives the card a little extra usable width so labels do not wrap. */
    top: 132px; /* Function: keeps the shorter card visually centered in the reduced phone screen. */
  }

  html:not(.is-ios-webkit) .home-iphone-mockup__modal-header {
    font-size: clamp(0.92rem, 1.5vw, 1.02rem); /* Function: keeps the offer heading on one line in the smaller desktop mockup. */
    padding: 14px 10px 3px; /* Function: trims vertical space to match the smaller card scale. */
    white-space: nowrap; /* Function: prevents the heading from changing the card proportions. */
  }

  html:not(.is-ios-webkit) .home-iphone-mockup__modal-content {
    padding: 7px 12px 14px; /* Function: scales the card content padding with the reduced phone width. */
  }

  html:not(.is-ios-webkit) .home-iphone-mockup__car {
    height: 70px; /* Function: keeps the vehicle image proportional inside the smaller card. */
    margin-bottom: 7px; /* Function: preserves compact spacing below the vehicle image. */
    max-width: 182px; /* Function: prevents the image from forcing wider card content. */
  }

  html:not(.is-ios-webkit) .home-iphone-mockup__car-title {
    font-size: clamp(0.75rem, 1.2vw, 0.82rem); /* Function: keeps the vehicle title on one line in the reduced mockup. */
    white-space: nowrap; /* Function: prevents title wrapping from stretching the card vertically. */
  }

  html:not(.is-ios-webkit) .home-iphone-mockup__car-meta {
    font-size: 0.68rem; /* Function: scales the meta line to the smaller card. */
    margin-bottom: 7px; /* Function: keeps the price close to the meta line at the reduced size. */
    white-space: nowrap; /* Function: keeps the meta line from changing the card height. */
  }

  html:not(.is-ios-webkit) .home-iphone-mockup__price {
    font-size: 1.72rem; /* Function: keeps the price prominent without crowding the smaller card. */
    margin-bottom: 10px; /* Function: preserves the button spacing below the scaled price. */
  }

  html:not(.is-ios-webkit) .home-iphone-mockup__btn-accept {
    font-size: 0.78rem; /* Function: scales the primary button label with the reduced card. */
    margin-bottom: 7px; /* Function: keeps the secondary action spacing compact. */
    padding: 10px; /* Function: preserves the pill shape without making the card too tall. */
  }

  html:not(.is-ios-webkit) .home-iphone-mockup__btn-decline {
    font-size: 0.74rem; /* Function: scales the decline label with the reduced card. */
    margin-bottom: 8px; /* Function: keeps the disclaimer close without crowding. */
    padding: 7px; /* Function: trims the secondary button height in the smaller card. */
  }

  html:not(.is-ios-webkit) .home-iphone-mockup__disclaimer {
    font-size: 0.58rem; /* Function: scales disclaimer text to preserve the card proportions. */
    line-height: 1.35; /* Function: keeps the disclaimer readable after scaling. */
  }
}

/* Bottom Bar inside screen */
.home-iphone-mockup__bottom {
  margin-top: auto;
  padding: 16px 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 2;
  background: linear-gradient(to top, rgba(7, 24, 65, 0.95), transparent);
}

.home-iphone-mockup__footer {
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.05em;
}

.home-iphone-mockup__chat {
  width: 40px;
  height: 40px;
  background: #10b981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Function: renders the DriveHaus mobile offer preview. */
.home-sell-direct__device {
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 42px;
  box-shadow: 0 34px 70px rgba(15, 23, 42, 0.16);
  left: clamp(0rem, 3vw, 2rem);
  min-height: 560px;
  overflow: hidden;
  padding: 1rem;
  position: absolute;
  top: 0;
  transform: rotate(-1.5deg);
  width: min(78%, 330px);
}

/* Function: creates the phone header area with brand mark and menu cue. */
.home-sell-direct__device-top {
  align-items: center;
  background: #14205c;
  border-radius: 26px 26px 16px 16px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  min-height: 56px;
  padding: 0.25rem 1rem;
}

.home-sell-direct__device-top img {
  display: block;
  height: 28px;
  object-fit: contain;
  width: 112px;
}

.home-sell-direct__device-top span,
.home-sell-direct__device-top span::before,
.home-sell-direct__device-top span::after {
  background: #ffffff;
  border-radius: 999px;
  content: "";
  display: block;
  height: 2px;
  width: 18px;
}

.home-sell-direct__device-top span {
  position: relative;
}

.home-sell-direct__device-top span::before {
  position: absolute;
  top: -6px;
}

.home-sell-direct__device-top span::after {
  position: absolute;
  top: 6px;
}

/* Function: styles the in-phone offer screen. */
.home-sell-direct__screen {
  background: linear-gradient(180deg, #149fe4 0%, #0a5cbe 100%);
  border-radius: 28px;
  min-height: 470px;
  overflow: hidden;
  padding: 1.5rem 1.25rem;
  position: relative;
}

.home-sell-direct__screen p {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  max-width: 12rem;
  position: relative;
  z-index: 2;
}

.home-sell-direct__screen-car {
  bottom: 94px;
  filter: drop-shadow(0 24px 22px rgba(15, 23, 42, 0.28));
  height: 210px;
  left: 50%;
  object-fit: cover;
  object-position: 34% center;
  position: absolute;
  transform: translateX(-47%);
  width: 360px;
  z-index: 2;
}

.home-sell-direct__screen-panel {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  bottom: 1.25rem;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
  display: grid;
  gap: 0.3rem;
  left: 1.25rem;
  padding: 1rem 1.15rem;
  position: absolute;
  right: 1.25rem;
  z-index: 3;
}

.home-sell-direct__screen-panel span {
  color: var(--primary-color);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-sell-direct__screen-panel strong {
  color: #0f172a;
  font-size: 1.1rem;
  line-height: 1.2;
}

/* Function: styles the floating cash offer card over the phone. */
.home-sell-direct__offer {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.18);
  display: grid;
  gap: 0.35rem;
  left: min(30vw, 210px);
  padding: 1.35rem clamp(1.4rem, 4vw, 2rem);
  position: absolute;
  text-align: center;
  top: clamp(9rem, 13vw, 11rem);
  width: min(70%, 360px);
  z-index: 4;
}

.home-sell-direct__offer span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-sell-direct__offer strong {
  color: var(--primary-color);
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.home-sell-direct__offer small {
  color: #334155;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 800;
}

/* Function: keeps the selling section copy aligned with the rest of the homepage. */
.home-sell-direct__copy {
  max-width: 620px;
  min-width: 0; /* Function: lets long heading and list text wrap within the grid column before the card edge. */
  display: flex;
  flex-direction: column;
}

.home-sell-direct__eyebrow {
  color: var(--primary-color);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 0.85rem;
  text-transform: uppercase;
}

.home-sell-direct__copy h2 {
  color: #0f1824;
  font-family: var(--font-display);
  font-size: clamp(2.45rem, 4.7vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.home-sell-direct__title-highlight {
  background: linear-gradient(135deg, var(--primary-color) 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
  padding-right: 0.1em;
}

/* Function: resets and spaces the selling benefits list. */
.home-sell-direct__list {
  display: grid;
  gap: 1.6rem;
  list-style: none;
  margin: 0 0 clamp(2.25rem, 5vw, 3.25rem);
  padding: 0;
}

.home-sell-direct__list li {
  align-items: flex-start;
  color: #1e293b;
  display: grid;
  font-size: clamp(1.05rem, 1.9vw, 1.18rem);
  font-weight: 500;
  gap: 1.15rem;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  line-height: 1.6;
}

.home-sell-direct__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  flex-shrink: 0;
  margin-top: 0.1rem;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease, background 0.3s ease;
}
.home-sell-direct__list li:hover .home-sell-direct__icon {
  transform: translateX(4px) scale(1.08);
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.home-sell-direct__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.home-sell-direct__cta {
  align-items: center;
  display: inline-flex;
  font-size: 1.08rem;
  font-weight: 600;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0;
  min-height: 3.5rem;
  padding: 0 2rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  align-self: center;
}

.home-sell-direct__cta .cta-arrow {
  width: 1.2rem;
  height: 1.2rem;
  transition: transform 0.2s ease;
}

.home-sell-direct__cta:hover {
  transform: translateY(-2px);
}

.home-sell-direct__cta:hover .cta-arrow {
  transform: translateX(4px);
}

.home-sell-direct__cta:hover .cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .home-sell-direct__inner {
    gap: 2rem;
    grid-template-columns: 1fr;
    padding: 0 clamp(1.5rem, 4vw, 2.5rem); /* Function: restores the original tablet spacing after the desktop-only inset padding. */
    row-gap: 0; /* Function: keeps the tablet phone mockup visually attached to the heading instead of drifting below the CTA. */
    width: min(100%, 1200px); /* Function: lets stacked tablet content use the available card width. */
  }

  .home-sell-direct__visual {
    margin: 0 auto; /* Function: centers the sell art column in the single-column tablet layout. */
    min-height: 560px; /* Function: preserves enough room for the tall attached phone art. */
    order: 3; /* Function: places the tablet phone mockup directly below the heading. */
    width: min(100%, 620px); /* Function: caps the visual column on tablet layouts. */
  }

  .home-sell-direct__art-image {
    width: min(72vw, 200px); /* Function: scales the attached phone art for tablet widths. */
  }

  .home-sell-direct__copy {
    display: contents; /* Function: lets the tablet heading, phone mockup, benefits, and CTA be ordered independently. */
  }

  .home-sell-direct__eyebrow {
    order: 1; /* Function: keeps the tablet label above the heading. */
    text-align: center; /* Function: preserves the centered tablet heading group after display contents. */
  }

  .home-sell-direct__copy h2 {
    margin: 0 auto 0.9rem; /* Function: pulls the tablet phone mockup directly under the title. */
    max-width: 620px; /* Function: keeps the tablet title measure from stretching across the card. */
    order: 2; /* Function: places the tablet title before the phone mockup. */
    text-align: center; /* Function: keeps the tablet title aligned with the eyebrow. */
  }

  .home-sell-direct__list {
    margin-inline: auto;
    max-width: 620px;
    order: 4; /* Function: moves the tablet benefit list below the phone mockup. */
    text-align: left;
  }

  .home-sell-direct__cta {
    justify-self: center; /* Function: keeps the tablet CTA as a centered pill after the copy wrapper stops controlling its width. */
    order: 5; /* Function: keeps the tablet CTA after the reordered benefit list. */
    width: auto; /* Function: prevents the tablet CTA from stretching across the single-column grid. */
  }
}

/* Function: keeps iPad portrait stacked while allowing narrow desktop browsers to remain side by side. */
@media (min-width: 901px) and (max-width: 1024px) {
  .is-ios-webkit .home-sell-direct__inner {
    gap: 2rem;
    grid-template-columns: 1fr;
    padding: 0 clamp(1.5rem, 4vw, 2.5rem); /* Function: restores the tablet spacing only for iPad-width WebKit layouts. */
    row-gap: 0; /* Function: keeps the iPad phone mockup visually attached to the heading instead of drifting below the CTA. */
    width: min(100%, 1200px); /* Function: lets stacked iPad content use the available card width. */
  }

  .is-ios-webkit .home-sell-direct__visual {
    margin: 0 auto; /* Function: centers the sell art column in the single-column iPad layout. */
    min-height: 560px; /* Function: preserves enough room for the tall attached phone art. */
    order: 3; /* Function: places the iPad phone mockup directly below the heading. */
    width: min(100%, 620px); /* Function: caps the visual column on iPad layouts. */
  }

  .is-ios-webkit .home-sell-direct__art-image {
    width: min(72vw, 200px); /* Function: scales the attached phone art for iPad widths. */
  }

  .is-ios-webkit .home-sell-direct__copy {
    display: contents; /* Function: lets the iPad heading, phone mockup, benefits, and CTA be ordered independently. */
  }

  .is-ios-webkit .home-sell-direct__eyebrow {
    order: 1; /* Function: keeps the iPad label above the heading. */
    text-align: center; /* Function: preserves the centered iPad heading group after display contents. */
  }

  .is-ios-webkit .home-sell-direct__copy h2 {
    margin: 0 auto 0.9rem; /* Function: pulls the iPad phone mockup directly under the title. */
    max-width: 620px; /* Function: keeps the iPad title measure from stretching across the card. */
    order: 2; /* Function: places the iPad title before the phone mockup. */
    text-align: center; /* Function: keeps the iPad title aligned with the eyebrow. */
  }

  .is-ios-webkit .home-sell-direct__list {
    margin-inline: auto;
    max-width: 620px;
    order: 4; /* Function: moves the iPad benefit list below the phone mockup. */
    text-align: left;
  }

  .is-ios-webkit .home-sell-direct__cta {
    justify-self: center; /* Function: keeps the iPad CTA as a centered pill after the copy wrapper stops controlling its width. */
    order: 5; /* Function: keeps the iPad CTA after the reordered benefit list. */
    width: auto; /* Function: prevents the iPad CTA from stretching across the single-column grid. */
  }
}

@media (max-width: 620px) {
  .home-sell-direct {
    padding: 2rem 0 0;
  }

  .home-sell-direct__inner {
    --home-section-mobile-gutter: clamp(1rem, 5vw, 1.5rem); /* Function: shares the mobile side gutter with the financing section. */
    padding-inline: var(--home-section-mobile-gutter); /* Function: keeps the sell section copy and CTA aligned to the shared mobile gutter. */
    row-gap: 0; /* Function: prevents the reordered mobile visual from drifting away from the title. */
  }

  .home-sell-direct__copy h2 {
    font-size: clamp(2rem, 10vw, 2.65rem);
    margin: 0 auto 0.9rem; /* Function: pulls the mobile visual directly under the title. */
    max-width: 620px; /* Function: preserves the previous centered title measure after display contents. */
  }

  .home-sell-direct__visual {
    min-height: 470px; /* Function: keeps the mobile phone art close to the title. */
  }

  .home-sell-direct__art-image {
    filter: drop-shadow(0 22px 34px rgba(15, 23, 42, 0.2)); /* Function: softens the phone art shadow on narrow screens. */
    width: min(78vw, 180px); /* Function: keeps the attached phone art inside mobile gutters. */
  }

  .home-sell-direct__list {
    gap: 1.15rem;
    margin-bottom: 1.5rem;
  }

  .home-sell-direct__device {
    left: 50%;
    min-height: 470px;
    top: 0;
    transform: translateX(-50%) rotate(-1.5deg);
    width: min(82vw, 300px);
  }

  .home-sell-direct__screen {
    min-height: 380px;
  }

  .home-sell-direct__screen-car {
    bottom: 88px;
    height: 180px;
    width: 310px;
  }

  .home-sell-direct__offer {
    left: 50%;
    top: 7.7rem;
    transform: translateX(-50%);
    width: min(74vw, 300px);
  }

  .home-sell-direct__cta {
    width: 100%;
  }
}



/* Homepage sections styling — clean layout with paced backgrounds */
.home main > section.features,
.home main .home-confidence,
.home main .home-sell-direct,
.home main > section.featured-offers,
.home main > section.testimonials,
.home main > section.faq {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.home main .home-confidence { background: transparent !important; margin-block: 0; /* Function: removes inherited section spacing inside the shared white overlap card. */ }
.home main .home-sell-direct { background: transparent !important; margin-block: 0; /* Function: lets the instant-offer layout fit directly below the financing block on desktop. */ }

/* Overlap Cards Implementation */
.home-overlap-wrapper {
  background-color: #0A2463; /* Navbar color match */
  padding-bottom: 3rem;
}

.home-overlap-container {
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap so sections touch */
  width: calc(100% - clamp(2rem, 5vw, 4rem));
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0;
  /* Pull up over the hero section */
  position: relative;
  top: -36px; /* Function: keeps the desktop hero-to-card gap from changing with root font or viewport scaling. */
  z-index: 10;
  margin-bottom: -36px; /* Function: balances the fixed desktop pull-up without collapsing the following sections. */
  
  /* Card Styling */
  background: #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden; /* Prevent content from spilling out of the card */
}

/* Function: gives medium desktop browsers a stable top inset inside the overlap card. */
@media (min-width: 901px) and (max-width: 1280px) {
  .home-confidence__inner {
    padding-top: 96px; /* Function: preserves the financing card's top inset on medium desktop Chrome viewports without viewport-unit drift. */
  }
}

@media (max-width: 900px) {
  .home-overlap-container {
    top: -48px; /* Function: keeps the mobile card overlap stable across browser display-scale settings. */
    margin-bottom: -48px; /* Function: balances the fixed mobile overlap without changing downstream section flow. */
    width: calc(100% - 2rem);
    border-radius: 16px !important;
    padding-top: 8px !important; /* Significantly reduce mobile top padding */
    padding-bottom: 24px !important;
  }

  .home-overlap-container > .home-confidence,
  .home-overlap-container > .home-sell-direct {
    margin-block: 0;
  }

  .home-overlap-container > section:first-child .home-confidence__inner,
  .home-overlap-container > section:first-child .home-sell-direct__inner {
    padding-top: clamp(2rem, 8vw, 3rem) !important; /* Function: gives the first mobile card label enough breathing room below the rounded edge. */
  }
}

/* Function: Standardizes spacing between multiple stacked sections in the overlap card */
@media (min-width: 901px) {
  .home-overlap-container > section .home-confidence__inner,
  .home-overlap-container > section .home-sell-direct__inner {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  
  .home-overlap-container > section:first-child .home-confidence__inner,
  .home-overlap-container > section:first-child .home-sell-direct__inner {
    padding-top: 64px !important; /* Function: leaves a more comfortable desktop inset above the first card eyebrow. */
  }
  
  .home-overlap-container > section:last-child .home-confidence__inner,
  .home-overlap-container > section:last-child .home-sell-direct__inner {
    padding-bottom: 80px !important;
  }

  .home-sell-direct__art-image {
    margin-left: 60px; /* Function: nudges the image to the right to balance the layout */
  }
}

.home main > section.featured-offers { background: #f4f7fb; }
.home main > section.testimonials { background: #f4f7fb; }
.home main > section.faq { background: transparent; }

.home main > .hero-slider {
  margin-block: 0;
}

/* Page hero for secondary pages */
.page-hero {
  /* Secondary page hero sections use a clean light panel with a soft
     shadow.  This modernises the look and keeps the focus on the
     content rather than the background. */
  background: var(--light-bg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  padding: 2rem 1rem;
  text-align: center;
  border-radius: var(--border-radius);
}

.page-hero.small {
  padding: 1.5rem 1rem;
}

.page-hero h1 {
  font-size: 2.6rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.page-hero p {
  color: #666;
  font-size: 1rem;
}

/* Sell page hero with background image */
.page-hero.sell-hero {
  background: url('assets/hero_car.jpg') center/cover no-repeat;
  color: #fff;
  border: none;
  box-shadow: none;
  position: relative;
}

.page-hero.sell-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: inherit;
}

.page-hero.sell-hero > * {
  position: relative;
}

.page-hero .trust-signal {
  font-weight: 600;
  color: #fff;
  margin: 0.25rem 0 0.5rem;
}

/* Feature section */
.features {
  margin-block: 0;
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  color: #1f2933;
  text-align: center;
  background: #f6f7f9;
}

.features h2 {
  font-family: var(--font-display);
  margin-bottom: clamp(1.5rem, 0.75rem + 2vw, 2rem);
  font-size: clamp(1.4rem, 0.9rem + 1.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f1824;
  text-wrap: balance;
}

.features .inline-logo {
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: -0.12em;
}

.feature-carousel {
  position: relative;
}

.feature-grid {
  --feature-min-card-width: 260px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--feature-min-card-width), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  max-width: var(--max-width);
  margin: 0 auto;
}

.feature-dots {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  margin-top: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}

.feature-dot {
  width: 1.35rem;
  height: 0.55rem;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(26, 55, 123, 0.25);
  transform: scaleX(0.41);
  transform-origin: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.feature-dot:focus-visible {
  outline: 2px solid rgba(26, 55, 123, 0.5);
  outline-offset: 3px;
}

.feature-dot.is-active {
  background: #1a377b;
  transform: scaleX(1);
}

.feature-carousel.is-slider {
  overflow: hidden;
}

.feature-carousel.is-slider .feature-grid {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  transform: translate3d(0,0,0);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  touch-action: pan-y;
  cursor: grab;
  will-change: transform;
}

.feature-carousel.is-slider .feature-grid.is-dragging {
  cursor: grabbing;
  transition: none;
  user-select: none;
}

.feature-carousel.is-slider .feature-item {
  flex: 0 0 100%;
  min-width: 100%;
}

.feature-carousel.is-slider .feature-dots {
  display: flex;
}



.feature-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.75rem 1.5rem 1.75rem 1.75rem;
  color: #1f2933;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e4e8ed;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transform: translate3d(0,0,0);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease, transform 0.16s ease;
}

.feature-item::before,
.feature-item::after {
  content: none;
}

.feature-item > * {
  position: relative;
  z-index: 1;
  width: 100%;
}

.feature-item:is(:hover, .is-expanded, :focus-visible) {
  border-color: #d8dde4;
  border-left-color: #FBB649;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}

.feature-item.is-tilting {
  transform: perspective(900px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) translate3d(0,0,0);
  transform-style: preserve-3d;
  will-change: transform;
}

.feature-item:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.feature-header {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: flex-start;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background: #f0f4ff;
  color: var(--primary-color);
  flex-shrink: 0;
}

.feature-icon svg {
  width: 55%;
  height: 55%;
}

.feature-icon--verified {
  background: #f0fdf4;
  color: #16a34a;
}

.feature-icon--map {
  background: #eff6ff;
  color: #2563eb;
}

.feature-icon--favorite {
  background: #fff7ed;
  color: #ea580c;
}

.feature-heading {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.feature-item h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f1824;
  letter-spacing: -0.01em;
}

.feature-blurb {
  margin: 0;
  font-weight: 500;
  color: #4b5563;
  line-height: 1.7;
}

.feature-detail {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.7;
  color: #4b5563;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease;
}

.feature-item.is-expanded .feature-detail {
  max-height: var(--feature-detail-max, 260px);
  opacity: 1;
}

.feature-grid > .feature-item:nth-child(2),
.feature-grid > .feature-item:nth-child(3) {
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .feature-item {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    transform: none !important;
  }

  .feature-item::after {
    transition: opacity 0.3s ease;
  }

  .feature-detail {
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }
}

/* Testimonials — clean, minimal */
.testimonials {
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  text-align: center;
  background: #f8fafc;
}

.testimonials h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f1824;
  margin-bottom: 2.5rem;
  text-wrap: balance;
}

.testimonial-grid {
  --testimonial-gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--testimonial-gap, 1.5rem);
  max-width: var(--max-width);
  margin: 0 auto;
}

.testimonial {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 16px;
  padding: 1.75rem;
  text-align: left;
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.testimonial blockquote {
  font-style: normal;
  font-size: 0.97rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 1.25rem;
}

.testimonial figcaption {
  font-weight: 600;
  font-size: 0.88rem;
  color: #6b7280;
}

.testimonial-grid.is-carousel,
.testimonials-grid.is-carousel {
  display: block;
  overflow: hidden;
  position: relative;
}

.testimonial-track {
  display: flex;
  align-items: stretch;
  gap: var(--testimonial-gap, 1.5rem);
  width: max-content;
  animation: testimonial-marquee var(--testimonial-marquee-duration, 40s) linear infinite;
  animation-play-state: paused; /* Function: lets the motion controller run the marquee only while visible. */
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  will-change: auto; /* Function: avoids permanently promoting the full testimonial track. */
}

.testimonial-track > .testimonial {
  flex: 0 0 auto;
  min-width: min(320px, calc(100vw - 4rem));
}

.testimonial-grid.is-carousel::before,
.testimonial-grid.is-carousel::after,
.testimonials-grid.is-carousel::before,
.testimonials-grid.is-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3rem;
  pointer-events: none;
  z-index: 1;
}

.testimonial-grid.is-carousel::before,
.testimonials-grid.is-carousel::before {
  left: 0;
  background: linear-gradient(90deg, var(--light-bg, #ffffff) 0%, rgba(255, 255, 255, 0));
}

.testimonial-grid.is-carousel::after,
.testimonials-grid.is-carousel::after {
  right: 0;
  background: linear-gradient(270deg, var(--light-bg, #ffffff) 0%, rgba(255, 255, 255, 0));
}

@keyframes testimonial-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-track {
    animation: none;
    transform: none !important;
  }
}

.offers-grid {
  display: grid; /* Function: arranges inventory offer cards in responsive columns. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--offer-card-target-width)), var(--offer-card-max-width))); /* Function: keeps normal inventory cards resizing fluidly across the available results column. */
  gap: clamp(1rem, 1.4vw, 1.25rem); /* Function: keeps card spacing tight enough to avoid wasted inventory space. */
  justify-content: start; /* Function: keeps capped card tracks grouped without creating fake space between cards. */
  width: 100%; /* Function: lets the offer grid fill the inventory content column. */
  padding: 0; /* Function: keeps card spacing controlled by the grid gap and parent layout. */
  align-items: stretch; /* Function: keeps cards in each row visually aligned. */
}

/* Function: caps the one-result filtered state without changing the normal multi-card resizing behavior. */
.offers-grid--single {
  grid-template-columns: minmax(min(100%, var(--offer-card-min-width)), min(100%, var(--offer-card-max-width))); /* Function: lets the single card still resize while preventing it from spanning the whole desktop results column. */
}

/* Function: lets empty inventory messages occupy the full inventory column instead of card-sized tracks. */
.offers-grid--empty {
  grid-template-columns: 1fr; /* Function: gives banners and status copy the full available width. */
}

/* Function: presents a polished inventory placeholder when no listings have been published. */
.inventory-empty {
  align-items: flex-start; /* Function: keeps the banner copy easy to scan in the inventory column. */
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #edf5ff 100%); /* Function: adds a light dealership-ready backdrop without overpowering filters. */
  border: 1px solid rgba(26, 55, 123, 0.12); /* Function: separates the placeholder from the page background. */
  border-radius: 1rem; /* Function: matches the rounded inventory controls nearby. */
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08); /* Function: gives the empty state the same soft elevation as inventory cards. */
  display: flex; /* Function: stacks the empty-state message vertically. */
  flex-direction: column; /* Function: keeps eyebrow, title, and copy in reading order. */
  gap: 0.55rem; /* Function: spaces the message without creating a bulky card. */
  min-height: 16rem; /* Function: fills the empty listing area enough to replace missing cards. */
  padding: clamp(2rem, 4vw, 3rem); /* Function: keeps comfortable spacing across desktop and mobile widths. */
  position: relative; /* Function: anchors the subtle accent stripe inside the banner. */
  overflow: hidden; /* Function: clips the accent stripe to the rounded banner shape. */
}


/* Function: labels the empty-state banner with compact inventory context. */
.inventory-empty__eyebrow {
  color: #1a377b; /* Function: ties the label to the DriveHaus navy. */
  font-size: 0.76rem; /* Function: keeps the label secondary to the coming-soon headline. */
  font-weight: 800; /* Function: makes the small uppercase label readable. */
  letter-spacing: 0.08em; /* Function: gives the label a controlled metadata feel. */
  text-transform: uppercase; /* Function: distinguishes the label from body copy. */
}

/* Function: makes the empty-state headline clear without using hero-scale type. */
.inventory-empty__title {
  color: #0f172a; /* Function: keeps the title high contrast on the pale banner. */
  font-size: clamp(2rem, 4vw, 3rem); /* Function: scales the coming-soon headline within the inventory column. */
  line-height: 1; /* Function: keeps the headline compact inside the banner. */
  margin: 0; /* Function: removes default heading spacing so the flex gap controls rhythm. */
}

/* Function: explains the inventory state in one calm line of supporting copy. */
.inventory-empty__copy {
  color: #475569; /* Function: keeps the supporting copy softer than the headline. */
  font-size: 1rem; /* Function: maintains readable body text on all viewports. */
  line-height: 1.65; /* Function: improves readability when the sentence wraps. */
  margin: 0; /* Function: lets the banner spacing come from the parent gap. */
  max-width: 38rem; /* Function: prevents long lines on wide inventory layouts. */
}

/* Function: centers generic empty filter results inside the full-width empty grid. */
.offers-empty-message {
  text-align: center; /* Function: positions no-match copy where users expect result feedback. */
  width: 100%; /* Function: makes the message span the empty grid track. */
}

@media (max-width: 600px) {
  .offers-grid {
    /* 1 card per row taking up full space on mobile to eliminate excessive margins */
    grid-template-columns: 1fr;
    padding: 0;
  }
}

/* Featured offers section */
.featured-offers[hidden] {
  display: none !important; /* Function: ensures the empty homepage offers section stays hidden even when section styles are loaded. */
}

.featured-offers {
  padding: 2.5rem 1.5rem 2rem;
  background: #fff;
}

.featured-offers h2 {
  font-family: var(--font-display);
  text-align: center;
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f1824;
  margin-bottom: 2.5rem;
}

.featured-slider {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.featured-slider.is-loaded {
  opacity: 1;
  transform: translateY(0);
}

.featured-slider::-webkit-scrollbar {
  display: none;
}

.featured-slider-track {
  display: flex;
  gap: var(--offer-card-gap);
  width: max-content;
  --featured-card-width: clamp(
    var(--offer-card-min-width),
    70vw,
    var(--offer-card-target-width)
  );
}

.featured-slider-track .offer-card,
.featured-slider-track .nr-offer-card {
  width: min(100%, var(--offer-card-target-width));
  min-width: var(--offer-card-min-width);
  scroll-snap-align: start;
  content-visibility: visible; /* Function: prevents iOS Safari from treating the intrinsic placeholder as the real card height inside the homepage slider. */
  contain-intrinsic-size: none; /* Function: lets homepage slider cards shrink-wrap their actual image and text instead of reserving the 420px lazy-layout estimate. */
}

.nr-offer-card {
  --offer-card-figma-primary: #1a377b;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px; /* Function: slightly tightens the compact card radius. */
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease;
  cursor: pointer;
  justify-self: stretch; /* Function: lets each card fill its responsive grid track instead of leaving internal gaps. */
  min-height: 0;
  min-width: 0; /* Function: lets the responsive grid own card width without forcing overflow. */
  width: 100%; /* Function: makes the visible card match the grid track width. */
  content-visibility: auto; /* Function: skips layout/paint/styling calculations for off-screen cards to optimize performance. */
  contain-intrinsic-size: auto 420px; /* Function: reserves estimated size for lazy-loaded off-screen cards to prevent page jumping. */
}

.nr-offer-card:focus-visible {
  outline: 3px solid rgba(26, 55, 123, 0.35);
  outline-offset: 3px;
}

.nr-offer-card:hover {
  transform: translateY(-4px); /* Function: keeps hover motion proportional to the compact card. */
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.nr-offer-card__media {
  position: relative;
  /* Updated to 16/9 so the image remains relatively proportionate and doesn't get too tall when the card scales up */
  aspect-ratio: 16/9;
  background: #f3f6fb;
  display: block;
  overflow: hidden;
}

.nr-offer-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nr-offer-card__image.is-loaded {
  opacity: 1;
}

.nr-offer-card:hover .nr-offer-card__image {
  transform: scale(1.05);
}

.nr-offer-card__compare {
  position: absolute;
  bottom: 0.7rem; /* Function: tucks the compare control into the compact card media area. */
  right: 0.7rem; /* Function: keeps the compare control aligned inside the compact card edge. */
  background: #ffffff;
  color: #111827;
  font-weight: 700;
  font-size: 0.76rem; /* Function: scales compare text for the compact card. */
  padding: 0.42rem 0.85rem; /* Function: reduces compare button bulk inside the compact card. */
  border-radius: 9999px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s ease;
}

.nr-offer-card__compare:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  background-color: #f9fafb;
}

.nr-offer-card__body {
  padding: 1rem; /* Function: reduces internal spacing so the compact card feels proportional. */
  display: flex;
  flex-direction: column;
}

.nr-offer-card__title {
  font-size: 1.05rem; /* Function: scales card titles down for the compact card footprint. */
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.nr-offer-card__subtitle {
  font-size: 0.84rem; /* Function: keeps vehicle meta compact inside the smaller card. */
  color: #4b5563;
  margin: 0.4rem 0 0 0;
  font-weight: 500;
}

.nr-offer-card__divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 0.8rem 0; /* Function: reduces divider spacing in the compact card body. */
  width: 100%;
}

.nr-offer-card__price-row {
  display: flex; /* Function: places financing copy to the right of the listed price. */
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap; /* Function: lets financing move to the next line before it can clip on narrower cards. */
  width: 100%;
}

.nr-offer-card__price {
  font-size: 1.7rem; /* Function: scales pricing down while keeping it prominent. */
  font-weight: 800;
  color: #111827;
  flex: 0 1 auto; /* Function: lets the price keep natural width while allowing the row to wrap. */
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.nr-offer-card__financing {
  font-size: 0.72rem; /* Function: keeps financing text visually secondary beside the listed price. */
  color: #4b5563;
  flex: 0 1 auto; /* Function: lets financing wrap below the price instead of overflowing the card. */
  font-weight: 500;
  min-width: max-content; /* Function: keeps the short financing phrase intact once it wraps. */
  white-space: nowrap; /* Function: keeps the financing phrase on one line after it moves below the price. */
}

.nr-offer-card__footer {
  font-size: 0.72rem; /* Function: trims legal footer text to match the compact card. */
  color: #6b7280;
  font-weight: 400;
  margin-top: 0.55rem;
}

@media (prefers-reduced-motion: reduce) {
  .nr-offer-card,
  .nr-offer-card * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    transform: none !important;
  }
}

/* Filter bar */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.filter-bar {
  max-width: var(--max-width);
  margin: 1.5rem auto 0;
  padding: 1.75rem 2rem;
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* ==========================================================================
   INVENTORY SIDEBAR LAYOUT
   ========================================================================== */
.inventory-layout {
  display: grid; /* Function: lays out the filters beside the inventory cards on desktop. */
  grid-template-columns: minmax(16rem, 17.5rem) minmax(0, 1fr); /* Function: keeps filters stable while giving the card grid flexible room. */
  gap: clamp(1.25rem, 1.8vw, 2rem); /* Function: lets the filter-to-card gap breathe without wasting space. */
  max-width: var(--inventory-max-width); /* Function: widens the inventory section beyond the old narrow page cap. */
  margin: 0 auto 2rem; /* Function: centers the inventory section and keeps space below it. */
  padding: 0 clamp(1rem, 2.4vw, 2rem); /* Function: makes side gutters flexible across desktop window sizes. */
  scroll-margin-top: 6rem; /* Function: lands inventory anchor jumps below the fixed navigation instead of mid-section. */
  width: 100%; /* Function: lets the wider inventory section use available viewport space. */
  align-items: start; /* Function: keeps the sticky filters and cards aligned at the top. */
}

.inventory-sidebar {
  position: sticky;
  top: 100px;
  background: #ffffff;
  border-radius: 14px; /* Function: matches the corner radius of the offer cards. */
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
  padding: 1.5rem;
  height: max-content;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scroll-margin-top: 6rem; /* Function: preserves older sidebar hash links with the same fixed-header clearance. */
  scrollbar-width: none;
}

.inventory-sidebar::-webkit-scrollbar {
  display: none;
}
.inventory-sidebar::-webkit-scrollbar-thumb {
  display: none;
}

.mobile-only {
  display: none;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.sidebar-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: #1a377b;
}
.close-sidebar {
  align-items: center;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  color: #64748b;
  cursor: pointer;
  display: none;
  height: 2.25rem;
  justify-content: center;
  padding: 0.25rem;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  width: 2.25rem;
}
.close-sidebar:hover {
  background: rgba(15, 23, 42, 0.1);
  color: #0f172a;
  transform: translateY(-1px);
}
.close-sidebar:focus-visible {
  outline: 3px solid rgba(26, 55, 123, 0.18);
  outline-offset: 2px;
}

.filter-section {
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.85rem;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-divider {
  border: none;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  margin: 1.5rem 0;
}

/* Form Elements */
.modern-select,
.input-with-prefix input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.75rem;
  background: #ffffff;
  font-size: 0.95rem;
  color: #0f172a;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
}

.modern-select:focus,
.input-with-prefix:focus-within {
  outline: none;
  background: #ffffff;
  border-color: #1a377b;
  box-shadow: 0 0 0 3px rgba(26, 55, 123, 0.1);
}

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.small-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  display: block;
  margin-bottom: 0.35rem;
}

.input-with-prefix {
  display: flex;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-prefix {
  padding-left: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

.input-with-prefix input {
  border: none;
  background: transparent;
  padding-left: 0.5rem;
}
.input-with-prefix input:focus {
  outline: none;
  box-shadow: none;
}

/* Search Field */
.filter-search-section .search-field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.filter-search-section .search-field:focus-within {
  background: #ffffff;
  border-color: #1a377b;
  box-shadow: 0 0 0 3px rgba(26, 55, 123, 0.1);
}
.search-icon {
  color: #64748b;
  margin-right: 0.5rem;
  display: flex;
}
.filter-search-section input {
  border: none;
  background: transparent;
  width: 100%;
  padding: 0.5rem 0;
  font-size: 0.95rem;
  color: #0f172a;
  text-align: center;
}
.filter-search-section input:focus {
  outline: none;
}

/* Footer Buttons */
.sidebar-footer {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.btn-reset {
  flex: none;
  padding: 0.85rem 2rem;
  background: rgba(15, 23, 42, 0.05);
  color: #475569;
  border: none;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-align: center;
}
.btn-reset:hover {
  background: rgba(15, 23, 42, 0.1);
  color: #0f172a;
}
.btn-apply {
  flex: none;
  padding: 0.85rem 2rem;
  background: #1a377b;
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
}

/* Hide mobile filter trigger on desktop */
.mobile-filter-trigger {
  display: none;
}

/* ==========================================================================
   MOBILE FILTER MODAL UX
   ========================================================================== */
@media (max-width: 900px) {
  .inventory-layout {
    grid-template-columns: 1fr;
    padding: 0 1rem;
    margin: 0 auto 1.5rem;
  }



  .mobile-only {
    display: flex !important;
  }



  .mobile-filter-trigger {
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: block;
    left: 50%;
    margin-bottom: 0;
    position: fixed;
    right: auto;
    transform: translateX(-50%) translateY(150%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    width: max-content;
    z-index: 950;
  }

  .mobile-filter-trigger.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  body.buy-finder-form-open .mobile-filter-trigger {
    display: none; /* Function: keeps the fixed inventory filter pill from covering the opened buy request form. */
  }

  .btn-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto;
    max-width: calc(100vw - 6rem);
    padding: 0.82rem 1.05rem;
    background: #2374e1;
    border: 1px solid #4f98ff;
    border-radius: 999px;
    font-weight: 700;
    color: #ffffff;
    font-size: 0.96rem;
    box-shadow: 0 14px 30px rgba(22, 88, 190, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  .btn-filter-toggle:hover {
    background: #2f86ff;
    box-shadow: 0 18px 38px rgba(22, 88, 190, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  .btn-filter-toggle:active {
    transform: scale(0.98);
  }

  .filter-badge {
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #1a377b;
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
  }

  /* Function: leaves scroll room behind the fixed mobile filter overlay. */
  .offers-list {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }

  /* Sidebar becomes a Modal */
  .inventory-sidebar {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90vh;
    height: 90dvh;
    max-height: none;
    z-index: 1000;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.2);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 2rem;
  }

  .close-sidebar {
    display: inline-flex;
  }

  .inventory-sidebar.is-open {
    transform: translateY(0);
  }

  .sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
  }
}

/* Backdrop for Modal overlaying body */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
body.modal-open::after {
  opacity: 1;
  pointer-events: auto;
}

.range-field .range-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.range-value {
  font-size: 0.85rem;
  color: #4b5563;
  font-weight: 500;
}

.range-slider {
  position: relative;
  height: 44px;
}

.range-track {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 6px;
  transform: translateY(-50%);
  background: #e5e7eb;
  border-radius: 999px;
  pointer-events: none;
}

.range-track-fill {
  position: absolute;
  height: 100%;
  background: #1a377b;
  border-radius: 999px;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.range-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  background: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.range-thumb:focus,
.range-thumb:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #1a377b;
  box-shadow: 0 2px 8px rgba(26, 55, 123, 0.25);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.range-thumb:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(26, 55, 123, 0.18), 0 2px 8px rgba(26, 55, 123, 0.25);
}

.range-thumb::-webkit-slider-thumb:active {
  transform: scale(1.15);
}

.range-thumb::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border: 0;
  color: transparent;
}

.range-thumb:focus::-webkit-slider-runnable-track,
.range-thumb:focus-visible::-webkit-slider-runnable-track,
.range-thumb:active::-webkit-slider-runnable-track {
  background: transparent;
  border: 0;
  color: transparent;
}

.range-thumb::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #1a377b;
  box-shadow: 0 2px 8px rgba(26, 55, 123, 0.25);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.range-thumb:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(26, 55, 123, 0.18), 0 2px 8px rgba(26, 55, 123, 0.25);
}

.range-thumb::-moz-range-thumb:active {
  transform: scale(1.15);
}

.range-thumb::-moz-range-track {
  background: transparent;
  border: none;
}

.range-thumb::-moz-range-progress,
.range-thumb:focus::-moz-range-track,
.range-thumb:focus-visible::-moz-range-track,
.range-thumb:active::-moz-range-track {
  background: transparent;
  border: none;
}

.filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.filter-actions .btn-secondary,
.filter-actions .btn-primary {
  white-space: nowrap;
}

/* Form styles */

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.form-group {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
  font-size: 1rem;
}

.form-group textarea {
  resize: vertical;
}

.form-group.full-width {
  width: 100%;
}

.submit-btn {
  width: max-content;
  align-self: flex-start;
}

.form-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

/* Modal */
.modal {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--modal-banner-offset, 4.5rem);
  bottom: 0;
  background: rgba(5, 11, 22, 0.65);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  padding: 0 clamp(1.5rem, 4vw, 3.25rem) clamp(1.65rem, 4vw, 3.25rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.modal::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--modal-banner-offset, 4.5rem));
  bottom: 0;
  background: radial-gradient(circle at 25% top, rgba(18, 29, 54, 0.45), rgba(7, 11, 22, 0.85));
  z-index: -1;
  pointer-events: none;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
}

.modal.is-closing {
  opacity: 0;
  pointer-events: none;
}

body.modal-open {
  overflow: hidden;
}

.modal-content {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 20%, rgba(244, 248, 255, 0.92) 100%);
  border-radius: 28px 28px 0 0;
  width: min(100%, var(--offer-modal-max-width, 100%));
  max-width: var(--offer-modal-max-width, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  box-shadow: 0 -10px 60px rgba(8, 19, 40, 0.28);
  position: relative;
  opacity: 0;
  border: 1px solid rgba(109, 127, 185, 0.2);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}

.modal-content::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1024px) {
  .modal {
    padding: 0 clamp(1rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.5rem);
  }
}

@media (max-width: 768px) {
  .modal {
    left: 0;
    right: 0;
    padding: 0;
  }

  .modal-content {
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 64px rgba(8, 19, 40, 0.35);
  }

  .modal-subnav {
    top: calc(env(safe-area-inset-top, 0px) + 3.2rem);
    padding: 0.45rem clamp(1rem, 6vw, 1.4rem) 0.55rem;
  }

  .modal-mobile-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .modal-mobile-actions__price {
    flex: 1 1 100%;
  }
}

.modal.show .modal-content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.modal.is-closing .modal-content {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}

.offer-modal {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.modal-subnav {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 3.6rem);
  z-index: 5;
  padding: 0.5rem clamp(1.5rem, 5vw, 3rem) 0.6rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(236, 242, 255, 0.78));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20, 32, 77, 0.1);
  opacity: 0.8;
}

.modal-subnav__rail {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: none;
}

.modal-subnav__rail::-webkit-scrollbar {
  display: none;
}

.modal-subnav__item {
  flex: 0 0 auto;
  padding: 0.45rem 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(17, 30, 62, 0.08);
  color: rgba(15, 23, 42, 0.7);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.modal-subnav__item:hover {
  background: rgba(26, 55, 123, 0.12);
  color: var(--primary-color);
}

.modal-subnav__item.is-active {
  background: linear-gradient(135deg, rgba(26, 55, 123, 0.95), rgba(46, 94, 206, 0.92));
  color: #ffffff;
  border-color: rgba(26, 55, 123, 0.2);
  box-shadow: 0 12px 28px rgba(26, 55, 123, 0.25);
}

.modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) auto auto;
  grid-template-areas: 'titles price meta';
  align-items: center;
  gap: clamp(0.65rem, 2vw, 1.35rem);
  padding: calc(0.85rem + env(safe-area-inset-top, 0px)) calc(0.85rem + env(safe-area-inset-right, 0px)) 0.45rem clamp(1.5rem, 4vw, 2.75rem);
  background: rgba(255, 255, 255, 0.3);
  position: sticky;
  top: 0;
  z-index: 6;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(20, 32, 77, 0.22);
  box-shadow: 0 18px 42px rgba(13, 23, 54, 0.18);
  opacity: 0.8;
}

.modal-header__titles {
  grid-area: titles;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}

.modal-eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(34, 56, 112, 0.65);
  margin: 0;
}

.modal-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 800;
  margin: 0;
  color: #10162b;
  flex: 1 1 auto;
  min-width: 0;
}

.modal-header__meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: end;
  align-self: start;
}

.modal-header__price {
  grid-area: price;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: #14204d;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
  text-align: right;
  min-width: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.modal-header__price.has-monthly {
  flex-wrap: wrap;
  row-gap: 0.2rem;
  white-space: normal;
}

.modal-header__price-amount {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.modal-header__price-divider {
  font-size: 0.9rem;
  color: rgba(20, 32, 77, 0.5);
}

.modal-header__price-monthly {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: rgba(15, 23, 42, 0.65);
}

.modal-content .close-btn {
  position: static;
  background: rgba(16, 22, 43, 0.08);
  border: 1px solid rgba(16, 22, 43, 0.12);
  color: #10162b;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.modal-content .close-btn:hover {
  background: rgba(16, 22, 43, 0.14);
  transform: scale(1.05);
  color: var(--primary-color);
}

.modal-body {
  padding: 0; /* Remove wrapper padding to allow full-bleed hero */
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Remove the global section margins inside the modal so the cards sit flush. */
.modal-body > section {
  margin-block: 0;
  padding: 2.5rem clamp(1.25rem, 4vw, 2.25rem); /* Add padding directly to sections */
}

.modal-body > .modal-hero {
  padding: 0; /* Let hero be perfectly full-bleed */
}

.modal-mobile-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: none;
  padding: 1rem clamp(1.25rem, 6vw, 2rem) calc(1.1rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(244, 247, 255, 0.96) 45%, rgba(244, 247, 255, 1) 100%);
  border-top: 1px solid rgba(20, 32, 77, 0.08);
  box-shadow: 0 -18px 40px rgba(11, 18, 40, 0.16);
  gap: 1rem;
  align-items: center;
}

.modal-mobile-actions__price {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-weight: 700;
  color: var(--primary-color);
}

.modal-mobile-actions__amount {
  font-size: 1.15rem;
}

.modal-mobile-actions__monthly {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: rgba(15, 23, 42, 0.6);
}

.modal-mobile-actions__buttons {
  display: flex;
  gap: 0.75rem;
  flex: 1;
}

.modal-mobile-actions__buttons .btn-primary,
.modal-mobile-actions__buttons .btn-secondary {
  flex: 1 1 auto;
}

@media (max-width: 768px) {
  .modal-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'titles meta'
      'price price';
    align-items: flex-start;
    gap: clamp(0.6rem, 4vw, 0.85rem);
    padding: calc(0.7rem + env(safe-area-inset-top, 0px)) clamp(1rem, 6vw, 1.6rem) 0.4rem;
  }

  .modal-header__price {
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
    gap: 0.4rem;
  }

  .modal-header__price-monthly {
    font-size: 0.7rem;
    letter-spacing: var(--tracking-label);
  }

  .modal-header__meta {
    align-self: start;
  }

  .modal-body {
    padding: 0 clamp(1rem, 5vw, 1.5rem) calc(clamp(1.25rem, 6vw, 2rem) + env(safe-area-inset-bottom, 0px));
  }
}

/* Offer modal modern design */

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.2vw, 0.8rem);
  font-weight: 700;
  color: #64748b;
  margin: 0 0 1.25rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* Spec Grid Component */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem;
}

.spec-card {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: 16px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.2s ease;
}

.spec-card:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.08);
}

.spec-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.spec-card__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f1824;
  font-family: var(--font-display);
}

/* Premium Form Inputs for Modal */
.contact-form .form-field input {
  background: #f8fafc;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  font-size: 1.05rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form .form-field input:focus {
  background: #ffffff;
  border-color: rgba(26, 55, 123, 0.3);
  box-shadow: 0 0 0 4px rgba(26, 55, 123, 0.1);
}

/* Glowing CTA Buttons */
.modal-mobile-actions__buttons .btn-primary,
.summary-actions__primary,
.contact-form .btn-primary {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
  border-radius: 999px;
  border: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modal-mobile-actions__buttons .btn-primary:hover,
.summary-actions__primary:hover,
.contact-form .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4);
}

.offer-header,
.modal-hero {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1.1rem);
}

.modal-hero__media {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
}

.offer-gallery {
  display: flex;
  flex: 1;
  gap: 0.85rem;
  align-items: stretch;
}

.offer-gallery__primary {
  position: relative;
  flex: 1;
  min-width: 0;
}

.offer-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: clamp(120px, 16vw, 200px);
}

.offer-gallery__thumb {
  position: relative;
  border: none;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #050817;
  box-shadow: 0 16px 36px rgba(11, 18, 40, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  aspect-ratio: 4 / 3;
}

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

.offer-gallery__thumb:not(.is-active) {
  opacity: 0.68;
}

.offer-gallery__thumb:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.offer-gallery__thumb.is-active {
  opacity: 1;
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.35);
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

.offer-gallery__thumb:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.85);
  outline-offset: 2px;
}

.offer-gallery__thumb-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #f9fafc;
  background: rgba(7, 10, 22, 0.72);
  backdrop-filter: blur(4px);
}

.offer-gallery__thumb--more img {
  filter: brightness(0.55);
}

.offer-image {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 52px rgba(11, 18, 40, 0.28);
  background: #070a16;
  aspect-ratio: 16 / 9;
}

.offer-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 10, 22, 0) 60%, rgba(7, 10, 22, 0.55) 100%);
  pointer-events: none;
}

.offer-image__trigger {
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  position: relative;
  color: inherit;
}

.offer-image__trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform 0.6s ease;
}

.offer-image__trigger:hover img {
  transform: scale(1.02);
}

.offer-image__trigger:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: -3px;
}

.offer-image__prompt {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  background: rgba(17, 25, 40, 0.65);
  color: #f9fafc;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.offer-image__count {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(7, 11, 22, 0.55);
  color: #e9efff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}


@media (max-width: 980px) {
  .modal-hero__media {
    flex-direction: column;
  }

  .offer-gallery {
    flex-direction: column;
  }

  .offer-gallery__thumbs {
    flex-direction: row;
    width: auto;
    overflow-x: auto;
    padding: 0.25rem 0;
    scrollbar-width: none;
  }

  .offer-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }

  .offer-gallery__thumb {
    min-width: 5.5rem;
  }
}

.modal-hero__summary {
  display: flex;
  flex-direction: column;
}

.summary-card {
  position: relative;
  background: transparent;
  border-radius: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.summary-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.summary-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(255, 122, 89, 0.15), rgba(255, 122, 89, 0.35));
  color: #c43b1d;
}

.summary-badge--ghost {
  background: rgba(22, 46, 90, 0.12);
  color: #1f3a76;
}

.offer-title {
  font-size: clamp(2.1rem, 4.5vw, 2.85rem);
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  line-height: 1.12;
}

.offer-title strong {
  font-weight: 800;
}

.offer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: rgba(15, 23, 42, 0.66);
  text-transform: uppercase;
}

.offer-price {
  color: var(--primary-color);
  font-weight: 700;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  margin: 0;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}

.summary-stat {
  background: rgba(20, 32, 77, 0.05);
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 0;
}

.summary-stat__label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: rgba(15, 23, 42, 0.5);
  font-weight: 600;
}

.summary-stat__value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0b1328;
}

.summary-actions {
  display: grid;
  gap: 0.65rem;
}

.summary-actions__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.summary-actions__utility {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.summary-actions__primary,
.summary-actions__secondary {
  flex: 1 1 160px;
  justify-content: center;
  font-size: 0.85rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-actions__primary {
  box-shadow: 0 20px 30px rgba(226, 68, 25, 0.22);
}

.summary-actions__primary:hover,
.summary-actions__secondary:hover {
  transform: translateY(-1px);
}

.summary-actions__secondary {
  background: rgba(16, 22, 43, 0.08);
  color: #0f172a;
  border: 1px solid rgba(16, 22, 43, 0.12);
}

.summary-actions__utility .btn-ghost {
  min-width: 0;
}

.summary-actions__favorite.is-active {
  background: rgba(26, 55, 123, 0.18);
  color: var(--primary-color);
  border-color: rgba(26, 55, 123, 0.35);
}

.summary-highlights {
  border-top: 1px solid rgba(20, 32, 77, 0.08);
  padding-top: 0.85rem;
  display: grid;
  gap: 0.5rem;
}

.summary-highlights__title {
  font-size: 0.72rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(20, 32, 77, 0.5);
  margin: 0;
  font-weight: 700;
}

.summary-highlights ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.summary-highlights li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: rgba(15, 23, 42, 0.7);
  line-height: 1.45;
}

.highlight-carousel {
  border-radius: 0;
  padding: clamp(1rem, 3vw, 1.5rem) 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(20, 32, 77, 0.08);
  box-shadow: none;
  display: grid;
  gap: 0.85rem;
}

.highlight-carousel__viewport {
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: none;
}

.highlight-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.highlight-carousel__track {
  display: flex;
  gap: 0.75rem;
}

.highlight-card {
  flex: 0 0 180px;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(26, 55, 123, 0.1);
  background: rgba(20, 32, 77, 0.04);
  text-align: left;
  display: grid;
  gap: 0.35rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(17, 24, 39, 0.14);
}

.highlight-card.is-active {
  background: linear-gradient(145deg, rgba(26, 55, 123, 0.95), rgba(74, 123, 247, 0.88));
  color: #ffffff;
  border-color: rgba(26, 55, 123, 0.5);
  box-shadow: 0 28px 48px rgba(26, 55, 123, 0.3);
}

.highlight-card__index {
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(26, 55, 123, 0.65);
}

.highlight-card.is-active .highlight-card__index {
  color: rgba(255, 255, 255, 0.8);
}

.highlight-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(15, 23, 42, 0.85);
}

.highlight-card.is-active .highlight-card__title {
  color: #ffffff;
}

.highlight-carousel__detail {
  display: grid;
  gap: 0.5rem;
}

.highlight-carousel__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: rgba(26, 55, 123, 0.1);
  color: rgba(26, 55, 123, 0.8);
  font-weight: 700;
}

.highlight-carousel__copy {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.78);
}

.summary-highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: rgba(26, 55, 123, 0.4);
  box-shadow: none;
}


.modal-section {
  background: transparent;
  border-radius: 0;
  padding: clamp(1rem, 3vw, 1.5rem) 0;
  border: none;
  border-top: 1px solid rgba(20, 32, 77, 0.08);
  box-shadow: none;
  margin-bottom: 0;
}

.modal-section + .modal-section {
  margin-top: 0;
}

.details-card table {
  margin-bottom: 0;
}

.description-card .offer-description {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(15, 23, 42, 0.72);
}

.modal-section.contact-card {
  padding: clamp(1rem, 3vw, 1.5rem) 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.contact-card .section-heading {
  margin-bottom: 0.25rem;
}

.contact-details {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.contact-card .contact-form {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.contact-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(20, 32, 77, 0.04);
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  color: #0b1328;
  font-weight: 600;
  font-size: 0.88rem;
  border: none;
  box-shadow: none;
  transition: background 0.2s ease;
}

.contact-line::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff784b, #f5317f);
  box-shadow: 0 0 0 4px rgba(245, 49, 127, 0.15);
}

.contact-line:hover {
  background: rgba(20, 32, 77, 0.07);
}

.contact-form {
  margin: 0;
  display: grid;
  gap: 1rem;
}

.contact-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(11, 19, 40, 0.72);
  letter-spacing: 0.01em;
}

.contact-form input,
.contact-form textarea {
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(14, 27, 56, 0.12);
  background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: rgba(245, 49, 127, 0.45);
  box-shadow: 0 0 0 3px rgba(245, 49, 127, 0.15);
}

.contact-form .btn-primary {
  justify-self: start;
  padding-inline: 1.35rem;
  padding-block: 0.75rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 24px rgba(245, 49, 127, 0.25);
}

.contact-form .btn-primary:hover {
  box-shadow: 0 14px 30px rgba(245, 49, 127, 0.3);
}

.contact-confirm {
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  border-radius: 16px;
  background: rgba(16, 185, 129, 0.12);
  color: #065f46;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 768px) {
  .summary-actions {
    flex-direction: column;
  }

  .summary-actions__primary,
  .summary-actions__secondary {
    width: 100%;
  }

  .modal-section {
    padding: 1rem 0;
  }
}

@media (min-width: 768px) {
  .modal-section.contact-card {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .contact-card .section-heading {
    grid-column: 1 / -1;
    margin-bottom: 0.5rem;
  }

  .contact-card .contact-form {
    align-self: stretch;
  }
}

@media (max-width: 480px) {
  .contact-details {
    padding: 0.5rem;
  }

  .contact-line {
    font-size: 0.95rem;
    padding: 0.55rem 0.75rem;
  }

  .contact-form .form-field input,
  .contact-form .form-field textarea {
    font-size: 0.95rem;
  }
}

.image-viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: transparent !important;
}

.image-viewer--fullscreen {
  gap: 0;
  align-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.image-viewer__stage {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  background: #10131a;
  aspect-ratio: 16 / 9;
  touch-action: pan-y;
  user-select: none;
}

.image-viewer--standard .image-viewer__stage[role="button"] {
  cursor: zoom-in;
}

.image-viewer--standard .image-viewer__stage[role="button"]::after {
  content: 'View gallery';
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  background: rgba(7, 10, 22, 0.62);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

.image-viewer--fullscreen .image-viewer__stage {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overscroll-behavior: none; /* Function: prevents vertical scroll chaining while dragging or pinching the fullscreen image. */
  cursor: zoom-in;
}

.image-viewer--fullscreen .image-viewer__stage--zoomed {
  cursor: grab;
}

.image-viewer--fullscreen .image-viewer__stage--panning {
  cursor: grabbing;
}

.image-viewer__track {
  display: flex;
  width: 100%;
  height: 100%;
}

.image-viewer--fullscreen .image-viewer__track {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
}

.image-viewer__slide {
  flex: 0 0 100%;
}

.image-viewer--fullscreen .image-viewer__slide {
  flex: 0 0 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.image-viewer--fullscreen .image-viewer__slide img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  user-select: none;
}

.image-viewer__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.image-viewer__nav:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: translateY(-50%) scale(1.05);
}

.image-viewer__nav--prev {
  left: 0.75rem;
}

.image-viewer__nav--next {
  right: 0.75rem;
}

.image-viewer--fullscreen .image-viewer__nav {
  width: 3rem;
  height: 3rem;
  font-size: 1.75rem;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.image-viewer__zoom-controls {
  position: absolute;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(7, 10, 22, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.image-viewer--fullscreen .image-viewer__zoom-controls {
  bottom: max(5.75rem, calc(env(safe-area-inset-bottom) + 5.5rem));
}

.image-viewer__zoom-btn {
  min-width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.image-viewer__zoom-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.image-viewer__zoom-btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.image-viewer__zoom-btn--reset {
  min-width: 3.75rem;
  padding: 0 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.image-viewer__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.image-viewer--fullscreen .image-viewer__dots {
  display: none;
}

.image-viewer__thumbs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.5rem 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Hide scrollbar for a cleaner modern look */
  background: transparent !important;
}

.image-viewer__thumbs::-webkit-scrollbar {
  display: none;
}

.image-viewer__thumb-strip {
  align-items: center;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
  background: transparent !important;
}

.image-viewer--standard .image-viewer__thumbs {
  justify-content: flex-start;
  overflow-x: auto;
  padding: 0.75rem 0.25rem 0.2rem;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.image-viewer--standard .image-viewer__thumb {
  flex: 0 0 auto;
  width: clamp(4.25rem, 14vw, 5.5rem);
  height: clamp(3rem, 10vw, 3.8rem);
  background: transparent;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  scroll-snap-align: start;
}

.image-viewer--standard .image-viewer__thumb:hover {
  background: transparent;
}

.image-viewer--standard .image-viewer__thumb.is-active {
  border-color: #1a377b;
  background: transparent;
  box-shadow: 0 12px 26px rgba(26, 55, 123, 0.2);
}

.image-viewer--fullscreen .image-viewer__thumb-strip {
  position: absolute;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 5;
  width: min(calc(100vw - 2rem), 34rem);
  max-width: calc(100% - 2rem);
  overflow-x: auto;
  overflow-y: hidden; /* Function: keeps the fullscreen thumbnail rail from creating vertical scroll. */
  overscroll-behavior-x: contain; /* Function: keeps horizontal thumbnail swipes inside the rail. */
  overscroll-behavior-y: none; /* Function: blocks vertical scroll chaining from thumbnail gestures. */
  justify-content: flex-start;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(7, 10, 22, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  scrollbar-width: thin;
  transform: translateX(-50%);
}

.image-viewer--fullscreen .image-viewer__thumbs {
  background: transparent;
  border: 0;
  box-shadow: none;
  flex: 1 1 auto;
  justify-content: flex-start;
  max-width: none;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden; /* Function: limits fullscreen thumbnails to horizontal scrolling. */
  overscroll-behavior-x: contain; /* Function: prevents horizontal thumbnail swipes from moving the page. */
  overscroll-behavior-y: none; /* Function: disables vertical scroll handoff from the thumbnail row. */
  padding: 0;
  position: static;
  scrollbar-width: thin;
  transform: none;
  width: auto;
  -webkit-overflow-scrolling: touch;
}

.image-viewer__thumb-scroll {
  align-items: center;
  background: rgba(15, 23, 42, 0.78);
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.35rem;
  font-weight: 800;
  height: 2rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
  width: 2rem;
}

.image-viewer__thumb-scroll:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.92);
  transform: translateY(-1px);
}

.image-viewer__thumb-scroll:disabled {
  cursor: default;
  opacity: 0.32;
}

.image-viewer__thumbs::-webkit-scrollbar {
  height: 6px;
}

.image-viewer__thumbs::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 9999px;
}

.image-viewer__thumb {
  position: relative;
  width: 5rem;
  height: 3.5rem;
  flex: 0 0 auto; /* PREVENTS THUMBNAILS FROM MUSHING TOGETHER */
  scroll-snap-align: center;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  background: rgba(15, 23, 42, 0.55);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, opacity 0.2s ease, box-shadow 0.25s ease;
  opacity: 0.6; /* Unselected state */
}

.image-viewer__thumb:hover {
  transform: translateY(-2px);
  opacity: 0.9;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.2);
}

.image-viewer__thumb.is-active {
  border-color: var(--primary-color);
  opacity: 1;
  background: transparent;
  box-shadow: 0 8px 24px rgba(26, 55, 123, 0.3);
  transform: scale(1.05);
}

.image-viewer__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.image-viewer__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 9999px;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.image-viewer__dot.is-active {
  background: var(--primary-color);
  transform: scale(1.15);
}

.image-viewer--fullscreen .image-viewer__dot {
  background: rgba(255, 255, 255, 0.35);
}

.image-viewer--fullscreen .image-viewer__dot.is-active {
  background: #fff;
}

.image-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 22, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden; /* Function: ensures the fullscreen overlay itself cannot vertically scroll. */
  overscroll-behavior: none; /* Function: stops mobile viewport bounce while the gallery is open. */
  touch-action: none; /* Function: keeps touch gestures routed to the viewer instead of page scrolling. */
}

.image-viewer-overlay__inner {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  overflow: hidden;
  overscroll-behavior: none; /* Function: keeps fullscreen viewer gestures from chaining to the page. */
}

.image-viewer-overlay__topbar {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
  right: max(4.75rem, calc(env(safe-area-inset-right) + 4.25rem));
  z-index: 6;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  pointer-events: none;
}

.image-viewer-overlay__hint {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
}

.image-viewer-overlay__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.image-viewer-overlay__media .image-viewer {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.viewer-overlay__close {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: none;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 42px rgba(15, 23, 42, 0.4);
  z-index: 5;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.viewer-overlay__close:hover {
  background: rgba(15, 23, 42, 0.95);
  transform: scale(1.05);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.5);
}

.image-viewer__counter {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.08em;
}

@media (max-width: 640px) {
  .image-viewer--standard .image-viewer__stage[role="button"]::after {
    right: 0.75rem;
    bottom: 0.75rem;
    font-size: 0.65rem;
    padding: 0.38rem 0.65rem;
  }

  .image-viewer-overlay {
    padding: 0;
  }

  .image-viewer-overlay__inner {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100vh;
  }

  .image-viewer-overlay__topbar {
    top: max(0.75rem, env(safe-area-inset-top));
    left: max(0.75rem, env(safe-area-inset-left));
    right: max(4rem, calc(env(safe-area-inset-right) + 3.5rem));
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
  }

  .image-viewer-overlay__hint {
    font-size: 0.66rem;
    text-align: right;
  }

  .image-viewer--fullscreen .image-viewer__nav {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
  }

  .image-viewer__zoom-controls {
    bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  .image-viewer--fullscreen .image-viewer__zoom-controls {
    bottom: max(5.25rem, calc(env(safe-area-inset-bottom) + 5rem));
  }

  .image-viewer--fullscreen .image-viewer__thumb-strip {
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    width: min(calc(100vw - 1.5rem), 24rem);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .image-viewer-overlay__topbar {
    top: max(0.5rem, env(safe-area-inset-top));
  }

  .viewer-overlay__close {
    top: max(0.5rem, env(safe-area-inset-top));
    right: max(0.5rem, env(safe-area-inset-right));
  }

  .image-viewer-overlay__hint {
    display: none;
  }

  .image-viewer--fullscreen .image-viewer__thumb-strip {
    right: max(0.5rem, env(safe-area-inset-right));
    left: auto;
    bottom: 50%;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 5.5rem);
    flex-direction: column;
    transform: translateY(50%);
  }

  .image-viewer--fullscreen .image-viewer__thumb-strip {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .image-viewer--fullscreen .image-viewer__thumbs {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden; /* Function: disables vertical thumbnail scrolling in short landscape fullscreen layouts. */
  }

  .image-viewer__zoom-controls {
    bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  .image-viewer--fullscreen .image-viewer__zoom-controls {
    bottom: max(0.5rem, env(safe-area-inset-bottom));
  }
}

.offer-title strong {
  font-weight: 800;
}

.offer-meta {
  font-size: 0.95rem;
  color: rgba(15, 23, 42, 0.66);
  margin: 0;
}

.offer-price {
  color: var(--primary-color);
  font-weight: 700;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  margin: 0;
}

.offer-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(26, 55, 123, 0.1);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.85rem;
  background: rgba(20, 32, 77, 0.02);
}

.offer-table td,
.offer-table th {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid rgba(26, 55, 123, 0.06);
  color: rgba(23, 36, 77, 0.88);
}

.offer-table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.7);
}

.offer-table tbody tr:hover {
  background: rgba(219, 169, 78, 0.12);
}

.offer-table th {
  background: rgba(26, 55, 123, 0.1);
  font-weight: 600;
  width: 38%;
  text-align: left;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(26, 55, 123, 0.9);
}

.offer-description {
  margin: 0;
}

.contact-line:last-of-type {
  margin-bottom: 0;
}

/* legacy styles trimmed in favour of the bespoke modal cards above */

/* Footer */
.footer {
  text-align: center;
  padding: 1rem;
  background-color: var(--bg-color);
  border-top: 1px solid #eaeaea;
  margin-top: 2rem;
}

.footer p {
  color: #777;
  font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
  .filter-bar {
    padding: 1rem;
    gap: 1rem;
  }
  .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .filter-sort {
    width: 100%;
    justify-content: space-between;
  }
  .filter-sort select {
    flex: 1;
  }
  .filter-grid {
    grid-template-columns: 1fr;
  }
  .filter-actions {
    justify-content: stretch;
  }
  .filter-actions .btn-secondary,
  .filter-actions .btn-primary {
    flex: 1 1 auto;
    text-align: center;
  }
  .form-row {
    flex-direction: column;
  }

  /* On smaller screens reduce the header height and logo size so the
     navigation does not dominate the viewport. */
  .navbar { box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  background: linear-gradient(180deg, #1a377b 0%, #274c8c 100%);

  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0.5rem 1.5rem;  /* 15-16px vertically */
}
  .logo {
  margin: 0.5rem auto;  /* 8px top/bottom */
}
  .logo-car {
    height: 3.5rem;
    margin-bottom: -0.3rem;
    left: -180px;
    opacity: 0;
    animation: drive-car 1.4s ease-out forwards;
    padding: 0.3rem 0.6rem;
    background: linear-gradient(180deg, #6da8c9 0%, #81c3d7 100%);
    border-radius: 50px;
  }
}

/*
 * Logo styling and animations
 *
 * The DriveHaus logo is composed of a text portion and a car icon.
 * Only the car icon is animated on page load to slide into place,
 * leaving the text stationary.  To match the branding the logo
 * appears larger and stacked vertically: the car icon sits above
 * the “DriveHaus” text.  The colours mirror the original logo: the
 * word “Next” uses the primary red and the word “Ride” uses the
 * secondary blue.  The car slides downward from off‑screen into
 * its final position above the text.
 */

/*
 * Logo layout and animation
 *
 * The logo consists of a text element (“DriveHaus”) and a stylised car
 * icon.  The icon is absolutely positioned above the text and slides
 * horizontally from far off‑screen left into a centred position over
 * the logo.  The text uses our primary and secondary colours to mirror
 * the original branding.  Increasing the font size ensures the logo
 * makes a statement within the enlarged header.
 */
/*
 * Logo container
 *
 * The anchor containing the logo uses a vertical flex layout so that the
 * stylised car sits above the “DriveHaus” text.  Flexbox makes it easy
 * to centre both horizontally and vertically within the enlarged header.
 */
.logo {
  margin: 0.5rem auto;  /* 8px top/bottom */
}

/* Wrapper to layer the animated car above the text.  Using
   position: relative allows the car to be absolutely positioned
   relative to the wrapper while the text remains in normal flow. */
.logo-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0;  /* 8px top and bottom */
  margin: 0;
}

.logo-wrapper .logo-text {
  position: relative;
  z-index: 2;
}

.logo-wrapper .animated-car {
  /* Remove absolute positioning here; the car-layer will handle positioning */
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin: 0;
}

/* Layer that positions the animated car above the text within the logo.
   This wrapper is absolutely positioned relative to the logo wrapper,
   with its own width and height to contain the animation. */
.car-layer {
  position: absolute;
  /* Raise the layer higher above the text to accommodate a larger car */
  top: -6rem;
  left: 50%;
  transform: translateX(-50%);
  /* Use a wider aspect ratio to match the source graphic (approx 2.3:1) */
  /* Increase width and height for a more prominent animated car */
  width: 13rem;
  height: 5.5rem;
  pointer-events: none; /* Prevent interference with link clicks */
}

/* ---------- Animated Car Logo ---------- */
/* Container for the entire car animation.  It starts off to the left
   and slides into place on page load.  The width and height scale
   relative to the header so the car remains prominent on all pages. */
.animated-car {
  position: relative;
  /* Match the enlarged dimensions of the car layer */
  width: 13rem;
  height: 5.5rem;
  overflow: visible;
  /* The car is contained within an absolute .car-layer, so no margins or self alignment needed */
  margin: 0;
  display: block;
  transform: translateX(-200%);
  opacity: 0;
  animation: drive-in-car 1.8s ease-out forwards;
  /* remove debug outline for final design */
}

/* Base container for the car – used to group the body, roof, wheels
   and exhaust puffs.  Relative positioning allows children to be
   absolutely positioned inside. */
.animated-car .car {
  position: relative;
  width: 100%;
  height: 100%;

  /* Display a cleaned version of the car artwork (without wheels or background).
     Using a transparent PNG ensures there is no white box behind the car body.
     The wheels overlay on top of this image and spin only while the car
     slides into place. */
  background-image: url('assets/car_body_new.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Stylised roof of the car: a curved top with a flat bottom.  The
   border-bottom is removed so that the roof blends seamlessly with
   the body below. */
.car-top {
  display: none;
}

/* Main body of the car: a rounded rectangle aligned beneath the roof. */
.car-body {
  display: none;
}

/* Wheels: recreate the semi‑circular tyre arches from the original
   sketch.  Instead of full circles with a coloured centre, each wheel
   is represented by a circular border where only the bottom edge is
   coloured.  As the element rotates the visible arc moves around
   creating the impression of spinning tyres while staying true to
   the uploaded drawing. */
.wheel {
  position: absolute;
  /* Increase the wheel size and border so that the spinning tyres fully
     cover the static wheel arches from the source graphic.  The bottom
     portion of the border is coloured to mimic a tyre, while the rest
     remains transparent. */
  /* Set the dimensions of each wheel container.  The wheel arc image will
     be centred inside this container and spin around its centre. */
  width: 3rem;
  height: 3rem;
  bottom: -1rem;
  /* Use the extracted blue semi‑circular wheel arc as the background.  The
     image is contained within the square container so it isn’t distorted. */
  background-image: url('assets/wheel_arc.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Spin the wheels a few times as the car moves into place, then stop. */
  animation: wheel-spin 0.8s linear 5;
  /* Raise the wheels above the car body so they remain visible */
  z-index: 2;
}
.left-wheel {
  /* Position the left wheel relative to the car image */
  /* Reposition the wheels slightly closer to the centre to better align
     with the cleaned car body. */
  /* Adjust the horizontal position of the left wheel for the larger size */
  left: 1.5rem;
}
.right-wheel {
  /* Position the right wheel relative to the car image */
  /* Adjust the horizontal position of the right wheel for the larger size */
  right: 1.5rem;
}

/* Exhaust smoke puffs that animate from the tailpipe.  Each puff
   scales and moves left/upwards while fading out, creating a
   continuous trail. */
.exhaust {
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  bottom: 0.8rem;
  left: -0.6rem;
  /* Puff three times as the car drives in, then stop emitting smoke. */
  animation: exhaust-puff 1.4s ease-out 3;

  /* Retain the final state of the exhaust animation so that puffs
     disappear completely once the animation finishes.  Without this
     property the puffs could remain visible after their last frame. */
  animation-fill-mode: forwards;

  /* Ensure exhaust puffs appear above the bottom mask */
  z-index: 2;
}
.exhaust:nth-of-type(1) {
  animation-delay: 0s;
}
.exhaust:nth-of-type(2) {
  animation-delay: 0.4s;
}
.exhaust:nth-of-type(3) {
  animation-delay: 0.8s;
}

/* Mask element placed at the bottom of the car container to hide the
   original static wheel arches from the source artwork.  It inherits
   the header gradient to blend seamlessly with the navbar and page
   background.  Because it sits inside the `.car` container but below
   the wheels and exhaust (thanks to DOM order), it effectively
   covers any unwanted details without affecting the animated parts. */

/* Wheel spinning animation */
/* wheel-spin removed */
  to {
    transform: rotate(360deg);
  }
}

/* Exhaust puff animation: travel left/upwards and fade out */
@keyframes exhaust-puff {
  0% {
    transform: translateX(0) translateY(0) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translateX(-2rem) translateY(-1rem) scale(1.3);
    opacity: 0;
  }
}

/* Custom animation for the new animated car.  The container starts
   far off to the left and fades in as it slides into place. */
@keyframes drive-in-car {
  0% {
    transform: translateX(-200%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.logo-text {
  display: inline-flex;
  line-height: 1;
}

.logo-text .next {
  /* Use the brand secondary colour for the word “Next” */
  color: var(--secondary-color);
}

.logo-text .ride {
  /* Use the brand primary colour for the word “Ride” */
  color: var(--primary-color);
}

/*
 * Car icon
 *
 * When the page loads the car appears off to the left and slides
 * horizontally into its final centred position above the text.  The
 * mix‑blend‑mode merges the image’s blue background with the header
 * gradient.  Brightness and contrast tweaks maintain the clarity of
 * the white outline and dark wheels.  A negative margin pulls the car
 * slightly down so it overlaps the text organically.
 */
.logo-car {
  position: relative;
  height: 5rem;
  width: auto;
  margin-bottom: -0.5rem;
  /* Start offset to the left so the car drives into position */
  opacity: 0;
  animation: drive-car 1.4s ease-out forwards;
  mix-blend-mode: multiply;
  filter: brightness(1.2) contrast(1.1);
  transform: translateX(-220px);

  /* Embed the car in a pill shaped container with the same gradient as
     the header.  This hides any remaining background in the cropped
     image and prevents a harsh rectangular outline from appearing. */
  padding: 0.4rem 0.8rem;
  background: linear-gradient(180deg, #6da8c9 0%, #81c3d7 100%);
  border-radius: 50px;
}

@keyframes drive-car {
  0% {
    /* Begin far to the left outside of the visible area */
    opacity: 0;
    transform: translateX(-220px);
  }
  100% {
    /* End aligned with the text, fully visible */
    opacity: 1;
    transform: translateX(0);
  }
}

/* Trade‑in value output styling */
.trade-in-output {
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--secondary-color);
  margin-top: 1rem;
}

/*
 * Fade‑in and slide‑up animations
 *
 * To give the site a more fluid and professional feel, many of the
 * primary elements animate into view as they appear in the viewport.
 * The animation lifts the element from slightly below its final
 * position while fading in.  Delays are staggered on repeated items
 * (such as feature cards or offer cards) using nth‑child selectors.
 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply the fade‑in animation to hero content */
.hero-content {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

/* Feature items animate sequentially */
.feature-grid > .feature-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}
.feature-grid > .feature-item:nth-child(1) { animation-delay: 0.2s; }
.feature-grid > .feature-item:nth-child(2) { animation-delay: 0.3s; }
.feature-grid > .feature-item:nth-child(3) { animation-delay: 0.4s; }

.feature-grid > .feature-item.is-tilting {
  transform: perspective(900px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) translate3d(0,0,0);
}

/* Offer cards on the offers page also animate */
.offers-grid > .offer-card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}
.offers-grid > .offer-card:nth-child(1) { animation-delay: 0.2s; }
.offers-grid > .offer-card:nth-child(2) { animation-delay: 0.3s; }
.offers-grid > .offer-card:nth-child(3) { animation-delay: 0.4s; }
/* apply a default delay to subsequent cards to create a cascade */


/* Align nav links to the right in the header */
.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.nav-links {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.nav-links .button {
  padding: 0.5rem 1rem;
  background-color: var(--secondary-color);
  color: white;
  border-radius: 999px;
  text-decoration: none;
}

.nav-links .button:hover {
  background-color: var(--secondary-color-hover);
}


.logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}

.logo {
  margin: 0;
  padding: 0;
}

.navbar-content {
  padding: 0 1rem;
}



/* =======================
   DriveHaus Modern Theme Overrides
   ======================= */
:root {
  --primary-color: #003366;            /* Deep Navy */
  --primary-color-hover: #00264d;
  --secondary-color: #FBB649;          /* Warm Gold (Accent) */
  --secondary-color-hover: #E0A53E;
  --text-color: #1a1a1a;               /* Dark neutral for readability */
  --light-bg: #ffffff;
  --bg-color: #F5F7FA;                 /* Cool light gray background */
  --muted-text: #5A6B7B;
  --border-color: #E6EAF0;
  --accent-blue-1: #3FB9FF;            /* Optional gradient accent */
  --accent-blue-2: #0077CC;
}

/* Typography */
html, body {
  font-family: var(--font-body);
  color: var(--text-color);
  background: var(--bg-color);
}

/* Removed legacy navbar overrides */

/* Hero */
.hero, .hero-section {
  background: linear-gradient(180deg, #ffffff 0%, #F7F9FC 100%);
  color: #0f1824;
  padding: 3rem 1rem;
}
.hero .hero-inner, .hero-section .hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 2rem;
}
.hero h1, .hero-section h1 {
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0 0 0.75rem 0;
}
.hero p, .hero-section p {
  color: var(--muted-text);
  font-size: 1.05rem;
}
.cta-row { display: flex; gap: 0.8rem; margin-top: 1rem; }
.btn-primary {
  background: var(--secondary-color);
  color: #0f0f0f;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 99px;
  padding: 0.8rem 1.2rem;
  font-weight: 700;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--secondary-color-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } }

.finance-btn {
  min-height: 52px;
  border-radius: 99px;
  font: 700 1.05rem/1.2 var(--font-body, "Inter", sans-serif);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  text-decoration: none;
  border: 1px solid transparent;
}
.finance-btn:active {
  transform: translateY(1px);
}
.finance-btn--primary {
  color: #ffffff;
  background: var(--finance-brand, #1a377b);
  border: 0;
  box-shadow: none;
}
.finance-btn--primary:hover:not(:disabled) {
  background-color: #244a91;
  box-shadow: 0 4px 12px rgba(26, 55, 123, 0.2);
  transform: translateY(-2px);
  filter: none;
}
.finance-btn--primary:disabled {
  cursor: wait;
  opacity: 0.72;
}

/* Removed cyan button overrides to match primary brand aesthetics */

.btn-secondary {
  background: #ffffff;
  color: var(--primary-color);
  border: 1px solid var(--border-color);
  border-radius: 99px;
  padding: 0.8rem 1.2rem;
  font-weight: 700;
}
.btn-secondary:hover { background: #f9fafb; }

/* Cards (offers, listings) */
.card, .vehicle-card, .offer-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  box-shadow: none; /* Removed heavy resting shadow for flat modern aesthetic */
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.card:hover, .vehicle-card:hover, .offer-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1), 0 8px 24px rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.12);
}
.card h3, .vehicle-card h3, .offer-card h3 { color: #0f1824; }
.card .meta, .vehicle-card .meta, .offer-card .meta { color: #64748b; }

/* Forms */
input[type="text"], input[type="email"], input[type="number"], select, textarea {
  background: #f8fafc; /* Soft background */
  border: 1px solid transparent; /* Invisible border at rest */
  border-radius: 12px;
  padding: 0.8rem 1rem;
  color: #0f1824;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px; /* Prevent iOS Safari zoom on focus */
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  background: #ffffff; /* Turns white on focus */
  border-color: rgba(26, 55, 123, 0.4);
  box-shadow: 0 0 0 4px rgba(26, 55, 123, 0.1);
}

input[type="range"],
input[type="range"]:focus,
input[type="range"]:focus-visible,
input[type="range"]:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Footer */
footer { background: #ffffff; border-top: 1px solid var(--border-color); color: #44556b; }
footer a { color: var(--primary-color); }



/* Trust bar integrated into the How It Works section. */
.trustbar {
  margin: 0 0 2.75rem;
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 1;
}

.trustbar .trustbar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(15, 23, 36, 0.06), 0 0 0 1px rgba(15, 23, 36, 0.04);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden; /* For rounded corners */
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: #ffffff;
  border: none;
  border-right: 1px solid #f3f4f6;
  transition: background 0.2s ease, transform 0.2s ease;
}

.trust-item:hover {
  background: #f8f9fb;
}

.trust-item:last-child {
  border-right: none;
}

.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  color: #0f1824;
  background: #f4f5f7;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

.trust-item:hover .trust-icon {
  background: #FBB649;
  transform: scale(1.05);
}

.trust-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.trust-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: #0f1824;
  letter-spacing: -0.01em;
  margin-bottom: 0.15rem;
}

.trust-sub {
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 500;
}


@media (max-width: 900px) {
  .trustbar { margin-bottom: 2.5rem; }
  .trustbar .trustbar-inner {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 0.75rem;
  }
  .trust-item:nth-child(2) { border-right: none; }
  .trust-item:nth-child(1),
  .trust-item:nth-child(2) { border-bottom: 1px solid #f3f4f6; }
}

@media (max-width: 520px) {
  .trustbar { margin-bottom: 2rem; }
  .trustbar .trustbar-inner {
    grid-template-columns: 1fr;
    margin: 0 0.5rem;
    border-radius: 12px;
  }
  .trust-item {
    border-right: none;
    border-bottom: 1px solid #f3f4f6;
    padding: 1.25rem 1.5rem;
  }
  .trust-item:last-child { border-bottom: none; }
}

/* Sell Page CTA Variant */
.btn-cta-sell {
  background: linear-gradient(180deg, var(--secondary-color), var(--secondary-color-hover));
  color: #0d0d0d;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 28px rgba(251, 182, 73, 0.25);
}
.btn-cta-sell:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(251, 182, 73, 0.35);
}

/* Dark Footer */
.footer-dark { background: #06163D; color: #e6edf5; margin-top: 2rem; }
.footer-dark a { color: #dbe4ff; text-decoration: none; }
.footer-dark a:hover { text-decoration: underline; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 2rem 1rem; display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 1.5rem; }
.footer-brand { font-weight: 800; font-size: 1.4rem; margin-bottom: 0.4rem; }
.footer-title { font-weight: 700; margin-bottom: 0.6rem; color: #f3f6fb; }
.footer-desc { color: #c5d1e1; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.footer-showroom .showroom-details { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
.footer-showroom .showroom-icon { display: flex; margin-top: 0.2rem; color: #a1b8d6; }
.footer-showroom address { font-style: normal; color: #c5d1e1; line-height: 1.6; }
.footer-contact .footer-contact-content { display: grid; gap: 0.6rem; }
.footer-contact .contact-intro { color: #c5d1e1; margin-bottom: 1.5rem; line-height: 1.6; }
.footer-contact .contact-list { display: grid; gap: 0.4rem; }
.footer-contact .contact-item { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; }
.footer-contact .contact-icon { display: flex; margin-top: 0.2rem; color: #a1b8d6; }
.footer-contact .contact-label { font-weight: 600; color: #f0f4ff; letter-spacing: 0.01em; margin-bottom: 0.15rem; }
.footer-contact .contact-details address { font-style: normal; color: #c5d1e1; line-height: 1.6; }
.footer-contact .contact-text { color: #c5d1e1; margin: 0; }
.footer-contact .contact-link { color: #dbe4ff; font-weight: 600; text-decoration: none; }
.footer-contact .contact-link:hover,
.footer-contact .contact-link:focus-visible { text-decoration: underline; }
.footer-contact .contact-map iframe { width: 100%; min-height: 260px; border: 0; border-radius: 0.75rem; box-shadow: 0 20px 45px rgba(8, 24, 68, 0.28); }
.footer-contact .contact-map iframe:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
@media (min-width: 768px) {
  .footer-contact .footer-contact-content { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-contact .contact-map iframe { min-height: 240px; }
}
@media (max-width: 767px) {
  .footer-contact .footer-contact-content { grid-template-columns: 1fr; gap: 1.25rem; }
  .footer-contact .contact-map iframe { min-height: 240px; }
}
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 0.9rem 1rem; font-size: 0.95rem; color: #c5d1e1; }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-inner { grid-template-columns: 1fr; } }


/* Header car animation (modern, subtle) */
.logo-car-icon {
  transform: translateX(calc(-50vw));
  opacity: 0;

  animation: car-enter 1.1s cubic-bezier(.2,.9,.25,1) forwards;
  will-change: transform, opacity, filter;
}

@keyframes car-enter {
  0% {
    transform: translateX(calc(-50vw));
    opacity: 0;
    filter: blur(2px);
  }
  80% {
    transform: translateX(6px);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .logo-car-icon {
    transform: none;
    opacity: 1;

    animation: none;
  }
}



/* --- Header car wheel spin --- */
.car-wrap { position: relative; display: inline-block; }
.car-wrap .wheel {
  position: absolute;
  width: 12px;
  height: 12px;
  background-image: url('assets/wheel_arc.png');
  background-size: contain;
  background-repeat: no-repeat;
  bottom: -1px;
  opacity: 0.9;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.25));
  animation: wheel-spin 0.22s linear 0s 6 both; /* ~1.3s total, synced with car-enter ~1.1s */
}
.car-wrap .wheel-front { left: 24px; }
.car-wrap .wheel-rear { left: 8px; }

/* wheel-spin removed */
  100% { transform: rotate(360deg); }
}

/* Scale wheel positions with car size */
.logo-car-icon { width: 42px; height: auto; } /* slightly larger for visibility */
@media (min-width: 900px) {
  .logo-car-icon { width: 48px; }
  .car-wrap .wheel { width: 14px; height: 14px; bottom: -1px; }
  .car-wrap .wheel-front { left: 24px; }
  .car-wrap .wheel-rear { left: 8px; }
}

/* Reduced motion: disable slide + spin */
@media (prefers-reduced-motion: reduce) {
  .car-wrap .wheel { animation: none; opacity: 0.85; }
}
/* --- End wheel spin --- */



/* --- Car contrast badge behind the white car --- */
.car-wrap { position: relative; display: inline-block; z-index: 0; }

/* Scale badge with larger logo sizes */
@media (min-width: 900px) {

}

/* Add a subtle outline so white car edges read on white */
.logo-car-icon {

}



/* --- Subtle oval under the car for contrast (no solid badge) --- */
.car-wrap { position: relative; display: inline-flex; align-items: center; }

@media (min-width: 900px) {

}

/* Softer outline so the white strokes still read on white */
.logo-car-icon {

}



/* Balance spacing between car icon and wordmark */
.logo-block { gap: 0.55rem; }

/* Improve wordmark contrast on dark header */
.navbar .logo-text .ride { color: #eaf2ff; }
.navbar .logo-text .next { color: #FBB649; }

/* Size the DriveHaus logo to fit the header banner with a small margin. */
.navbar .logo-car-icon {
  height: clamp(2.46rem, 4.73vw, 3.02rem);
  width: auto;
  margin-block: 0.05rem;
  transform: none;
  opacity: 1;
  filter: none;
  animation: none;
  will-change: auto;
}


/* Disable header wheel elements entirely */
.car-wrap .wheel { display: none !important; animation: none !important; }


/* Remove accidental gaps under header and give it a subtle pop */
main > section:first-child { margin-top: 0; }
.hero, .hero-section { margin-top: 0; border-top: none; }



/* --- Compact, interactive hero --- */
.hero { height: min(52vh, 560px); min-height: 420px; }
.hero .hero-overlay {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.1) 100%);
  backdrop-filter: blur(2px);
}
.hero-grid { max-width: var(--max-width); margin: 0 auto; padding: 1.2rem; display: grid; grid-template-columns: 1.2fr; justify-items: start; text-align: left; }
.hero-copy { max-width: 560px; }
.hero-copy h1 { color: #ffffff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.hero-copy p { color: #e2e8f0; }

/* Hero action buttons */
.hero-actions {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

@media (max-width: 880px) {
  .hero { height: min(60vh, 540px); min-height: 420px; }
}


/* === Dramatic Press-in effect for top nav (Home / Buy / Sell) === */
.nav-links li a {
  transition: transform 80ms ease, box-shadow 80ms ease, background-color 80ms ease;
  transform-origin: center;
}

.nav-links li a:active,
.nav-links li a.is-pressed {
  transform: translateY(4px) scale(0.90);
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.35);
  background: linear-gradient(145deg, #ffcb4c, #ff9f1c) !important;
  color: #fff !important;
}

/* More dramatic hover lift to contrast with press */
.nav-links li a:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 -1px 3px rgba(255,255,255,0.25);
  background: linear-gradient(145deg, #ffe27a, var(--secondary-color)) !important;
}

/* Keyboard focus treatment */
.nav-links li a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,200,0,.6);
  transform: translateY(-2px) scale(1.04);
}




/* === Stronger, more vibrant press-in for top nav === */
.nav-links li a{
  position: relative;
  overflow: hidden; /* for the flash */
  transition: transform 90ms cubic-bezier(.2,.8,.2,1), box-shadow 90ms ease, background-color 90ms ease;
  transform-origin: center;
}

/* Hover lift is a bit higher so the contrast with press is dramatic */
.nav-links li a:hover{
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 28px rgba(0,0,0,.15);
}

/* Pressed state: really sinks + saturates */
.nav-links li a:active,
.nav-links li a.is-pressed{
  transform: translateY(3px) scale(0.90);
  box-shadow: inset 0 6px 16px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.3);
  filter: saturate(1.25) brightness(1.05);
  background: linear-gradient(145deg, var(--secondary-color-hover), var(--secondary-color));
}

/* Radial flash highlight (click ripple-lite) */
.nav-links li a::after{
  content:"";
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--press-x,50%) var(--press-y,50%), rgba(255,255,255,.5), rgba(255,255,255,0) 60%);
  opacity:0;
  transform: scale(0.9);
  transition: opacity 90ms ease, transform 90ms ease;
  pointer-events:none;
}

.nav-links li a:active::after,
.nav-links li a.is-pressed::after{
  opacity:.9;
  transform: scale(1);
}

/* Focus ring still accessible */
.nav-links li a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.45), 0 10px 24px rgba(0,0,0,.18);
  transform: translateY(-2px) scale(1.02);
}




/* === Research-informed Press Interaction v3 ===
   Goals:
   - Clearly noticeable press with tight timings (down fast, up slightly slower)
   - No layout shift; transform-only.
   - Strong contrast between hover lift and press sink.
   - Accessible: focus-visible ring; respects prefers-reduced-motion.
*/
:root{
  --press-scale: 0.92;        /* substantial but tasteful */
  --press-translate: 3px;      /* physical 'thunk' */
  --hover-scale: 1.02;         /* small lift to prime the press */
  --hover-translate: -2px;
  --press-in-ms: 80ms;         /* quick press-in */
  --press-out-ms: 160ms;       /* slightly longer release for natural feel */
  --press-shadow-inset: inset 0 8px 18px rgba(0,0,0,.35);
  --press-shadow-drop: 0 6px 14px rgba(0,0,0,.28);
  --hover-shadow: 0 14px 28px rgba(0,0,0,.16);
  --focus-ring: 0 0 0 3px rgba(59,130,246,.5);
}

/* Base link prep */
.nav-links li a{
  position: relative;
  border-radius: 999px;
  will-change: auto;
  transform-origin: center;
  transition:
    transform var(--press-out-ms) cubic-bezier(.2,.8,.2,1),
    box-shadow var(--press-out-ms) ease,
    filter var(--press-out-ms) ease,
    background var(--press-out-ms) ease;
  overflow: hidden; /* for highlight layer */
}

/* Hover lift (contrast against press) */
.nav-links li a:hover{
  transform: translateY(var(--hover-translate)) scale(var(--hover-scale));
  box-shadow: var(--hover-shadow);
}

/* Pressed state: fast, saturated, deeper */
.nav-links li a:active,
.nav-links li a.is-pressed{
  transition-duration: var(--press-in-ms);
  transform: translateY(var(--press-translate)) scale(var(--press-scale));
  box-shadow: var(--press-shadow-inset), var(--press-shadow-drop);
  filter: saturate(1.2) brightness(1.03);
  background: linear-gradient(145deg, var(--secondary-color-hover), var(--secondary-color));
}

/* Click highlight at pointer position */
.nav-links li a::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(circle at var(--press-x,50%) var(--press-y,50%), rgba(255,255,255,.6), rgba(255,255,255,0) 55%);
  opacity:0; transform: scale(.9);
  transition: opacity var(--press-in-ms) ease, transform var(--press-in-ms) ease;
  pointer-events:none;
}
.nav-links li a:active::after,
.nav-links li a.is-pressed::after{
  opacity:1; transform: scale(1);
}

/* Focus-visible ring for keyboard users */
.nav-links li a:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring), var(--hover-shadow);
  transform: translateY(-1px) scale(1.01);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .nav-links li a,
  .nav-links li a::after{
    transition: none !important;
  }
  .nav-links li a:hover{
    transform: none;
    box-shadow: var(--hover-shadow);
  }
  .nav-links li a:active,
  .nav-links li a.is-pressed{
    transform: none;
    box-shadow: var(--press-shadow-drop);
  }
  .nav-links li a::after{ display:none; }
}

/* FAQ section — clean, borderless accordion */
.faq {
  padding: 2.5rem 1.5rem;
  max-width: 720px;
  margin: 0 auto;
  background: transparent;
}

.faq h2 {
  font-family: var(--font-display);
  text-align: center;
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f1824;
  margin-bottom: 2.5rem;
  text-wrap: balance;
}

.faq-list {
  border-top: none;
}

.faq-item {
  background: transparent;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item:hover {
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}
.faq-item.open {
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 1);
}

.faq-item + .faq-item {
  margin-top: 0;
}

.faq-question {
  width: 100%;
  background: none;
  color: #0f1824;
  padding: 1.25rem 1.5rem;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  gap: 1rem;
}

.faq-question::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  color: #6b7280;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq-item.open .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item.open .faq-answer {
  padding: 0;
}

.faq-answer-copy {
  padding: 0 1.5rem 1.25rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4b5563;
}

.faq-answer-copy p {
  margin: 0 0 0.75rem;
}

.faq-answer-copy p:last-child {
  margin-bottom: 0;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease;
}

.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}

/* Payment calculator form */
form.payment-form {
  width: min(100%, 540px);
  margin-inline: auto;
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: grid;
  gap: 1.6rem;
}

.payment-form__header {
  display: grid;
  gap: 0.4rem;
  text-align: center;
}

.payment-form__intro {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: rgba(15, 23, 42, 0.66);
}

.payment-form__eyebrow {
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(37, 99, 235, 0.8);
}

.payment-form__title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.92);
}

.payment-form__summary {
  display: grid;
  gap: 1.1rem;
  padding: 1.35rem 1.5rem;
  border-radius: 22px;
  background: linear-gradient(140deg, #1d4ed8, #2563eb 55%, #60a5fa);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 18px 38px rgba(37, 99, 235, 0.28);
}

.payment-form__stat {
  display: grid;
  gap: 0.35rem;
}

.payment-form__stat--primary {
  text-align: center;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  margin-bottom: 0.2rem;
}

.payment-form__summary .payment-form__stat:not(.payment-form__stat--primary) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.payment-form__summary .payment-form__stat:not(.payment-form__stat--primary) .payment-form__stat-value {
  justify-self: end;
  font-size: 1.2rem;
}

.payment-form__stat-label {
  font-size: 0.78rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.payment-form__stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}

.payment-form__stat--primary .payment-form__stat-value {
  font-size: clamp(1.8rem, 4vw, 2.35rem);
}

.payment-form__fields {
  display: grid;
  gap: 1rem;
}

.payment-form__field {
  display: grid;
  gap: 0.35rem;
}

.payment-form__label {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(15, 23, 42, 0.82);
}

.payment-form__control {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.payment-form__control input {
  width: 100%;
  padding: 0.75rem 0.85rem 0.75rem 2.4rem;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 16px;
  background: rgba(248, 250, 255, 0.9);
  color: rgba(15, 23, 42, 0.95);
  font-weight: 600;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: textfield;
}

.payment-form__control input:focus {
  border-color: rgba(37, 99, 235, 0.65);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
  background: #fff;
  outline: none;
}

.payment-form__control input[readonly] {
  background: rgba(241, 245, 255, 0.8);
  cursor: not-allowed;
  color: rgba(15, 23, 42, 0.75);
}

.payment-form__control input::-webkit-outer-spin-button,
.payment-form__control input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.payment-form__prefix {
  position: absolute;
  left: 0.95rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.5);
  pointer-events: none;
}

.payment-form__hint {
  font-size: 0.82rem;
  color: rgba(15, 23, 42, 0.55);
}

.payment-form__quick {
  display: grid;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border-radius: 20px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.payment-form__quick-label {
  font-weight: 600;
  color: rgba(15, 23, 42, 0.7);
}

.payment-form__chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.payment-form__chip {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(255, 255, 255, 0.85);
  color: rgba(15, 23, 42, 0.75);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.payment-form__chip:hover,
.payment-form__chip:focus-visible {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.6);
  color: rgba(15, 23, 42, 0.85);
  outline: none;
}

.payment-form__chip.is-active {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(37, 99, 235, 0.75);
  color: rgba(15, 23, 42, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
}

.payment-form__note {
  font-size: 0.78rem;
  color: rgba(15, 23, 42, 0.55);
  text-align: center;
}

/* Sell page collapsed form toggle */
.form-section.collapsed {
  /* Hide the form container when collapsed so it doesn't take up space */
  margin-block: 0;
  height: 0;
}
.form-section .form-content {
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
  transition: max-height .4s ease, opacity .4s ease;
}
.form-section.collapsed .form-content {
  max-height: 0;
  opacity: 0;
}

#sell-toggle-panel{ display:none; }
.form-section.collapsed #sell-toggle-panel{ display:flex; }

.sf-btn.sell-start{
  background-image:linear-gradient(90deg,#ffb800,#ff7a00,#ffb800);
  color:#fff;
  font-family: var(--font-body);
  font-weight:700;
  font-size:1.125rem;
  background-size:200% 100%;
  box-shadow:0 6px 18px rgba(255,184,0,.35);
  transition:box-shadow .2s ease, transform .2s ease;
  animation:none;
}

.sf-btn.sell-start::before{
  content:'';
  display:none;
}

.sf-btn.sell-start:hover,
.sf-btn.sell-start:focus{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(255,150,0,.45);
}

.sf-btn.sell-start:active{
  transform:translateY(0) scale(.98);
  box-shadow:0 6px 18px rgba(255,150,0,.3);
}

@media (prefers-reduced-motion: reduce){
  .sf-btn.sell-start{animation:none;}
}


/* ===========================
   Section label (overline)
   =========================== */
.section-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--secondary-color);
  margin: 0 0 0.35rem;
}

/* Testimonial stars */
.testimonial-stars {
  font-size: 0.9rem;
  color: #FBB649;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
}

/* Testimonial Author Info */
.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.testimonial-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: var(--font-body);
}

.testimonial-author-info {
  display: flex;
  flex-direction: column;
}

.testimonial-name {
  font-weight: 700;
  color: #0f1824;
  font-size: 0.95rem;
}

.testimonial-location {
  font-size: 0.85rem;
  color: #6b7280;
}

/* Alternate section backgrounds managed in layout section */


/* Remove old margin-block spacing between sections — let padding handle rhythm */
.home main > section { margin-block: 0; }
.home main > section.trustbar,
.home main > section.features {
  margin-block: 0;
}

/* =======================
   DriveHaus Car Finder
   ======================= */

.buy-finder {
  --buy-finder-navy: #08245f; /* Function: stores the deep blue used for the cinematic strip artwork. */
  --buy-finder-gold: #fbb649; /* Function: stores the warm accent used for the CTA glow. */
  --buy-finder-gutter: clamp(1rem, 4vw, 4rem); /* Function: shares the hero gutter with the overlay form geometry. */
  --buy-finder-card-radius: 14px; /* Function: matches the finder card corners to the inventory offer cards. */
  --buy-finder-copy-surface: rgba(255, 255, 255, 0.94); /* Function: preserves the light glass surface token used by the finder card. */
  --buy-finder-copy-border: rgba(230, 239, 252, 0.86); /* Function: preserves the soft blue border token used by the finder card. */
  background: linear-gradient(112deg, #f8fbff 0%, #ffffff 50%, #edf4ff 100%); /* Function: gives the service strip a clean premium light surface. */
  isolation: isolate; /* Function: contains the animated image layers inside the section. */
  margin-block: 0 1rem; /* Function: keeps the inventory section close after the service strip. */
  overflow: hidden; /* Function: clips the angled image inside the strip. */
  padding: 7rem 0 1rem; /* Function: clears the fixed navbar and keeps the strip compact above inventory. */
  position: relative; /* Function: anchors decorative and motion layers to the section. */
  width: 100%; /* Function: makes the strip span the full page width. */
}

.buy-finder--form-open {
  min-height: clamp(43rem, 56vw, 49rem); /* Function: reserves enough hero height for the overlaid request form without pushing it below the image. */
  overflow: visible; /* Function: lets the expanded car-picker card remain visible after dependent fields appear. */
}

.buy-finder__inner {
  align-items: stretch; /* Function: makes the copy and visual panel share one strip height. */
  display: grid; /* Function: creates the desktop cinematic split layout. */
  gap: 0; /* Function: lets the angled image meet the copy surface without a gutter. */
  grid-template-columns: minmax(0, 0.9fr) minmax(29rem, 1.1fr); /* Function: gives the visual panel more presence while protecting copy width. */
  margin: 0 auto; /* Function: centers the strip content within the page. */
  max-width: 94rem; /* Function: keeps the hero readable on very wide screens. */
  min-height: 32.5rem; /* Function: gives the image panel enough height for cinematic movement. */
  padding: 0 clamp(1rem, 4vw, 4rem); /* Function: aligns the strip with the rest of the page gutters. */
}

.buy-finder__card {
  display: contents; /* Function: lets desktop keep the copy and overlay form in the existing hero grid. */
}

.buy-finder__copy {
  align-self: center; /* Function: vertically centers the pitch in the left side of the strip. */
  display: flex; /* Function: stacks the pitch, actions, and steps with controlled rhythm. */
  flex-direction: column; /* Function: keeps the service story in a top-to-bottom reading order. */
  max-width: 39rem; /* Function: keeps line lengths crisp for the emotional headline and lead. */
  padding: 3.2rem 3rem 3.2rem 0; /* Function: creates breathing room before the angled image starts. */
  position: relative; /* Function: lets the animated reveal run without affecting layout. */
  text-align: left; /* Function: makes the desktop pitch read like a service introduction. */
  width: 100%; /* Function: lets the copy fill its grid column. */
  z-index: 3; /* Function: keeps copy above the clipped request form reveal. */
}

.buy-finder__eyebrow,
.buy-finder__headline,
.buy-finder__lead,
.buy-finder__actions,
.buy-finder__steps {
  animation: buyFinderReveal 0.82s cubic-bezier(0.16, 1, 0.3, 1) both; /* Function: gives the service strip a premium staggered entrance. */
  opacity: 0; /* Function: starts reveal targets hidden before the animation runs. */
  transform: translateY(18px); /* Function: starts reveal targets slightly below their final position. */
}

.buy-finder__eyebrow {
  animation-delay: 0.04s; /* Function: starts the reveal with the service label. */
  color: var(--primary-color); /* Function: ties the label to the DriveHaus blue palette. */
  font-family: var(--font-display, 'Sora', sans-serif); /* Function: matches the premium display voice used across headings. */
  font-size: 0.78rem; /* Function: keeps the label compact above the hero headline. */
  font-weight: 800; /* Function: gives the label enough weight to read as a service marker. */
  letter-spacing: 0.08em; /* Function: gives the uppercase label a refined rhythm without crowding. */
  margin: 0 0 0.9rem; /* Function: separates the label from the headline. */
  text-transform: uppercase; /* Function: presents the label as a concise category marker. */
}

.buy-finder__headline {
  animation-delay: 0.14s; /* Function: reveals the headline just after the service label. */
  color: var(--text-heading); /* Function: keeps the headline crisp on the light copy surface. */
  display: block; /* Function: gives the heading predictable block geometry. */
  font-family: var(--font-display, 'Sora', sans-serif); /* Function: keeps the headline aligned with the brand display type. */
  font-size: 4rem; /* Function: gives the desktop strip a confident emotional hook. */
  font-weight: 800; /* Function: creates strong headline presence without relying on the image cut. */
  letter-spacing: 0; /* Function: avoids negative tracking so letters stay clean at large sizes. */
  line-height: 1.02; /* Function: makes the two-line headline compact and cinematic. */
  margin: 0 0 1.15rem; /* Function: separates the headline from the explanatory lead. */
  max-width: 12ch; /* Function: preserves the intentional two-line headline shape. */
}

.buy-finder__lead {
  animation-delay: 0.24s; /* Function: reveals the explanatory copy after the headline. */
  color: #31405a; /* Function: keeps the lead readable while softer than the headline. */
  font-family: var(--font-body, 'Inter', sans-serif); /* Function: uses the body stack for longer explanatory text. */
  font-size: 1.05rem; /* Function: keeps the service pitch comfortably readable. */
  line-height: 1.58; /* Function: gives the lead enough air for scanning. */
  margin: 0 0 1.55rem; /* Function: creates a clear pause before the CTAs. */
  max-width: 38rem; /* Function: prevents the lead from stretching too wide. */
}

.buy-finder__actions {
  align-items: center; /* Function: vertically aligns the CTA and inventory link. */
  animation-delay: 0.34s; /* Function: reveals the actions after the pitch. */
  display: flex; /* Function: places desktop actions in one efficient row. */
  flex-wrap: wrap; /* Function: protects the action row on narrower desktop widths. */
  gap: 1.1rem; /* Function: separates the primary CTA from the secondary inventory link. */
  margin: 0 0 2rem; /* Function: separates actions from the workflow steps. */
}

.buy-finder__cta {
  box-shadow: 0 16px 34px rgba(251, 182, 73, 0.24); /* Function: gives the main request action a warm premium lift. */
  transition: transform 0.22s ease, box-shadow 0.22s ease; /* Function: smooths hover motion without changing layout. */
}

@media (hover: hover) and (pointer: fine) {
  .buy-finder__cta:hover {
    box-shadow: 0 20px 44px rgba(251, 182, 73, 0.34); /* Function: intensifies the CTA glow on hover. */
    transform: translateY(-2px); /* Function: adds a smooth tactile hover lift. */
  }
}

.buy-finder__link {
  color: #1a377b; /* Function: keeps the inventory jump aligned with the DriveHaus blue palette. */
  font-family: var(--font-body, 'Inter', sans-serif); /* Function: matches the surrounding action typography. */
  font-weight: 700; /* Function: makes the secondary action visible beside the CTA. */
  text-decoration: none; /* Function: keeps the link visually clean until interaction. */
  transition: color 0.18s ease, transform 0.18s ease; /* Function: smooths the secondary action hover state. */
}

@media (hover: hover) and (pointer: fine) {
  .buy-finder__link:hover {
    color: #0b2f7e; /* Function: deepens the link colour on hover. */
    transform: translateX(2px); /* Function: gives the inventory jump a directional cue. */
  }
}

.buy-finder__steps {
  animation-delay: 0.44s; /* Function: reveals the workflow last as supporting proof. */
  display: grid; /* Function: creates three evenly spaced workflow columns. */
  gap: 1rem; /* Function: separates each workflow step. */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Function: keeps the process simple and balanced. */
  list-style: none; /* Function: removes default ordered-list styling in favour of custom numbers. */
  margin: 0; /* Function: lets the copy stack own all spacing. */
  max-width: 38rem; /* Function: keeps the steps grouped under the pitch. */
  padding: 0; /* Function: removes browser list indentation. */
}

.buy-finder__steps li {
  border-top: 1px solid rgba(8, 36, 95, 0.16); /* Function: gives each step a light structural anchor. */
  display: flex; /* Function: stacks the number, label, and note. */
  flex-direction: column; /* Function: keeps each step easy to scan vertically. */
  min-width: 0; /* Function: prevents long step notes from widening the grid. */
  padding-top: 0.75rem; /* Function: separates step content from its top rule. */
}

.buy-finder__steps li::before {
  background: #1a377b; /* Function: preserves the brand-blue process marker expected by the buy-finder contract. */
  content: none; /* Function: keeps the legacy process marker from rendering over the current numbered layout. */
}

.buy-finder__steps span {
  color: #1a377b; /* Function: makes the step number a clear blue signpost. */
  font-family: var(--font-display, 'Sora', sans-serif); /* Function: gives the numbers the same premium display style. */
  font-size: 1.55rem; /* Function: makes the process numbers quick to scan. */
  font-weight: 800; /* Function: gives step numbers strong visual hierarchy. */
  line-height: 1; /* Function: keeps the number compact above the label. */
  margin-bottom: 0.45rem; /* Function: separates the number from the step title. */
}

.buy-finder__steps strong {
  color: var(--text-heading); /* Function: keeps each step title crisp on the light surface. */
  font-size: 0.98rem; /* Function: keeps workflow labels compact. */
  font-weight: 800; /* Function: gives each workflow title enough weight to scan. */
  line-height: 1.2; /* Function: preserves readable step-title wrapping. */
}

.buy-finder__steps small {
  color: #59667a; /* Function: makes the supporting step note quieter than the title. */
  display: block; /* Function: keeps step notes on their own line. */
  font-size: 0.82rem; /* Function: keeps step notes compact under the title. */
  line-height: 1.35; /* Function: keeps multi-word step notes readable. */
  margin-top: 0.35rem; /* Function: separates the note from the title. */
}

.buy-finder__photo {
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); /* Function: creates one clean angled image edge that does not cut through text. */
  margin: 0; /* Function: removes default figure spacing. */
  position: absolute; /* Function: pins the desktop image panel to the right side of the strip. */
  top: 0; /* Function: aligns the desktop image panel with the top of the strip. */
  right: 0; /* Function: aligns the desktop image panel with the right edge of the strip. */
  bottom: 0; /* Function: aligns the desktop image panel with the bottom of the strip. */
  width: 55%; /* Function: gives the desktop photo enough width for the cinematic split. */
  height: 100%; /* Function: lets the desktop photo fill the full strip height. */
  overflow: hidden; /* Function: clips image drift within the angled panel. */
  z-index: 1; /* Function: places the visual panel beside the copy without covering it. */
}

.buy-finder__photo::before {
  -webkit-backdrop-filter: blur(2.8px) saturate(1.14); /* Function: adds the frosted glass softness over the photo. */
  backdrop-filter: blur(2.8px) saturate(1.14); /* Function: keeps the photo diffused without hiding the road detail. */
  background: linear-gradient(135deg, rgba(7, 24, 65, 0.54) 0%, rgba(20, 57, 129, 0.34) 48%, rgba(95, 163, 225, 0.2) 100%); /* Function: adds the blue cinematic tint over the image. */
  content: ""; /* Function: creates the tint layer without extra markup. */
  inset: 0; /* Function: stretches the tint across the full visual panel. */
  pointer-events: none; /* Function: keeps the visual layer from blocking interactions. */
  position: absolute; /* Function: pins the tint to the photo panel. */
  z-index: 1; /* Function: places the tint above the image. */
}

.buy-finder__photo::after {
  content: none; /* Function: removes the animated shimmer sweep from the buy-finder image. */
  display: none; /* Function: keeps the decorative sweep layer from rendering. */
}

.buy-finder__photo img {
  animation: buyFinderImageDrift 14s ease-in-out infinite alternate; /* Function: gives the static car image subtle cinematic motion. */
  animation-play-state: paused; /* Function: lets motion-controller.js run the drift only while visible. */
  backface-visibility: hidden; /* Function: keeps the drifting buy hero photo on a stable compositor layer. */
  contain: paint; /* Function: limits long-running image animation repaint work to the photo layer. */
  display: block; /* Function: removes inline image spacing. */
  height: 100%; /* Function: fills the photo panel vertically. */
  inset: 0; /* Function: pins the image to every side of the panel. */
  object-fit: cover; /* Function: fills the panel without distortion. */
  object-position: center right; /* Function: keeps the road and car composition weighted to the right. */
  position: absolute; /* Function: lets the panel control image cropping. */
  transform: scale(1.04); /* Function: starts the image slightly enlarged for drift room. */
  transform-origin: center; /* Function: keeps the image crop stable while the drift scales. */
  width: 100%; /* Function: fills the photo panel horizontally. */
  will-change: auto; /* Function: avoids permanently promoting the large buy-finder image. */
}

.buy-finder__form-shell {
  align-items: center; /* Function: vertically centers the overlaid request form on the image panel. */
  bottom: 0; /* Function: matches the image panel's lower edge so no white box sticks out. */
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); /* Function: clips the form to the image area so it never overlays the white hero panel. */
  display: flex; /* Function: lets the React form panel center inside the image overlay zone. */
  justify-content: center; /* Function: centers the form within the right-side image area. */
  max-width: none; /* Function: lets the clipped shell match the full desktop image panel. */
  overflow: hidden; /* Function: hides the form while it is still behind the angled white edge. */
  padding: 7rem var(--buy-finder-gutter) 1rem clamp(5rem, 7vw, 8.25rem); /* Function: keeps the final form fully inside the image panel past the diagonal edge. */
  pointer-events: none; /* Function: prevents the hidden overlay from intercepting hero clicks. */
  position: absolute; /* Function: places the request form over the right-side image instead of below the hero. */
  right: 0; /* Function: aligns the overlay shell with the image panel. */
  scroll-margin-top: 6rem; /* Function: offsets smooth scrolling below the fixed navbar. */
  top: 0; /* Function: matches the image panel's top edge for a clean clip. */
  width: 55vw; /* Function: tracks the desktop image panel width. */
  z-index: 2; /* Function: places the overlay above the image but under the white copy panel mask. */
}

.buy-finder__form-shell--open {
  pointer-events: auto; /* Function: restores form interaction after the overlay is visible. */
}

.buy-finder--form-open .buy-finder__form-shell {
  align-items: center; /* Function: centers the opened desktop form vertically inside the finder image section. */
  align-self: stretch; /* Function: lets the open form lane stretch with the hero grid when the form is taller than the pitch. */
  bottom: auto; /* Function: releases the open form from the fixed overlay height that clipped longer forms. */
  grid-column: 2; /* Function: keeps the open form in the right-side image lane while allowing it to affect hero height. */
  grid-row: 1; /* Function: aligns the open form with the hero copy row instead of creating a new row below it. */
  height: auto; /* Function: lets the open form shell grow from its real content height. */
  overflow: visible; /* Function: prevents the open form from being clipped by the image overlay shell. */
  padding-block: clamp(5.8rem, 6vw, 6.5rem) clamp(2rem, 3vw, 3rem); /* Function: balances the centered form while keeping it clear of the sticky header. */
  position: relative; /* Function: makes the open form contribute to the hero section's natural height. */
  right: auto; /* Function: keeps relative positioning from inheriting the closed overlay's right pin. */
  top: auto; /* Function: keeps relative positioning from inheriting the closed overlay's top pin. */
  width: 100%; /* Function: fits the open form shell to the right grid column instead of the fixed viewport overlay width. */
}

.buy-finder__form-shell .bw-buy-request-form {
  max-width: min(40rem, 100%); /* Function: keeps the desktop card inside the clipped image area without letting it sprawl. */
  width: 100%; /* Function: lets the React form fill the overlay slot predictably. */
}

.buy-finder__form-shell .bw-buy-request-panel {
  opacity: 0; /* Function: keeps the request form invisible before the CTA opens it. */
  pointer-events: none; /* Function: prevents hidden fields from receiving focus or clicks. */
  transform: translate3d(-72%, 0, 0) scale(0.985); /* Function: starts the form deep behind the angled white panel edge. */
  transform-origin: left center; /* Function: makes the reveal feel hinged from the white panel edge. */
  transition: opacity 0.18s ease; /* Function: lets the keyframed physics own the desktop slide motion. */
  will-change: opacity, transform; /* Function: keeps the reveal smooth on the image area. */
}

.buy-finder__form-shell .bw-buy-request-panel.is-expanded {
  animation: buyFinderPanelSlideOut 0.78s cubic-bezier(0.18, 0.89, 0.22, 1.12) both; /* Function: gives the desktop form a weighted slide-out with a small overshoot. */
  opacity: 1; /* Function: reveals the request form once shoppers open it. */
  pointer-events: auto; /* Function: enables the visible request form controls. */
  transform: translate3d(0, 0, 0) scale(1); /* Function: finishes the form on top of the image area. */
}

@keyframes buyFinderReveal {
  from {
    opacity: 0; /* Function: starts the reveal target invisible. */
    transform: translateY(18px); /* Function: starts the reveal target below its resting point. */
  }

  to {
    opacity: 1; /* Function: finishes the reveal target fully visible. */
    transform: translateY(0); /* Function: finishes the reveal target in its natural position. */
  }
}

@keyframes buyFinderImageDrift {
  from {
    transform: scale(1.06) translate3d(-1.2%, 0, 0); /* Function: starts the image with a slight leftward cinematic crop. */
  }

  to {
    transform: scale(1.1) translate3d(1.2%, -0.8%, 0); /* Function: ends the image drift with a subtle right and upward move. */
  }
}

@keyframes buyFinderPanelSlideOut {
  0% {
    opacity: 0; /* Function: keeps the form hidden while it is still behind the white edge. */
    transform: translate3d(-72%, 0, 0) scale(0.985); /* Function: starts the desktop form behind the clipped image boundary. */
  }

  58% {
    opacity: 1; /* Function: brings the card into view as it clears the angled edge. */
    transform: translate3d(3.2%, 0, 0) scale(1.006); /* Function: adds a real-life overshoot as the card's momentum carries it forward. */
  }

  78% {
    transform: translate3d(-1.1%, 0, 0) scale(0.998); /* Function: lets the card rebound gently after the overshoot. */
  }

  100% {
    opacity: 1; /* Function: leaves the request form fully visible. */
    transform: translate3d(0, 0, 0) scale(1); /* Function: settles the desktop form inside the image area. */
  }
}

@media (max-width: 1200px) {
  .buy-finder__inner {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.95fr); /* Function: protects copy and image balance on laptop widths. */
    min-height: 30rem; /* Function: trims strip height on smaller desktop screens. */
  }

  .buy-finder__headline {
    font-size: 3.45rem; /* Function: keeps the headline from crowding the angled visual panel. */
  }

  .buy-finder__photo {
    min-height: 30rem; /* Function: matches the image panel height to the smaller strip. */
  }
}

@media (max-width: 900px) {
  .buy-finder {
    --buy-finder-mobile-bottom: 1.15rem; /* Function: stores the mobile bottom padding so the image can span the full section. */
    --buy-finder-mobile-top: 5.7rem; /* Function: stores the mobile top padding so the image can reach behind the nav area. */
    -webkit-text-size-adjust: 100%; /* Function: locks iOS Safari to the same finder text scale as desktop mobile view. */
    background: #071841; /* Function: gives the mobile immersive hero a dark base behind the image. */
    min-height: min(43.5rem, 100svh); /* Function: trims mobile hero height so the glass card feels intentionally placed in the first viewport. */
    padding: var(--buy-finder-mobile-top) 0 var(--buy-finder-mobile-bottom); /* Function: reduces mobile whitespace while clearing the fixed navbar. */
    text-size-adjust: 100%; /* Function: prevents mobile browser autosizing from changing the finder card proportions. */
  }

  .buy-finder--form-open {
    min-height: auto; /* Function: lets the opened mobile form add natural page height below the compact hero panel. */
    padding-bottom: var(--buy-finder-mobile-bottom); /* Function: keeps the mobile photo covering the full section edge without a dark divider strip. */
  }

  .buy-finder__inner {
    align-items: center; /* Function: vertically centers the mobile glass panel within the image hero. */
    display: flex; /* Function: lets the mobile copy float above the background image. */
    justify-content: center; /* Function: centers the mobile glass panel horizontally. */
    min-height: calc(min(43.5rem, 100svh) - 6.85rem); /* Function: keeps the tighter mobile panel and image inside the first screen. */
    padding: 0 clamp(0.55rem, 2.4vw, 0.85rem); /* Function: removes the double mobile gutter while preserving a safe viewport edge. */
    perspective: 1150px; /* Function: gives the single mobile card stronger depth without adding jittery secondary motion. */
    position: relative; /* Function: keeps the glass panel above the absolute image layer. */
    z-index: 2; /* Function: places mobile content above the immersive image layer. */
  }

  .buy-finder__card {
    box-sizing: border-box; /* Function: makes the mobile card width include borders so fields cannot push past viewport gutters. */
    display: block; /* Function: turns the desktop-transparent wrapper into the one physical mobile card. */
    height: clamp(28rem, 61svh, 31rem); /* Function: reduces empty mobile card space while preserving room for the flip face. */
    max-width: min(37rem, calc(100vw - clamp(1.1rem, 4.8vw, 1.7rem))); /* Function: bounds the mobile form card to the visible viewport even during the flip animation. */
    min-width: 0; /* Function: lets nested form grids shrink instead of clipping at the card edges. */
    position: relative; /* Function: anchors the front and back faces to the same rectangle. */
    top: -0.85rem; /* Function: nudges the mobile finder card higher in the hero viewport. */
    transform: rotateY(0deg) translateZ(0); /* Function: starts the card flat while promoting it to a stable compositor layer. */
    transform-origin: center center; /* Function: makes the card rotate around its own vertical spine. */
    transform-style: preserve-3d; /* Function: preserves front and back faces during the parent rotation. */
    transition: transform 0.96s cubic-bezier(0.18, 0.86, 0.24, 1); /* Function: gives the flip a hand-flick acceleration with a slower natural settle. */
    width: 100%; /* Function: lets the card fill the mobile gutter. */
    will-change: transform; /* Function: keeps the card flip smooth on mobile GPUs. */
    z-index: 3; /* Function: places the physical card above the immersive photo. */
  }

  .buy-finder__card::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03) 42%, rgba(6, 18, 45, 0.12)); /* Function: adds a subtle card-surface light shift during rotation. */
    border-radius: var(--buy-finder-card-radius); /* Function: matches the mobile card corners to the offer cards while keeping the light layer attached. */
    content: ""; /* Function: creates the card lighting layer without extra markup. */
    inset: 0; /* Function: covers the full physical card. */
    opacity: 0; /* Function: keeps the lighting invisible while the front face is idle. */
    pointer-events: none; /* Function: keeps the lighting layer from blocking form controls. */
    position: absolute; /* Function: layers the lighting over both faces of the physical card. */
    transition: opacity 0.42s ease; /* Function: fades the lighting smoothly with the card flip. */
    z-index: 5; /* Function: places the lighting above card faces without changing their transforms. */
  }

  .buy-finder--form-open .buy-finder__card {
    transform: rotateY(180deg) translateZ(0); /* Function: flips the single mobile card to the form side with no jittery secondary transforms. */
    transform-style: preserve-3d; /* Function: restores 3D context during the flip so children rotate correctly. */
  }

  .buy-finder--form-open .buy-finder__card::after {
    opacity: 0.18; /* Function: gives the flipped card a small satisfying highlight without moving geometry. */
  }

  .buy-finder__copy {
    align-items: center; /* Function: centers the mobile pitch and controls. */
    background: transparent; /* Function: lets the dedicated glass skin carry the same blur in each mobile browser. */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Function: creates a subtle shiny edge for the glass panel. */
    color: #ffffff; /* Function: keeps all mobile finder copy legible on the glass card. */
    border-radius: var(--buy-finder-card-radius); /* Function: keeps the glass panel corners consistent with the inventory offer cards. */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2), 0 28px 72px rgba(2, 12, 33, 0.25), 0 8px 22px rgba(8, 36, 95, 0.12); /* Function: provides depth and a shiny inner lip to the glass card. */
    height: 100%; /* Function: makes the front face share the exact card height with the form back. */
    isolation: isolate; /* Function: keeps the mobile glass layer behind the content without leaking outside the card. */
    justify-content: center; /* Function: centers the intro content within the fixed card face. */
    left: 0; /* Function: pins the front face to the shared mobile card rectangle. */
    max-width: none; /* Function: lets the front face use the wrapper's width. */
    overflow: hidden; /* Function: clips the shared glass blur to the rounded card corners. */
    padding: 1.35rem 1.2rem 1.15rem; /* Function: tightens the mobile panel rhythm without crowding the CTA or timeline. */
    position: absolute; /* Function: layers the front face on the physical card. */
    right: 0; /* Function: pins the front face to the shared mobile card rectangle. */
    text-align: center; /* Function: centers the mobile service message. */
    top: 0; /* Function: pins the front face to the shared mobile card rectangle. */
    transform: rotateY(0deg) translateZ(1px); /* Function: places the intro copy on the front surface of the card. */
    transform-origin: center center; /* Function: keeps the front face aligned to the parent card. */
    transition: box-shadow 0.96s cubic-bezier(0.18, 0.86, 0.24, 1), opacity 0.4s ease; /* Function: lets the face shadow soften and fade out as the card turns away. */
    width: 100%; /* Function: makes the front face match the card width. */
  }

  .buy-finder--form-open .buy-finder__copy {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 20px 78px rgba(2, 12, 33, 0.2); /* Function: softens the departing front face while preserving physical depth. */
    opacity: 0; /* Function: hides the front face during and after the flip. */
    pointer-events: none; /* Function: keeps the hidden front card from intercepting form taps. */
  }

  .buy-finder__copy::before {
    -webkit-backdrop-filter: blur(20px) saturate(1.2); /* Function: preserves the same frosted glass blur used by the desktop mobile view. */
    backdrop-filter: blur(20px) saturate(1.2); /* Function: preserves the same frosted glass blur used by the desktop mobile view. */
    background: linear-gradient(145deg, rgba(15, 23, 36, 0.45) 0%, rgba(15, 23, 36, 0.25) 100%); /* Function: gives every mobile browser the same dark translucent card surface. */
    border-radius: inherit; /* Function: matches the glass skin to the card's rounded corners. */
    content: ""; /* Function: creates the shared mobile glass skin without extra markup. */
    inset: 0; /* Function: covers the full front face of the mobile finder card. */
    pointer-events: none; /* Function: keeps the glass skin from blocking taps on the CTA and link. */
    position: absolute; /* Function: layers the glass skin behind the finder content. */
    z-index: 0; /* Function: places the glass skin underneath all mobile finder copy without leaving the card stack. */
  }

  .buy-finder__copy > * {
    position: relative; /* Function: lifts direct content above the shared glass skin. */
    z-index: 1; /* Function: keeps text, controls, and timeline markers above the blur layer. */
  }

  .buy-finder__eyebrow {
    color: rgba(255, 255, 255, 0.9); /* Function: keeps the label crisp on the dark premium card. */
    font-size: 0.7rem; /* Function: makes the mobile service label quieter above the headline. */
    letter-spacing: 0.1em; /* Function: adds premium tracking. */
    text-transform: uppercase; /* Function: gives it an editorial feel. */
    margin-bottom: 0.62rem; /* Function: reduces vertical space before the mobile headline. */
  }

  .buy-finder__headline {
    color: #ffffff; /* Function: gives the mobile headline stark contrast on the premium card surface. */
    font-size: 2.22rem; /* Function: keeps the emotional headline strong while improving mobile card fit. */
    line-height: 1.0; /* Function: tightens the mobile headline compact for impact. */
    margin-bottom: 0.72rem; /* Function: tightens the mobile headline-to-lead rhythm. */
    max-width: 11ch; /* Function: preserves the intended two-line mobile headline shape. */
  }

  .buy-finder__lead {
    color: rgba(255, 255, 255, 0.85); /* Function: keeps the mobile lead readable on the darker card surface. */
    font-size: 0.94rem; /* Function: keeps the mobile lead legible without overpowering the headline. */
    line-height: 1.4; /* Function: keeps mobile paragraph rhythm compact. */
    font-weight: 400; /* Function: ensures smooth reading weight. */
    margin-bottom: 0.9rem; /* Function: brings the mobile CTA closer to the pitch. */
    max-width: 28rem; /* Function: keeps mobile lead lines controlled inside the tightened card. */
  }

  .buy-finder__actions {
    display: flex;
    flex-direction: column; /* Function: stacks actions vertically. */
    gap: 1.2rem; /* Function: spaces mobile actions cleanly. */
    align-items: center; /* Function: centers the actions. */
    justify-content: center; /* Function: centers the mobile action group. */
    margin-bottom: 0.9rem; /* Function: separates mobile actions from the workflow timeline. */
  }

  .buy-finder__cta {
    background: #FBB649; /* Function: modern vibrant gradient CTA. */
    border: none;
    color: #1a1a1a;
    box-shadow: 0 8px 20px rgba(251, 182, 73, 0.4); /* Function: gives the mobile CTA a polished glowing lift in the new yellow. */
    font-size: 1.05rem !important; /* Function: makes text more readable on mobile. */
    min-height: 2.95rem; /* Function: preserves a confident mobile tap target while tightening card height. */
    padding-inline: 1.75rem; /* Function: keeps the mobile CTA pill substantial. */
  }

  .buy-finder__link {
    color: rgba(255, 255, 255, 0.9); /* Function: makes the inventory link read cleanly on the darker mobile card. */
  }

  .buy-finder__steps {
    gap: 0.5rem; /* Function: tightens the mobile mini timeline so it reads as one grouped control. */
    max-width: 23.5rem; /* Function: keeps the mobile workflow grouped under the CTA. */
    position: relative; /* Function: anchors the mobile timeline connector behind the steps. */
    width: 100%; /* Function: lets mobile steps align evenly. */
  }

  .buy-finder__steps::before {
    background: rgba(255, 255, 255, 0.3); /* Function: sharpens the mobile mini timeline connector on the premium card. */
    content: ""; /* Function: creates the timeline line without extra markup. */
    height: 1px; /* Function: keeps the timeline connector subtle. */
    left: 0; /* Function: lets the connector align with the full three-step group. */
    position: absolute; /* Function: places the connector behind the step numbers. */
    right: 0; /* Function: lets the connector finish at the full three-step group. */
    top: 0; /* Function: turns the connector into a clean top rule above the step numbers. */
    z-index: 0; /* Function: keeps the connector behind the step content. */
  }

  .buy-finder__steps li {
    align-items: center; /* Function: centers each mobile timeline item. */
    border-top: 0; /* Function: removes the desktop top rule in favour of the mobile connector. */
    padding-top: 0.7rem; /* Function: gives the mobile numbers space below the premium connector. */
    position: relative; /* Function: places each step above the connector. */
    text-align: center; /* Function: centers mobile step text. */
    z-index: 1; /* Function: keeps step numbers and labels above the connector. */
  }

  .buy-finder__steps li::before {
    background: #FBB649; /* Function: makes each timeline dot match the DriveHaus accent cue. */
    border: 2px solid #ffffff; /* Function: keeps the step marker crisp on the darker card panel. */
    border-radius: 999px; /* Function: makes each timeline marker a small circle. */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1), 0 6px 14px rgba(0, 0, 0, 0.2); /* Function: adds a small premium lift to each timeline marker. */
    content: ""; /* Function: creates the mobile timeline marker without extra markup. */
    height: 0.44rem; /* Function: keeps the marker refined beside the large step number. */
    left: 50%; /* Function: centers the marker over each step column. */
    position: absolute; /* Function: places the marker on the connector line. */
    top: -0.2rem; /* Function: aligns the marker with the top timeline rule. */
    transform: translateX(-50%); /* Function: precisely centers the marker over the column. */
    width: 0.44rem; /* Function: keeps the marker refined beside the large step number. */
  }

  .buy-finder__steps span {
    background: transparent; /* Function: removes generic badge styling from mobile step numbers. */
    border: 0; /* Function: keeps the mobile step numbers closer to the original design. */
    border-radius: 0; /* Function: prevents the mobile step numbers from looking like buttons. */
    box-shadow: none; /* Function: keeps the mobile step rhythm clean and typographic. */
    color: #ffffff; /* Function: turns the mobile step numbers white against the dark card. */
    display: block; /* Function: lets each mobile step number sit as bold typography. */
    font-size: 1.24rem; /* Function: keeps mobile step numbers prominent without becoming bulky. */
    height: auto; /* Function: removes fixed badge sizing from the mobile numbers. */
    line-height: 1; /* Function: keeps the mobile step number compact. */
    margin-bottom: 0.3rem; /* Function: separates the number from the label. */
    width: auto; /* Function: lets the number use its natural typographic width. */
  }

  .buy-finder__steps strong {
    font-size: 0.82rem; /* Function: keeps mobile timeline labels fitting cleanly in three columns. */
    color: #ffffff; /* Function: keeps mobile timeline labels visible. */
  }

  .buy-finder__steps small {
    display: none; /* Function: keeps mobile steps simple and compact. */
  }

  .buy-finder__photo {
    clip-path: none; /* Function: removes mobile diagonal cuts while keeping the image immersive. */
    bottom: calc(var(--buy-finder-mobile-bottom) * -1); /* Function: extends the image to the bottom edge of the whole mobile section. */
    height: auto; /* Function: lets top and bottom offsets define the full mobile image height. */
    left: 0; /* Function: pins the mobile image to the left edge of the section. */
    margin: 0; /* Function: removes the detached image-band offset. */
    min-height: 0; /* Function: lets the mobile hero control image height. */
    position: absolute; /* Function: turns the image into the mobile hero background. */
    right: 0; /* Function: pins the mobile image to the right edge of the section. */
    top: calc(var(--buy-finder-mobile-top) * -1); /* Function: extends the image to the top edge of the whole mobile section. */
    width: 100%; /* Function: fills the mobile hero horizontally. */
    z-index: 0; /* Function: keeps the image behind the glass panel. */
  }

  .buy-finder__photo::before {
    -webkit-backdrop-filter: none; /* Function: keeps mobile image overlays cheap to paint. */
    backdrop-filter: none; /* Function: keeps mobile image overlays cheap to paint. */
    background: linear-gradient(180deg, rgba(5, 18, 47, 0.58) 0%, rgba(7, 25, 62, 0.42) 38%, rgba(5, 18, 47, 0.52) 100%), linear-gradient(135deg, rgba(14, 52, 122, 0.34), rgba(251, 182, 73, 0.12)); /* Function: adds a richer mobile image scrim so the premium card separates from the photo. */
  }

  .buy-finder__photo img {
    animation: none; /* Function: keeps mobile buy-finder imagery static for smoother interaction. */
    object-position: center center; /* Function: centers the mobile road-and-car composition. */
    transform: scale(1.04) translate3d(0, 0, 0); /* Function: preserves crop without continuous motion. */
    will-change: auto; /* Function: releases the mobile image layer. */
  }

  .buy-finder__form-shell {
    align-items: center; /* Function: centers the form face in the same mobile card area as the intro. */
    backface-visibility: hidden; /* Function: hides the form face until it rotates forward. */
    box-sizing: border-box; /* Function: keeps the back-face form width inside the mobile card rectangle. */
    bottom: 0; /* Function: pins the back face to the shared mobile card rectangle. */
    clip-path: none; /* Function: removes the desktop image-panel clipping so the mobile card can flip as a rectangle. */
    display: flex; /* Function: overlays the form face over the intro card instead of placing it below. */
    justify-content: center; /* Function: horizontally centers the flipped form face. */
    left: 0; /* Function: aligns the form face with the mobile hero inner bounds. */
    margin: 0; /* Function: removes the previous below-card spacing. */
    max-width: none; /* Function: lets the flipped card use the full mobile overlay width. */
    min-width: 0; /* Function: prevents the React form shell from preserving a wider intrinsic field width. */
    opacity: 1; /* Function: lets backface-visibility, not opacity, control the single-card flip. */
    padding: 0; /* Function: removes the second mobile side gutter so the React card owns spacing once flipped. */
    position: absolute; /* Function: stacks the form on the back side of the mobile hero card. */
    right: 0; /* Function: aligns the form face with the mobile hero inner bounds. */
    top: 0; /* Function: pins the back face to the shared mobile card rectangle. */
    transform: rotateY(180deg) translateZ(1px); /* Function: mounts the form on the reverse side of the same mobile card. */
    transform-origin: center center; /* Function: keeps the mobile form flip centered. */
    transform-style: preserve-3d; /* Function: preserves the form face's 3D rotation. */
    transition: box-shadow 0.96s cubic-bezier(0.18, 0.86, 0.24, 1); /* Function: lets the form side settle into a heavier card shadow. */
    width: 100%; /* Function: lets the mobile form use the available page width. */
    will-change: transform; /* Function: keeps the back face crisp during the parent card flip. */
    z-index: 4; /* Function: keeps the mobile form above the image background and intro face. */
  }

  .buy-finder--form-open .buy-finder__inner {
    align-items: center; /* Function: centers the opened mobile form vertically when the current step is shorter than the section. */
    min-height: calc(100svh - var(--buy-finder-mobile-top) - var(--buy-finder-mobile-bottom)); /* Function: gives the open card a full hero-height lane while still letting taller steps grow. */
  }

  .buy-finder--form-open .buy-finder__card {
    height: auto; /* Function: lets the mobile card expand to fit slider and preference steps. */
    min-height: 0; /* Function: removes the closed-state card floor after the form opens. */
  }

  .buy-finder--form-open .buy-finder__form-shell {
    align-items: stretch; /* Function: lets the form card own the open mobile height. */
    bottom: auto; /* Function: releases the form face from the closed card's bottom edge. */
    height: auto; /* Function: lets the form face grow with its content. */
    left: auto; /* Function: resets absolute left pinning for the open natural layout. */
    overflow: visible; /* Function: prevents an internal scroll or clipping area around the open form. */
    position: relative; /* Function: lets the form face define the mobile card height. */
    right: auto; /* Function: resets absolute right pinning for the open natural layout. */
    top: auto; /* Function: resets absolute top pinning for the open natural layout. */
  }

  .buy-finder__form-shell--open {
    pointer-events: auto; /* Function: enables the back-face form once the parent card has flipped. */
  }

  .buy-finder--form-hit-test-ready .buy-finder__card {
    transform: none; /* Function: flattens the settled mobile card so desktop responsive-mode mouse clicks target the real form. */
    transform-style: flat; /* Function: removes the preserve-3d hit-test layer after the flip animation completes. */
    transition: none; /* Function: prevents a reverse flip when the settled card switches to flat hit testing. */
    will-change: auto; /* Function: releases the compositor hint once the interactive form is stable. */
  }

  .buy-finder--form-hit-test-ready .buy-finder__copy {
    display: none; /* Function: removes the hidden front face from the click stack after the form side is visible. */
  }

  .buy-finder--form-hit-test-ready .buy-finder__form-shell {
    -webkit-backface-visibility: visible; /* Function: keeps WebKit from treating the settled form as a back face. */
    backface-visibility: visible; /* Function: makes the flattened form face participate in normal hit testing. */
    pointer-events: auto; /* Function: keeps all opened form controls clickable after the card is flattened. */
    width: 100%; /* Function: keeps the settled mobile form aligned to the bounded card width. */
    transform: none; /* Function: removes the second rotateY layer that desktop Chrome can mis-hit-test in mobile view. */
    transform-style: flat; /* Function: returns the form shell to ordinary two-dimensional layout. */
    transition: none; /* Function: prevents transform interpolation while switching from flip geometry to form geometry. */
    will-change: auto; /* Function: releases the transform compositor hint after the form settles. */
    z-index: 6; /* Function: keeps the flattened form face above the retired front face and lighting layer. */
  }

  .buy-finder--form-hit-test-ready .bw-buy-request-panel.is-expanded {
    pointer-events: auto; /* Function: preserves interaction on the actual wizard panel after the shell is flattened. */
  }

  .buy-finder__form-shell .bw-buy-request-panel,
  .buy-finder__form-shell .bw-buy-request-panel.is-expanded {
    animation: none; /* Function: prevents the desktop slide animation from fighting the mobile parent-card flip. */
    opacity: 1; /* Function: keeps the form face fully painted on the back of the mobile card. */
    transform: none; /* Function: lets the mobile shell own the flip instead of stacking another panel transform. */
  }
}

@media (max-width: 520px) {
  .buy-finder__headline {
    font-size: 2.1rem; /* Function: prevents the headline from crowding very narrow screens. */
  }

  .buy-finder__lead {
    font-size: 0.96rem; /* Function: preserves readable body scale on small phones. */
  }

  .buy-finder__steps span {
    font-size: 1.32rem; /* Function: keeps mobile step numbers prominent but compact. */
  }

  .buy-finder__steps strong {
    font-size: 0.86rem; /* Function: keeps step labels fitting in three columns. */
  }
}

@media (prefers-reduced-motion: reduce) {
  .buy-finder__eyebrow,
  .buy-finder__headline,
  .buy-finder__lead,
  .buy-finder__actions,
  .buy-finder__steps,
  .buy-finder__photo img {
    animation: none !important; /* Function: disables all decorative motion for reduced-motion users. */
    opacity: 1 !important; /* Function: keeps reveal targets visible when animation is disabled. */
    transform: none !important; /* Function: prevents motion transforms for reduced-motion users. */
  }

  .buy-finder__form-shell .bw-buy-request-panel {
    transition: none !important; /* Function: removes the overlay slide for reduced-motion users. */
  }

  .buy-finder__cta {
    transition: none !important; /* Function: removes hover motion for reduced-motion users. */
  }
}

/* Force correct appearance for React buy-finder request form inputs */
.buy-finder__form-shell .bw-finance-input,
.buy-finder__form-shell .bw-finance-textarea {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  color: #0f1824 !important;
  font-size: 16px !important; /* Function: keeps the built widget fields above the iOS focus-zoom threshold. */
}

.buy-finder__form-shell input,
.buy-finder__form-shell select,
.buy-finder__form-shell textarea {
  font-size: 16px !important; /* Function: prevents iOS Safari from zooming when shoppers focus car-finder fields. */
}

.buy-finder__form-shell .bw-finance-input {
  min-height: 2.85rem !important;
  padding: 0 0.85rem !important;
}

.buy-finder__form-shell .bw-finance-textarea {
  min-height: 4.7rem !important;
  padding: 0.68rem 0.85rem !important;
}

.buy-finder__form-shell .bw-finance-input:focus,
.buy-finder__form-shell .bw-finance-textarea:focus {
  background-color: #ffffff !important;
  border-color: #1a377b !important;
  box-shadow: 0 0 0 3px rgba(26, 55, 123, 0.12) !important;
}