/* ==========================================================================
   Gleaming — Emergency cleaning page (Figma 1256:10586 desktop / 1256:14993 mobile)
   All values measured against the Figma frames (1440 / 402).
   ========================================================================== */

/* This frame's canvas is pure white (baked photo/numeral assets blend to it) */
body {
  background: var(--color-white);
}

/* ==========================================================================
   Hero (Figma 2087325923 + image 1)
   Headline 68/1.0 at y 304, lead 18/1.5, big CTA; cleaner photo anchored to
   the right page edge, starting just below the header (design y 148).
   ========================================================================== */
.em-hero {
  position: relative;
}

.em-hero .container {
  position: relative;
}

.em-hero__img {
  position: absolute;
  top: -26px;
  right: 0;
  width: 650px;
  height: auto;
}

.em-hero__content {
  position: relative;
  z-index: 1;
  max-width: 893px;
  padding-top: 130px;
}

.em-hero__lead {
  max-width: 678px;
  margin-top: 20px;
}

.em-hero__content .btn--lg {
  margin-top: 27px;
}

/* ==========================================================================
   Core emergency services (Figma 2087325989)
   ========================================================================== */
.em-services {
  margin-top: 248px;
}

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

.em-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
  margin-top: 80px;
}

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

.em-service-card__img {
  width: 100%;
  height: 227px;
  object-fit: cover;
}

.em-service-card__content {
  padding: 24px;
}

.em-service-card__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.link-more--lg {
  margin-top: 12px;
  gap: 4px;
  font-size: 24px;
  line-height: 1;
}

.link-more--lg .link-more__icon {
  width: 24px;
  height: 24px;
}

.em-services__more {
  margin-top: 40px;
  text-align: center;
}

.em-services__more button {
  padding: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-primary-400);
}

/* ==========================================================================
   "Not every mess waits for your calendar" (Figma 2087325851 + shield img)
   ========================================================================== */
.em-mess {
  margin-top: 355px;
}

.em-mess .container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.em-mess__img {
  flex-shrink: 0;
  width: 565px;
  height: 565px;
  margin-left: 9px;
}

.em-mess__content {
  max-width: 603px;
  margin-top: 5px;
}

.em-mess__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.5;
}

.em-mess__text {
  margin-top: 12px;
}

.em-mess__content .btn--lg {
  margin-top: 40px;
}

/* ==========================================================================
   Feature badges (Figma "List" 1256:10836) — 3 soft pills
   ========================================================================== */
.em-badges {
  margin-top: 136px;
}

.em-badges__list {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  padding-left: 29px;
}

.em-badge {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: var(--color-card-bg);
  border-radius: var(--radius-pill);
  box-shadow: 0 20px 44px rgba(9, 16, 79, 0.06);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 28px;
  line-height: 48px;
  color: var(--color-text-primary);
}

.em-badge__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

/* ==========================================================================
   How Gleaming Emergency works (Figma 2087325934 + 2087325868)
   Six numbered cards; glossy numerals stick out above the card tops.
   ========================================================================== */
.em-how {
  margin-top: 300px;
}

.em-how__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  text-align: center;
}

.em-how__sub {
  max-width: 1001px;
  margin: 12px auto 0;
  font-family: var(--font-body);
  font-size: 28px;
  line-height: 1.5;
  text-align: center;
}

.em-how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 115px;
}

.em-how__grid--row2 {
  margin-top: 84px;
}

.em-step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 344px;
  padding: 0 32px 52px;
  background: linear-gradient(180deg, #F1F3F9 0%, #F9FAFE 35%, #F9FAFE 100%);
  border-radius: var(--radius-card);
  text-align: center;
}

.em-step__num {
  position: absolute;
  height: auto;
}

.em-step--n1 .em-step__num { left: 102px; top: -82px;  width: 206px; }
.em-step--n2 .em-step__num { left: 91px;  top: -104px; width: 227px; }
.em-step--n3 .em-step__num { left: 91px;  top: -114px; width: 228px; }
.em-step--n4 .em-step__num { left: 91px;  top: -103px; width: 228px; }
.em-step--n5 .em-step__num { left: 129px; top: -60px;  width: 151px; }
.em-step--n6 .em-step__num { left: 128px; top: -68px;  width: 154px; }

.em-step__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  max-width: 232px;
  margin: 0 auto 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
}

.em-step__text {
  font-size: var(--text-base);
  line-height: 1.5;
}

/* ==========================================================================
   Testimonials (Figma 2087325817) — 4 cards, 4th clipped by the viewport
   ========================================================================== */
.em-testimonials {
  margin-top: 519px;
  /* 4th card runs past the container to the viewport edge (Figma) */
  overflow-x: clip;
}

.em-testimonials__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.5;
  text-align: center;
}

.em-testimonials__track {
  display: flex;
  gap: 20px;
  margin-top: 93px;
  padding-bottom: 136px;
}

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

.em-testimonial__person {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.em-testimonial__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex-shrink: 0;
}

.em-testimonial__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: 20px;
  color: var(--color-neutral-800);
}

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

.em-testimonial__rating img {
  width: 24px;
  height: 25px;
}

.em-testimonial__quote {
  max-width: 330px;
  margin-top: 24px;
  font-size: var(--text-sm);
  line-height: 21px;
}

.em-testimonial__mark {
  /* Figma render: mark ink hugs the card's bottom-left corner
     (ink at card +30/+207, 56x45 → asset box 60x50 at 25/202) */
  position: absolute;
  left: 25px;
  top: 202px;
  width: 60px;
  height: auto;
}

/* ==========================================================================
   Ready to book CTA (Figma 2087325904)
   Gradient panel; mop + sparkles art is a single baked image aligned 1:1
   to the panel's top-right corner (art gradient row 79 == panel top).
   ========================================================================== */
.em-cta {
  margin-top: 379px;
  overflow-x: clip;
}

.em-cta__panel {
  position: relative;
  height: 441px;
  border-radius: var(--radius-card);
  background: linear-gradient(100deg, #1E2CA2 20%, #4552BF 45%, #8F9AF3 85%, #9CA7FE 100%);
}

.em-cta__art {
  position: absolute;
  top: -79px;
  right: -79px;
  width: 600px;
  height: 529px;
  pointer-events: none;
}

/* mop + sparkles as separate pieces are a mobile-frame arrangement only */
.em-cta__mop,
.em-cta__sparkles,
.em-cta__sparkle-sm {
  display: none;
}

/* GL2 mobile frame diverges in copy on some blocks; the mobile variants are
   hidden on desktop (swapped inside the <768 media block below). */
.em-copy-mobile {
  display: none;
}

/* The mobile frame sets step/paragraph copy in Montserrat (node 1001:8187);
   declared page-locally and referenced only inside the <768 block. */
@font-face {
  font-family: "Montserrat";
  src: url("../../assets/fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.em-cta__content {
  position: absolute;
  left: 83px;
  top: 79px;
  z-index: 1;
  width: 602px;
}

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

.em-cta__sub {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.85);
}

.em-cta__btn {
  width: 343px;
  margin-top: 44px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-primary-400);
}

/* ==========================================================================
   Our services (Figma 2087325894) — shared cards + page-control dots
   ========================================================================== */
.em-services2 {
  margin-top: 220px;
}

.em-services2__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.5;
  text-align: center;
}

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

.em-services2 .card {
  gap: 0;
  min-height: 341px;
  padding: 31px 24px;
}

.em-services2 .card__icon {
  margin-bottom: 16px;
}

.em-services2 .card__title {
  margin-bottom: 16px;
}

.em-services2 .link-more {
  margin-top: auto;
}

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

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

.em-dot--active {
  background: var(--color-primary-400);
}

/* ==========================================================================
   FAQ (Figma 2087325816) — accordion, 2nd item open, one divider
   ========================================================================== */
.em-faq {
  margin-top: 148px;
}

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

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

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

.em-faq__item:has([aria-expanded="true"]) {
  /* light purple fading to near-white on the right (Figma render) */
  background: linear-gradient(90deg, #F1EFFA 0%, #F1EFFA 25%, #FCFBFE 100%);
  border-radius: var(--radius-card);
}

.em-faq__item--divided {
  border-top: 1px solid var(--color-neutral-300);
}

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

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

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

.em-faq__trigger[aria-expanded="false"] .em-faq__chevron-up {
  display: none;
}

.em-faq__trigger[aria-expanded="true"] .em-faq__chevron-down {
  display: none;
}

.em-faq__panel {
  margin-top: -14px;
  padding: 0 32px 27px;
}

.em-faq__panel p {
  max-width: 1216px;
  font-family: var(--font-alt);
  font-size: 24px;
  line-height: 42px;
  color: var(--color-neutral-600);
}

/* ==========================================================================
   Footer gap override (design: 296px between FAQ and footer)
   ========================================================================== */
.site-footer {
  margin-top: 296px;
}

/* ==========================================================================
   Tablet (768–1023): compressed desktop layout, 2-col grids
   ========================================================================== */
@media (max-width: 1023px) {
  .em-hero__img {
    top: 20px;
    width: 480px;
  }

  .em-hero__content {
    max-width: 620px;
    padding-top: 80px;
  }

  .em-services {
    margin-top: 160px;
  }

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

  .em-mess {
    margin-top: 200px;
  }

  .em-mess .container {
    flex-direction: column;
    gap: 48px;
  }

  .em-badges {
    margin-top: 100px;
  }

  .em-badges__list {
    flex-wrap: wrap;
  }

  .em-how {
    margin-top: 220px;
  }

  .em-how__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 140px;
  }

  .em-how__grid--row2 {
    margin-top: 140px;
  }

  .em-testimonials {
    margin-top: 260px;
  }

  .em-cta {
    margin-top: 200px;
  }

  .em-cta__art {
    top: -63px;
    right: -63px;
    width: 480px;
    height: auto;
  }

  .em-cta__content {
    left: 48px;
    top: 56px;
    width: 55%;
  }

  .em-services2 {
    margin-top: 160px;
  }

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

  .em-faq {
    margin-top: 120px;
  }

  .site-footer {
    margin-top: 200px;
  }
}

/* ==========================================================================
   Mobile (<768): matches the 402px frame (1256:14993)
   ========================================================================== */
@media (max-width: 767px) {
  /* The 402 frame swaps "Our services" ahead of the "Ready to book" CTA
     (mobile frame order: …testimonials → services → CTA → FAQ). */
  main {
    display: flex;
    flex-direction: column;
  }

  /* mobile-specific copy variants (GL2 mobile frame is design truth) */
  .em-copy-desktop { display: none; }
  .em-copy-mobile  { display: inline; }

  .em-hero          { order: 1; }
  .em-services      { order: 2; }
  .em-mess          { order: 3; }
  .em-badges        { order: 4; }
  .em-how           { order: 5; }
  .em-testimonials  { order: 6; }
  .em-services2     { order: 7; }
  .em-cta           { order: 8; }
  .em-faq           { order: 9; }

  /* --- hero --- */
  .em-hero {
    /* photo bleeds 25px past the right frame edge in the design */
    overflow-x: clip;
  }

  .em-hero__img {
    position: static;
    display: block;
    /* measured off the frame render: content 275px tall from y 437,
       left content edge x 96 -> same asset at 405px, top 393, right +25 */
    width: 405px;
    max-width: none;
    margin: -35px -45px 0 auto;
  }

  .em-hero__content {
    max-width: none;
    padding-top: 35px;
  }

  .em-hero__content .btn--lg {
    margin-top: 27px;
  }

  /* --- core services --- */
  .em-services {
    /* hero img flow box now ends at y 788; 32px lands the title at the
       design y (820) */
    margin-top: 32px;
  }

  .em-services__title {
    font-size: 32px;
    line-height: 1.2;
  }

  .em-services__grid {
    grid-template-columns: 1fr;
    gap: 19px;
    margin-top: 25px;
  }

  .em-service-card__img {
    height: 199px;
  }

  /* mobile card: 12px gap between photo and heading (Figma) */
  .em-service-card__content {
    padding: 12px 24px 24px;
  }

  .em-service-card__title {
    /* frame: title ink 13px tall, box 26px */
    font-size: 18px;
    line-height: 26px;
  }

  .link-more--lg {
    /* frame: "Book now" ink ~78px wide, 20px box, 12px above (Actions y38);
       display:flex removes the parent line-box so the box is exactly 20px */
    display: flex;
    width: fit-content;
    margin-top: 12px;
    font-size: 20px;
    line-height: 20px;
  }

  .link-more--lg .link-more__icon {
    width: 16px;
    height: 16px;
  }

  .em-services__more {
    margin-top: 32px;
  }

  /* --- mess --- */
  .em-mess {
    margin-top: 92px;
  }

  .em-mess .container {
    flex-direction: column;
    gap: 0;
  }

  .em-mess__img {
    width: 100%;
    height: auto;
    margin-left: 0;
  }

  .em-mess__content {
    max-width: none;
    margin-top: 0;
  }

  .em-mess__title {
    font-size: 32px;
    line-height: 1.2;
  }

  .em-mess__text {
    margin-top: 12px;
  }

  /* the 402 frame keeps this copy at 18px (14 lines / 27px); Inter matches
     the frame ink word-for-word (Montserrat/CG rewrap - verified); the tiny
     negative tracking closes the frame's slightly narrower advance */
  .em-mess__text p {
    font-size: var(--text-md);
  }

  /* design keeps the full-size 72px button on mobile here */
  .em-mess__content .btn--lg {
    min-height: 72px;
    padding: 12px 32px;
    font-size: var(--text-btn-lg);
  }

  /* --- badges --- */
  .em-badges {
    margin-top: 73px;
  }

  .em-badges__list {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .em-badges__list {
    padding-left: 0;
  }

  .em-badge {
    gap: 8px;
    padding: 12px 24px;
    font-size: 22px;
    line-height: 36px;
  }

  .em-badge__icon {
    width: 24px;
    height: 24px;
  }

  /* --- how it works --- */
  .em-how {
    margin-top: 202px;
  }

  .em-how__title {
    font-size: 32px;
    line-height: 1;
  }

  .em-how__sub {
    margin-top: 13px;
    font-size: var(--text-base);
  }

  .em-how__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 115px;
  }

  .em-how__grid--row2 {
    margin-top: 40px;
  }

  .em-step {
    height: 272px;
    padding: 0 32px 28px;
  }

  .em-step__title {
    min-height: 0;
    max-width: none;
    /* frame node 1001:8186: Cabinet Grotesk Medium 24/1.2 */
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.2;
  }

  /* frame keeps "Remove visible contaminants" on one line (ink 300 in a
     298px box - it may kiss the padding) */
  .em-step--n3 .em-step__title {
    white-space: nowrap;
  }

  .em-step__text {
    /* frame node 1001:8187: Montserrat 16/1.5 */
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
  }

  .em-step--n1 .em-step__num { left: 90px;  top: -82px; width: 183px; }
  .em-step--n2 .em-step__num { left: 90px;  top: -83px; width: 183px; }
  .em-step--n3 .em-step__num { left: 92px;  top: -74px; width: 180px; }
  .em-step--n4 .em-step__num { left: 92px;  top: -90px; width: 180px; }
  .em-step--n5 .em-step__num { left: 115px; top: -74px; width: 134px; }
  .em-step--n6 .em-step__num { left: 115px; top: -74px; width: 134px; }

  /* --- testimonials --- */
  .em-testimonials {
    margin-top: 382px;
  }

  .em-testimonials__title {
    font-size: 32px;
    line-height: 1.2;
  }

  .em-testimonials__track {
    flex-direction: column;
    gap: 48px;
    margin-top: 20px;
    padding-bottom: 101px;
    overflow: visible;
  }

  .em-testimonial {
    flex: none;
    width: 100%;
    height: 191px;
    padding: 20px 20px 0;
  }

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

  .em-testimonial__quote {
    max-width: 322px;
    margin-top: 19px;
  }

  .em-testimonial__mark {
    left: 17px;
    top: 184px;
    width: 45px;
    height: auto;
  }

  /* --- CTA (mobile frame: content on top, mop mid-right, sparkles
         peeking in at the bottom-left; panel 718px, clips the art) --- */
  .em-cta {
    margin-top: 188px;
  }

  .em-cta__panel {
    height: 718px;
    overflow: hidden;
    /* gradient straight from the mobile frame node 1001:8323 */
    background: linear-gradient(94.156deg, #1E2CA2 26.399%, #9EA8FF 98.088%);
  }

  .em-cta__art {
    display: none;
  }

  .em-cta__mop {
    display: block;
    position: absolute;
    top: 314px;
    left: 122px;
    width: 333px;
    height: 333px;
    object-fit: cover;
    pointer-events: none;
  }

  /* both sparkle images render y-flipped in the frame */
  .em-cta__sparkles {
    display: block;
    position: absolute;
    top: 460px;
    left: -9px;
    width: 187px;
    height: auto;
    transform: scaleY(-1);
    pointer-events: none;
  }

  .em-cta__sparkle-sm {
    display: block;
    position: absolute;
    top: 550px;
    left: 89px;
    width: 87px;
    height: auto;
    transform: scaleY(-1);
    pointer-events: none;
  }

  .em-cta__content {
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
    width: auto;
    max-width: none;
    /* Figma: text column 288px at x 31 inside the 362 panel */
    padding: 79px 43px 0 31px;
  }

  .em-cta__title {
    font-size: 32px;
    line-height: 1;
  }

  .em-cta__btn {
    width: auto;
    min-width: 192px;
    margin-top: 44px;
  }

  /* --- our services --- */
  .em-services2 {
    margin-top: 175px;
  }

  .em-services2__title {
    font-size: 32px;
    line-height: 1.2;
  }

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

  .em-services2 .card {
    min-height: 0;
    padding: 16px 24px;
    /* mobile frame: cards carry a faint top tint fading to the flat card bg */
    background: linear-gradient(180deg, #F5F6FA 0, #F9FAFE 40px, #F9FAFE 100%);
  }

  /* mobile frame hand-sizes each card; Book stays bottom-anchored via the
     un-scoped .em-services2 .link-more { margin-top: auto } */
  .em-services2__grid li:nth-child(1) .card { min-height: 245px; }
  .em-services2__grid li:nth-child(2) .card { min-height: 257px; }
  .em-services2__grid li:nth-child(3) .card { min-height: 263px; }
  .em-services2__grid li:nth-child(4) .card { min-height: 261px; }

  .em-services2 .card__title {
    font-size: 24px;
  }

  .em-services2 .card__text {
    font-size: var(--text-base);
    line-height: 24px; /* truth line pitch is 24, not 26 */
  }

  .em-services2__dots {
    display: none;
  }

  /* --- FAQ --- */
  .em-faq {
    margin-top: 209px;
  }

  .em-faq__title {
    font-size: 32px;
    line-height: 1.2;
  }

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

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

  .em-faq__trigger {
    position: relative;
    padding: 0 32px;
    /* frame node 1001:8358: Cabinet Grotesk 20/1.35 */
    font-size: 20px;
    line-height: 27px;
  }

  /* frame: the chevron overlaps the question text, so it can't take flex
     space; questions carry designer-frozen per-item wrap widths */
  .em-faq__chevron {
    position: absolute;
    top: calc(50% - 32px);
    right: 32px;
  }

  /* frame title-box widths per item (designer-frozen wraps) */
  .em-faq__item:nth-child(1) .em-faq__trigger > span:first-child { max-width: 250px; }
  .em-faq__item:nth-child(2) .em-faq__trigger > span:first-child { max-width: 248px; }
  .em-faq__item:nth-child(3) .em-faq__trigger > span:first-child { max-width: 276px; }
  .em-faq__item:nth-child(4) .em-faq__trigger > span:first-child { max-width: 312px; }
  .em-faq__item:nth-child(5) .em-faq__trigger > span:first-child { max-width: 242px; }

  /* expanded item: question sits low (not centered) and indents to 24px */
  .em-faq__item:has([aria-expanded="true"]) .em-faq__trigger {
    align-items: flex-start;
    padding-top: 65px;
    padding-left: 24px;
  }

  .em-faq__item:has([aria-expanded="true"]) .em-faq__chevron {
    top: 60px;
  }

  .em-faq__panel {
    margin-top: 22px;
    padding: 0 0 44px 24px;
  }

  .em-faq__panel p {
    /* frame node 1001:8362: Cabinet Grotesk 18/1.66 in a 338px box */
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 30px;
    max-width: 338px;
  }

  /* --- footer gap --- */
  .site-footer {
    margin-top: 406px;
  }
}