/* ==========================================================================
   Gleaming — Home page (Figma 1256:9657 desktop / 1256:14166 mobile)
   Sections top→bottom: hero, service cards, photo band, membership, process,
   pricing tabs, our work, testimonials, our services carousel, CTA, FAQ.
   ========================================================================== */

/* GL2 desktop frame 1256:9657 page background is pure white (not #FCFCFC),
   like the other GL2 frames — scoped to desktop so mobile numbers hold. */
@media (min-width: 768px) {
  body {
    background: #ffffff;
  }
}

/* --------------------------------------------------------------------------
   Shared section headings — 72px Cabinet Grotesk Regular
   lh 1.0 ("Save up basic cleaning", "Our work", "Trust the whole process…")
   lh 1.2 ("Testimonials", "Our services", "FAQ")
   -------------------------------------------------------------------------- */
.home-h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: var(--leading-none);
  text-align: center;
  color: var(--color-text-primary);
}

.home-h2--xl {
  line-height: var(--leading-tight);
}

@media (max-width: 767px) {
  .home-h2,
  .home-h2--xl {
    font-size: var(--text-h1-mobile); /* 32px */
  }

  .home-h2--xl {
    line-height: 38px; /* frame heading boxes are 38 (1.2 would give 38.4) */
  }
}

/* ==========================================================================
   Hero (Figma 1256:9659 + image 1256:9990)
   ========================================================================== */
.home-hero {
  position: relative;
  padding-top: 130px;
  min-height: 499px;
}

.home-hero__content {
  position: relative;
  z-index: 1;
  max-width: 752px;
}

.home-hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-display); /* 68px */
  line-height: var(--leading-none);
  color: var(--color-text-primary);
}

.home-hero__accent {
  color: var(--color-primary-400);
}

.home-hero__br {
  display: none; /* mobile-only line break (GL2 mobile wraps after "Get your") */
}

.home-hero__lead {
  max-width: 520px;
  margin-top: 20px;
  font-size: var(--text-md); /* 18px Inter */
  line-height: var(--leading-body);
}

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

.home-hero__img {
  position: absolute;
  top: 72px;
  right: 0;
  width: 638px;
  height: auto;
  mix-blend-mode: multiply; /* PNG has a white background baked in */
}

@media (max-width: 1279px) {
  .home-hero__img {
    width: 46vw;
    top: 130px;
  }
}

@media (max-width: 767px) {
  /* GL2 mobile frame body is pure white (desktop uses #FCFCFC) */
  body {
    background: #FFFFFF;
  }

  .home-hero {
    overflow: hidden;
    padding-top: 35px;
    min-height: 0;
  }

  .home-hero__title {
    font-size: var(--text-display-mobile); /* 44px */
  }

  .home-hero__br {
    display: revert;
  }

  .home-hero__lead {
    font-size: var(--text-base);
  }

  .home-hero__img {
    position: static;
    /* template-matched against the GL2 mobile frame: whole image drawn at
       368x247 anchored at page (90, 419) — NOT a 477-wide cover crop */
    width: 368px;
    height: 247px;
    object-fit: fill;
    max-width: none;
    margin: -9px 0 0 90px;
  }
}

/* ==========================================================================
   Service cards grid (Figma 1256:9666 + 1256:10103) — shared .card atoms
   ========================================================================== */
.home-services {
  margin-top: 129px;
}

.home-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.home-cards-grid .card {
  border: 1px solid var(--color-white);
  box-shadow: 0 24px 48px -32px rgba(23, 15, 73, 0.10);
  padding: 31px 24px;
  gap: 16px; /* Figma: icon->title 16, title->text 16 (shared .card has 24) */
}

.home-cards-grid .card__text {
  flex-grow: 1;
}

.home-cards-grid .link-more {
  margin-top: 8px; /* text -> Book gap 24 (16 grid gap + 8) */
}

@media (max-width: 1023px) {
  .home-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .home-services {
    margin-top: 58px; /* hero img bottom 666 -> cards 724 */
  }

  .home-cards-grid {
    grid-template-columns: 1fr;
  }

  .home-cards-grid .card {
    background: #F9FAFE; /* sampled from the mobile frame (token is #F7F7FC) */
  }

  .home-services .card {
    min-height: 341px; /* Figma mobile: all four cards fixed 341 */
    padding: 30.5px 23px; /* +1px border = frame's 31.5/24 content inset */
  }

  /* Frame: cards 3-4 content inset 45px top+bottom (cards 1-2 stay 31.5) */
  .home-services .card:nth-child(3),
  .home-services .card:nth-child(4) {
    padding: 44px 23px;
  }
}

/* ==========================================================================
   Full-width photo band — scroll-driven photo sequence
   (user-approved divergence 2026-07-14: replaces the frame's single
   clean-band.jpg with 3 brand photos scrubbed by scroll; the white rounded
   sheet seam from Figma 1256:9707 is preserved).

   js/home-band.js adds .home-band--scrub and drives --band-p (0..2).
   Without it (no JS / old browser) the band is a static single photo at
   the classic 1440:724 geometry. Motion contract: translate/scale only,
   never transform; everything scroll-scrubbed, nothing autonomous.
   ========================================================================== */
.home-band {
  position: relative;
  margin-top: 65px; /* band rect top 1208 (cards end 1143) */
  padding-top: 42px; /* the frame's 42px white seam, kept as plain spacing */
  --band-p: 0;
  /* per-transition locals: layer 2 wipes over 0->1, layer 3 over 1->2 */
  --band-l2: clamp(0, var(--band-p), 1);
  --band-l3: clamp(0, calc(var(--band-p) - 1), 1);
}

.home-band__stage {
  position: relative;
  aspect-ratio: 1440 / 724; /* the frame's band geometry at any width */
  overflow: hidden;
  border-radius: var(--radius-card); /* clean rounded card, no corner wraps */
}

@supports not (aspect-ratio: 1 / 1) {
  .home-band__stage { height: 50.2778vw; /* 724/1440 */ }
}

.home-band__layer {
  position: absolute;
  inset: 0;
}

.home-band__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-band__layer--1 .home-band__img { object-position: 50% 15%; }

/* static fallback: only the first photo exists until JS upgrades the band */
.home-band:not(.home-band--scrub) .home-band__layer--2,
.home-band:not(.home-band--scrub) .home-band__layer--3,
.home-band:not(.home-band--scrub) .home-band__dots { display: none; }

/* ---- scrub mode (JS-upgraded) ---- */
.home-band--scrub .home-band__track {
  /* stage height + 800px of scroll per transition (px, not vh: keeps the
     scrub distance stable and the verify tall-window renders finite) */
  height: calc(100vw * 724 / 1440 + 1600px);
}

.home-band--scrub .home-band__stage {
  position: sticky;
  top: max(16px, calc((100vh - 100vw * 724 / 1440) / 2));
  top: max(16px, calc((100svh - 100vw * 724 / 1440) / 2));
}

/* incoming layers rise from the bottom behind a ~130px feathered edge
   (mask, not clip: a soft waterline suits the site's rounded language);
   inner img settles with a slight offset + scale so it reads as depth */
.home-band--scrub .home-band__layer--2 {
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--band-l2) * 118% - 18%), transparent calc(var(--band-l2) * 118%));
  mask-image: linear-gradient(to top, #000 calc(var(--band-l2) * 118% - 18%), transparent calc(var(--band-l2) * 118%));
}
.home-band--scrub .home-band__layer--3 {
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--band-l3) * 118% - 18%), transparent calc(var(--band-l3) * 118%));
  mask-image: linear-gradient(to top, #000 calc(var(--band-l3) * 118% - 18%), transparent calc(var(--band-l3) * 118%));
}

.home-band--scrub .home-band__img { will-change: translate, scale; }

.home-band--scrub .home-band__layer--1 .home-band__img {
  translate: 0 calc(var(--band-l2) * -2%);
}
.home-band--scrub .home-band__layer--2 .home-band__img {
  translate: 0 calc((1 - var(--band-l2)) * 6% - var(--band-l3) * 4%);
  scale: calc(1.03 - 0.03 * var(--band-l2));
}
.home-band--scrub .home-band__layer--3 .home-band__img {
  translate: 0 calc((1 - var(--band-l3)) * 6%);
  scale: calc(1.03 - 0.03 * var(--band-l3));
}

/* progress dots (decorative; sequence is also readable without them) */
.home-band__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 1;
}

.home-band__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(2, 4, 35, .2), 0 1px 4px rgba(2, 4, 35, .4);
  opacity: calc(.4 + .6 * var(--dot-on, 0));
  scale: calc(.85 + .3 * var(--dot-on, 0));
}

.home-band__dots span:nth-child(1) { --dot-on: calc(1 - clamp(0, (var(--band-p) - .4) * 10, 1)); }
.home-band__dots span:nth-child(2) { --dot-on: calc(clamp(0, (var(--band-p) - .4) * 10, 1) - clamp(0, (var(--band-p) - 1.4) * 10, 1)); }
.home-band__dots span:nth-child(3) { --dot-on: clamp(0, (var(--band-p) - 1.4) * 10, 1); }

/* reduced motion: hard cuts between photos — no wipe, no parallax, no scale */
@media (prefers-reduced-motion: reduce) {
  .home-band--scrub .home-band__layer--2,
  .home-band--scrub .home-band__layer--3 { -webkit-mask-image: none; mask-image: none; }
  .home-band--scrub .home-band__layer--2 { opacity: clamp(0, calc((var(--band-l2) - .5) * 999), 1); }
  .home-band--scrub .home-band__layer--3 { opacity: clamp(0, calc((var(--band-l3) - .5) * 999), 1); }
  .home-band--scrub .home-band__img { translate: 0 0 !important; scale: 1 !important; }
  .home-band__dots span { scale: 1; }
}

@media (max-width: 767px) {
  .home-band {
    overflow: visible; /* sticky must not be clipped by the old overflow:hidden */
    margin-top: 53px;
    padding-top: 51px; /* mobile frame's white seam, as plain spacing */
  }

  /* the frame's mobile band shows a 219%-wide crop ≈ 1.10 * viewport-width
     tall; keep that height so the page rhythm survives, capped for short
     landscape phones */
  .home-band__stage { aspect-ratio: auto; height: min(110vw, 72vh); }

  .home-band--scrub .home-band__track { height: calc(min(110vw, 72vh) + 1600px); }
  .home-band--scrub .home-band__stage {
    top: max(12px, calc((100vh - min(110vw, 72vh)) / 2));
    top: max(12px, calc((100svh - min(110vw, 72vh)) / 2));
  }

  .home-band__dots { bottom: 16px; }
}

/* ==========================================================================
   Membership (Figma 1256:10015)
   ========================================================================== */
.home-membership {
  margin-top: 238px;
}

.home-membership__inner {
  display: flex;
  align-items: flex-start;
  gap: 139px; /* panel right edge 604 -> content left 743 (ref-verified) */
}

.home-membership__visual {
  position: relative;
  flex: 0 0 524px;
  margin-top: 41px;
}

.home-membership__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 486px;
  padding: 40px 32px 40px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #FFFFFF 25%, #F1F5FC 60%, #D6E3F7 100%);
  border: 1px solid var(--color-white);
}

.home-membership__gift {
  width: 304px;
  height: auto;
}

.home-membership__value {
  margin-top: 73px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 40px;
  line-height: var(--leading-none);
  color: var(--color-text-primary);
}

.home-membership__value-label {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-btn-lg); /* 24px */
  line-height: var(--leading-body);
  color: var(--color-text-primary);
}

.home-membership__spark {
  position: absolute;
  top: -41px;
  right: -57px;
  width: 125px;
  height: 108px;
}

.home-membership__content {
  flex: 1;
  max-width: 634px;
  padding-top: 7px;
}

.home-membership__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: var(--leading-none);
  color: var(--color-text-primary);
}

.home-membership__lead {
  max-width: 615px;
  margin-top: 16px;
  font-size: var(--text-md); /* 18px */
  line-height: 20px; /* Figma box 615x40 = 2 lines x 20px (ref-verified pitch) */
}

.home-membership__list {
  margin-top: 40px;
}

.home-membership__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 8px;
  font-family: var(--font-heading); /* ref shows Cabinet Grotesk (single-storey g) */
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.home-membership__list img {
  flex-shrink: 0;
}

.home-membership__actions {
  display: flex;
  align-items: center;
  gap: 49px;
  margin-top: 49px;
}

.home-membership__actions .btn--lg {
  min-width: 279px;
}

.home-membership__more {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-btn-lg); /* 24px */
  line-height: var(--leading-body);
  color: var(--color-text-primary);
}

@media (max-width: 1023px) {
  .home-membership__inner {
    flex-direction: column;
    gap: 48px;
  }

  .home-membership__visual {
    flex: none;
    width: 100%;
    max-width: 524px;
  }
}

@media (max-width: 767px) {
  .home-membership {
    margin-top: 114px; /* band img renders 443 (frame rect 445) — +2 compensation */
  }

  .home-membership__inner {
    flex-direction: column-reverse; /* mobile design: text first, panel below */
    gap: 91px; /* text block ends 464 -> panel top 555 */
  }

  .home-membership__visual {
    margin-top: 0;
  }

  .home-membership__panel {
    min-height: 335px;
    padding: 11px 24px 32px;
  }

  .home-membership__gift {
    width: 195px;
  }

  .home-membership__value {
    margin-top: 73px;
    font-size: 24px;
    line-height: 1.2;
  }

  .home-membership__value-label {
    font-size: 18px;
  }

  .home-membership__spark {
    top: -9px;
    right: 0;
    width: 78px;
    height: 67px;
  }

  .home-membership__content {
    padding-top: 0;
  }

  .home-membership__title {
    font-size: var(--text-h1-mobile);
  }

  .home-membership__lead {
    margin-top: 15px; /* ink-verified: lead lines land on 2872/2890/2908 */
    font-size: var(--text-base);
    line-height: 18px; /* Figma mobile box 362x54 = 3 lines x 18px */
  }

  .home-membership__list {
    margin-top: 24px; /* mobile: text block 166 -> list 190 */
  }

  .home-membership__actions {
    margin-top: 28px;
  }

  .home-membership__actions .btn--lg {
    min-width: 161px;
  }

  .home-membership__more {
    display: none; /* not present in the 402px design */
  }
}

/* ==========================================================================
   Process — "Trust the whole process to us" (Figma 1256:9991)
   ========================================================================== */
@font-face {
  font-family: "Montserrat";
  src: url("../../assets/fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.home-process {
  margin-top: 238px;
}

.home-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 115px;
}

.home-process__step {
  position: relative;
  min-height: 344px;
  padding: 124px 32px 52px;
  text-align: center;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #F8F9FC 0%, #EFF1F8 100%);
  border: 1px solid var(--color-white);
}

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

.home-process__step--1 .home-process__num { top: -82px; width: 206px; }
.home-process__step--2 .home-process__num { top: -104px; width: 227px; }
.home-process__step--3 .home-process__num { top: -114px; }
.home-process__step--4 .home-process__num { top: -114px; }

/* Per-Figma content offsets: cols 3/4 start higher (content y 113 / 100) */
.home-process__step--3 { padding-top: 113px; }
.home-process__step--4 { padding-top: 100px; }

.home-process__step--3 .home-process__title {
  min-height: 55px;
  align-items: flex-start;
}

.home-process__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  margin-inline: -8px; /* "We clean, you relax" stays on one line as in Figma */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 30px;
  line-height: 34px;
  color: var(--color-text-primary);
}

.home-process__text {
  margin-top: 4px;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* GL2 desktop step cards: title ink 230px wide => 28px (30px gave 246px),
   ink sits 4px higher (transform so card/grid heights stay untouched),
   body text box ~218px (243px re-wrapped 3 cards), body font Montserrat
   like the mobile frame */
@media (min-width: 1024px) {
  .home-process__title {
    font-size: 28px;
    transform: translateY(-4px);
  }

  .home-process__text {
    max-width: 218px;
    margin-inline: auto;
    font-family: "Montserrat", sans-serif;
    transform: translateY(-3px);
  }
}

@media (max-width: 1023px) {
  .home-process__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 130px;
  }
}

@media (max-width: 767px) {
  .home-process {
    margin-top: 129px;
  }

  /* GL2 mobile frame 2087325934 sits at x=19, width 339 (not the 362 container) */
  .home-process .container {
    padding-left: 19px;
    padding-right: 44px;
  }

  .home-process__text {
    font-family: "Montserrat", sans-serif; /* frame swaps step body to Montserrat */
  }

  .home-process__grid {
    grid-template-columns: 1fr;
    row-gap: 32px; /* Figma mobile columns pitch 276, height 244 */
    margin-top: 115px; /* heading 96 -> grid 211 */
  }

  .home-process__step {
    min-height: 244px;
    padding: 87px 31px 50px; /* ink-verified content top; rows stay 244 */
    background: #F9FAFE; /* frame renders a flat fill on mobile, not the gradient */
  }

  .home-process__step--3,
  .home-process__step--4 {
    padding-top: 63px; /* ink-verified content top on cols 3/4 */
  }

  .home-process__step--1 .home-process__num { top: -83px; width: 183px; }
  .home-process__step--2 .home-process__num { top: -84px; width: 183px; }
  .home-process__step--3 .home-process__num { top: -91px; width: 180px; }
  .home-process__step--4 .home-process__num { top: -91px; width: 180px; }

  .home-process__title {
    min-height: 0;
    font-size: 24px;
    line-height: 1.2;
  }

  .home-process__step--3 .home-process__title {
    min-height: 0;
  }

  .home-process__text {
    margin-top: 4px;
  }
}

/* ==========================================================================
   Pricing — "Save up basic cleaning" (Figma 1256:9723)
   ========================================================================== */
.home-pricing {
  margin-top: 275px;
}

.home-pricing__tabs-wrap {
  display: flex;
  justify-content: center;
  margin-top: 45px;
}

.home-pricing__tabs {
  padding: 4px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
}

.home-pricing__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.home-pricing__tab[aria-selected="true"] {
  background: var(--color-primary-50);
  color: var(--color-text-primary);
}

.home-pricing__chip {
  padding: 2px 8px;
  background: var(--color-primary-400);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-white);
}

.home-pricing__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0; /* Figma: 552x284 cards touching in both directions */
  max-width: 1104px;
  margin: 24px auto 0;
  position: relative;
  left: 9px; /* ref-verified: grid sits at x=177, not 168 */
}

.home-price-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 48px -28px rgba(23, 15, 73, 0.12);
}

.home-price-card__label {
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-neutral-600);
}

.home-price-card__prices {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.home-price-card__divider {
  width: 100%;
  margin: 12px 0 8px;
  border: none;
  border-top: 1px solid #E9EAF3;
}

.home-price-card__features li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 8px;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.home-price-card__book {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-btn-lg); /* 24px */
  line-height: var(--leading-body);
  color: var(--color-primary-400);
}

@media (max-width: 767px) {
  .home-pricing {
    margin-top: 66px; /* process grid end 5062 -> pricing heading 5128 */
  }

  .home-pricing__tabs-wrap {
    margin-top: 45px;
  }

  .home-pricing__tabs {
    flex-wrap: wrap;
    justify-content: flex-start; /* Figma: second tab row left-aligned */
  }

  .home-pricing__grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
    left: 0;
  }

  .home-price-card {
    padding: 20px;
    border-radius: var(--radius-panel);
  }

  .home-price-card__label {
    line-height: 22px; /* integer line boxes so the card lands on 219 exactly */
  }

  .home-price-card__divider {
    margin: 12px 0 11px; /* frame: divider y100, features y112 -> card = 219 */
  }

  .home-price-card__prices {
    font-size: 32px;
    line-height: 38px;
  }

  .home-price-card__book {
    margin-top: 20px;
    font-size: var(--text-md);
  }
}

/* ==========================================================================
   Our work — before/after (Figma 1256:9708)
   ========================================================================== */
.home-work {
  margin-top: 211px;
}

.home-work__heading {
  max-width: 1104px;
  margin-inline: auto;
  position: relative;
  left: 11px; /* Figma frame sits at x=179, 11px right of centre */
}

.home-work__carousel {
  position: relative;
  left: 11px;
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 1104px;
  margin: 42px auto 0;
}

.home-work__figure img {
  width: 424px;
  height: 424px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.home-work__figure figcaption {
  margin-top: 26px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h4); /* 32px */
  line-height: 1.375;
  text-align: center;
  color: var(--color-text-primary);
}

.home-circle-btn {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 4px 16px rgba(20, 20, 20, 0.08);
}

.home-work__arrow {
  position: absolute;
  top: 215px; /* ref-verified (circle centre 215+32 below image top) */
  z-index: 1;
}

.home-work__arrow--prev {
  left: 12px; /* ref-verified: circle ~12px inside the 1104 frame edge */
}

.home-work__arrow--next {
  right: 12px;
}


@media (max-width: 1023px) {
  .home-work__figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 767px) {
  .home-work {
    margin-top: 52px; /* pricing grid end 6197 -> work heading 6249 */
  }

  .home-work__heading {
    left: 0;
  }

  .home-work__carousel {
    left: 0;
    flex-direction: column;
    gap: 20px;
    max-width: 314px;
    margin-top: 32px;
    padding: 10px;
  }

  .home-work__figure figcaption {
    margin-top: 8px;
    font-size: 20px;
    line-height: 1.4;
  }

  .home-circle-btn {
    width: 41px;
    height: 41px;
  }

  .home-circle-btn img {
    width: 21px;
    height: 21px;
  }

  .home-work__arrow {
    top: 312px; /* Figma: arrows y 376 rel section, carousel top 64 */
  }

  .home-work__arrow--prev { left: 10px; }
  .home-work__arrow--next { right: -30px; }
}

/* ==========================================================================
   Testimonials (Figma 1256:9919) — overflowing row of quote cards
   ========================================================================== */
.home-testimonials {
  margin-top: 194px; /* work section is 10px shorter than the Figma frame (frame pad) */
}

.home-testimonials__viewport {
  overflow: hidden;
}

.home-testimonials__row {
  display: flex;
  gap: 20px;
  margin-top: 93px;
}

.home-tcard {
  position: relative;
  flex: 0 0 390px;
  width: 390px;
  padding-bottom: 26px; /* quote marks hang 26px below the 235px card */
}

.home-tcard__card {
  min-height: 235px; /* ref-verified card tint height */
  padding: 32px 30px;
  background: var(--color-card-bg);
  border-radius: var(--radius-panel);
}

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

.home-tcard__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.home-tcard__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px; /* ref-measured: "Sophia Moore" ~102px wide in a 20px box */
  line-height: 20px;
  color: var(--color-neutral-800);
}

.home-tcard__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-text-primary);
}

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

.home-tcard__quote p {
  max-width: 330px;
  font-size: var(--text-sm); /* 14px */
  line-height: var(--leading-body);
  color: var(--color-text-primary);
}

.home-tcard__marks {
  position: absolute;
  left: 26px; /* ref-verified: glyph overlaps the card's bottom-left corner */
  top: 211px;
  width: 72px; /* natural asset size */
  height: auto;
}

@media (max-width: 767px) {
  .home-testimonials {
    margin-top: 98px; /* work bottom 7013 -> testimonials heading 7111 */
  }

  .home-testimonials__row {
    flex-direction: column;
    gap: 36px;
    margin-top: 24px; /* heading 38 -> row 62 */
  }

  .home-tcard {
    flex: none;
    width: 100%;
    padding-bottom: 0; /* frame pitch 239 = card 203 + 36 flex gap */
  }

  .home-tcard__card {
    min-height: 203px;
    padding: 20px;
    background: #F9FAFE; /* sampled from the mobile frame */
  }

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

  .home-tcard__rating {
    min-height: 35px; /* frame rating row 35 tall -> quote starts at y87 */
  }

  .home-tcard__quote {
    margin-top: 7px; /* ink-verified: quote line 1 lands on card top + 92 */
  }

  .home-tcard__quote p {
    line-height: 22px; /* ink pitch in the frame is 22, not 21 */
  }

  .home-tcard__quote p {
    max-width: none;
  }

  .home-tcard__marks {
    left: 20px;
    top: 188px; /* truth ink: marks top = card top + 188 */
    width: 58px;
  }
}

/* ==========================================================================
   Our services carousel (Figma 1256:10101) — cards + page-control dots
   ========================================================================== */
.home-services2 {
  margin-top: 470px; /* testimonial marks bottom 6027 -> services2 6497 */
}

.home-services2__grid {
  margin-top: 89px;
}

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

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

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

.home-services2__dot--faint {
  background: var(--color-primary-50);
}

@media (max-width: 767px) {
  .home-services2 {
    margin-top: 98px;
  }

  .home-services2__grid {
    margin-top: 24px; /* heading 38 -> grid 62 */
  }

  .home-services2 .card {
    padding: 15px 23px; /* +1px border = frame's 16/24 content inset */
  }

  /* Figma mobile services2 cards: fixed heights, 24px titles, 26px body lines */
  .home-services2 .card__title {
    font-size: 24px;
    line-height: 31px; /* frame heading boxes are 31 */
  }

  .home-services2 .card__text {
    font-size: var(--text-base); /* 16px — frame drops these to 16/26 */
    line-height: 26px;
  }

  .home-services2 .card .link-more {
    margin-top: -15px; /* Figma mobile: Book sits flush after the text (gap 0) */
  }

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

  .home-services2__dots {
    display: none; /* not present in the 402px design */
  }
}

/* ==========================================================================
   Ready-to-book CTA (Figma 1256:10148) — gradient panel, 3D broom + stars
   ========================================================================== */
.home-cta {
  margin-top: 127px;
}

.home-cta__panel {
  position: relative;
  min-height: 441px;
  padding: 79px 83px;
  border-radius: var(--radius-card);
  background: linear-gradient(84deg, #1E2CA2 10%, #4552BE 55%, #99A4FB 100%);
  color: var(--color-white);
}

/* Desktop/tablet: the exact flattened Figma panel (gradient + 3D broom + stars) */
@media (min-width: 768px) {
  .home-cta__panel {
    background: url("../../assets/img/home/cta-panel.jpg") 0 0 / 100% 100% no-repeat;
  }

  .home-cta__broom {
    display: none;
  }
}

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

.home-cta__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 60px;
  line-height: var(--leading-none);
  color: var(--color-white);
}

.home-cta__text {
  max-width: 545px; /* matches the Figma line wrap ("…offers / as a thank you…") */
  margin-top: 16px;
  font-size: var(--text-base);
  line-height: 1.25;
  color: var(--color-primary-50);
}

.home-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);
}

.home-cta__broom {
  position: absolute;
  right: -93px;
  top: 314px;
  width: 333px;
  height: auto;
}

.home-cta__stars {
  display: none; /* baked into the flattened desktop panel */
}

@media (max-width: 767px) {
  .home-cta {
    margin-top: 105px;
  }

  .home-cta__panel {
    overflow: hidden;
    min-height: 718px;
    padding: 79px 31px 0;
    /* fitted to frame samples at three heights (94.3deg axis, stops ink-tuned) */
    background: linear-gradient(94.3deg, #1E2CA2 108px, #4552BE 199px, #99A4FB 397px);
  }

  .home-cta__content {
    max-width: 288px; /* frame content column 288 (wrap after "staying") */
  }

  .home-cta__text {
    font-size: var(--text-md); /* 18px — glyph-width-verified against the frame */
    line-height: 20px;
  }

  .home-cta__broom {
    /* template-matched: 236x299 at content (154, 9823) -> panel-rel (134, 379) */
    left: 134px;
    right: auto;
    top: 379px;
    width: 236px;
  }

  .home-cta__stars {
    display: block;
    position: absolute;
    /* template-matched: 127 wide at content (47, 9933) -> panel-rel (27, 489) */
    left: 27px;
    top: 489px;
    width: 127px;
    height: auto;
  }

  .home-cta__title {
    font-size: var(--text-h1-mobile);
  }

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

}

/* ==========================================================================
   FAQ (Figma 1256:9861) — accordion, 2nd item open, single divider
   ========================================================================== */
.home-faq {
  margin-top: 257px;
}

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

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

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

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

.home-faq__q button {
  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;
  line-height: 1.2;
  color: var(--color-neutral-800);
}

.home-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);
}

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

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

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

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

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

  .home-faq__list {
    margin-top: 24px; /* heading 38 -> accordions 62 */
  }

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

  .home-faq__q button {
    position: relative;
    min-height: 128px;
    padding: 0 32px;
    font-size: 20px;
    line-height: 27px; /* frame trigger type: 20/27 */
  }

  /* Chevron out of flow: frame lets titles run underneath the circle */
  .home-faq__chevron {
    position: absolute;
    right: 32px;
    top: 32px;
  }

  .home-faq__q button > span:first-child {
    display: block;
  }

  /* Frame hand-sizes each title box (text wraps under the chevron) */
  .home-faq__item:nth-child(1) .home-faq__q button > span:first-child { max-width: 250px; }
  .home-faq__item:nth-child(2) .home-faq__q button > span:first-child { max-width: 248px; }
  .home-faq__item:nth-child(3) .home-faq__q button > span:first-child { max-width: 276px; }
  .home-faq__item:nth-child(5) .home-faq__q button > span:first-child { max-width: 312px; }
  .home-faq__item:nth-child(6) .home-faq__q button > span:first-child { max-width: 242px; }

  /* Open item: header block drops to y=65, chevron to y=60 (ink-verified) */
  .home-faq__q button[aria-expanded="true"] {
    min-height: 0;
    padding-top: 66px;
    padding-bottom: 0;
  }

  .home-faq__q button[aria-expanded="true"] .home-faq__chevron {
    top: 60px;
  }

  .home-faq__panel {
    padding: 30px 0 44px 24px; /* open item = 120 + 30 + 180 + 44 = 374 */
  }

  .home-faq__panel p {
    font-size: var(--text-md); /* 18px — glyph-width-verified against the frame */
    line-height: 30px; /* frame paragraph 180 = 6 lines x 30 */
  }

  .home-faq__divider {
    margin-top: -1px; /* frame divider is a 0-height hairline (items stay on 128 grid) */
  }
}

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

@media (max-width: 767px) {
  .site-footer {
    /* Figma mobile frame: FAQ ends at 11298, footer starts at 12616 */
    margin-top: 1318px;
  }
}

/* ==========================================================================
   Water "Book now" button (user-directed 2026-07-14).
   Two translucent waves rise on hover — the first fast with a small
   overshoot (the splash), the second lagging — then drift sideways while
   hovered. Wave shape is a mask so the color stays a CSS variable;
   `translate` only, per the motion contract. Reduced motion: the global
   kill switch turns it into an instant fill.
   ========================================================================== */
.btn--water {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --water-1: rgba(161, 171, 255, .55); /* primary-ish tints on the blue btn */
  --water-2: rgba(227, 228, 252, .18); /* capped: white label stays >=3:1 over the stack */
}

.btn--water-deep { /* on the light lavender CTA button: deeper blue water */
  --water-1: rgba(30, 44, 162, .16); /* capped: blue label stays >=4.5:1 */
  --water-2: rgba(30, 44, 162, .10);
}

/* two-tone focus ring survives both the light page and the dark CTA panel */
.btn--water:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 0;
  box-shadow: 0 0 0 5px var(--color-primary-400);
}

@supports not (translate: 0 0) {
  .btn--water::before,
  .btn--water::after { content: none; } /* old engines: plain button */
}

.btn--water::before,
.btn--water::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -6%;
  height: 150%;
  z-index: -1;
  pointer-events: none;
  background: var(--water-1);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q15 4 30 10 T60 10 T90 10 T120 12 L120 60 L0 60 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q15 4 30 10 T60 10 T90 10 T120 12 L120 60 L0 60 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 120px 100%;
  mask-size: 120px 100%;
  translate: 0 102%;
  transition: translate .45s cubic-bezier(.2, .85, .3, 1.18); /* splash overshoot */
}

.btn--water::after {
  background: var(--water-2);
  transition: translate .65s cubic-bezier(.33, 1, .68, 1); /* trailing wave */
}

.btn--water:hover::before,
.btn--water:focus-visible::before {
  translate: 0 24%;
  animation: water-drift 2.4s linear infinite;
}

.btn--water:hover::after,
.btn--water:focus-visible::after {
  translate: 0 34%;
  animation: water-drift 3.4s linear infinite reverse;
}

@keyframes water-drift {
  to { -webkit-mask-position: 120px 0; mask-position: 120px 0; }
}

/* ==========================================================================
   Testimonials marquee (user-directed 2026-07-14): two counter-scrolling
   rows, seamless via duplicated aria-hidden card sets; pauses on hover.
   ========================================================================== */
.home-testimonials__viewport {
  display: grid;
  gap: 20px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.home-testimonials__row {
  width: max-content;
  animation: t-marquee 52s linear infinite;
}

.home-testimonials__row--b {
  margin-top: 0;
  animation-duration: 64s;
  animation-direction: reverse;
}

.home-testimonials__viewport:hover .home-testimonials__row,
.home-testimonials--paused .home-testimonials__row,
.home-testimonials--offscreen .home-testimonials__row {
  animation-play-state: paused;
}

.home-testimonials__controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.home-testimonials__toggle {
  padding: 8px 20px;
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--color-primary-400);
  cursor: pointer;
}

.home-testimonials__toggle:hover { background: var(--color-primary-50); }

@keyframes t-marquee {
  to { translate: calc(-50% - 10px) 0; } /* -50% misses by gap/2 */
}

@media (prefers-reduced-motion: reduce) {
  .home-testimonials__row { animation: none; }
  .home-testimonials__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .home-testimonials__row [aria-hidden="true"] { display: none; } /* no duplicates */
  .home-testimonials__controls { display: none; } /* nothing to pause */
}

/* mobile: keep the marquee (diverges from the frame's stacked column) */
@media (max-width: 767px) {
  .home-testimonials__row {
    flex-direction: row;
    gap: 20px;
    animation-duration: 40s;
  }

  .home-testimonials__row--b { animation-duration: 50s; }

  .home-tcard {
    flex: 0 0 320px;
    width: 320px;
    padding-bottom: 26px;
  }
}