.directory-hero {
  align-self: stretch;
  background:
    linear-gradient(132deg, rgba(4, 45, 88, .98), rgba(12, 84, 160, .95) 62%, rgba(54, 126, 190, .92)),
    repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 255, 255, .08) 46px 47px);
  border-radius: calc(var(--brand-radius-card) * 2);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--brand-color-primary) 22%, transparent);
  color: #fff;
  display: block;
  justify-self: stretch;
  max-width: none;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.directory-hero::after {
  content: none;
}

.directory-hero-copy {
  max-width: 920px;
  padding: clamp(18px, 2.2vw, 24px) clamp(24px, 4vw, 48px);
}

.directory-hero h1 {
  color: inherit;
  font-size: clamp(1.8rem, 3.1vw, 2.65rem);
  letter-spacing: -.035em;
  line-height: 1;
  margin: 0 0 8px;
  text-wrap: balance;
}

.directory-hero h1:last-child {
  margin-bottom: 0;
}

.directory-hero .directory-hero-lead,
.directory-hero > p:not(.eyebrow),
.directory-hero .rich-text {
  color: rgba(255, 255, 255, .88);
  font-size: clamp(.98rem, 1.25vw, 1.12rem);
  line-height: 1.45;
  margin: 0;
  max-width: 68ch;
  text-indent: 0;
}

.directory-hero-lead > :first-child { margin-top: 0; }
.directory-hero-lead > :last-child { margin-bottom: 0; }

.directory-hero .directory-hero-lead p {
  color: inherit;
  font: inherit;
  line-height: inherit;
  margin: 0;
  max-width: inherit;
  text-align: left;
  text-indent: 0;
}

@media (max-width: 560px) {
  .directory-hero {
    border-radius: var(--brand-radius-card);
  }

  .directory-hero-copy {
    padding: 18px 22px;
  }
}