.development-stage-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.development-stage-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: var(--stage-photo) center 97% / auto min(88%, 415px) no-repeat;
  filter: saturate(.5) brightness(.72);
  opacity: .38;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 58%, #000 86%, transparent);
}

#foundation { --stage-photo: url("/assets/development-foundation.webp"); }
#fundamentals { --stage-photo: url("/assets/development-fundamentals.webp"); }
#development { --stage-photo: url("/assets/development-development.webp"); }
#consolidation-one { --stage-photo: url("/assets/development-consolidation-one.webp"); }
#consolidation-two { --stage-photo: url("/assets/development-consolidation-two.webp"); }
#specialisation { --stage-photo: url("/assets/development-specialisation.webp"); }
#performance { --stage-photo: url("/assets/development-performance.webp"); }

#fundamentals .development-stage-heading::before {
  mask-image: radial-gradient(ellipse 48% 46% at 50% 69%, #000 24%, transparent 99%);
}

@media (max-width: 680px) {
  .development-stage-heading::before {
    background-position: right 14px center;
    background-size: auto 130%;
    opacity: .30;
    mask-image: linear-gradient(90deg, transparent 46%, #000 87%, transparent);
  }

  #fundamentals .development-stage-heading::before {
    mask-image: radial-gradient(ellipse 28% 75% at 83% 55%, #000 10%, transparent 96%);
  }
}

@media (forced-colors: active) {
  .development-stage-heading::before { display: none; }
}