.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(420px, 33.333vw);
  padding: 2.5rem var(--pad);
  overflow: hidden;
  background: #eaf2fa;
}
.page-hero-copy {
  position: relative;
  z-index: 1;
  width: min(52%, 650px);
  margin-inline-start: max(0px, calc((100vw - var(--content)) / 2 - var(--pad)));
}
.page-hero h1 { margin-block: .65rem .85rem; font-size: clamp(2.2rem, 4.25vw, 4.4rem); }
.page-hero-lead { max-width: 32rem; color: var(--navy); }
.page-hero-lead::before { display: block; width: 3.5rem; height: 3px; margin-bottom: .65rem; background: var(--gold); content: ""; }
.page-hero .button { margin-top: 1.15rem; border-radius: 999px; }
.page-hero-visual { position: absolute; inset: 0; margin: 0; }
.page-hero-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.page-hero-visual::after { position: absolute; inset: 0; background: linear-gradient(90deg, #f5f8fc 0%, rgba(245,248,252,.88) 32%, rgba(245,248,252,.45) 53%, transparent 71%); content: ""; }
.page-hero-visual figcaption { position: absolute; z-index: 1; right: 0; bottom: 0; padding: .35rem .65rem; background: #fff; }
.contact-hero-and-form { background: var(--offwhite); }
.contact-hero-and-form > .contact-form-wrap { width: min(calc(100% - 2 * var(--pad)), 860px); margin: clamp(1.5rem, 5vw, 4rem) auto; scroll-margin-top: 7rem; }

@media (max-width: 720px) {
  .page-hero { display: grid; min-height: 0; padding: 0; }
  .page-hero-copy { width: 100%; margin: 0; padding: 2rem var(--pad); }
  .page-hero-visual { position: relative; height: clamp(170px, 43vw, 310px); }
  .page-hero-visual::after { display: none; }
}