/* Make landing covers part of the hero, like the homepage visual treatment. */
@media (min-width: 981px) {
  .process-page .process-hero {
    position: relative;
    min-height: 590px;
    padding: 0;
    overflow: hidden;
    background: #06111f;
  }
  .process-page .process-hero-grid {
    display: block;
    position: relative;
    min-height: 590px;
  }
  .process-page .process-hero-grid > div:first-child {
    position: relative;
    z-index: 2;
    width: min(63%, 730px);
    padding: 164px 0 72px;
  }
  .process-page .process-hero figure {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 0;
    border-radius: 0;
    background: #06111f;
  }
  .process-page .process-hero figure::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
      linear-gradient(90deg, #06111f 0%, rgba(6,17,31,.99) 38%, rgba(6,17,31,.82) 56%, rgba(6,17,31,.10) 78%, rgba(6,17,31,.24) 100%),
      linear-gradient(0deg, rgba(6,17,31,.56), transparent 35%);
    pointer-events: none;
  }
  .process-page .process-hero figure img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }
  .process-page .process-hero figcaption {
    display: none;
  }
}

@media (max-width: 980px) {
  .process-page .process-hero {
    padding-top: 0;
  }
  .process-page .process-hero-grid > div:first-child {
    padding-top: 146px;
  }
  .process-page .process-hero figure img {
    aspect-ratio: 16 / 9;
    object-position: center;
  }
}

/* Both landing pages need clear space for the headline and a clean image-to-copy transition. */
@media (min-width: 981px) {
  .process-page .process-hero figure {
    left: 16%;
  }
}

.process-page .process-steps article > span {
  margin: 12px 16px 12px;
}