.c--hero-header {
  --_hero-header_bg: var(--hero-header_bg, var(--c-white));
  --_hero-header_p-b: var(--hero-header_p-b, 64px);
  --_hero-header_gap: var(--hero-header_gap, 48px);

  --_hero-header-content_gap: var(--hero-header-content_gap, 24px);
  --_hero-header-content_m-w: var(--hero-header-content_m-w, 571px);

  --_hero-header-title_f-s: var(--hero-header-title_f-s, clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem));
  --_hero-header-title_c: var(--hero-header-title_c, var(--c-black));

  --_hero-header-body_c: var(--hero-header-body_c, #222222);

  --_hero-header-media_p-e: var(--hero-header-media_p-e, 0px);

  background: var(--_hero-header_bg);
  padding-block: var(--_hero-header_p-b);
  overflow: hidden;
}

/* Inner: centers content within the site container and stacks on mobile */
.hero-header__inner {
  /* Full width with only an inline-start gutter: content is held to the site
     container by its own max-width, while the media runs to the page edge. */
  width: 100%;
  padding-inline-start: calc((100% - var(--container_m-w)) / 2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_hero-header_gap);
}

/* Content: title, body, CTA */
.hero-header__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_hero-header-content_gap);
  /* Held to the container on mobile, where the inner no longer bounds it. */
  max-width: min(var(--_hero-header-content_m-w), var(--container_m-w));
  min-width: 0;
  width: 100%;
}

.hero-header__title {
  margin: 0;
  font-family: var(--f-f_s);
  font-weight: var(--f-w_bold);
  font-size: var(--_hero-header-title_f-s);
  line-height: 1.1;
  color: var(--_hero-header-title_c);
  word-break: break-word;
}

.hero-header__body {
  font-family: var(--f-f);
  font-size: 1rem;
  line-height: var(--l-h);
  color: var(--_hero-header-body_c);
}

.hero-header__body > :first-child {
    margin-block-start: 0;
  }

.hero-header__body > :last-child {
    margin-block-end: 0;
  }

/* CTA button: outline pill in the title color, filling solid brown (per Figma) on hover/focus/active */
.button.button-outline.hero-header__cta-btn {
  --btn_bg: var(--_hero-header-title_c);
  --btn_c: var(--c-white);
  --btn_bg_h: var(--c-earth-dark);
  --btn_b-c_h: var(--c-earth-dark);
}

/* Media: decorative graphic, scales down and centers on mobile */
.hero-header__media {
  flex-shrink: 0;
  min-width: 0;
  /* Fills the inner's content box, whose inline-end runs to the page edge. */
  width: 100%;
  max-width: 88.75rem;
  margin-inline: 0;
}
.hero-header__media img {
    display: block;
    width: 100%;
    height: auto;
  }

@media (min-width: 62rem) {
  .c--hero-header {
    --_hero-header_p-b: var(--hero-header_p-b, 120px);
    --_hero-header_gap: var(--hero-header_gap, 120px);
  }

  .hero-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline-end: var(--_hero-header-media_p-e);
  }

  .hero-header__content {
    /* Figma spaces title -> body -> CTA by 40px on desktop. */
    --_hero-header-content_gap: var(--hero-header-content_gap_desk, 40px);

    max-width: var(--_hero-header-content_m-w);
    width: auto;
    min-width: 17.5rem;
    flex: 0 1 auto;
  }

  .hero-header__media {
    width: auto;
    max-width: 88.75rem;
    min-width: 13.75rem;
    /* Fills all remaining row space after the content column. */
    flex: 1 1 0%;
  }
}