/* Local integration mock-up: real cut-out photography remains unaltered. */
.integration-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #031f36;
  border: 1px solid rgba(111, 164, 194, .26);
}

.integration-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 31, 54, .24), transparent 36%, rgba(3, 31, 54, .08)),
    radial-gradient(circle at 16% 82%, rgba(37, 140, 192, .13), transparent 30%);
}

.integration-drawing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.integration-person {
  position: absolute;
  z-index: 2;
  height: auto;
  filter: drop-shadow(0 10px 8px rgba(0, 13, 25, .14));
}

.integration-stage__ground {
  position: absolute;
  z-index: 1;
  left: 5%;
  right: 5%;
  bottom: 4.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(177, 208, 225, .58) 18%, rgba(177, 208, 225, .58) 82%, transparent);
}

.hero-stage {
  aspect-ratio: 900 / 720;
}

.hero-stage .integration-drawing {
  object-position: 54% center;
  transform: scale(1.025);
}

.hero-stage .integration-person {
  left: 4.5%;
  bottom: -1%;
  width: 46%;
}

.fig--hero.integrated-figure figcaption {
  margin-top: 14px;
}

body.light .hero-stage,
body.light #health .health-stage {
  border-color: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 6%, black 96%, transparent 100%);
}

body.light .integration-stage {
  box-shadow: 0 20px 54px rgba(4, 32, 57, .11);
}

body.light #people .world.integrated-world {
  border-color: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
}

body.dark .integration-stage {
  border-color: rgba(140, 187, 213, .18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .15);
}

body.dark .hero-stage,
body.dark #health .health-stage,
body.dark #people .world.integrated-world {
  border-color: transparent;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 5%, black 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 5%, black 96%, transparent 100%);
}

#people .world.integrated-world {
  aspect-ratio: 1200 / 585;
  overflow: hidden;
  background: #031f36;
  border: 1px solid rgba(111, 164, 194, .26);
  box-shadow: 0 20px 54px rgba(4, 32, 57, .10);
}

#people .world.integrated-world::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(3, 31, 54, .08), rgba(3, 31, 54, .02) 52%, rgba(3, 31, 54, .18));
}

#people .integration-drawing {
  z-index: 0;
  object-position: center 51%;
  opacity: .92;
}

#people .world__figure {
  z-index: 3;
  left: 30% !important;
  bottom: 0 !important;
  width: 56% !important;
  filter: drop-shadow(0 9px 7px rgba(0, 13, 25, .14));
}

#people .world.integrated-world::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 3%;
  right: 4%;
  bottom: 4.4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(177, 208, 225, .52) 14%, rgba(177, 208, 225, .52) 88%, transparent);
}

#people .world-note {
  max-width: 76ch;
}

#health .split.integrated-split {
  display: block;
}

#health .integrated-health-figure {
  margin: 0;
}

#health .health-stage {
  aspect-ratio: 1536 / 870;
}

#health .health-stage .integration-drawing {
  object-fit: cover;
  object-position: center;
}

#health .health-stage .integration-person {
  left: 2%;
  bottom: -1%;
  width: 36%;
}

#health .integrated-health-figure figcaption {
  margin-top: 14px;
  color: var(--muted);
  font: 700 10px/1.6 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
}

@media (max-width: 1080px) {
  .hero-stage .integration-person {
    width: 39%;
    left: 7%;
  }

  #people .world__figure {
    width: 62% !important;
    left: 34% !important;
  }
}

@media (max-width: 650px) {
  .hero-stage {
    aspect-ratio: 4 / 5;
  }

  .hero-stage .integration-drawing {
    object-position: 63% center;
  }

  .hero-stage .integration-person {
    width: 55%;
    left: 0;
  }

  #people .world.integrated-world {
    aspect-ratio: 4 / 3;
  }

  #people .integration-drawing {
    object-position: 58% center;
  }

  #people .world__figure {
    width: 86% !important;
    left: 47% !important;
  }

  #health .health-stage {
    aspect-ratio: 4 / 3;
  }

  #health .health-stage .integration-drawing {
    object-position: 62% center;
  }

  #health .health-stage .integration-person {
    width: 48%;
    left: -3%;
  }
}