subpage-hero {
  display: block;
  transform: none;
  zoom: 1;
}

subpage-hero:not([data-rendered="true"]) {
  height: clamp(660px, 47vw, 750px);
  overflow: hidden;
  background: #f6f0e7;
}

subpage-hero[compact]:not([data-rendered="true"]) { height: clamp(600px, 43vw, 690px); }

subpage-hero:not([data-rendered="true"]) > * {
  visibility: hidden;
}

.page-hero {
  --subpage-hero-cream: #f6f0e7;
  --subpage-hero-charcoal: #2e302e;
  --subpage-hero-ink: #24352d;
  --subpage-hero-gold: #a77a3d;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(660px, 47vw, 750px);
  padding: clamp(78px, 6.5vw, 108px) clamp(60px, 9vw, 170px) clamp(84px, 7vw, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr);
  align-items: start;
  gap: clamp(70px, 10vw, 180px);
  background: var(--subpage-hero-cream);
  transform: none;
  zoom: 1;
}

.page-hero--watermark::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0 -10% 0 auto;
  width: 58%;
  height: 100%;
  background-image: url('erica-speaking-reference-clean.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: .23;
  filter: saturate(.58) contrast(.86) brightness(1.08);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 16%, rgba(0,0,0,.48) 38%, #000 68%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 16%, rgba(0,0,0,.48) 38%, #000 68%, #000 100%);
  pointer-events: none;
  transform: none;
  zoom: 1;
}

.page-hero--watermark::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, var(--subpage-hero-cream) 0%, var(--subpage-hero-cream) 51%, rgba(246,240,231,.96) 59%, rgba(246,240,231,.84) 70%, rgba(246,240,231,.5) 82%, rgba(246,240,231,.16) 94%, transparent 100%);
  pointer-events: none;
}

.page-hero .eyebrow {
  margin: 0;
  color: var(--subpage-hero-gold);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(11px, .88vw, 14px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-hero .gold-rule {
  display: block;
  width: 52px;
  height: 1px;
  margin: 25px 0 32px;
  background: #b89255;
}

.page-hero .hero-title {
  max-width: 840px;
  margin: 0;
  color: var(--subpage-hero-charcoal);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(62px, 5.9vw, 108px);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.045em;
  transform: none;
  zoom: 1;
}

.page-hero .hero-copy {
  position: relative;
  z-index: 1;
  max-width: 570px;
  margin-top: clamp(126px, 9vw, 142px);
  padding-bottom: 8px;
  transform: none;
  zoom: 1;
}

.page-hero .hero-copy p {
  margin: 0;
  color: rgba(36,53,45,.82);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 400;
  line-height: 1.65;
}

.page-hero .hero-copy p + p { margin-top: 20px; }

.page-hero .hero-cascade {
  color: var(--subpage-hero-ink) !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 1.65vw, 29px) !important;
  line-height: 1.52 !important;
}

.page-hero--restrained .hero-title {
  max-width: 700px;
  font-size: clamp(48px, 4.6vw, 76px);
  line-height: 1.03;
  letter-spacing: -.035em;
}

.page-hero--restrained .hero-copy p + p { margin-top: clamp(28px, 2.4vw, 38px); }

.page-hero--restrained .hero-cascade {
  font-size: clamp(20px, 1.45vw, 26px) !important;
  line-height: 1.5 !important;
}

.page-hero--compact {
  height: clamp(600px, 43vw, 690px);
  padding-bottom: clamp(52px, 4.5vw, 72px);
}

@media (max-width: 1180px) {
  .page-hero { grid-template-columns: 1fr .8fr; gap: 70px; }
}

@media (max-width: 900px) {
  subpage-hero:not([data-rendered="true"]) { height: 520px; }
  .page-hero {
    height: auto;
    padding: 104px 7vw 116px;
    grid-template-columns: 1fr;
    gap: 54px;
  }
  .page-hero .hero-copy { margin-top: 0; }
  .page-hero--compact { height: auto; padding-bottom: 88px; }
  .page-hero--watermark::before {
    width: 72%;
    opacity: .1;
  }
}

@media (max-width: 560px) {
  .page-hero { padding-inline: 24px; }
  .page-hero .hero-title { font-size: 52px; }
  .page-hero--restrained .hero-title { font-size: 48px; }
}