/* ==========================================================================
   Gleaming — "For your vehicle" page (Figma 1256:10957 desktop / 1256:13233 mobile)
   Desktop >=1024 matches the 1440 frame; mobile <768 matches the 402 frame.
   ========================================================================== */

/* Page scaffolding: flex column so the mobile design's section order
   (services2 before CTA, additional-services visible) can be expressed. */
main {
  display: flex;
  flex-direction: column;
  overflow-x: clip; /* hero image / bubbles bleed off-canvas by design */
}

/* GL2 desktop frame 1256:10957 page background is pure white (not #FCFCFC),
   like the other GL2 frames. Also fixes the translucent --color-card-bg
   cards: rgba(227,228,252,.2) over white = the frame's (249,250,254).
   Scoped to desktop so mobile numbers hold. */
@media (min-width: 768px) {
  body {
    background: #ffffff;
  }
}

/* ==========================================================================
   1. Hero (heading 1256:11088, lead+CTA 1256:11083, image 1256:11271)
   ========================================================================== */
.v-hero {
  position: relative;
}

.v-hero__inner {
  position: relative;
  z-index: 1;
}

.v-hero__title {
  max-width: 710px;
  margin-top: 157px;
}

.v-hero__lead {
  max-width: 520px;
  margin-top: 27px;
}

.v-hero__cta {
  margin-top: 27px;
}

.v-hero__img {
  position: absolute;
  top: 54px;
  right: 0; /* GL2 car art: node (805,228) clipped by the frame to 635x457 */
  width: 635px;
  height: 457px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

@media (min-width: 1024px) {
  .v-hero {
    min-height: 511px; /* image bottom (685) minus header bottom (174) */
  }
}

@media (max-width: 1023px) {
  .v-hero__title {
    margin-top: 64px;
  }

  .v-hero__img {
    position: static;
    width: 92%;
    height: auto;
    margin-top: 40px;
    margin-left: auto;
    margin-right: -10%;
  }
}

@media (max-width: 767px) {
  .v-hero__title {
    margin-top: 35px;
  }

  .v-hero__lead {
    margin-top: 20px;
  }

  .v-hero__cta {
    margin-top: 27px;
  }

  /* GL2 mobile: 377x271 at x=66 (template-matched, mean 1.37) */
  .v-hero__img {
    width: 377px;
    max-width: none;
    height: 271px;
    margin: 0 0 0 66px;
  }
}

/* ==========================================================================
   2. Vehicle services — 5-card row, overflows the viewport (1256:11090)
   ========================================================================== */
.v-services {
  margin-top: 117px;
}

.v-services__row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-inline: max(var(--page-pad), calc((100vw - var(--container-max)) / 2));
  scrollbar-width: none;
}

.v-services__row::-webkit-scrollbar {
  display: none;
}

.v-services__card {
  flex: 0 0 305px;
  min-height: 368px; /* Figma row 1256:11090 is 368 tall */
  gap: 16px; /* Figma: icon->title 16, title->text 16 (shared .card has 24) */
}

.v-services__card .card__title {
  font-size: var(--text-h4);
}

/* Book link pinned to the card bottom (Figma actions y = height - 48) */
.v-services__card .link-more {
  margin-top: auto;
}

@media (max-width: 1023px) {
  .v-services__row {
    padding-inline: var(--page-pad-tablet);
  }
}

@media (max-width: 767px) {
  .v-services {
    margin-top: 90px;
  }

  .v-services__row {
    flex-direction: column;
    overflow: visible;
    padding-inline: var(--page-pad-mobile);
  }

  .v-services__card {
    flex: 0 0 auto;
    width: 100%;
    min-height: 341px; /* Figma mobile: all four cards fixed 341, pitch 361 */
    padding-block: 31.5px; /* GL2 node: Content Top y=31.5 (cards 1-2) */
  }

  /* GL2 node: cards 3-4 inset their content 45px instead */
  .v-services__card:nth-child(3),
  .v-services__card:nth-child(4) {
    padding-block: 45px;
  }

  /* the mobile frame shows only four cards */
  .v-services__card--extra {
    display: none;
  }
}

/* ==========================================================================
   3. Full-bleed photo band (Rectangle 4290 + 4289, visible 1440x682)
   ========================================================================== */
.v-band {
  margin-top: 38px; /* GL2 band starts at 1208 (was 80px for the 682px band) */
}

.v-band img {
  width: 100%;
  height: 724px; /* GL2 Rectangle 4289 is 1440x724 */
  object-fit: cover;
  border-radius: var(--radius-card);
}

@media (max-width: 1023px) {
  .v-band img {
    height: 480px;
  }
}

@media (max-width: 767px) {
  /* GL2 mobile: Rectangle 4289 is 541x272 at (-59, 2313); the white sheet
     (Rectangle 4290) covers it down to 2346, leaving a 402x239 window */
  .v-band {
    margin-top: 133px;
    overflow: hidden;
    height: 239px;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .v-band img {
    width: 541px;
    max-width: none;
    height: auto;
    margin: -33px 0 0 -59px;
    border-radius: 0;
  }
}

/* ==========================================================================
   4. Service teasers (heading 1256:11142, cards 1256:11272)
   ========================================================================== */
.v-teasers {
  margin-top: 143px; /* GL2: band bottom 1932 -> heading cap line 2087 (ink offset 12) */
}

.v-teasers__title {
  max-width: 647px;
  margin-inline: auto;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h1); /* 56px */
  line-height: var(--leading-tight);
  text-align: center;
}

.v-teasers__grid {
  display: flex;
  justify-content: center;
  gap: 106px;
  margin-top: 95px; /* GL2: two-line heading box bottom 2209 -> photos 2304 */
}

.v-teaser {
  width: 426px;
  max-width: 100%;
}

/* Figma frame heights (1256:11273 = 490, 1256:11284 = 517): the second
   teaser's text block is a line taller, which sets the section's bottom */
.v-teaser:nth-child(1) { min-height: 490px; }
.v-teaser:nth-child(2) { min-height: 517px; }

.v-teaser__photo {
  width: 100%;
  height: 287px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.v-teaser__body {
  max-width: 365px;
  margin-top: 16px;
}

.v-teaser__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h4); /* 32px */
  line-height: var(--leading-h4);
}

.v-teaser__text {
  margin-top: 16px;
  font-family: "Poppins", var(--font-body);
  font-size: 17px;   /* GL2 teaser body (3 lines over the 426px column) */
  line-height: 24px;
}

.v-teaser__body .link-more {
  margin-top: 24px;
}

@media (max-width: 1023px) {
  .v-teasers__grid {
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .v-teasers {
    margin-top: 349px; /* GL2: band bottom 2585 -> title node top 2934 */
  }

  .v-teasers__title {
    font-size: var(--text-h1-mobile); /* 32px, two lines = 64px node */
    line-height: var(--leading-none);
  }

  .v-teasers__grid {
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
  }

  .v-teaser {
    width: 100%;
  }

  .v-teaser:nth-child(1),
  .v-teaser:nth-child(2) {
    min-height: 362px; /* Figma mobile: both teaser frames 362 */
  }

  .v-teaser__photo {
    height: 203px;
  }

  .v-teaser__heading {
    font-size: 24px;
  }

  .v-teaser__text {
    margin-top: 4px;
    /* GL2 mobile body is Cabinet Grotesk (double-story 'a' in the frame),
       not the desktop Poppins: 16px, 3 lines at pitch 24 */
    font-family: var(--font-heading);
    font-size: 16px;
  }

  .v-teaser__body .link-more {
    margin-top: 12px;
  }
}

/* ==========================================================================
   5. Our work — before/after carousel (1256:10962 + 1256:11022)
   Decorative bubbles: Group 2087326464 (886px + 411px, off-canvas left)
   ========================================================================== */
.v-work {
  position: relative;
  margin-top: 371px;
}

.v-work__bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.v-work__bubble {
  position: absolute;
}

.v-work__bubble--lg {
  left: -254px;
  top: -323px;
  width: 886px;
  height: 886px;
  max-width: none;
}

.v-work__bubble--sm {
  left: 208px;
  top: -277px;
  width: 411px;
  height: 411px;
  max-width: none;
}

.v-work .container {
  position: relative;
  z-index: 1;
}

.v-work__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px; /* Figma node is 72px tall, lh 1 (same as home "Our work") */
  line-height: var(--leading-none);
  text-align: center;
}

.v-work__carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin-top: 58px;
  padding: 10px; /* Figma frame 1256:11022 insets its content 10px */
}

.v-work__figures {
  display: flex;
  gap: 40px;
  min-width: 0;
}

.v-work__figure {
  flex: 1 1 498px;
  max-width: 498px;
}

.v-work__figure img {
  width: 100%;
  height: auto; /* beat the height="498" presentational hint so aspect-ratio applies */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.v-work__figure figcaption {
  margin-top: 26px;
  font-family: var(--font-heading);
  font-size: var(--text-h4); /* 32px */
  line-height: 1.375; /* Figma caption node 44 tall */
  text-align: center; /* ref-verified on home's identical carousel */
}

.v-work__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  align-self: flex-start;
  margin-top: 252px; /* Figma: arrow y=252 in the carousel frame */
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 4px 16px rgba(20, 20, 20, 0.08);
}

@media (max-width: 1023px) {
  .v-work__bubbles {
    display: none;
  }

  .v-work__arrow {
    margin-top: 0;
    align-self: center;
  }
}

@media (max-width: 767px) {
  .v-work {
    margin-top: 251px;
  }

  /* Figma: the mobile Our-work column is 314px wide, inset 24px extra */
  .v-work .container {
    padding-inline: 44px;
  }

  .v-work__title {
    font-size: var(--text-h1-mobile);
  }

  .v-work__carousel {
    position: relative;
    display: block;
    margin-top: 32px;
    padding: 10px;
  }

  .v-work__figures {
    flex-direction: column;
    gap: 20px;
  }

  .v-work__figure {
    flex: none;
    max-width: none;
  }

  .v-work__figure figcaption {
    margin-top: 8px;
    font-size: 24px;
    line-height: 28px; /* Figma caption node 28 tall */
  }

  .v-work__arrow {
    position: absolute;
    top: 312px; /* GL2 node: arrows frame y=376 rel section, carousel top 64 */
    width: 41px;
    height: 41px;
    margin-top: 0;
    background: var(--color-white);
    box-shadow: 0 4px 16px rgba(20, 20, 20, 0.08);
    border-radius: 50%;
  }

  .v-work__arrow img {
    width: 21px;
    height: 21px;
  }

  /* GL2 node: arrows frame x=-31, next at x+333.8 -> both hang outside the column */
  .v-work__arrow--prev {
    left: -31px;
  }

  .v-work__arrow--next {
    right: -30px;
  }
}

/* ==========================================================================
   6. Additional services — present in the mobile frame only (1256:13525)
   Cards match service-template's "Additional services" component.
   ========================================================================== */
.v-addsvc {
  display: none;
}

@media (max-width: 767px) {
  .v-addsvc {
    display: block;
    margin-top: 311px; /* GL2: work section bottom 4817 -> title node top 5128 */
  }

  .v-addsvc__title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: var(--text-h1-mobile); /* 32px */
    line-height: var(--leading-none); /* node is exactly 32px tall */
    text-align: center; /* centered like the shared "Additional services" component */
  }

  .v-addsvc__sub {
    max-width: 273px;
    margin: 10px auto 0;
    text-align: center;
    font-size: 15px;
    line-height: var(--leading-body);
  }

  .v-addsvc__grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 35px;
  }

  .v-addsvc-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
  }

  .v-addsvc-card__photo {
    width: 100%;
    height: 166px;
    object-fit: cover;
    border-radius: var(--radius-card) var(--radius-card) 0 0; /* GL2: photo merges into body */
  }

  .v-addsvc-card__body {
    padding: 12px;
  }

  .v-addsvc-card__heading {
    margin-top: 2px; /* GL2: heading ink at 5434 (body padding 12 lands at 5432) */
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
  }

  .v-addsvc-card__meta {
    display: flex;
    align-items: center;
    gap: 7px; /* GL2 node: text 47 | 7 | dot 4.4 | 7 | text 83 = 148.4 total */
    margin-top: 6px;
    color: var(--color-primary-400);
    font-family: "Poppins", var(--font-alt);
    font-weight: 400;
    font-size: 22px; /* GL2 node: '€35' 47px + '45 mins' 83px, ink 16px tall */
    line-height: 24px;
  }

  .v-addsvc-card__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
  }
}

/* ==========================================================================
   7. Testimonials (1256:11200) — 4 cards, hanging 3D quote marks
   ========================================================================== */
.v-testimonials {
  margin-top: 549px;
}

.v-testimonials__title {
  max-width: 378px;
  margin-inline: auto;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 36px;
  line-height: var(--leading-tight);
  text-align: center;
}

.v-testimonials__row {
  display: flex;
  gap: 20px;
  margin-top: 93px;
  overflow-x: auto;
  padding-inline: max(var(--page-pad), calc((100vw - var(--container-max)) / 2));
  scrollbar-width: none;
}

.v-testimonials__row::-webkit-scrollbar {
  display: none;
}

.v-tcard {
  position: relative;
  flex: 0 0 390px;
  width: 390px;
  padding-bottom: 136px; /* room for the hanging 3D quote mark */
}

.v-tcard__card {
  min-height: 211px;
  padding: 32px 30px;
  background: var(--color-card-bg);
  border-radius: var(--radius-panel);
}

.v-tcard__head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.v-tcard__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.v-tcard__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-md); /* GL2 box 107x20 = 18px, as on the landing frame */
  line-height: 20px;
}

.v-tcard__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--font-alt);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.v-tcard__rating img {
  width: 24px;
  height: 24px;
}

.v-tcard__quote {
  margin-top: 24px;
}

.v-tcard__quote p {
  max-width: 330px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: var(--leading-body);
}

.v-tcard__mark {
  position: absolute;
  left: 98px;
  top: 272px;
  width: 77px;
  height: 75px;
}

@media (max-width: 1023px) {
  .v-testimonials__row {
    padding-inline: var(--page-pad-tablet);
  }
}

@media (max-width: 767px) {
  .v-testimonials {
    margin-top: 214px; /* GL2: addsvc bottom 6839 -> section top 7053 */
  }

  /* GL2 mobile: card pitch 239px (191px card + 48px gap); the 47px quote mark
     hangs just below each card (top 189, render-verified — node data disagrees). */
  .v-testimonials__row {
    flex-direction: column;
    gap: 48px;
    margin-top: 30px; /* GL2 node: cards at y=62, 32px title box -> 30 */
    overflow: visible;
    padding-inline: var(--page-pad-mobile);
    padding-bottom: 101px; /* room for the last card's hanging mark */
  }

  .v-tcard {
    flex: none;
    width: 100%;
    padding-bottom: 0;
  }

  .v-tcard__card {
    min-height: 191px;
    padding: 20px 20px 19px; /* 1px given to the quote's margin-top below */
  }

  .v-tcard__avatar {
    width: 48px;
    height: 48px;
  }

  .v-tcard__quote {
    margin-top: 20px; /* GL2: quote ink starts 1px below the 19px value */
  }

  .v-tcard__quote p {
    color: #000; /* GL2 mobile: quote ink is pure black */
  }

  .v-tcard__mark {
    left: 19px;
    top: 189px;
    width: 47px;
    height: 46px;
  }

  .v-tcard__name {
    color: #170F49; /* GL2 mobile: sampled (23,15,73) */
  }
}

/* ==========================================================================
   8. Ready to book CTA (1256:11188) — gradient panel, broom, bubbles
   ========================================================================== */
.v-cta {
  margin-top: 379px;
}

.v-cta__wrap {
  position: relative;
}

.v-cta__panel {
  position: relative;
  overflow: hidden;
  min-height: 441px;
  padding: 79px 83px;
  /* fitted against the GL2 frame export (same panel as the landing CTA) */
  background: linear-gradient(114deg, #1E2CA2 27%, #A2AAFF 100%);
  border-radius: var(--radius-card);
  color: var(--color-white);
}

.v-cta__content {
  position: relative;
  z-index: 1;
  max-width: 602px;
}

.v-cta__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 60px; /* GL2 box 602x60 */
  line-height: 60px;
  color: var(--color-white);
}

.v-cta__text {
  margin-top: 16px;
  font-size: var(--text-base);
  line-height: 1.25;
}

.v-cta__btn {
  margin-top: 44px;
  min-width: 343px;
  min-height: 72px;
  padding: 12px 32px;
  font-size: var(--text-btn-lg);
  background: var(--color-primary-100);
  color: var(--color-primary-400);
}

/* Figma box is 466x466 at (927,-78); the exported PNG is the 338x428
   content crop, so the offsets below reproduce the same placement. */
.v-cta__broom {
  position: absolute;
  top: -70px;
  right: 12px;
  width: 338px;
  height: 428px;
}

.v-cta__stars {
  position: absolute;
  top: 170px;
  right: 315px;
  width: 160px;
  height: auto;
}

.v-cta__bubbles {
  position: absolute;
  left: 744px;
  top: 388px;
  width: 262px;
  height: 262px;
  pointer-events: none;
  z-index: 1;
}

.v-cta__bubble {
  position: absolute;
}

.v-cta__bubble--lg {
  left: 0;
  top: 0;
  width: 262px;
  height: 262px;
}

.v-cta__bubble--sm {
  left: 137px;
  top: -14px;
  width: 122px;
  height: 122px;
}

@media (max-width: 1023px) {
  .v-cta__broom {
    top: -40px;
    right: 0;
    width: 240px;
    height: 304px;
  }

  .v-cta__stars {
    right: 220px;
    width: 110px;
  }

  .v-cta__bubbles {
    left: auto;
    right: 60px;
  }
}

@media (max-width: 767px) {
  .v-cta {
    margin-top: 188px; /* GL2: services2 grid bottom 9467 -> panel top 9655 */
  }

  .v-cta__panel {
    min-height: 718px;
    padding: 79px 31px 0;
    /* GL2 mobile: near-horizontal gradient (fitted against the frame:
       t=0 at x=74px, full ramp over ~362px with a slight downward tilt) */
    background: linear-gradient(92deg, #1E2CA2 21%, #A2AAFF 122%);
  }

  .v-cta__text {
    max-width: 288px; /* GL2 node: text 288x80 */
    font-size: var(--text-md); /* 18px — truth line1 ink 253px wide */
    line-height: 20px;
  }

  .v-cta__title {
    font-size: 32px;
    line-height: var(--leading-none); /* Figma mobile heading node 64 = 2 x 32 */
  }

  .v-cta__btn {
    margin-top: 44px;
    min-width: 192px;
    min-height: 46px;
    padding: 8px 24px;
    font-size: var(--text-btn);
  }

  /* GL2 mobile: broom 244px at panel-relative (126,372), template-matched 2.4 */
  .v-cta__broom {
    top: 372px;
    right: -16px;
    width: 244px;
    height: 309px;
  }

  /* GL2 mobile: stars visible at panel-relative (20,486), 130px wide (match 6.8) */
  .v-cta__stars {
    top: 486px;
    right: auto;
    left: 20px;
    width: 130px;
  }

  /* GL2 mobile frame shows no bubbles under the panel */
  .v-cta__bubbles {
    display: none;
  }
}

/* ==========================================================================
   9. Our services carousel (1256:11143) — 4 standard cards + page dots
   ========================================================================== */
.v-services2 {
  margin-top: 220px;
}

.v-services2__title,
.v-faq__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: var(--leading-tight);
  text-align: center;
}

.v-services2__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 89px;
}

.v-services2__card {
  min-height: 341px;
  gap: 16px; /* Figma: icon->title 16, title->text 16 (shared .card has 24) */
}

.v-services2__card .link-more {
  margin-top: auto; /* pinned to the card bottom like the design's Actions row */
}

.v-services2__dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 23px;
  padding: 29px 0;
}

.v-services2__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-primary-100);
}

.v-services2__dot.is-active {
  background: var(--color-primary-400);
}

@media (max-width: 1023px) {
  .v-services2__title,
  .v-faq__title {
    font-size: 48px;
  }

  .v-services2__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .v-services2 {
    /* 284px in Figma is measured from the testimonials frame; our row bottom
       includes the 101px mark hang, so 195px lands the title at the same spot */
    margin-top: 195px;
  }

  .v-services2__title,
  .v-faq__title {
    /* Figma mobile node: 38px tall, two centered 16px lines (same pattern
       as the testimonials heading) */
    font-size: var(--text-base);
    max-width: 170px; /* wraps as "Medium length hero" / "headline goes here" */
    margin-inline: auto;
  }

  .v-services2__grid {
    grid-template-columns: 1fr;
    margin-top: 30px; /* GL2 node: cards at y=62, 32px title box -> 30 */
  }

  /* GL2 mobile services2 cards: node heights 245/257/263/261, pitch 265/277/283,
     24px titles, 16px/24px body, Book row at y=205/217/... (16px above bottom) */
  .v-services2__card {
    padding-block: 16px;
  }

  .v-services2__card .card__title {
    font-size: 24px;
    line-height: 1.3;
  }

  .v-services2__card .card__text {
    font-size: 16px;
    line-height: 24px;
  }

  .v-services2__card:nth-of-type(1) { min-height: 245px; }
  .v-services2__card:nth-of-type(2) { min-height: 257px; }
  .v-services2__card:nth-of-type(3) { min-height: 263px; }
  .v-services2__card:nth-of-type(4) { min-height: 261px; }

  .v-services2__dots {
    display: none;
  }
}

/* ==========================================================================
   10. FAQ (1256:10963) — accordion, 2nd item open, single divider
   ========================================================================== */
.v-faq {
  margin-top: 148px;
}

.v-faq__list {
  margin-top: 72px;
}

.v-faq__item {
  padding-block: 25.6px;
}

.v-faq__item:has([aria-expanded="true"]) {
  /* ref-verified on home's identical accordion: tint fades out to the right */
  background: linear-gradient(90deg, #F1EFFA 25%, rgba(241, 239, 250, 0) 95%);
  border-radius: var(--radius-card);
}

.v-faq__q {
  font-size: inherit;
  line-height: inherit;
}

.v-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 128px;
  padding: 0 32px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 32px; /* matches home's verified accordion (title node 650px wide) */
  line-height: 1.2;
  color: var(--color-neutral-800);
}

.v-faq__chevron {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.08);
}

.v-faq__trigger[aria-expanded="true"] .v-faq__chevron img {
  transform: rotate(180deg);
}

.v-faq__panel {
  padding: 4px 32px 34px; /* + the item's 25.6px block padding = 60 below text */
}

.v-faq__panel p {
  max-width: 1140px; /* forces the Figma 3-line wrap */
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.4;
  color: var(--color-neutral-600);
}

.v-faq__divider {
  height: 1px;
  background: var(--color-neutral-300);
}

@media (max-width: 767px) {
  .v-faq {
    margin-top: 209px;
  }

  .v-faq__list {
    margin-top: 30px; /* GL2 node: accordions at y=62, 32px title box -> 30 */
  }

  .v-faq__item {
    padding-block: 0;
  }

  /* GL2 mobile: question text 20px/27 at x=52 (node: Accordion Card x=32);
     the 64px chevron circle (node x=234 in the 298 card) overlaps the text
     column, so it is absolutely positioned */
  .v-faq__trigger {
    position: relative;
    gap: 0;
    padding: 0 44px 0 32px;
    font-size: var(--text-btn); /* 20px */
    line-height: 27px;
  }

  .v-faq__chevron {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* GL2 node title widths per item force the frame's exact wraps
     (list children: q1, q2, q3, divider, q4, q5) */
  .v-faq__item:nth-child(1) .v-faq__trigger > span:first-child { max-width: 250px; }
  .v-faq__item:nth-child(2) .v-faq__trigger > span:first-child { max-width: 248px; }
  .v-faq__item:nth-child(3) .v-faq__trigger > span:first-child { max-width: 276px; }
  .v-faq__item:nth-child(5) .v-faq__trigger > span:first-child { max-width: 312px; }
  .v-faq__item:nth-child(6) .v-faq__trigger > span:first-child { max-width: 242px; }

  /* GL2: the open item's question and chevron sit ~28px lower than closed rows */
  .v-faq__item:has([aria-expanded="true"]) .v-faq__trigger {
    padding-top: 62px;
  }

  .v-faq__item:has([aria-expanded="true"]) .v-faq__chevron {
    top: calc(50% + 28px);
  }

  /* GL2 mobile: the open item's chevron is brand blue (sampled 30,44,162) */
  .v-faq__trigger[aria-expanded="true"] .v-faq__chevron img {
    filter: invert(17%) sepia(74%) saturate(3600%) hue-rotate(233deg) brightness(66%);
  }

  .v-faq__panel {
    padding: 18px 0 48px 24px; /* open item = 128 + 18 + 180 + 48 = 374 */
  }

  .v-faq__panel p {
    max-width: 308px; /* GL2 node says 338, but Chrome's CG runs ~7% narrower
                         here — 308 reproduces the frame's six line breaks */
    font-size: var(--text-base);
    line-height: 30px; /* GL2 paragraph: 6 lines, ink pitch 30 */
  }
}

/* ==========================================================================
   Mobile section order (the 402 frame swaps "Our services" and the CTA and
   inserts "Additional services" after Our work — DOM keeps desktop order)
   ========================================================================== */
@media (max-width: 767px) {
  .v-hero         { order: 1; }
  .v-services     { order: 2; }
  .v-band         { order: 3; }
  .v-teasers      { order: 4; }
  .v-work         { order: 5; }
  .v-addsvc       { order: 6; }
  .v-testimonials { order: 7; }
  .v-services2    { order: 8; }
  .v-cta          { order: 9; }
  .v-faq          { order: 10; }
}

/* ==========================================================================
   Footer gap override for this page (design: 296px above the footer)
   ========================================================================== */
.site-footer {
  margin-top: 296px;
}

@media (max-width: 767px) {
  .site-footer {
    margin-top: 221px; /* GL2: FAQ list bottom 11530 -> footer top 11751 */
  }
}

/* ==========================================================================
   GL2 (2026-07-11): real section titles are single-line 68px with the wider
   Figma CG tracking; the hero headline carries a brand-blue accent.
   ========================================================================== */
.v-hero__accent {
  color: var(--color-primary-400);
}

.v-services2__title,
.v-testimonials__title,
.v-faq__title {
  max-width: none;
  font-size: 68px;
  line-height: 86px;
  letter-spacing: 1.9px;
}
/* v-teasers__title stays on the base 56px/1.2 rule: the GL2 frame heading is
   "Specialized Transport Detailing" wrapped over two 67px-pitch lines
   (truth ink 2087-2136 / 2154-2203), not a one-line 68px "Detailing". */

.v-hero__title {
  max-width: none;        /* explicit <br> controls the wrap */
  margin-left: 13px;      /* GL2 title box sits at x=93 */
  letter-spacing: 1px;    /* width-matched against the frame export */
}

@font-face {
  font-family: "Poppins";
  src: url("../../assets/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   GL2 mobile pass (2026-07-12).
   .v-d / .v-m = desktop-only / mobile-only content variants: the 402 frame
   swaps the hero price line, three service-card titles (+ one body), the
   teasers heading, and shows a real "After" photo. This block sits after the
   GL2 desktop rules above so the mobile type re-asserts over them.
   ========================================================================== */
.v-m {
  display: none;
}

@media (max-width: 767px) {
  .v-m {
    display: revert;
  }

  .v-d {
    display: none;
  }

  /* mobile-only photos must be block (an inline img adds a line-box gap
     under it, pushing everything below down ~6px) */
  .v-work__figure .v-m,
  .v-teaser__photo.v-m {
    display: block;
  }

  .v-hero__title {
    margin-left: 0;
    letter-spacing: 0;
  }

  /* GL2 mobile section titles: single-line 32px/32, no tracking */
  .v-teasers__title,
  .v-services2__title,
  .v-testimonials__title,
  .v-faq__title {
    max-width: none;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: 0;
  }
}

/* ==========================================================================
   GL2 desktop polish (2026-07-13): services card icons + stack offsets.
   Truth icon art is the thin 4-point sparkle (35px) at box (7,6), boxes at
   card y+33 (services2) / y+31 (services1); render had icon-sparkle.png
   (fatter art) at y+24. content:url swap keeps mobile untouched.
   ========================================================================== */
@media (min-width: 1024px) {
  .v-services__card .card__icon,
  .v-services2__card .card__icon {
    content: url("../../assets/img/vehicle/card-star-d.png");
  }

  .v-services__card {
    padding-top: 33px; /* GL2: card 1 icon art at y=841 */
  }

  .v-services__card + .v-services__card {
    padding-top: 25px; /* GL2: cards 2-5 sit higher, icon art at y=833 */
  }

  .v-services2__card {
    padding-top: 33px;
    padding-bottom: 34px;
    gap: 15px; /* icon lands exact at 33px pad; ink below sat 1px low at 16 */
  }

  .v-teasers__title {
    transform: translateX(-3px); /* GL2 heading ink starts at x=458, 3px left of center */
  }
}