/* The eyebrow tag should hug its content instead of stretching to the
   full width of the intro column. */
.section_faq .faq_intro-wrap .label_component {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

/* Space between the FAQ heading and the accordion on stacked layouts. */
.section_faq .faq_intro-wrap .heading-style-h3 {
  padding-bottom: var(--spacer--medium);
}

/* Keep the FAQ intro pinned to the top of its grid cell on desktop. */
@media screen and (min-width: 992px) {
  .section_faq .faq_intro-wrap {
    align-self: start;
    position: sticky;
    top: var(--size-7, 4rem);
  }
}

/* Anchor the hero crop to the top of the card instead of center. */
.home-header_img {
  object-position: top center;
}

/* Stack the hero like mobile from ~tablet widths down — the side-by-side
   layout gets too cramped below this point. Extra top padding clears the
   fixed navbar so the eyebrow stays visible. */
@media screen and (max-width: 968px) {
  .section_home-header {
    min-height: auto;
    padding-top: calc(70px + var(--size-7) * 2 + var(--size-12));
    padding-bottom: var(--size-0);
  }

  .home-header_component {
    flex-flow: column;
  }

  .home-header_content {
    width: 100%;
    padding-top: var(--size-0);
    padding-bottom: var(--size-0);
    grid-column-gap: var(--size-12);
    grid-row-gap: var(--size-12);
  }

  .home-header_img-wrap {
    aspect-ratio: 1;
    width: 100%;
  }

  .home-header_brands {
    width: 100%;
  }
}

/* Extra breathing room above the hero eyebrow on phones only. */
@media screen and (max-width: 767px) {
  .section_home-header .home-header_head .text-style-label.no-underline {
    padding-top: 15px;
  }

  /* Keep Samuel K.'s face centered in the landscape crop. */
  .testimonial_img {
    object-position: center 22%;
  }
}

/* Pull the CTA pattern down so the headline sits on the dark upper area. */
.cta_background-img {
  object-position: center top;
  height: 135%;
  inset: 0% 0% auto;
}

/* Center the CTA headline when it wraps on narrow phones. */
@media screen and (max-width: 415px) {
  .section_cta .cta_head .heading-style-h3 {
    text-align: center;
  }
}