/* Shared photographic hero; the wide image fills the section behind the floating header. */
.photo-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 128px 340px; background: var(--cream); border-radius: 0 0 5% 5% / 0 0 2% 2%; }
.photo-hero-image { position: absolute; z-index: -2; inset: auto 0 0; width: 100%; height: 300px; object-fit: cover; object-position: 64% top; }
.photo-hero::after { content: ''; position: absolute; z-index: -1; inset: auto 0 260px; height: 70px; background: linear-gradient(180deg, var(--cream), transparent); }
.photo-hero h1 { max-width: 740px; font-size: clamp(35px, 8.7vw, 52px); margin-bottom: 22px; }
.photo-hero-copy > p { max-width: 550px; font-size: 16px; margin-bottom: 0; }
@media (min-width: 600px) {
  .photo-hero { display: flex; align-items: center; min-height: 530px; padding-block: 140px 65px; border-radius: 0 0 6% 5% / 0 0 3% 3%; }
  .photo-hero-image { inset: 0; height: 100%; object-position: 65% top; }
  .photo-hero::after { inset: 0; height: auto; background: linear-gradient(90deg, rgb(250 247 242 / 98%), rgb(250 247 242 / 94%) 32%, rgb(250 247 242 / 78%) 48%, rgb(250 247 242 / 0%) 80%); }
  .photo-hero-copy { max-width: 660px; }
  .photo-hero h1 { font-size: clamp(40px, 5.2vw, 62px); }
  .photo-hero-copy > p { max-width: 470px; }
}
@media (min-width: 1000px) {
  .photo-hero { min-height: 530px; padding-block: 153px 75px; }
  .photo-hero h1 { font-size: clamp(46px, 4.3vw, 62px); }
}
/* Keep the treatment subject's face below the tablet header at narrow widths. */
@media (min-width: 600px) and (max-width: 899px) {
  .services-hero .photo-hero-image,
  .about-hero .photo-hero-image { transform: scale(1.2); transform-origin: 65% top; }
}
@media (min-width: 1600px) {
  .photo-hero { min-height: 590px; }
}