/* Opt-in case-result hero. Existing heroes keep their current styles. */
.cr-split-hero,
.cr-split-hero.page-hero {
  display: block;
  position: relative;
  height: auto;
  min-height: 0;
  padding-block: clamp(32px, 5vw, 72px);
  background-color: #f5f1eb;
  color: var(--navy, #080833);
  font-size: inherit;
}

.cr-split-hero .cr-split-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas: "copy media";
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--max-w, 1380px);
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(20px, 5vw, 80px));
}

.cr-split-hero .cr-split-copy {
  grid-area: copy;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.cr-split-hero .cr-split-copy h1,
.cr-split-hero .cr-split-copy .page-hero-intro {
  max-width: 100%;
}

.cr-split-hero .cr-split-facts {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 24px 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy, #080833);
}

.cr-split-hero .cr-split-facts .cr-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 28px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.cr-split-hero .cr-split-facts .cr-fact {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cr-split-hero .cr-split-facts .cr-fact-k {
  display: block;
  background: transparent;
  color: #665735;
  font: inherit;
  line-height: 1.4;
}

.cr-split-hero .cr-split-facts .cr-fact-v {
  display: block;
  background: transparent;
  color: var(--navy, #080833);
  font: inherit;
  font-weight: 600;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cr-split-hero .cr-split-media {
  display: block;
  grid-area: media;
  position: static;
  inset: auto;
  float: none;
  transform: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  opacity: 1;
}

.cr-split-hero .cr-split-media img {
  display: block;
  position: static;
  inset: auto;
  float: none;
  transform: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  opacity: 1;
}

.cr-split-hero .cr-split-media figcaption {
  display: block;
  position: static;
  inset: auto;
  margin: 12px 0 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 800px) {
  .cr-split-hero .cr-split-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "media";
    gap: clamp(24px, 5vw, 40px);
  }
}
