/* ============================================================
   WOODLEY COLLISION — HOMEPAGE SECTIONS
   One block per section. Order: HERO, (more added later).
   ============================================================ */

/* ============================================================
   HERO
   Centered text block (subtitle pill, H1, subtext, CTAs) above a
   before/after image comparison slider. Section pads 32px top /
   42px bottom; inner block is centered.
   ============================================================ */
.hero {
  padding-top: 32px;
  padding-bottom: 42px;
}
.hero__inner {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--header-pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-20);
}

/* ----- Text group ----- */
.hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
  width: 100%;
}
.hero__title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-16);
  width: 100%;
}

/* Subtitle pill */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-12);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body-s);
  font-weight: 400;
  line-height: var(--lh-body);
  color: #1c1c1c;
  white-space: nowrap;
}
.hero__eyebrow svg { width: 16px; height: 16px; fill: none; stroke-width: 1.75; flex-shrink: 0; }

/* Title + subtext */
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  text-align: center;
  width: 100%;
}
.hero__title {
  font-weight: 600;
  /* fluid: 40px (mobile) -> 62px (desktop) */
  font-size: clamp(2.5rem, 1.4rem + 3.2vw, 3.875rem);
  line-height: 1.06;
  color: var(--gray-900);
  /* Wide enough for the long line ("Collision Repair That Restores")
     at 62px (~946px) so the explicit <br> controls the 2-line break
     instead of an arbitrary cap forcing a 3rd line. Caps at viewport. */
  max-width: min(960px, 100%);
  text-wrap: balance;
}
.hero__subtext {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  max-width: 600px;
}

/* CTA row */
.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

/* ============================================================
   BEFORE / AFTER COMPARISON SLIDER
   Two stacked images of the same car; the top ("after") layer is
   clipped to a width set by --pos (0-100%). A draggable handle
   controls --pos. Works with mouse, touch, and keyboard.
   ============================================================ */
.ba {
  --pos: 50%;
  position: relative;
  width: 800px;
  max-width: 100%;
  aspect-ratio: 800 / 457;     /* matches Figma car frame */
  user-select: none;
  touch-action: pan-y;         /* horizontal drags move the slider; vertical swipes keep scrolling the page */
  margin-inline: auto;
}

/* Image layers fill the box; same size & alignment so they register. */
.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.ba__layer {
  position: absolute;
  inset: 0;
}
/* Top layer (after) is clipped from the left edge to --pos. */
.ba__layer--after {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Divider line at the split */
.ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  transform: translateX(-1px);
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  pointer-events: none;
}

/* Drag handle (pill with two chevrons) */
.ba__handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  width: 52px;
  height: 52px;
  background: var(--white);
  border-radius: var(--radius-round);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0,0,0,0.03);
  cursor: ew-resize;
  color: var(--gray-900);
  transition: box-shadow var(--dur) var(--ease);
}
.ba__handle:hover { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0,0,0,0.04); }
.ba__handle:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }
.ba__handle svg { width: 16px; height: 16px; fill: none; stroke-width: 2.25; display: block; flex-shrink: 0; }
.ba__handle svg:first-child { margin-right: -3px; }   /* tuck chevrons together */


/* ----- Mobile ----- */
@media (max-width: 600px) {
  .hero__title {
    font-size: clamp(2.125rem, 1.65rem + 2.2vw, 2.5rem);
    line-height: 1.08;
  }
  .hero__eyebrow {
    font-size: 0.75rem;        /* 12px on mobile per design */
    line-height: 1.33;
    white-space: normal;
    text-align: center;
  }
  .hero__cta {
    flex-direction: column;
    width: 100%;
    max-width: 358px;
  }
  .hero__cta .btn { width: 100%; justify-content: space-between; }
  .ba { aspect-ratio: 358 / 223; }   /* mobile proportion from Figma */
  .ba__handle { width: 48px; height: 48px; }
  .ba__handle svg { width: 15px; height: 15px; }
}

/* ============================================================
   TRUST BAR (Statistics)
   Four feature items (icon + uppercase title + description).
   Sits as a band directly under the hero; rounded top corners,
   subtle white-to-transparent top gradient. Desktop = row,
   mobile = centered stack.
   ============================================================ */
.trust {
  position: relative;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  background: linear-gradient(to bottom, var(--white), rgba(255, 255, 255, 0));
  padding-block: 47px;
}
/* Visible hairline that traces the rounded top edge. A pseudo-element
   gives us a true 1px border that follows the radius and fades toward
   the sides (matching the Figma's soft top divider). */
.trust::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  border: 1px solid var(--gray-100);
  border-bottom: none;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  pointer-events: none;
}

/* Scroll button — centered on the top border line, half above / half below */
.trust__scroll {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--gray-900);
  color: var(--white);
  border-radius: var(--radius-round);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.trust__scroll:hover,
.trust__scroll:focus-visible {
  background: var(--color-red);
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 20px rgba(225, 26, 23, 0.30);
}
.trust__scroll:active { transform: translate(-50%, -50%); }
.trust__scroll svg { width: 20px; height: 20px; fill: none; stroke-width: 2; }
.trust__inner {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--header-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-32);
}

.trust__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8);
}
.trust__icon {
  width: 20px;
  height: 20px;
  color: var(--gray-900);
}
.trust__icon svg { width: 100%; height: 100%; fill: none; stroke-width: 1.75; display: block; }

.trust__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.trust__title {
  font-size: 1.125rem;          /* 18px */
  font-weight: 600;
  line-height: 1.22;
  text-transform: uppercase;
  color: var(--gray-900);
  white-space: nowrap;
}
.trust__desc {
  font-size: var(--fs-body-s);  /* 14px */
  font-weight: 400;
  line-height: 1.571;
  color: #717171;
  white-space: nowrap;
}

/* ----- Tablet: allow wrapping to 2x2 if it gets tight ----- */
@media (max-width: 1024px) {
  .trust__inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-32) var(--sp-40);
  }
  .trust__item { flex: 0 0 calc(50% - var(--sp-40)); }
}

/* ----- Mobile: centered vertical stack ----- */
@media (max-width: 600px) {
  .trust {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    padding-block: 35px;
  }
  .trust::before {
    height: 32px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
  .trust__inner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--sp-20);
  }
  .trust__item {
    flex: initial;
    align-items: center;
    gap: var(--sp-4);
  }
  .trust__text { gap: var(--sp-2); align-items: center; }
  .trust__title { font-size: 1rem; line-height: 1.375; text-align: center; }   /* 16px */
  .trust__desc { font-size: 0.75rem; line-height: 1.333; text-align: center; white-space: normal; }  /* 12px */
}

/* ============================================================
   SERVICES  (Complete Collision Services)
   Header row (H2 + subtext left, CTA right) above a grid of
   service cards. 60px top / 120px bottom. Desktop 4-up, the
   cards wrap responsively; mobile = single column + CTA below.
   ============================================================ */
.services {
  padding-top: 60px;
  padding-bottom: 120px;
}
.services__inner {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--header-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
}

/* --- Header row --- */
.services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
}
.services__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  max-width: 600px;
}
.services__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);   /* 28 -> 36px */
  font-weight: 600;
  line-height: 1.22;
  color: var(--gray-900);
}
.services__subtitle {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: #555;
}
.services__cta { flex-shrink: 0; }

/* --- Grid of cards --- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-16);
}
/* Cards stretch to fill their grid cell instead of fixed 298px */
.services__grid .svc-card { width: 100%; }

/* ----- Responsive grid steps ----- */
@media (max-width: 1100px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .services {
    padding-top: 36px;
    padding-bottom: 60px;
  }
  .services__head { flex-direction: column; align-items: stretch; gap: var(--sp-20); }
  .services__heading { max-width: none; }
  .services__cta { width: 100%; }
  .services__cta .btn { width: 100%; justify-content: space-between; }
  .services__grid { grid-template-columns: 1fr; gap: var(--sp-16); }
}

/* ============================================================
   PROCESS  (Collision Repair Made Easier to Manage)
   Full-bleed dark band. Header row (white H2 + subtext left,
   white CTA right) above a 4-step row separated by vertical
   rules. Mobile: steps stack with horizontal rules, CTA last.
   ============================================================ */
.process {
  background: var(--gray-900);
  color: var(--white);
  padding-block: 84px;
}
.process__inner {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--header-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
}

/* --- Header row --- */
.process__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
}
.process__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  max-width: 600px;
}
.process__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);   /* 28 -> 36px */
  font-weight: 600;
  line-height: 1.22;
  color: var(--white);
}
.process__subtitle {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-200);
}
.process__cta { flex-shrink: 0; }
/* Mobile-only CTA is hidden on desktop (declared before the media query
   so the mobile override wins). */
.process__cta--mobile { display: none; }
/* White CTA on dark: invert the primary button */
.process .btn--invert {
  background: var(--white);
  color: var(--gray-900);
}
.process .btn--invert .btn__icon { background: var(--gray-900); color: var(--white); }
.process .btn--invert:hover {
  background: var(--color-red);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(225, 26, 23, 0.35);
}
.process .btn--invert:hover .btn__icon { background: var(--white); color: var(--color-red); }

/* --- Steps row --- */
.process__steps {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--sp-32);
}
.process__step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  flex: 1;
  max-width: 270px;
}
.process__num {
  font-size: var(--fs-body);    /* 16px */
  font-weight: 500;
  line-height: var(--lh-snug);
  color: #717171;
}
.process__step-title {
  font-size: 1.5rem;            /* 24px */
  font-weight: 600;
  line-height: 1.167;
  color: var(--white);
}
.process__step-desc {
  font-size: var(--fs-body-s);  /* 14px */
  font-weight: 300;             /* Poppins Light */
  line-height: 1.571;
  color: var(--gray-200);
}

/* Vertical divider between steps */
.process__divider {
  width: 1px;
  align-self: center;
  height: 184px;
  background: rgba(255, 255, 255, 0.14);
  border: none;
  flex-shrink: 0;
}

/* ----- Tablet: 2x2 grid of steps ----- */
@media (max-width: 900px) {
  .process__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-32) var(--sp-40);
  }
  .process__step { max-width: none; }
  .process__divider { display: none; }   /* rules don't fit a grid cleanly */
}

/* ----- Mobile: vertical stack with horizontal rules ----- */
@media (max-width: 600px) {
  .process { padding-block: 36px; }
  .process__inner { gap: var(--sp-32); }
  .process__head { flex-direction: column; align-items: stretch; }
  .process__heading { max-width: none; }
  .process__title { font-size: 1.75rem; line-height: 1.143; }   /* 28px */

  /* CTA moves to the very bottom on mobile (after steps) */
  .process__head { order: 0; }
  .process__cta { display: none; }            /* hide top CTA */
  .process__cta--mobile {
    display: block;
    order: 2;
  }
  .process__cta--mobile .btn { width: 100%; justify-content: space-between; }

  .process__steps {
    display: flex;
    flex-direction: column;
    gap: var(--sp-20);
    order: 1;
  }
  .process__step { gap: var(--sp-12); }
  .process__step-title { font-size: 1.25rem; line-height: 1.2; }   /* 20px */
  .process__divider {
    width: 100%;
    height: 1px;
    align-self: stretch;
  }
}

/* ============================================================
   INSURANCE  (Insurance Claim Assistance)
   Header row (H2 + subtext left, outlined CTA right) above a
   full-bleed running logo marquee. 120px top / 120px bottom.
   Mobile: CTA moves below the marquee, full-width.
   ============================================================ */
.insurance {
  padding-block: 120px;
  overflow: hidden;   /* contain the full-bleed marquee */
}
.insurance__inner {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
}

/* Header row */
.insurance__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
}
.insurance__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  max-width: 600px;
}
.insurance__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);   /* 28 -> 36px */
  font-weight: 600;
  line-height: 1.22;
  color: var(--gray-900);
}
.insurance__subtitle {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: #555;
}
.insurance__cta { flex-shrink: 0; }
/* Mobile-only CTA hidden on desktop (declared before media query) */
.insurance__cta--mobile { display: none; }

/* Marquee breaks out of the container to span full width */
.insurance__marquee {
  margin-top: var(--sp-4);
}
.insurance__notes {
  margin-top: calc(var(--sp-36) * -0.55);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  max-width: 920px;
}
.insurance__note {
  color: #555;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.insurance__disclaimer {
  color: #717171;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ----- Mobile ----- */
@media (max-width: 600px) {
  .insurance { padding-block: 60px; }
  .insurance__inner { gap: var(--sp-32); }
  .insurance__head { flex-direction: column; align-items: stretch; }
  .insurance__heading { max-width: none; }
  .insurance__title { font-size: 1.75rem; line-height: 1.143; }   /* 28px */

  /* Order: heading -> marquee -> CTA at bottom */
  .insurance__head { order: 0; }
  .insurance__marquee { order: 1; }
  .insurance__notes { order: 2; margin-top: calc(var(--sp-32) * -0.5); }
  .insurance__cta { display: none; }
  .insurance__cta--mobile { display: block; order: 3; }
  .insurance__cta--mobile .btn { width: 100%; justify-content: space-between; }
  .insurance__inner { display: flex; flex-direction: column; }
}

/* ============================================================
   GALLERY  (See the Difference Professional Repair Makes)
   Header row (H2 + subtext left, outlined CTA right) above a row
   of 3 before/after comparison cards (interactive sliders).
   Top = 0 (previous section already pads 120px bottom),
   bottom = 120px. Mobile: cards scroll horizontally, CTA below.
   ============================================================ */
.gallery {
  padding-top: 0;
  padding-bottom: 120px;
}
.gallery__inner {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
}

/* Header row */
.gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
}
.gallery__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  max-width: 600px;
}
.gallery__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);   /* 28 -> 36px */
  font-weight: 600;
  line-height: 1.22;
  color: var(--gray-900);
}
.gallery__subtitle {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: #555;
}
.gallery__cta { flex-shrink: 0; }
.gallery__cta--mobile { display: none; }

/* Row of 3 comparison cards */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-24);
}
/* Each card is a labeled before/after slider with fixed aspect */
.gallery__grid .ba {
  width: 100%;
  aspect-ratio: 397 / 260;
}

/* ----- Tablet: 2 cards, third wraps ----- */
@media (max-width: 1000px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Mobile: horizontal scroll row, CTA below ----- */
@media (max-width: 600px) {
  .gallery { padding-bottom: 60px; }
  .gallery__inner { gap: var(--sp-32); }
  .gallery__head { flex-direction: column; align-items: stretch; }
  .gallery__heading { max-width: none; }
  .gallery__title { font-size: 1.75rem; line-height: 1.143; }   /* 28px */

  /* Order: heading -> cards -> CTA */
  .gallery__head { order: 0; }
  .gallery__grid {
    order: 1;
    display: flex;
    gap: var(--sp-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* bleed to screen edges so cards can peek */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .gallery__grid::-webkit-scrollbar { display: none; }
  .gallery__grid .ba {
    flex: 0 0 min(326px, calc(100vw - 2 * var(--gutter)));
    width: min(326px, calc(100vw - 2 * var(--gutter)));
    aspect-ratio: 326 / 210;
    scroll-snap-align: start;
  }
  .gallery__cta { display: none; }
  .gallery__cta--mobile { display: block; order: 2; }
  .gallery__cta--mobile .btn { width: 100%; justify-content: space-between; }
}

/* ============================================================
   REVIEWS  (What Our Customers Say)
   Header row (H2 + subtext left, outlined CTA right) above a row
   of 3 review cards. Top = 0 (gallery already pads 120px bottom),
   bottom = 120px. Mobile: cards scroll horizontally, CTA below.
   ============================================================ */
.reviews {
  padding-top: 0;
  padding-bottom: 120px;
}
.reviews__inner {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--sp-36);
}

/* Header row */
.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
}
.reviews__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  max-width: 600px;
}
.reviews__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);   /* 28 -> 36px */
  font-weight: 600;
  line-height: 1.22;
  color: var(--gray-900);
}
.reviews__subtitle {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: #555;
}
.reviews__cta { flex-shrink: 0; }
.reviews__cta--mobile { display: none; }

/* Row of 3 review cards */
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-24);
}
.reviews__grid .review-card { width: 100%; }

/* ----- Tablet: 2 columns ----- */
@media (max-width: 1000px) {
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Mobile: horizontal scroll, CTA below ----- */
@media (max-width: 600px) {
  .reviews { padding-bottom: 60px; }
  .reviews__inner { gap: var(--sp-32); }
  .reviews__head { flex-direction: column; align-items: stretch; }
  .reviews__heading { max-width: none; }
  .reviews__title { font-size: 1.75rem; line-height: 1.143; }   /* 28px */

  .reviews__head { order: 0; }
  .reviews__grid {
    order: 1;
    display: flex;
    gap: var(--sp-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .reviews__grid::-webkit-scrollbar { display: none; }
  .reviews__grid .review-card {
    flex: 0 0 min(326px, calc(100vw - 2 * var(--gutter)));
    width: min(326px, calc(100vw - 2 * var(--gutter)));
    min-height: 294px;
    scroll-snap-align: start;
  }
  .reviews__cta { display: none; }
  .reviews__cta--mobile { display: block; order: 2; }
  .reviews__cta--mobile .btn { width: 100%; justify-content: space-between; }
}

/* ============================================================
   FAQ  (Frequently Asked Questions)
   Two columns on desktop: sticky left (heading + CTA), right
   accordion. Single column on mobile with the CTA at the bottom.
   Top = 0 (reviews already pads 120px bottom), bottom = 120px.
   ============================================================ */
.faq-section {
  padding-top: 0;
  padding-bottom: 120px;
}
.faq-section__inner {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-24);
}

/* Left column (sticky) */
.faq-section__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-24));
  flex: 0 0 560px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.faq-section__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.faq-section__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);   /* 28 -> 36px */
  font-weight: 600;
  line-height: 1.22;
  color: var(--gray-900);
}
.faq-section__subtitle {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: #555;
}
.faq-section__cta { align-self: flex-start; }
.faq-section__cta--mobile { display: none; }

/* Right column (accordion) */
.faq-section__list {
  flex: 1 1 auto;
  min-width: 0;
}

/* ----- Mobile: single column, CTA at bottom ----- */
@media (max-width: 860px) {
  .faq-section { padding-bottom: 60px; }
  .faq-section__inner {
    flex-direction: column;
    gap: var(--sp-32);
  }
  .faq-section__aside {
    position: static;
    flex: initial;
    max-width: none;
    width: 100%;
  }
  .faq-section__title { font-size: 1.75rem; line-height: 1.143; }   /* 28px */
  .faq-section__list { width: 100%; }

  /* CTA from the aside hides; a full-width one shows at the very bottom */
  .faq-section__cta { display: none; }
  .faq-section__cta--mobile { display: block; order: 3; width: 100%; }
  .faq-section__cta--mobile .btn { width: 100%; justify-content: space-between; }
}

/* ============================================================
   CTA  (Don't Delay Your Vehicle Inspection)
   Rounded banner with a full-bleed background photo and a dark
   gradient overlay (left→right on desktop, top→bottom on mobile)
   so the white text stays legible. Top = 0 (FAQ pads 120px
   bottom), bottom = 120px.
   ============================================================ */
.cta-band {
  padding-top: 0;
  padding-bottom: 120px;
}
.cta-band__inner {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 64px 52px;
  display: flex;
  align-items: center;
}
/* Background image + gradient */
.cta-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-banner__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-banner__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* desktop: dark left → transparent right */
  background: linear-gradient(to right, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.4) 48%, rgba(0,0,0,0) 85%);
}

/* Content */
.cta-banner__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  width: 600px;
  max-width: 100%;
}
.cta-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.cta-banner__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);   /* 28 -> 36px */
  font-weight: 600;
  line-height: 1.22;
  color: var(--white);
}
.cta-banner__subtitle {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-200);
}
.cta-banner__towing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.cta-banner__towing svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-red, #e11a17);
}
.cta-banner__towing strong {
  font-weight: 700;
}
.cta-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
/* Outlined button on dark: white text + border */
.cta-banner .btn--ghost-light {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--white);
}
.cta-banner .btn--ghost-light .btn__icon { background: var(--white); color: var(--gray-900); }
.cta-banner .btn--ghost-light:hover {
  border-color: var(--color-red);
  background: rgba(225, 26, 23, 0.12);
}
.cta-banner .btn--ghost-light:hover .btn__icon { background: var(--color-red); color: var(--white); }
/* Solid white button on photo: white bg, dark text, dark icon bubble */
.cta-banner .btn--on-photo {
  background: var(--white);
  color: var(--gray-900);
}
.cta-banner .btn--on-photo .btn__icon { background: var(--gray-900); color: var(--white); }
.cta-banner .btn--on-photo:hover {
  background: var(--color-red);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(225, 26, 23, 0.35);
}
.cta-banner .btn--on-photo:hover .btn__icon { background: var(--white); color: var(--color-red); }

/* ----- Mobile ----- */
@media (max-width: 600px) {
  .cta-band { padding-bottom: 60px; }
  .cta-banner {
    border-radius: 24px;
    padding: 36px 24px;
    align-items: flex-start;
    min-height: clamp(440px, 115vw, 520px);        /* room for the photo to show below the text */
  }
  .cta-banner__bg::after {
    /* mobile: dark top → transparent bottom (photo shows at the bottom) */
    background: linear-gradient(to bottom, #000 38%, rgba(0,0,0,0.5) 58%, rgba(0,0,0,0) 78%);
  }
  .cta-banner__content { width: 100%; align-self: stretch; }
  .cta-banner__actions { flex-direction: column; width: 100%; }
  .cta-banner__actions .btn { width: 100%; justify-content: space-between; }
}

/* ============================================================
   FORM SECTION  (Request a Free Repair Estimate)
   Two columns on desktop: sticky left (heading + contact info),
   right form card. Single column on mobile (contact block then
   the form). Top = 0 (CTA pads 120px bottom), bottom = 120px.
   ============================================================ */
.form-section {
  padding-top: 0;
  padding-bottom: 120px;
}
.form-section__inner {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-24);
}

/* Left column (sticky) */
.form-section__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-24));
  flex: 0 0 560px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-48);
}
.form-section__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.form-section__title {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);   /* 28 -> 36px */
  font-weight: 600;
  line-height: 1.22;
  color: var(--gray-900);
}
.form-section__subtitle {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: #555;
}

/* Contact info rows */
.form-contact { display: flex; flex-direction: column; gap: var(--sp-20); }
.form-contact__row { display: flex; align-items: center; gap: var(--sp-12); }
.form-contact__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-round);
  color: var(--gray-900);
}
.form-contact__icon svg { width: 20px; height: 20px; }
.form-contact__text { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-contact__label {
  font-size: var(--fs-body-s);  /* 14px */
  font-weight: 500;
  line-height: 1.571;
  color: #8d8d8d;
  text-transform: uppercase;
}
.form-contact__value {
  font-size: var(--fs-body);    /* 16px */
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--gray-900);
}

/* Right column: the form card */
.form-section__card {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding: var(--sp-24);
  background: var(--white);
  border: 1px solid var(--gray-50);
  border-radius: 32px;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.01);
}
.form-section__fields { display: flex; flex-direction: column; gap: var(--sp-16); }
.form-section__submit { width: 100%; }
.form-section__submit .btn { width: 100%; justify-content: space-between; }

/* ----- Validation states (woodley-leads.js) ----- */
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid,
.dropzone.is-invalid { border-color: #E30613; }
input[type="checkbox"].is-invalid { outline: 2px solid #E30613; outline-offset: 1px; }
.field-error {
  display: block;
  margin-top: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #E30613;
}
.consent .field-error { flex-basis: 100%; }

/* Inline server-error shown above the submit button */
.wl-form-error {
  margin-bottom: var(--sp-16);
  padding: 12px 16px;
  border: 1px solid #E30613;
  border-radius: 12px;
  background: #fdf1f1;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #E30613;
}

/* Sending state */
.btn.is-sending { opacity: 0.7; pointer-events: none; }

/* ----- Thank-you card (replaces the form after a successful submit) ----- */
.wl-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  min-height: 320px;
  padding: 48px 32px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 24px;
  text-align: center;
  font-family: "Poppins", sans-serif;
}
.wl-thanks__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-round);
  background: var(--gray-900);
  color: var(--white);
}
.wl-thanks__icon svg { width: 30px; height: 30px; }
.wl-thanks__title {
  font-size: 1.75rem;   /* 28px */
  font-weight: 600;
  line-height: 1.2;
  color: var(--gray-900);
}
.wl-thanks__text {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  max-width: 420px;
}

/* ----- Mobile: single column ----- */
@media (max-width: 860px) {
  .form-section { padding-bottom: 60px; }
  .form-section__inner { flex-direction: column; gap: var(--sp-32); }
  .form-section__aside {
    position: static;
    flex: initial;
    max-width: none;
    width: 100%;
    gap: var(--sp-32);
  }
  .form-section__title { font-size: 1.75rem; line-height: 1.143; }   /* 28px */
  .form-section__card {
    width: 100%;
    border-radius: 24px;
  }
  /* stack the multi-column rows */
  .form-section__card .field-row { flex-direction: column; gap: var(--sp-16); }
}