/* Three distinct photographic introductions, consistent with the approved hero. */
.page-intro-about { --intro-image: url('assets/about-team-v11.png'); --intro-position: center 46%; }
.page-intro-services { --intro-image: url('assets/services-development-v11.png'); --intro-position: center 51%; }
.page-intro-work { --intro-image: url('assets/work-showcase-v11.png'); --intro-position: center 48%; }
.inner-page .page-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 465px;
  padding-block: 76px;
  background: #12313d;
  color: #fff;
}
.page-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--intro-image);
  background-position: var(--intro-position);
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
.page-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(5, 28, 40, .72);
  pointer-events: none;
}
.page-intro .section-label { color: #bfe7de; }
.page-intro h1 { color: #fff; text-shadow: 0 2px 16px #071e344d; }
.page-intro .narrow > p:last-child { color: #fff; max-width: 740px; margin-inline: auto; }
@media(min-width:1500px) { .inner-page .page-intro { min-height: 490px; } }
@media(max-width:700px) {
  .inner-page .page-intro { min-height: 430px; padding-block: 58px; }
  .page-intro-about { --intro-position: 65% center; }
  .page-intro-services { --intro-position: 59% center; }
  .page-intro-work { --intro-position: 61% center; }
  .page-intro .narrow > p:last-child { font-size: 15px; line-height: 2; }
  .page-intro h1 { font-size: 34px; line-height: 1.55; }
}
@media(max-width:350px) { .page-intro h1 { font-size: 29px; } }