/* ==========================================================================
   Gleaming — service template page (Figma desktop 1256:11763 / mobile 1256:12805)
   ========================================================================== */

/* Page frame background is pure white in Figma (template frame), unlike the
   default #FCFCFC page bg — the flattened decorative PNGs are baked on white. */
body {
  background: var(--color-white);
}

/* ---- shared page atoms ---------------------------------------------------- */
.svc-section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 68px;
  line-height: 86px;
  text-align: center;
  color: var(--color-text-primary);
}

.svc-star-icon {
  flex-shrink: 0;
}

.svc-circle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-purple-100);
  color: var(--color-text-primary);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.svc-hero {
  position: relative;
  padding-bottom: 43px;
}

/* Light #FCFCFF rounded band behind header + hero (Figma frame y 0–432) */
.svc-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -174px; /* reach up behind the 174px header */
  height: 432px;
  border-radius: 40px;
  background: #fcfcff;
}

.svc-hero__stars {
  position: absolute;
  right: 0;
  z-index: 0;
  pointer-events: none;
}

.svc-hero__stars--desktop {
  top: -174px;
  width: 604px;
  height: 432px;
}

.svc-hero__stars--mobile {
  display: none;
  top: 0;
  width: 177px;
  height: 260px;
}

.svc-hero__content {
  position: relative;
  z-index: 1;
  padding-top: 13px;
}

.svc-hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 50px;
  color: var(--color-text-primary);
}

.svc-hero__sub {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: #757575;
}

.svc-hero__cta {
  margin-top: 41px;
}

/* ==========================================================================
   What is included
   ========================================================================== */
.svc-included {
  margin-top: 120px;
}

.svc-included__grid {
  display: grid;
  grid-template-columns: minmax(0, 522px) minmax(0, 634px);
  justify-content: space-between;
  column-gap: 60px;
  align-items: start;
}

.svc-included__photo {
  width: 100%;
  height: 368px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.svc-included__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
}

.svc-included__text {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 20px;
}

.svc-included__list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.svc-included__item {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 40px;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  line-height: 24px;
}

.svc-included__cta {
  margin-top: 49px;
  min-width: 279px;
}

/* ==========================================================================
   Spotless bathroom
   ========================================================================== */
.svc-bathroom {
  margin-top: 162px;
  padding-bottom: 20px; /* keep the rotated panel's tail inside the clip box */
  overflow: clip;
}

.svc-bathroom__grid {
  display: grid;
  /* photo column stops 94px short of the container's right edge (Figma) */
  grid-template-columns: minmax(0, 634px) minmax(0, 536px);
  justify-content: start;
  column-gap: 16px;
  align-items: start;
}

.svc-bathroom__content {
  padding-top: 36px;
}

.svc-bathroom__title {
  max-width: 460px; /* wraps after "spotless," as in the design */
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
}

.svc-bathroom__text {
  margin-top: 16px;
  max-width: 615px;
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 24px;
}

.svc-bathroom__cta {
  margin-top: 46px;
  min-width: 279px;
}

.svc-bathroom__nav {
  margin-top: 160px;
  display: flex;
  gap: 12px;
}

.svc-bathroom__media {
  position: relative;
  margin-top: 20px;
}

.svc-bathroom__media::before {
  content: "";
  position: absolute;
  left: 44px; /* photo-sized dark rect offset +44px, rotated 4.3° (per Figma render) */
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-card);
  background: linear-gradient(150deg, #33333d 0%, #101016 55%, #1c1c24 100%);
  transform: rotate(4.3deg);
}

.svc-bathroom__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 536 / 624;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ==========================================================================
   Fast, high quality features
   ========================================================================== */
.svc-features {
  position: relative;
  margin-top: 232px;
}

.svc-features__star {
  position: absolute;
  left: 0;
  top: 44px;
  width: 632px;
  height: 886px;
  pointer-events: none;
}

.svc-features .container {
  position: relative;
  z-index: 1;
}

.svc-features__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.2;
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
}

.svc-features__grid {
  margin-top: 67px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 20px;
}

.svc-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 341px;
  padding: 32px 24px;
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
}

.svc-feature--time {
  grid-column: 2;
  grid-row: 1;
}

.svc-feature--prices {
  grid-column: 3;
  grid-row: 1;
}

.svc-feature--discounts {
  grid-column: 1;
  grid-row: 2;
}

.svc-feature--easy {
  grid-column: 2;
  grid-row: 2;
}

.svc-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.svc-feature__icon svg {
  width: 100%;
  height: 100%;
}

.svc-feature__icon--glyph {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  color: var(--color-primary-400);
  justify-content: flex-start;
}

.svc-feature__title {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
}

.svc-feature__text {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  line-height: var(--leading-body);
}

.svc-feature .link-more {
  margin-top: auto;
  padding-top: 16px;
}

/* ==========================================================================
   Our work
   ========================================================================== */
.svc-work {
  margin-top: 277px;
}

.svc-work__title {
  position: relative;
  left: 11px; /* whole work block sits 11px right of centre in Figma */
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: 72px;
  text-align: center;
}

.svc-work__carousel {
  position: relative;
  left: 11px;
  margin-top: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 33px;
}

.svc-work__figure + .svc-work__figure {
  margin-left: 7px;
}

.svc-work__figure {
  flex: 0 1 424px;
  min-width: 0;
}

.svc-work__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.svc-work__figure figcaption {
  margin-top: 26px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 44px;
}

.svc-work__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 6px 24px rgba(23, 15, 73, 0.05);
  color: var(--color-text-primary);
}

/* ==========================================================================
   Additional services
   ========================================================================== */
.svc-additional {
  margin-top: 371px;
}

.svc-additional__title {
  position: relative;
  left: 11px; /* title sits 11px right of centre in Figma */
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: 72px;
  text-align: center;
}

.svc-additional__sub {
  margin-top: 15px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 32px;
  line-height: 42px;
}

.svc-additional__grid {
  margin-top: 57px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 19px;
}

.svc-service-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
}

.svc-service-card__photo {
  width: 100%;
  height: 227px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.svc-service-card__body {
  padding: 24px;
}

.svc-service-card__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
}

.svc-service-card__meta {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-400);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 28px;
  line-height: 28px;
}

.svc-service-card__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.svc-additional__more {
  margin-top: 27px;
  text-align: center;
}

.svc-additional__more button {
  color: var(--color-primary-400);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 31px;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.svc-testimonials {
  margin-top: 474px;
}

.svc-testimonials__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: 86px;
  text-align: center;
}

.svc-testimonials__viewport {
  margin-top: 93px;
  overflow: hidden;
  padding-bottom: 45px;
}

.svc-testimonials__row {
  display: flex;
  gap: 20px;
}

.svc-testimonial {
  position: relative;
  flex: 0 0 390px;
  height: 235px;
  padding: 32px 30px 0;
  background: var(--color-card-bg);
  border-radius: 24px;
}

.svc-testimonial__head {
  display: flex;
  align-items: center;
  gap: 24px;
}

.svc-testimonial__avatar {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-primary-50);
  flex-shrink: 0;
}

.svc-testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-testimonial__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 20px;
  color: var(--color-neutral-800);
}

.svc-testimonial__rating {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  line-height: 27px;
}

.svc-testimonial__quote {
  margin-top: 24px;
}

.svc-testimonial__quote p {
  max-width: 330px;
  font-size: var(--text-sm);
  line-height: 21px;
}

.svc-testimonial__marks {
  position: absolute;
  left: 24px;
  top: 208px; /* glyphs straddle the card's bottom edge */
  width: 81px;
  height: 75px;
}

/* ==========================================================================
   Ready to book banner
   ========================================================================== */
.svc-ready {
  margin-top: 446px;
}

.svc-ready__banner {
  position: relative;
  min-height: 441px;
  padding: 79px 40px 60px 83px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-image: url("../../assets/img/service-template/ready-banner.jpg");
  background-size: cover;
  background-position: center;
  color: var(--color-white);
}

.svc-ready__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 60px;
  line-height: 62px;
  color: var(--color-white);
}

.svc-ready__text {
  margin-top: 8px;
  max-width: 602px; /* wraps after "member-only offers" as in Figma */
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 24px;
}

.svc-ready__cta {
  margin-top: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 343px;
  min-height: 72px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-100);
  color: var(--color-primary-400);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-btn-lg);
  line-height: var(--leading-body);
}

/* ==========================================================================
   Our services
   ========================================================================== */
.svc-services {
  margin-top: 216px;
}

.svc-services__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: 86px;
  text-align: center;
}

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

.svc-services__card {
  gap: 0;
  padding: 32px 24px;
  min-height: 341px;
}

.svc-services__card .card__title {
  margin-top: 16px;
}

.svc-services__card .card__text {
  margin-top: 16px;
}

.svc-services__card .link-more {
  margin-top: auto;
  padding-top: 24px;
}

.svc-services__icon {
  width: 48px;
  height: 48px;
}

.svc-services__dots {
  position: relative;
  left: -4px;
  margin-top: 46px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.svc-services__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary-100);
}

.svc-services__dot--active {
  background: var(--color-primary-400);
}

.svc-services__dot--faint {
  background: var(--color-primary-50);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.svc-faq {
  margin-top: 364px;
  padding-bottom: 69px;
}

.svc-faq__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: 86px;
  text-align: center;
}

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

.svc-faq__item {
  padding: 25px 0;
}

.svc-faq__item--divided {
  border-top: 1px solid #E8E8F0;
}

.svc-faq__item:has(.svc-faq__trigger[aria-expanded="true"]) {
  padding-top: 41px;
  background: #F5F4FB;
  border-radius: 24px;
}

.svc-faq__trigger[aria-expanded="true"] {
  min-height: 107px;
}

.svc-faq__heading {
  font-size: inherit;
  line-height: inherit;
}

.svc-faq__trigger {
  width: 100%;
  min-height: 128px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 32px;
  text-align: left;
}

.svc-faq__question {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  color: var(--color-neutral-800);
}

.svc-faq__chevron {
  flex: 0 0 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 4px 14px rgba(23, 15, 73, 0.08);
}

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

.svc-faq__panel {
  padding: 0 32px 24px;
}

.svc-faq__panel p {
  font-family: var(--font-heading);
  font-size: 25.5px;
  line-height: 42px;
  color: var(--color-neutral-600);
}

/* ==========================================================================
   Tablet (768–1023): compressed desktop layouts
   ========================================================================== */
@media (max-width: 1023px) {
  .svc-hero__stars--desktop {
    top: -96px;
    width: 420px;
    height: auto;
  }

  .svc-section-title,
  .svc-work__title,
  .svc-additional__title,
  .svc-testimonials__title,
  .svc-services__title,
  .svc-faq__title {
    font-size: 48px;
    line-height: 1.25;
  }

  .svc-work__title,
  .svc-work__carousel,
  .svc-additional__title {
    left: 0;
  }

  .svc-features__title {
    font-size: 44px;
  }

  .svc-included__grid,
  .svc-bathroom__grid {
    column-gap: 40px;
  }

  .svc-included {
    margin-top: 80px;
  }

  .svc-bathroom {
    margin-top: 100px;
  }

  .svc-bathroom__nav {
    margin-top: 64px;
  }

  .svc-features {
    margin-top: 120px;
  }

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

  .svc-feature--time { grid-column: auto; grid-row: auto; }
  .svc-feature--prices { grid-column: auto; grid-row: auto; }
  .svc-feature--discounts { grid-column: auto; grid-row: auto; }
  .svc-feature--easy { grid-column: auto; grid-row: auto; }

  .svc-features__star {
    display: none;
  }

  .svc-work,
  .svc-additional,
  .svc-testimonials,
  .svc-ready,
  .svc-services,
  .svc-faq {
    margin-top: 140px;
  }

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

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

  .svc-ready__banner {
    padding: 60px 40px;
  }
}

/* ---- desktop/mobile paired content spans (mobile truth diverges) ----------
   Placed AFTER all desktop component rules so this hide wins the source-order
   tie against same-specificity display rules (e.g. .svc-feature__icon). */
.st-m {
  display: none;
}

/* ==========================================================================
   Mobile (<768): matches the 402px Figma frame
   ========================================================================== */
@media (max-width: 767px) {
  .st-d {
    display: none;
  }

  .st-m {
    display: revert;
  }

  img.st-m {
    display: block;
  }

  .svc-feature__icon.st-m {
    display: flex;
  }

  .svc-main {
    display: flex;
    flex-direction: column;
  }

  .svc-services { order: 1; }
  .svc-ready { order: 2; }
  .svc-faq { order: 3; }

  /* ---- hero ---- */
  .svc-hero {
    padding-bottom: 17px;
  }

  .svc-hero::before {
    top: -96px; /* mobile header is the 96px navbar only */
    height: 314px;
  }

  .svc-hero__stars--desktop {
    display: none;
  }

  .svc-hero__stars--mobile {
    display: block;
    top: -41px;
  }

  .svc-hero__content {
    padding-top: 56px;
  }

  .svc-hero__title {
    font-size: 32px;
    line-height: 34px;
  }

  .svc-hero__sub {
    margin-top: 12px;
    font-size: var(--text-base);
    line-height: 24px;
  }

  .svc-hero__cta {
    margin-top: 29px;
  }

  /* ---- included ---- */
  .svc-included {
    margin-top: 62px;
  }

  .svc-included__grid {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .svc-included__photo {
    order: 2;
    margin-top: 48px;
    height: 256px;
  }

  /* whole text column sits 1px left of the shared container grid in the frame */
  .svc-included__content {
    position: relative;
    left: -1px;
  }

  .svc-included__title {
    font-size: 32px;
    line-height: 32px;
  }

  .svc-included__text {
    margin-top: 8px;
    font-size: 18px;
    line-height: 18px;
  }

  .svc-included__list {
    margin-top: 12px;
  }

  .svc-included__cta {
    margin-top: 32px;
    min-width: 0;
  }

  /* ---- bathroom ---- */
  .svc-bathroom {
    margin-top: 93px;
  }

  .svc-bathroom__grid {
    grid-template-columns: 1fr;
  }

  .svc-bathroom__content {
    padding-top: 0;
  }

  .svc-bathroom__title {
    font-size: 32px;
    line-height: 32px;
  }

  .svc-bathroom__text {
    margin-top: 16px;
    font-size: 18px;
    line-height: 18px;
  }

  .svc-bathroom__cta {
    margin-top: 42px;
    min-width: 0;
  }

  /* flatten the content wrapper so the slider arrows can follow the photo */
  .svc-bathroom__content {
    display: contents;
  }

  .svc-bathroom__media {
    order: 4;
  }

  .svc-bathroom__nav {
    order: 5;
    width: fit-content;
    margin: 12px auto 0;
    padding-left: 0;
    justify-content: center;
    gap: 10px;
  }

  .svc-circle-btn {
    width: 40px;
    height: 40px;
  }

  .svc-circle-btn svg {
    width: 20px;
    height: 20px;
  }

  .svc-bathroom__grid {
    display: flex;
    flex-direction: column;
  }

  .svc-bathroom__media {
    margin-top: 42px;
    width: 229px;
    align-self: center;
    margin-left: -32px;
  }

  /* dark rect sits at x 103–351 in the 402 frame (not bleeding to the edge) */
  .svc-bathroom__media::before {
    left: 13px;
    top: -8px;
    transform: rotate(-4.7deg);
  }

  /* ---- features ---- */
  .svc-features {
    margin-top: 117px;
  }

  .svc-features__title {
    max-width: 350px;
    font-size: 30px;
    line-height: 30px;
  }

  .svc-features__grid {
    margin-top: 44px;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .svc-feature {
    min-height: 0;
    padding: 16px;
  }

  .svc-feature__icon {
    width: 32px;
    height: 32px;
  }

  .svc-feature__icon--glyph {
    font-size: 33px;
  }

  .svc-feature .link-more {
    padding-top: 24px;
  }

  .svc-feature__title {
    font-size: 24px;
    line-height: 1.3;
  }

  .svc-feature__text {
    font-size: var(--text-base);
    line-height: 23px;
  }

  /* ---- our work ---- */
  .svc-work {
    margin-top: 111px;
  }

  .svc-work__title {
    left: 0;
    font-size: 32px;
    line-height: 32px;
  }

  .svc-work__carousel {
    position: relative;
    left: 0;
    margin-top: 46px;
    flex-direction: column;
    gap: 0;
  }

  .svc-work__figure {
    flex: 0 0 auto;
    width: 294px;
  }

  .svc-work__figure + .svc-work__figure {
    margin-left: 0;
    margin-top: 24px;
  }

  .svc-work__figure figcaption {
    margin-top: 4px;
    font-size: 28px;
    line-height: 28px;
  }

  /* frame shows plain arrows (no white disc / shadow) on the caption row */
  .svc-work__arrow {
    position: absolute;
    top: 302px;
    width: 41px;
    height: 41px;
    z-index: 2;
    background: transparent;
    box-shadow: none;
  }

  .svc-work__arrow svg {
    width: 24px;
    height: 24px;
  }

  .svc-work__arrow--prev {
    left: -10px;
  }

  .svc-work__arrow--next {
    right: -9px;
  }

  .svc-work__arrow--next {
    right: -6px;
  }

  /* ---- additional services ---- */
  .svc-additional {
    margin-top: 151px;
  }

  .svc-additional__title {
    left: 0;
    font-size: 32px;
    line-height: 32px;
  }

  .svc-additional__sub {
    margin-top: 10px;
    max-width: 290px;
    margin-inline: auto;
    font-size: var(--text-md);
    line-height: 24px;
  }

  .svc-additional__grid {
    margin-top: 35px;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .svc-service-card__photo {
    height: 166px;
  }

  .svc-service-card__body {
    padding: 12px;
  }

  .svc-service-card__title {
    font-size: 20px;
    line-height: 26px;
  }

  .svc-service-card__meta {
    margin-top: 8px;
    gap: 7px;
    font-size: 24px;
    line-height: 24px;
  }

  .svc-service-card__dot {
    width: 4px;
    height: 4px;
  }

  .svc-additional__more {
    margin-top: 30px;
  }

  .svc-additional__more button {
    font-size: 20px;
    line-height: 26px;
  }

  /* ---- testimonials ---- */
  .svc-testimonials {
    margin-top: 158px;
  }

  .svc-testimonials__title {
    font-size: 32px;
    line-height: 38px;
  }

  .svc-testimonials__viewport {
    margin-top: 28px;
    padding-bottom: 55px;
  }

  .svc-testimonials__row {
    flex-direction: column;
    gap: 37px;
  }

  .svc-testimonial {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    padding: 20px 20px 35px;
  }

  .svc-testimonial__avatar {
    width: 48px;
    height: 48px;
  }

  .svc-testimonial__quote {
    margin-top: 8px;
  }

  .svc-testimonial__quote p {
    max-width: 322px;
  }

  .svc-testimonial__marks {
    top: auto;
    bottom: -42px;
    left: 52px;
    width: 66px;
    height: 61px;
  }

  /* ---- our services (ordered before ready banner on mobile) ---- */
  .svc-services {
    margin-top: 203px;
  }

  .svc-services__title {
    font-size: 32px;
    line-height: 38px;
  }

  .svc-services__grid {
    margin-top: 24px;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .svc-services__card {
    min-height: 0;
    padding: 16px 24px;
  }

  .svc-services__card .card__title {
    font-size: 24px;
    line-height: 1.3;
  }

  .svc-services__card .card__text {
    font-size: var(--text-base);
    line-height: 24px;
  }

  .svc-services__card .link-more {
    padding-top: 17px;
  }

  /* frame hand-sizes each card */
  .svc-services__grid li:nth-child(1) { min-height: 244px; }
  .svc-services__grid li:nth-child(2) { min-height: 257px; }
  .svc-services__grid li:nth-child(3) { min-height: 263px; }
  .svc-services__grid li:nth-child(4) { min-height: 260px; }

  .svc-services__dots {
    display: none;
  }

  /* ---- ready banner ---- */
  .svc-ready {
    margin-top: 189px;
  }

  .svc-ready__banner {
    min-height: 718px;
    height: 718px;
    padding: 79px 31px 0;
    border-radius: 40px;
    background-image: url("../../assets/img/service-template/m-ready-banner.jpg");
  }

  .svc-ready__title {
    max-width: 288px; /* wraps after "with" as in the mobile design */
    font-size: 32px;
    line-height: 32px;
  }

  .svc-ready__text {
    margin-top: 16px;
    max-width: 275px;
    font-size: 18px;
    line-height: 20px;
  }

  .svc-ready__cta {
    margin-top: 44px;
    width: 192px;
    min-height: 46px;
    font-size: var(--text-btn);
  }

  /* ---- FAQ ---- */
  .svc-faq {
    margin-top: 209px;
    padding-bottom: 325px;
  }

  .svc-faq__title {
    font-size: 32px;
    line-height: 38px;
  }

  .svc-faq__list {
    margin-top: 24px;
  }

  .svc-faq__item {
    padding: 0;
  }

  .svc-faq__item:has(.svc-faq__trigger[aria-expanded="true"]) {
    padding-top: 32px;
  }

  .svc-faq__trigger {
    position: relative;
    padding: 0 32px;
    justify-content: flex-start;
  }

  .svc-faq__trigger[aria-expanded="true"] {
    min-height: 120px;
  }

  .svc-faq__question {
    max-width: 245px;
    font-size: 20px;
    line-height: 27px;
  }

  /* frame wraps this one as "…or in the / office during the cleaning?" */
  .svc-faq__item--divided .svc-faq__question {
    max-width: 280px;
  }

  /* chevron disc overlaps the question text in the frame */
  .svc-faq__chevron {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* the expanded card's disc hugs the card's right edge in the frame */
  .svc-faq__trigger[aria-expanded="true"] .svc-faq__chevron {
    right: 0;
  }

  .svc-faq__panel {
    margin-top: -4px;
    padding: 0 8px 47px 24px;
  }

  .svc-faq__panel p {
    font-size: 18px;
    line-height: 30px;
  }
}