section.u5m-parallax-content {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin: var(--section-margin-none);
  padding: var(--section-padding-large);
  background-color: var(--isg-navy);

  /* ============ PARALLAX BACKGROUND ============ */
  /* Overhangs the section top and bottom by the drift distance so the image
     still covers the box at either end of its travel. */
  .parallax-bg {
    position: absolute;
    inset: calc(var(--pc-drift) * -1) 0;
    z-index: 0;

    /* Screen-blends against the section background colour, so the black areas
       of an abstract gradient graphic drop out and only its light streaks
       survive. Relies on the section's `isolation: isolate` to keep the blend
       from reaching page content behind this module. */
    &.treatment-glow {
      mix-blend-mode: screen;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: var(--pc-focal);
    }
  }

  .parallax-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .section-inner.center {
    position: relative;
    z-index: 1;
  }

  /* ============ LAYOUT ROW ============ */
  .parallax-row {
    display: flex;
    align-items: flex-start;
    gap: 60px;

    @media (max-width: 1280px) {
      gap: 40px;
    }

    @media (max-width: 991px) {
      flex-direction: column;
      gap: 40px;
    }
  }

  &.scroll-left .parallax-row {
    flex-direction: row-reverse;

    @media (max-width: 991px) {
      flex-direction: column;
    }
  }

  /* ============ PINNED COLUMN ============ */
  .parallax-sticky {
    flex: 0 0 var(--pc-sticky-width);
    max-width: var(--pc-sticky-width);
    position: sticky;
    top: calc(var(--header-height) + 40px);

    @media (max-width: 991px) {
      position: static;
      flex: none;
      max-width: 100%;
      width: 100%;
    }

    .intro-content .heading {
      margin-bottom: 20px;
    }
  }

  /* ============ SCROLLING COLUMN ============ */
  .parallax-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--pc-block-gap);
    min-width: 0;

    @media (max-width: 991px) {
      width: 100%;
      gap: calc(var(--pc-block-gap) * 0.6);
    }
  }

  .parallax-block {
    .eyebrow {
      display: block;
      margin: 0 0 12px;
    }

    .parallax-block__heading {
      margin: 0 0 16px;
    }

    .parallax-block__body {
      p:last-child {
        margin-bottom: 0;
      }
    }

    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 28px;
    }
  }

  /* ============ BLOCK ACCENT VARIANTS ============ */
  &.accent-rule .parallax-block {
    padding-left: 28px;
    border-left: 3px solid var(--isg-turquoise);

    @media (max-width: 767px) {
      padding-left: 20px;
    }
  }

  &.accent-card .parallax-block {
    padding: 36px;
    border-radius: var(--border3);
    background-color: rgba(0, 22, 56, 0.06);

    @media (max-width: 767px) {
      padding: 24px;
    }
  }

  /* ============ DARK MODE ============ */
  &.dark-mode {
    .parallax-block {
      .parallax-block__heading {
        color: var(--white);
      }

      .parallax-block__body {
        color: var(--white-80);

        a {
          color: var(--white);
          text-decoration: underline;
        }
      }
    }

    &.accent-card .parallax-block {
      background-color: rgba(255, 255, 255, 0.07);
    }
  }
}

/* Scroll-driven parallax. Browsers without view() timelines simply render the
   image statically, which is why .parallax-bg is sized to cover on its own. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    section.u5m-parallax-content .parallax-bg {
      animation-name: u5-parallax-drift;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes u5-parallax-drift {
  from {
    transform: translate3d(0, calc(var(--pc-drift) * -1), 0);
  }

  to {
    transform: translate3d(0, var(--pc-drift), 0);
  }
}