/* Keep each desktop page opening aligned to the visible screen below the fixed header. */
@media (min-width: 1001px) {
  :root {
    --desktop-header-height: 112px;
  }

  .serve-main,
  .capability-main,
  .impact-main {
    padding-top: var(--desktop-header-height);
  }

  main > section:first-child {
    margin-top: 0;
  }

  .hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  .serve-main > .serve-hero,
  .capability-main > .capability-hero,
  .impact-main > .impact-opening {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: calc(100vh - var(--desktop-header-height));
    min-height: calc(100dvh - var(--desktop-header-height));
    padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 6vw, 7rem);
    overflow: hidden;
    background: #01070d;
  }

  .serve-main > .serve-hero .serve-hero-copy,
  .capability-main > .capability-hero .serve-hero-copy,
  .impact-main > .impact-opening .impact-opening-copy {
    position: relative;
    z-index: 2;
    width: min(60%, 900px);
    padding: 0;
  }

  .impact-main > .impact-opening .impact-opening-copy {
    max-width: 900px;
  }

  .serve-main > .serve-hero .serve-hero-image,
  .capability-main > .capability-hero .serve-hero-image,
  .impact-main > .impact-opening .impact-family {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #01070d;
  }

  .impact-main > .impact-opening .impact-family {
    inset: 0;
  }

  .serve-main > .serve-hero .serve-hero-image > img,
  .capability-main > .capability-hero .serve-hero-image > img,
  .impact-main > .impact-opening .impact-family > img {
    object-fit: cover;
    object-position: 58% center;
  }

  .impact-main > .impact-opening .impact-family > img {
    object-position: center 35%;
    transform: scale(1.15) translateX(25%);
  }

  .serve-main > .serve-hero .serve-hero-image::after,
  .capability-main > .capability-hero .serve-hero-image::after,
  .impact-main > .impact-opening .impact-family::after {
    inset: 0;
    background: linear-gradient(90deg, rgba(1, 7, 13, .96) 0%, rgba(1, 7, 13, .86) 34%, rgba(1, 7, 13, .4) 64%, rgba(1, 7, 13, .16) 100%), linear-gradient(0deg, rgba(1, 7, 13, .55), transparent 42%);
  }

  .serve-main > .serve-hero .serve-hero-image figcaption,
  .capability-main > .capability-hero .serve-hero-image figcaption,
  .impact-main > .impact-opening .impact-family figcaption {
    left: auto;
    right: clamp(1.5rem, 6vw, 7rem);
    bottom: clamp(1.5rem, 4vh, 3rem);
    max-width: min(34%, 460px);
    text-align: right;
    text-shadow: 0 2px 14px rgba(1, 7, 13, .75);
  }

}

@media (min-width: 1001px) and (max-width: 1220px) {
  :root {
    --desktop-header-height: 98px;
  }
}