.zpm-banner {
  position: relative;
  display: grid;
  min-height: var(--zpm-min-height, 420px);
  overflow: hidden;
  color: var(--zpm-title-color, #f7f4ee);
  background: var(--zpm-fallback-bg, #2a3b2b);
}

.zpm-banner__media,
.zpm-banner__inner {
  grid-area: 1 / 1;
}

.zpm-banner__media {
  position: relative;
  width: 100%;
  min-height: inherit;
}

.zpm-banner__image,
.zpm-banner__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.zpm-banner__image img,
.zpm-banner__image picture,
.zpm-banner__image .image,
.zpm-banner__image > * {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zpm-banner__placeholder {
  background: var(--zpm-fallback-bg, #2a3b2b);
}

.zpm-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / var(--zpm-overlay, 35%));
  pointer-events: none;
}

.zpm-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: var(--zpm-content-align, center);
  width: 100%;
  min-height: inherit;
  padding-block: 48px;
}

.zpm-banner__content {
  max-width: 560px;
  text-align: var(--zpm-text-align, left);
  transform: translate(
    var(--zpm-content-x-desktop, 0px),
    var(--zpm-content-y-desktop, 0px)
  );
}

.zpm-banner__eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  opacity: 0.92;
}

.zpm-banner__title {
  margin: 0;
  font-size: var(--zpm-title-size, 40px);
  line-height: var(--zpm-title-leading, 115%);
  color: var(--zpm-title-color, #f7f4ee);
  white-space: pre-line;
}

.zpm-banner__subtitle {
  margin: 16px 0 0;
  max-width: 42ch;
  font-size: var(--zpm-copy-size, 16px);
  line-height: var(--zpm-copy-leading, 150%);
  color: var(--zpm-subtitle-color, #f7f4ee);
}

a.zpm-banner__cta.button {
  margin-top: 24px;
  min-height: var(--zpm-btn-h, 44px);
  padding-inline: var(--zpm-btn-px, 22px);
  background-color: var(--zpm-btn-bg, #2a3b2b);
  color: var(--zpm-btn-color, #fff);
  border-radius: var(--zpm-btn-radius, var(--button-border-radius));
  font-size: var(--zpm-button-text-size, 16px);
}

a.zpm-banner__cta.button::after {
  box-shadow: none;
}

a.zpm-banner__cta.button:hover {
  background-color: var(--zpm-btn-bg, #2a3b2b);
  color: var(--zpm-btn-color, #fff);
  opacity: 0.92;
}

a.zpm-banner__cta.button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

a.zpm-banner__cta.button.zpm-banner__cta--outline {
  background-color: transparent;
  color: var(--zpm-btn-border, #fff);
  box-shadow: inset 0 0 0 1px var(--zpm-btn-border, #fff);
}

a.zpm-banner__cta.button.zpm-banner__cta--outline:hover {
  background-color: transparent;
  color: var(--zpm-btn-border, #fff);
}

.zpm-banner--entrance .zpm-banner__content {
  margin-inline: auto;
}

@media (min-width: 960px) {
  /* With a desktop image, the banner follows the image's exact aspect ratio so
     the whole image shows with no crop. The 750px min-height floor is dropped
     here so a narrower desktop can't force extra height that would letterbox
     the image (empty bands); the box then always equals width ÷ image ratio. */
  .zpm-banner--adapt-desktop-image {
    aspect-ratio: var(--zpm-desktop-image-ratio, auto);
    min-height: 0;
  }

  .zpm-banner--adapt-desktop-image .zpm-banner__media,
  .zpm-banner--adapt-desktop-image .zpm-banner__inner {
    min-height: 0;
  }

  /* Box ratio == image ratio, so contain shows the whole image with no crop and
     no bands. contain (not cover) also guarantees the full image even if an
     image ever lacks ratio metadata — it letterboxes rather than cropping. */
  .zpm-banner--adapt-desktop-image .zpm-banner__image.hidden-mobile img,
  .zpm-banner--adapt-desktop-image .zpm-banner__image.hidden-mobile picture,
  .zpm-banner--adapt-desktop-image .zpm-banner__image.hidden-mobile .image,
  .zpm-banner--adapt-desktop-image .zpm-banner__image.hidden-mobile > * {
    object-fit: contain;
  }
}

@media (max-width: 959px) {
  .zpm-banner {
    min-height: var(--zpm-min-height-m, 360px);
  }

  .zpm-banner__inner {
    padding-block: 32px;
  }

  .zpm-banner__content {
    transform: translate(
      var(--zpm-content-x-pad, 0px),
      var(--zpm-content-y-pad, 0px)
    );
  }

  .zpm-banner__title {
    font-size: min(var(--zpm-title-size, 40px), 44px);
  }

  .zpm-banner--entrance:not(.zpm-banner--text-below-mobile) .zpm-banner__inner {
    align-items: flex-start;
    padding-top: 28px;
  }

  .zpm-banner--entrance:not(.zpm-banner--text-below-mobile) .zpm-banner__content {
    margin-inline: 0;
    text-align: left;
  }

  .zpm-banner--entrance .zpm-banner__overlay {
    background: rgb(0 0 0 / var(--zpm-overlay-m, 0%));
  }

  .zpm-banner--entrance .zpm-banner__title {
    color: var(--zpm-title-color-m, #2a3b2b);
  }

  .zpm-banner--entrance .zpm-banner__subtitle {
    color: var(--zpm-subtitle-color-m, #2a3b2b);
  }

  .zpm-banner--entrance a.zpm-banner__cta.button {
    background-color: var(--zpm-btn-bg-m, #2a3b2b);
    color: var(--zpm-btn-color-m, #fff);
  }

  .zpm-banner--text-below-mobile {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .zpm-banner--text-below-mobile .zpm-banner__media,
  .zpm-banner--text-below-mobile .zpm-banner__inner {
    position: relative;
    grid-area: auto;
  }

  .zpm-banner--text-below-mobile .zpm-banner__media {
    min-height: 220px;
    aspect-ratio: 4 / 3;
  }

  .zpm-banner--text-below-mobile .zpm-banner__inner {
    min-height: 0;
    background: var(--zpm-fallback-bg, #2a3b2b);
  }

  /* When copy is stacked below the image it sits on the fallback background,
     not on the photo. Use the banner foreground palette here; the mobile
     overlay palette can match the fallback background and make the copy and
     button disappear. */
  .zpm-banner--text-below-mobile .zpm-banner__title {
    color: var(--zpm-stacked-title-m, #fff);
  }

  .zpm-banner--text-below-mobile .zpm-banner__subtitle {
    color: var(--zpm-stacked-subtitle-m, #fff);
  }

  .zpm-banner--text-below-mobile a.zpm-banner__cta.button {
    background-color: var(--zpm-stacked-btn-bg-m, #fff);
    color: var(--zpm-stacked-btn-color-m, #2a3b2b);
  }

  .zpm-banner--text-below-mobile .zpm-banner__overlay {
    display: none;
  }
}

@media (max-width: 749px) {
  .zpm-banner__inner,
  .zpm-banner--entrance:not(.zpm-banner--text-below-mobile) .zpm-banner__inner {
    align-items: var(--zpm-content-align-m, center);
  }

  .zpm-banner__content {
    text-align: var(--zpm-text-align-m, left);
    transform: translate(
      var(--zpm-content-x-mobile, 0px),
      var(--zpm-content-y-mobile, 0px)
    );
  }

  .zpm-banner--entrance:not(.zpm-banner--text-below-mobile) .zpm-banner__content {
    text-align: var(--zpm-text-align-m, left);
  }

  .zpm-banner__title {
    font-size: var(--zpm-title-size-m, 40px);
    line-height: var(--zpm-title-leading-m, 115%);
  }

  .zpm-banner__subtitle {
    font-size: var(--zpm-copy-size-m, 16px);
    line-height: var(--zpm-copy-leading-m, 150%);
  }

  a.zpm-banner__cta.button {
    font-size: var(--zpm-button-text-size-m, 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  a.zpm-banner__cta.button,
  a.zpm-banner__cta.button:hover {
    transition: none;
    transform: none;
  }
}