/* ==========================================================================
   Maple Car Broker — Base Styles
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--line-height-base);
  background-color: var(--color-background);
  color: var(--color-text);
}

img {
  max-width: 100%;
  display: block;
}

/* position:fixed (not just overflow:hidden) is what actually prevents
   background touch-scroll on iOS Safari — overflow:hidden alone is known to
   leak scroll through on iOS. js/main.js pairs this with storing/restoring
   the real scroll position via body.style.top, since fixing position
   otherwise resets the visible scroll to 0. */
body.nav-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

a {
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-sm);
  font-weight: 700;
  color: var(--color-heading);
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
}

/* Visible focus state for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-2xl);
}

.section-alt {
  background-color: var(--color-background-secondary);
}

.section-header {
  max-width: 640px;
  margin-bottom: var(--space-xl);
}

.section-header.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

/* Green variant for a "done"/confirmed status label (e.g. "Request
   Received"), reusing the same success colour as the drawer/form
   confirmation checkmark elsewhere on the site. */
.eyebrow--success {
  color: var(--color-success);
}

/* Shared "star + dark charcoal label" eyebrow variant, used alongside the
   base .eyebrow class wherever a section label needs a leading blue star
   instead of plain blue text (e.g. "Who We Are", "Testimonials", "FAQ",
   "Free Consultation"). One shared implementation instead of a separate
   near-identical class per section. */
.eyebrow-star {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-heading);
}

.eyebrow-star-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: var(--color-primary);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #ffffff;
  padding: var(--space-xs) var(--space-sm);
  z-index: 1000;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: var(--space-sm);
  top: var(--space-sm);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.85rem 1.75rem;
  font-size: var(--fs-body);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast), background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  white-space: nowrap;
}

/* .btn's own `display: inline-flex` above is an author-stylesheet rule, and
   author rules always win over the browser's built-in `[hidden] { display:
   none; }` default (user-agent styles lose to author styles regardless of
   selector specificity) — so a plain hidden attribute on a .btn-classed
   button is silently ignored and the button stays visible. Same class of
   bug already fixed elsewhere for .form-confirmation[hidden] and
   .drawer-step[hidden]; this re-asserts it for buttons, which is what the
   drawer footer's state-dependent controls (Back / Continue / Confirm My
   Consultation / Close) rely on to actually hide, not just have the
   attribute set. */
.btn[hidden] {
  display: none;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-background-blue);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-hover);
}

.btn-block {
  width: 100%;
}

/* Small northeast-arrow suffix for a button's label. .btn is already a flex
   container with its own gap, which provides the spacing here — no extra
   margin needed. Colour is inherited from the button text, so it's
   automatically white on .btn-primary and Maple blue on .btn-secondary. */
.btn-arrow {
  display: inline-block;
  font-size: 1em;
  font-weight: 800;
  line-height: 1;
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.logo {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-heading);
  letter-spacing: 0.01em;
}

.logo img {
  height: 68px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

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

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav-links a {
  text-decoration: none;
  color: var(--color-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-links a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Wraps the mobile-only header CTA + the hamburger button together so their
   gap can be controlled precisely, independent of the outer .site-header
   .container's own justify-content: space-between (which only needs to
   place the logo on one side and this whole group on the other). Hidden on
   desktop; the mobile breakpoint below turns it into the visible flex row. */
.mobile-header-actions {
  display: none;
}

.mobile-header-cta {
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin-inline: auto;
  background-color: var(--color-heading);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile full-screen nav's own logo+close row and close button — hidden on
   desktop (same display:none-until-mobile pattern as .nav-toggle above);
   the mobile-only sizing/layout lives in the max-width: 760px block. */
.mobile-nav-header {
  display: none;
}

.nav-close {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-heading);
  padding: 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-block: var(--space-2xl) var(--space-xl);
  background-color: var(--color-background);
  background-image: radial-gradient(ellipse 60% 55% at 85% 0%, var(--color-background-blue) 0%, transparent 70%);
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero-copy h1 {
  margin-bottom: var(--space-md);
}

.hero-copy p {
  font-size: 1.125rem;
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

/* Selector deliberately matches .hero-copy p's specificity (class+element)
   so this reliably wins over that rule's 1.125rem — a plain .hero-trust-note
   class alone was being overridden by it. */
.hero-copy p.hero-trust-note {
  margin-top: var(--space-xs);
  margin-bottom: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-text-muted);
}

.hero-trust-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1.1rem;
  margin-top: var(--space-md);
}

.hero-trust-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-heading);
  white-space: nowrap;
}

.hero-trust-star {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  fill: var(--color-primary);
}

/* Enough width for the hero's left column to fit all four items on one row
   without competing with the hero image on the right. */
@media (min-width: 1200px) {
  .hero-trust-list {
    flex-wrap: nowrap;
  }
}

.hero-media {
  aspect-ratio: 4 / 3;
  /* No overflow:hidden here (unlike before) — the testimonial carousel's
     prev/next arrows deliberately overlap slightly outside the card's own
     edges, and .hero-testimonial-card below is what actually clips its own
     rounded corners now. */
  position: relative;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background-blue);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-md);
}

.image-placeholder__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-small);
}

.image-placeholder__icon {
  font-size: 2rem;
}

/* ==========================================================================
   Hero Testimonial Carousel
   Fills .hero-media (right side of the hero) — see js/hero-testimonials.js
   for the 4-slide data array, autoplay, and control wiring.
   ========================================================================== */

.hero-testimonial {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-testimonial-card {
  width: 100%;
  height: 100%;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
}

.hero-testimonial-body {
  flex: 1;
  display: flex;
  width: 100%;
  transition: opacity 250ms ease;
}

.hero-testimonial-body.is-fading {
  opacity: 0;
}

.hero-testimonial-content {
  position: relative;
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--space-lg) var(--space-md) var(--space-lg) var(--space-lg);
  overflow: hidden;
  z-index: 1;
}

/* Very subtle decorative shape referenced in the design brief — a soft,
   low-opacity blue blob tucked behind the bottom-left of the quote. Purely
   cosmetic (aria-hidden not needed, it's a CSS pseudo-element) and never
   competes with text since it sits behind it (z-index) at very low opacity. */
.hero-testimonial-content::before {
  content: "";
  position: absolute;
  left: -40px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: var(--color-primary);
  opacity: 0.06;
  z-index: -1;
}

.hero-testimonial-quote-mark {
  font-size: 3rem;
  line-height: 1;
  font-weight: 800;
  color: var(--color-primary);
}

.hero-testimonial-quote {
  color: var(--color-heading);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.hero-testimonial-stars {
  --star-gold: #d9a441;
  display: flex;
  gap: 0.2rem;
  color: var(--star-gold);
}

.hero-testimonial-stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.hero-testimonial-name {
  margin: 0;
  font-weight: 700;
  color: var(--color-heading);
}

.hero-testimonial-location {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.hero-testimonial-photo-wrap {
  flex: 0 0 55%;
  position: relative;
  overflow: hidden;
  background-color: var(--color-background-secondary);
}

.hero-testimonial-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Set by js/hero-testimonials.js when a slide's image fails to load — hides
   the broken image and leaves the neutral background above visible instead,
   so a missing photo never breaks the layout or shows a broken-image icon. */
.hero-testimonial-photo-wrap.has-no-photo .hero-testimonial-photo {
  display: none;
}

.hero-testimonial-savings-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.hero-testimonial-savings-badge:empty {
  display: none;
}

.hero-testimonial-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 2;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.hero-testimonial-arrow--prev {
  left: -18px;
  background-color: var(--color-surface);
  color: var(--color-heading);
  box-shadow: var(--shadow-md);
}

.hero-testimonial-arrow--prev:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-50%) scale(1.05);
}

.hero-testimonial-arrow--next {
  right: -18px;
  background-color: var(--color-primary);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

.hero-testimonial-arrow--next:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-50%) scale(1.05);
}

.hero-testimonial-dots {
  position: absolute;
  left: 50%;
  bottom: var(--space-sm);
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}

.hero-testimonial-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-border);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.hero-testimonial-dot.is-active {
  background-color: var(--color-primary);
  transform: scale(1.2);
}

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

  .hero-testimonial-arrow,
  .hero-testimonial-dot {
    transition: none;
  }
}

/* ==========================================================================
   Brand Marquee
   Continuously-scrolling strip of vehicle brand logos beneath the hero.
   ========================================================================== */

.brand-marquee {
  position: relative;
  padding-block: var(--space-lg);
  background-color: var(--color-background-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.brand-marquee__intro {
  text-align: center;
  margin-bottom: var(--space-md);
}

.brand-marquee__heading {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.brand-marquee__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.brand-marquee__track {
  display: flex;
  width: max-content;
  animation: brand-marquee-scroll 50s linear infinite;
}

.brand-marquee:hover .brand-marquee__track {
  animation-play-state: paused;
}

.brand-marquee__group {
  display: flex;
  flex-shrink: 0;
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 76px;
  padding-inline: var(--space-md);
  border-right: 1px solid var(--color-border);
}

.brand-logo img {
  max-width: 100%;
  max-height: 30px;
  object-fit: contain;
  /* Normalize any future logo asset (regardless of source colour) to a neutral dark-gray mark. */
  filter: brightness(0);
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.brand-logo:hover img {
  opacity: 0.85;
}

/* Last-resort fallback (see js/brand-logos.js) — only shown if BOTH the CDN
   logo and the local file fail to load, so the marquee never shows a
   broken-image icon or an empty gap. */
.brand-logo-fallback-text {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0.6;
  text-align: center;
}

@keyframes brand-marquee-scroll {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    transform: none;
  }

  .brand-marquee__group[aria-hidden="true"] {
    display: none;
  }
}

/* ==========================================================================
   Icon Badge
   Shared circular icon container used across service cards, pricing cards,
   trust items, and form confirmations.
   ========================================================================== */

.icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-background-blue);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* ==========================================================================
   How It Works — Sticky Scroll Storytelling
   Mobile-first: base rules below render all 5 .hiw-step articles as normal
   stacked content (no JS, no sticky, no dark backdrop). The >=1024px media
   query at the end of this block turns .hiw-scroller into a pinned viewport,
   introduces the dark-left/image-right split backdrop, and layers each
   step's card+image on top of it via absolute positioning. js/main.js
   (initHowItWorksScroller) drives which .hiw-step is .is-active based on
   scroll position, and uses matchMedia to disable all of this below 1024px.

   One-off dark accent: --hiw-dark below is a near-black shade used only for
   this section's left backdrop — intentionally distinct from the site's
   navy/blue tokens, not a new global theme.
   ========================================================================== */

.how-it-works-v2 {
  --hiw-dark: #14181f;
}

.hiw-overlay {
  padding-block: var(--space-2xl) var(--space-xl);
}

.hiw-title-row {
  margin-bottom: var(--space-xl);
}

.hiw-title-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.hiw-title-eyebrow-star {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: var(--color-primary);
}

.hiw-title-heading {
  margin-bottom: 0;
}

.hiw-backdrop {
  display: none;
}

.hiw-card-zone {
  width: 100%;
}

.hiw-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* On mobile, .hiw-step itself is now the visible blue "card" box (see
   background-color/padding/border-radius below) — this is what makes it
   possible for the step image to visually sit inside the same card as the
   time/counter row and the text, positioned between them via `order`. At
   desktop (>=1024px) none of that applies: .hiw-step reverts to an
   invisible absolute-positioned overlay (its own override explicitly
   resets background/padding/border-radius/color back to nothing) and the
   real visible card is .hiw-step-card again, exactly as before. */
.hiw-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  background-color: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: #ffffff;
}

.hiw-step-card-wrap {
  display: contents;
}

/* display: contents on mobile — .hiw-card-top, .hiw-step-image,
   .hiw-card-body and .hiw-cta all become direct grid items of .hiw-step
   (promoted through this AND the .hiw-step-card-wrap above), which is what
   lets the image slot in between them via `order` below without moving or
   duplicating any markup. background-color/border-radius/color are still
   declared here (rather than deleted) even though display: contents makes
   them inert on this element at mobile — .hiw-step-card's own desktop
   override further down only replaces display/padding/grid layout, so it
   still depends on these three being inherited from this same rule via the
   normal cascade to render its blue background and white text at desktop. */
.hiw-step-card {
  background-color: var(--color-primary);
  background-image: none;
  border-radius: var(--radius-lg);
  color: #ffffff;
  display: contents;
}

.hiw-card-top {
  order: 1;
}

.hiw-step-image {
  order: 2;
  /* Small gap above (from .hiw-step's own gap), a bit more below — widens
     just this one transition into the "comfortable" gap before the text
     content starts. */
  margin-bottom: var(--space-xs);
}

.hiw-card-body {
  order: 3;
}

.hiw-cta {
  order: 4;
}

/* Back to space-between now that there are two children again: the simple
   duration indicator (left) and the step counter (right). */
.hiw-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

.hiw-step-duration {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

.hiw-step-duration-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.hiw-card-count {
  flex-shrink: 0;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  font-size: 3rem;
}

.hiw-card-count-total {
  font-size: 1.5rem;
}

.hiw-card-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-xs);
}

.hiw-step-card h3 {
  color: #ffffff;
  margin-bottom: var(--space-xs);
}

.hiw-step-card p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
}

.hiw-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: var(--space-sm);
}

.hiw-checklist li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.9);
}

.hiw-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.15rem;
  height: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  font-size: 0.7rem;
  font-weight: 700;
}

.hiw-cta {
  display: inline-flex;
  margin-top: var(--space-sm);
  text-decoration: none;
}

/* Mobile: an oval/pill button (row of text then arrow), not the desktop
   circle — .hiw-cta-circle's own desktop override further down switches
   every one of these properties back to the circle (width/height/
   border-radius/flex-direction), so nothing here leaks into >=1024px. */
.hiw-cta-circle {
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-height: 56px;
  border-radius: 999px;
  background-color: #ffffff;
  color: var(--color-primary);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  text-align: center;
  transition: background-color 250ms ease, color 250ms ease, transform 250ms ease;
}

/* Text then arrow (matching the site's usual .btn-arrow reading order) even
   though the arrow comes first in the markup — .order swaps the visual
   order without touching the DOM. Reset back to the original arrow-first
   stacking at desktop, alongside .hiw-cta-circle's flex-direction: column. */
.hiw-cta-arrow {
  order: 2;
  font-size: 1.15rem;
  line-height: 1;
}

.hiw-cta-text {
  order: 1;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  /* Deliberately distinct from the arrow's colour (which stays Maple blue,
     inherited from .hiw-cta-circle) — dark navy per the reference design. */
  color: var(--color-heading);
}

.hiw-cta:hover .hiw-cta-circle,
.hiw-cta:focus-visible .hiw-cta-circle {
  background-color: var(--color-heading);
  color: #ffffff;
  transform: scale(1.03) translate(2px, -2px);
}

.hiw-cta:hover .hiw-cta-text,
.hiw-cta:focus-visible .hiw-cta-text {
  /* Without this the label would stay dark navy on the now-dark-navy hover
     background and become unreadable. */
  color: #ffffff;
}

/* Establishes the shape (aspect-ratio here, not on the children below) so
   both the real photo and the placeholder can just stretch to inset:0 and
   always match it exactly — one shared box, whichever child is filling it. */
.hiw-step-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  min-height: 220px;
}

/* The actual photo. There was previously NO rule at all for a plain <img>
   here — only .hiw-image-placeholder-full had sizing — so a real photo (like
   step5.jpg) rendered at its own natural size instead of filling the
   container, leaving the placeholder <div> beneath it visible as empty
   space. object-fit: cover here is what makes it fill .hiw-step-image
   completely without stretching. */
.hiw-step-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Per-step crop focus. All five start at the same "center center" — change
   any single one below if an important person/vehicle ends up cropped once
   real photos are in place (data-step is 0-indexed, so Step 1 = [data-step="0"]). */
.hiw-step[data-step="0"] .hiw-step-photo { object-position: center center; }
.hiw-step[data-step="1"] .hiw-step-photo { object-position: center center; }
.hiw-step[data-step="2"] .hiw-step-photo { object-position: center center; }
.hiw-step[data-step="3"] .hiw-step-photo { object-position: center center; }
.hiw-step[data-step="4"] .hiw-step-photo { object-position: center center; }

.hiw-image-placeholder-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background-blue);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ---- Desktop: dark/image split backdrop + overlapping card ---- */
@media (min-width: 1024px) {
  .hiw-sticky {
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow: hidden;
  }

  .hiw-backdrop {
    display: block;
    position: absolute;
    inset: 0 50% 0 0;
    background-color: var(--hiw-dark);
    z-index: 0;
  }

  .hiw-overlay {
    position: relative;
    z-index: 1;
    height: 100%;
    padding-block: var(--space-xl) var(--space-lg);
  }

  .hiw-title-row {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
  }

  .hiw-title-heading {
    color: #ffffff;
  }

  /* Only white here at desktop, where the dark backdrop is actually behind
     it — on mobile this eyebrow sits on the normal white page background,
     so it keeps its usual blue text there. */
  .hiw-title-eyebrow {
    color: #ffffff;
  }

  /* Positioned independently of .hiw-title-row's normal-flow position (and
     of .hiw-overlay's own padding) so the image inside it can reach the
     section's true top/bottom edges, matching .hiw-backdrop's full height —
     rather than being confined to the shorter space left over below the
     title. The card's own vertical centering (unchanged) still keeps it
     comfortably clear of the title in practice. */
  .hiw-card-zone {
    position: absolute;
    inset: 0;
  }

  .hiw-stage {
    position: absolute;
    inset: 0;
  }

  .hiw-step {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
    /* Resets the mobile-only "whole step is the blue card" treatment — at
       desktop .hiw-step is back to being an invisible positioning shell,
       and .hiw-step-card (below) is the real visible card again. */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    color: inherit;
  }

  .hiw-step.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  .hiw-step-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    aspect-ratio: auto;
    min-height: 0;
    border-radius: 0;
    z-index: 1;
    margin-bottom: 0;
    order: 0;
  }

  .hiw-image-placeholder-full {
    border-radius: 0;
    border: none;
  }

  .hiw-step-card-wrap {
    display: block;
    position: absolute;
    /* Shifted below true center (rather than top:50%) so there's a clear,
       intentional gap under the "Our Car Broker Service" heading instead of
       the card starting almost flush beneath it. */
    top: calc(50% + 50px);
    transform: translateY(-50%);
    /* Same left inset the site's .container uses, so the card's left edge
       lines up with the rest of the page's content margin. */
    left: max(var(--space-md), calc((100% - var(--max-width)) / 2 + var(--space-md)));
    width: 62%;
    z-index: 2;
  }

  /* Card becomes a grid: top row (the counter) spans the full width; below
     it, the left-side content sits in the remaining row.

     .hiw-cta is intentionally NOT a grid item here (see below) — it's
     pinned with position:absolute instead, specifically so the min-height
     added for centering room can never drag it out of place. The card sits
     inside .hiw-step-card-wrap, which centers itself via
     transform: translateY(-50%) based on its own height — so growing the
     card's height moves BOTH its top and bottom edges (in opposite
     directions) around that fixed center point. If the CTA were still
     grid/align-self-positioned relative to the content row, growing that
     row for centering room would carry the CTA down with it. Anchoring it
     directly to the card's own padding box instead means it always sits
     the same fixed distance from the card's corner, however tall the card
     becomes. The 220px second column below is a static reservation (the
     CTA's old auto-sized grid column, now that nothing occupies it) so the
     left column's text/checklist don't expand into the space the CTA
     visually occupies. */
  .hiw-step-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 220px;
    grid-template-rows: auto 1fr;
    row-gap: var(--space-lg);
    column-gap: var(--space-xl);
    padding: var(--space-xl);
    /* Without this, the card has no explicit height, so the 1fr content row
       just shrinks to fit .hiw-card-body's own content — leaving no slack
       for align-self: center below to actually move anything. This gives
       that row real breathing room so the left-side text group visibly
       centers instead of sitting flush at the top of a tight-fitting row. */
    min-height: 480px;
  }

  .hiw-card-top {
    grid-column: 1 / -1;
    order: 0;
  }

  .hiw-step-duration {
    gap: 0.75rem;
    font-size: 1.75rem;
  }

  .hiw-step-duration-icon {
    width: 32px;
    height: 32px;
  }

  .hiw-card-count {
    font-size: 4.5rem;
  }

  .hiw-card-count-total {
    font-size: 2rem;
  }

  .hiw-card-body {
    grid-column: 1;
    /* Was "start" — with the Process Time / Your Time block removed (and
       now with real slack in this row via min-height above), centering the
       title/description/checklist group here is what actually balances the
       card vertically, while the CTA stays independently anchored below. */
    align-self: center;
    order: 0;
  }

  .hiw-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-md);
    row-gap: 0.5rem;
  }

  .hiw-cta {
    position: absolute;
    right: var(--space-xl);
    bottom: var(--space-xl);
    margin-top: 0;
    order: 0;
  }

  /* Back to the circle — every property the mobile pill rule changed
     (width/height/border-radius/flex-direction/min-height) is reset here. */
  .hiw-cta-circle {
    width: 200px;
    height: 200px;
    min-height: 0;
    border-radius: 50%;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
  }

  .hiw-cta-arrow {
    order: 1;
    font-size: 2rem;
  }

  .hiw-cta-text {
    order: 2;
    font-size: 0.85rem;
  }
}

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

  .hiw-cta-circle {
    transition: none;
  }
}

/* ==========================================================================
   Services
   ========================================================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.service-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.service-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.service-card .icon-badge {
  margin-bottom: var(--space-sm);
}

.service-card h3 {
  margin-bottom: var(--space-xs);
}

.service-card p {
  font-size: var(--fs-small);
  margin: 0;
}

/* ==========================================================================
   About — layered editorial photo composition + stat/trust band
   ========================================================================== */

.about-v2 {
  background-color: var(--color-background);
  padding-block: 80px;
  /* The generic .section class gets padding-block: var(--space-2xl) (96px),
     comfortably more than the 76px sticky header — which is why the How It
     Works/Testimonials/FAQ anchors already clear it fine. This section
     overrides that down to a flat 80px, only 4px more than the header, so
     clicking "About" landed with "WHO WE ARE" nearly touching the header.
     scroll-margin-top adds the missing breathing room without touching the
     section's own padding/layout — same pattern already used for
     .consult-panel's deep-link anchors on book-a-call.html. */
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

.about-v2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.about-v2-media {
  position: relative;
}

/* Viewport-height-aware rather than aspect-ratio-driven, so the photo
   composition fits within a normal laptop screen instead of growing with
   column width alone. Main image is narrower than the column (not centered,
   anchored top-left) so the secondary image below-right reads as clearly
   separated/layered rather than nested inside it. */
.about-v2-image--main {
  width: 90%;
  height: clamp(428px, 56vh, 540px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-v2-image--main img,
.about-v2-image--secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Split out so each photo's crop focus can be tuned independently later —
   change either value if an important subject ends up cropped. */
.about-v2-image--main img {
  object-position: center center;
}

.about-v2-image--secondary img {
  object-position: center center;
}

.about-v2-image--secondary {
  position: absolute;
  right: -4%;
  bottom: -8%;
  width: 62%;
  height: 52%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 4px solid var(--color-background);
  z-index: 2;
}


.about-v2-copy h2 {
  max-width: 28ch;
}

.about-v2-copy p {
  max-width: 52ch;
}

/* Stacked by default (mobile/tablet) — the desktop side-by-side row lives in
   the min-width override below, at the same 861px breakpoint .about-v2-grid
   itself switches to two columns at (see responsive.css). */
.about-v2-stat-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding-block: var(--space-md);
  margin-block: var(--space-sm) var(--space-md);
}

@media (min-width: 861px) {
  .about-v2-stat-row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
  }

  /* Without this, .about-v2-trust-list's default flex min-width (auto) never
     lets its text wrap onto multiple lines within its own box — instead the
     browser wraps the whole ROW onto a second line once the two items'
     combined *unwrapped* width exceeds the column, which is exactly why this
     was rendering stacked even inside a `display:flex` row. */
  .about-v2-trust-list {
    min-width: 0;
  }
}

.about-v2-stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.about-v2-stat-number {
  font-size: 4.5rem;
  font-weight: 800;
  color: var(--color-heading);
  line-height: 1;
}

.about-v2-stat-symbol {
  color: var(--color-primary);
}

.about-v2-stat-label {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
}

.about-v2-trust-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-left: var(--space-lg);
}

.about-v2-trust-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-heading);
}

.about-v2-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Shorter laptop displays (e.g. 1366x768) need the whole composition
   compressed a bit further, not just scaled by width. */
@media (min-width: 1024px) and (max-height: 850px) {
  .about-v2 {
    padding-block: 56px;
  }

  .about-v2-image--main {
    height: clamp(383px, 52vh, 473px);
  }

  .about-v2-copy h2 {
    font-size: clamp(1.75rem, 2vw + 1rem, 2.15rem);
  }

  .about-v2-stat-row {
    padding-block: var(--space-sm);
    margin-block: var(--space-xs) var(--space-sm);
  }
}

/* ==========================================================================
   Testimonials
   Tall, substantial cards with star rating, quote, customer identity, and
   package/vehicle metadata. --star-gold is a one-off warm accent used only
   for the rating stars, not part of the main brand palette.
   ========================================================================== */

.testimonials-v2-intro {
  max-width: 640px;
}


.testimonials-v2-intro h2 {
  font-size: clamp(2rem, 2.8vw + 1rem, 2.75rem);
}

.testimonials-v2-intro p {
  font-size: 1.05rem;
}

.testimonials-v2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
  margin-top: var(--space-2xl);
}

.testimonial-v2-card {
  --star-gold: #d9a441;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.testimonial-v2-stars {
  display: flex;
  gap: 0.2rem;
  color: var(--star-gold);
  margin-bottom: var(--space-md);
}

.testimonial-v2-quote {
  font-style: italic;
  color: var(--color-heading);
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: left;
  flex-grow: 1;
  margin-bottom: var(--space-lg);
}

.testimonial-v2-person {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.testimonial-v2-avatar {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-heading);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  overflow: hidden;
}

/* Layers on top of the initials at the same size/shape. z-index is explicit
   (not left to implicit paint order) after a real bug elsewhere in this
   project: two position:absolute siblings with neither given a z-index will
   paint in DOM order, so a *later* sibling — even an empty one — can hide an
   earlier one that actually loaded correctly. If the photo 404s, its inline
   onerror removes it and the initials underneath are simply what was there
   all along. */
.testimonial-v2-avatar-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.testimonial-v2-name {
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
}

.testimonial-v2-location {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin: 0;
}

.testimonial-v2-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0 0 var(--space-md);
}

.testimonial-v2-meta {
  font-size: var(--fs-small);
  margin: 0;
}

.testimonial-v2-package {
  font-weight: 700;
  color: var(--color-heading);
}

.testimonial-v2-sep {
  margin-inline: 0.4rem;
  color: var(--color-text-muted);
}

.testimonial-v2-vehicle {
  color: var(--color-text-muted);
}

.testimonials-v2-cta {
  text-align: center;
  margin-top: var(--space-2xl);
}

/* ==========================================================================
   FAQ (accordion)
   ========================================================================== */


.faq-list {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  border: none;
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), border-color var(--transition-base);
  font-size: 0.9rem;
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
  border-color: var(--color-primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base) ease, padding var(--transition-base) ease;
  padding-inline: var(--space-lg);
}

.faq-answer p {
  margin: 0;
  padding-bottom: var(--space-md);
  font-size: var(--fs-small);
}

.faq-item.is-open .faq-answer {
  max-height: 300px;
}

/* ==========================================================================
   Final CTA
   A deliberately stronger blue treatment for this one section only — see
   design brief section 9. Text/buttons inside are overridden to sit
   correctly on the colour fill rather than the site's usual light tokens.
   ========================================================================== */

.final-cta {
  text-align: center;
  background-color: var(--color-primary);
  background-image: none;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-lg);
  margin-inline: var(--space-md);
}

.final-cta h2 {
  color: #ffffff;
  margin-bottom: var(--space-sm);
}

.final-cta p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 50ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.final-cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.final-cta .btn-primary {
  background-color: #ffffff;
  color: var(--color-primary);
}

.final-cta .btn-primary:hover {
  background-color: var(--color-background-blue);
}

.final-cta .btn-secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

.final-cta .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

/* ==========================================================================
   Footer
   The one other deliberately dark section on the site — a navy footer gives
   the page a confident close. Text/link colours below are literal
   white-based tones rather than the light-theme tokens, since this block
   sits on a dark fill (mirrors the .final-cta approach above).
   ========================================================================== */

.site-footer {
  background-color: var(--color-heading);
  color: rgba(255, 255, 255, 0.7);
  padding-block: var(--space-xl) var(--space-lg);
  margin-top: var(--space-2xl);
}

.site-footer .logo {
  color: #ffffff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-small);
  max-width: 32ch;
}

.footer-heading {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-sm);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-links a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-small);
}

.footer-links a:hover {
  color: #ffffff;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex-wrap: wrap;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-small);
  margin: 0;
}

.footer-legal {
  display: flex;
  gap: var(--space-md);
}

.footer-legal a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-small);
}

.footer-legal a:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Shared Form Styles
   Used by the consultation page's scheduling and callback forms.
   ========================================================================== */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-sm);
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-heading);
}

.form-group .optional {
  color: var(--color-text-muted);
  font-weight: 400;
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--color-heading);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.form-group textarea {
  resize: vertical;
  min-height: 90px;
}

.form-note {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  text-align: center;
}

.form-error-message {
  display: block;
  color: var(--color-danger);
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

.form-error-message:empty {
  display: none;
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: var(--color-danger);
}

/* Visually hides the honeypot spam-trap field without using display:none
   (some bots skip hidden fields, so this keeps it "visible" to naive scrapers
   while being unreachable and unannounced for real visitors). */
.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.form-confirmation {
  text-align: center;
  padding: var(--space-md) 0;
  /* Matches .consult-panel's own scroll-margin-top below — needed here too
     since scrollIntoView() targets this element directly, and CSS
     scroll-margin only applies to the element actually being scrolled to,
     not an ancestor's. Keeps the sticky header from covering the success
     message after a callback submission. */
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

.form-confirmation[hidden] {
  display: none;
}

.form-confirmation .icon-badge {
  margin-inline: auto;
  margin-bottom: var(--space-sm);
  background-color: rgba(30, 142, 90, 0.12);
  border-color: var(--color-success);
  color: var(--color-success);
}

/* ==========================================================================
   Legal / Policy Pages
   Serious document layout used by Privacy Policy, Service Agreement, and
   Refund Policy. Colours now come straight from the site's shared light
   theme tokens (see variables.css) rather than a separate palette.
   ========================================================================== */

.legal-main {
  padding-block: var(--space-2xl) var(--space-xl);
}

.legal-container {
  width: 100%;
  max-width: 850px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.legal-header {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.legal-effective-date {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-weight: 600;
  margin: 0;
}

.legal-article section {
  margin-bottom: var(--space-xl);
}

.legal-article h2 {
  font-size: 1.4rem;
  margin-top: var(--space-lg);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}

.legal-article h3 {
  font-size: 1.1rem;
  margin-top: var(--space-md);
}

.legal-article p {
  line-height: 1.75;
  max-width: 72ch;
}

.legal-article ul,
.legal-article ol {
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 var(--space-md);
  max-width: 72ch;
}

.legal-article li {
  line-height: 1.75;
}

.legal-article a {
  color: var(--color-primary);
  text-decoration: underline;
}

.legal-table-wrap {
  overflow-x: auto;
  margin: var(--space-md) 0 var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.legal-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.legal-table th,
.legal-table td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.legal-table thead th {
  background-color: var(--color-background-secondary);
  color: var(--color-heading);
  font-weight: 700;
}

.legal-table tbody tr:last-child td {
  border-bottom: none;
}

.legal-table th:last-child,
.legal-table td:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: var(--color-heading);
}

.legal-summary {
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-xl);
}

.legal-summary h2 {
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.legal-contact {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-xl);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.legal-back:hover {
  text-decoration: underline;
}

.legal-note {
  margin-top: var(--space-2xl);
  padding: var(--space-md) var(--space-lg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-background-secondary);
}

.legal-note p {
  font-size: var(--fs-small);
  margin: 0;
}

/* ==========================================================================
   Consultation Page (book-a-call.html)
   Shares the site's main light theme tokens directly — no separate palette
   or override layer needed now that the whole site is light.
   ========================================================================== */

.consult-main {
  padding-block: var(--space-2xl) var(--space-xl);
}

.consult-hero {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}


.consult-hero h1 {
  margin-bottom: var(--space-xs);
}

.consult-subhead {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

.consult-lead {
  font-size: 1.05rem;
}

.consult-trust-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
}

.consult-trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-heading);
}

.consult-trust-item .icon-badge {
  width: 32px;
  height: 32px;
  font-size: 1rem;
  flex-shrink: 0;
}

.consult-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  max-width: 900px;
  margin: var(--space-2xl) auto 0;
}

.consult-option-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.consult-option-card.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(20, 115, 230, 0.16);
}

.consult-option-card .icon-badge {
  margin-inline: auto;
  margin-bottom: var(--space-sm);
}

.consult-option-card h2 {
  font-size: 1.3rem;
  margin-bottom: var(--space-xs);
}

.consult-panels {
  max-width: 900px;
  margin: var(--space-2xl) auto 0;
}

.consult-panel {
  display: none;
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

.consult-panel.is-active {
  display: block;
}

.consult-panel h2 {
  margin-bottom: var(--space-xs);
}

.consult-panel-lead {
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.consult-scheduler {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-xl);
}

.consult-date-picker h3,
.consult-time-section h3,
.consult-appointment-form h3 {
  font-size: 1rem;
  margin-bottom: var(--space-sm);
}

.consult-date-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--space-xs);
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}

.date-chip,
.time-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  color: var(--color-heading);
  font-family: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.date-chip {
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.3rem;
}

.date-chip .dow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.date-chip .dom {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

.date-chip:hover,
.time-chip:hover {
  border-color: var(--color-primary);
}

.date-chip[aria-pressed="true"],
.time-chip[aria-pressed="true"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.date-chip[aria-pressed="true"] .dow {
  color: rgba(255, 255, 255, 0.8);
}

.consult-time-section {
  margin-bottom: var(--space-lg);
}

.consult-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.time-chip {
  padding: 0.65rem 0.5rem;
}

.consult-faq {
  max-width: 800px;
  margin: var(--space-2xl) auto 0;
}

.consult-faq > .section-header {
  margin-inline: auto;
}

.back-to-top-wrap {
  text-align: center;
  margin-top: var(--space-xl);
}

/* ==========================================================================
   Pricing Page (get-my-car.html)
   ========================================================================== */

.pricing-hero-section {
  padding-block: var(--space-xl) var(--space-lg);
  text-align: left;
}

.pricing-hero {
  width: 100%;
  max-width: 900px;
  margin-inline: 0;
}

.pricing-hero h1 {
  max-width: 760px;
  margin-bottom: var(--space-xs);
}

.pricing-hero p {
  font-size: 1.05rem;
  max-width: 850px;
}

.pricing-hero-note {
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.pricing-hero-note a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

.pricing-cards-section {
  padding-block: 0 var(--space-2xl);
}

.pricing-cards {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}

.pricing-card {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.pricing-card--featured {
  background-color: var(--color-background-blue);
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* Hover-only so touch devices (which have no real ":hover", just a lingering
   tap state) never get stuck in a "lifted" look — cards stay fully usable by
   tap either way since nothing functional depends on hover. */
@media (hover: hover) {
  .pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

  .pricing-card--featured:hover {
    box-shadow: var(--shadow-lg);
  }
}

/* Slim reassurance / decision-support strip below the two pricing cards.
   Shares the cards' own grid columns so each message roughly lines up
   under its corresponding card, without being part of either card. */
.pricing-support-row {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-md);
}

.pricing-support-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text);
}

.pricing-support-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.pricing-support-cta {
  flex-wrap: wrap;
}

.pricing-support-muted {
  color: var(--color-text-muted);
}

.pricing-support-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.pricing-support-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: var(--space-lg);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.pricing-badge--featured {
  background-color: var(--color-primary);
  color: #ffffff;
}

.pricing-badge--popular {
  background-color: var(--color-background-blue);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.pricing-card__label {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.pricing-card__title {
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
}

.pricing-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: var(--space-md);
}

.pricing-card__price {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-heading);
  line-height: 1;
}

.pricing-card__price-suffix {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-muted);
}

.pricing-card__description {
  margin-bottom: var(--space-md);
}

.pricing-card__benefits {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 var(--space-lg);
  flex-grow: 1;
}

.pricing-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--fs-small);
  color: var(--color-text);
}

.pricing-check-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-background-blue);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: 0.1rem;
}

.pricing-card--featured .pricing-check-icon {
  background-color: #ffffff;
}

.pricing-card__cta {
  margin-top: auto;
}

/* ---- Compare section ---- */

.compare-section {
  padding-block: var(--space-2xl);
}

.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.compare-table th,
.compare-table td {
  padding: 1rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.compare-table td:first-child,
.compare-table th:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background-color: var(--color-surface);
}

.compare-table thead th {
  background-color: var(--color-background-secondary);
  color: var(--color-heading);
  font-weight: 700;
}

.compare-table thead th:first-child {
  background-color: var(--color-background-secondary);
}

.compare-group-row td {
  background-color: var(--color-background-blue);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding-block: 0.65rem;
}

.compare-group-row td:first-child {
  background-color: var(--color-background-blue);
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-background-blue);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.compare-dash {
  color: var(--color-text-muted);
}

.compare-value-strong {
  font-weight: 700;
  color: var(--color-heading);
}

/* ==========================================================================
   Get My Car — Intake Drawer ($499 Negotiation Service)
   Right-side slide-in panel opened from the pricing card CTA. Reuses the
   shared .form-grid / .form-group / .form-error-message / .btn / .icon-badge
   patterns from the rest of the site rather than inventing new ones.
   ========================================================================== */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(23, 35, 60, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility 0s linear var(--transition-base);
}

.drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-base);
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 38vw;
  min-width: 440px;
  max-width: 560px;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  pointer-events: none;
  visibility: hidden;
  transition: transform var(--transition-base), visibility 0s linear var(--transition-base);
}

.drawer.is-open {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform var(--transition-base);
}

.drawer-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.drawer-logo {
  height: 52px;
  width: auto;
  flex-shrink: 0;
}

.drawer-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline: auto;
}

.drawer-progress-bar {
  display: block;
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-border);
  transition: background-color var(--transition-base), width var(--transition-base);
}

.drawer-progress-bar.is-active {
  width: 38px;
  background-color: var(--color-primary);
}

.drawer-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  /* Pushes the close button to the header's far right on its own — needed
     for single-step drawers with no progress indicator to fill the middle
     of the flex row (the multi-step drawer's .drawer-progress already does
     this via its own margin-inline: auto, so this is a harmless no-op there). */
  margin-left: auto;
}

.drawer-close:hover {
  background-color: var(--color-background-secondary);
  color: var(--color-heading);
}

.drawer-close:focus-visible,
.drawer-back:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}

.drawer-step[hidden] {
  display: none;
}

.drawer-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: var(--space-sm);
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}

.drawer-body h2 {
  color: var(--color-heading);
  margin-bottom: 0.4rem;
}

.drawer-subtext {
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.drawer-section-label {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-heading);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-sm);
}

.drawer-checkbox-group {
  margin-bottom: 0;
}

/* The callback form's consent block is the last item in its .form-grid,
   immediately followed by the "Request My Callback" button — .drawer-
   checkbox-group's shared margin-bottom: 0 above (relied on by the $499/
   $999 drawers, left untouched) puts the button right against the consent
   text there. Scoped to #callback-form only, so those other forms don't
   pick up this extra space. Measured from the whole block (including its
   error-message line) since margin-bottom applies to the container, not
   just the checkbox. */
#callback-form .drawer-checkbox-group {
  margin-bottom: var(--space-md);
}

.drawer-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}

/* .drawer-checkbox--consent is a deliberate modifier, not just
   .drawer-checkbox-group .drawer-checkbox — the trade-in checkbox on Step 1
   uses the same wrapper/label combo but should keep its normal dark text,
   so only the actual consent checkboxes (communication consent + the
   terms/policy sentence, in both the $499 and $999 drawers) opt in here.

   This also needs real specificity to win: a <label> inside .form-group is
   also matched by the site-wide ".form-group label" rule (font-weight: 600,
   color: var(--color-heading)), whose class+element specificity beats a
   bare single class like .drawer-checkbox regardless of source order.
   Matching the real markup nesting (.drawer-checkbox--consent always sits
   inside .drawer-checkbox-group) gives this rule two classes' worth of
   specificity, so it actually wins. Shared by every consent checkbox in
   both drawers, so they can't drift out of sync with each other. */
.drawer-checkbox-group .drawer-checkbox--consent {
  font-size: 0.875rem; /* ~14px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.drawer-checkbox input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--color-primary);
}

.drawer-checkbox a {
  color: var(--color-primary);
  font-weight: 600;
}

.drawer-tradein-note {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0.5rem 0 0;
  text-align: left;
}

.drawer-tradein-note strong {
  font-weight: 700;
  color: var(--color-text-muted);
}

.drawer-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background-color: var(--color-background-blue);
  border: 1px solid rgba(20, 115, 230, 0.25);
  border-radius: var(--radius-md);
}

.drawer-callout-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  font-style: normal;
}

.drawer-callout p {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.drawer-footer {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
  flex-shrink: 0;
}

.drawer-footer .btn {
  flex: 1;
}

.drawer-success {
  padding-block: var(--space-lg) var(--space-sm);
}

.drawer-success .btn {
  margin-top: var(--space-sm);
}

/* The "Next Step — Schedule Your Broker Consultation" block that now
   follows the initial request-received message inside the $499/$999
   success states — set off with a divider so the two moments ("we got your
   request" vs. "here's what to do next") read as visually distinct. */
.drawer-success-nextstep {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.drawer-success-nextstep h4 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

/* The post-Form-1 "Schedule Your Broker Consultation" step — a small,
   native date/time picker shown in place of the vehicle form once it has
   already succeeded. .drawer-schedule-received reuses .form-confirmation's
   centered layout and green .icon-badge tint for the "Request Received"
   header; everything below it (the actual date/time picker) is normal
   left-aligned drawer content, matching the vehicle form's own step
   layout, since a form control grid centered on its own looks odd. */
.drawer-schedule {
  padding-block: var(--space-sm) 0;
}

.drawer-schedule-field {
  margin-bottom: var(--space-md);
}

/* Reuses book-a-call.html's existing .consult-date-grid/.date-chip and
   .consult-time-grid/.time-chip components as-is (same Maple-blue selected
   state via [aria-pressed="true"]) rather than building a second date/time
   picker UI — this is purely a narrower context, not a different design.
   The 340px max-height on .consult-date-grid is sized for a full scheduler
   page; capped tighter here so it doesn't dominate the drawer's own
   scrollable body. */
.drawer-schedule .consult-date-grid {
  max-height: 220px;
}

.drawer-schedule-summary {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-heading);
}

/* Small "Vehicle Request / Consultation Requested / Service Activation"
   status strip shown in the final success state of the $499/$999 drawers.
   Service Activation is deliberately never marked done from the browser —
   nothing here can actually confirm a booking or a payment, only a Maple
   Car Broker agent can. */
.funnel-progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.funnel-progress-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.funnel-progress-step.is-done {
  color: var(--color-success);
}

.funnel-progress-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.65rem;
  flex-shrink: 0;
}

.funnel-progress-step.is-done .funnel-progress-marker {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}

body.drawer-open {
  overflow: hidden;
}

/* Slightly stronger error state inside the drawer only — a subtle red tint
   on top of the shared .form-group.has-error border colour already used
   site-wide, so other forms (e.g. book-a-call.html) are unaffected. */
.drawer .form-group.has-error input,
.drawer .form-group.has-error select,
.drawer .form-group.has-error textarea {
  background-color: rgba(220, 38, 38, 0.05);
}