.ecosystem-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 4rem) var(--page-x) 3rem;
  overflow: hidden;
  color: var(--ivory);
  background:
    radial-gradient(ellipse at 26% 22%, rgba(18,55,80,.78), transparent 32%),
    radial-gradient(ellipse at 76% 70%, rgba(75,7,17,.75), transparent 33%),
    var(--black);
}
.ecosystem-hero h1 { font-size: clamp(7.8rem, 20vw, 22rem); transform: translateY(.06em); }
.ecosystem-hero__label { position: absolute; left: var(--page-x); top: 24%; }
.ecosystem-hero__bird { position: absolute; right: 7vw; top: 21%; width: clamp(8rem, 18vw, 19rem); }
.ecosystem-intro { display: grid; grid-template-columns: 1.3fr .7fr; gap: 5rem; align-items: end; }
.ecosystem-intro__aside { max-width: 21rem; justify-self: end; }
.movement { min-height: 82vh; display: grid; grid-template-columns: .35fr 1fr .75fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; border-top: 1px solid currentColor; }
.movement__number { align-self: start; color: var(--red); font: 400 clamp(6rem, 13vw, 14rem)/.8 var(--display); }
.movement__title { font-size: clamp(5.5rem, 11vw, 12rem); }
.movement__copy { max-width: 24rem; }
.movement:nth-of-type(even) { color: var(--black); background: var(--ivory); }
.movement:nth-of-type(odd) { color: var(--ivory); background: var(--black); }
.movement--image { padding: 0; grid-template-columns: 1fr 1fr; }
.movement--image .movement__visual { height: 100%; min-height: 82vh; }
.movement--image .movement__content { padding: 6rem var(--page-x); }
.movement--image .movement__number { display: block; margin-bottom: 3rem; }
.ecosystem-close { min-height: 75vh; display: grid; place-items: center; text-align: center; }
.ecosystem-close > div { max-width: 80rem; }

@media (max-width: 900px) {
  .ecosystem-hero { min-height: 76svh; }
  .ecosystem-hero h1 { font-size: 22vw; }
  .ecosystem-hero__bird { top: 28%; width: 26vw; }
  .ecosystem-intro { grid-template-columns: 1fr; }
  .ecosystem-intro__aside { justify-self: start; }
  .movement { min-height: auto; grid-template-columns: 1fr; gap: 2rem; }
  .movement__number { margin-bottom: 1rem; }
  .movement--image { grid-template-columns: 1fr; }
  .movement--image .movement__visual { min-height: 55vh; order: 2; }
}