.leadership-banner {
  --leadership-banner-p: 0;
  --leadership-banner-max-translate: 0px;
  --leadership-banner-blur-max: 14px;

  box-sizing: border-box;
  color: var(--corp-color-white);
  font-family: var(--corp-font-family);
}

/* ——— Stacked layout (mobile-first & when scroll-driven is off) ——— */

.leadership-banner__track {
  min-height: 0;
  position: relative;
}

.leadership-banner__wrapper {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: visible;
  position: relative;
}

.leadership-banner__bg {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* Dual background rows: mobile image below 768px, desktop from tablet up */
.leadership-banner__bg:not(:has(.leadership-banner__bg-layer--mobile)) .leadership-banner__bg-layer--desktop {
  display: block;
}

.leadership-banner__bg:has(.leadership-banner__bg-layer--mobile) .leadership-banner__bg-layer--desktop {
  display: none;
}

@media (width >=768px) {
  .leadership-banner__bg:has(.leadership-banner__bg-layer--mobile) .leadership-banner__bg-layer--desktop {
    display: block;
  }
}

.leadership-banner__bg-layer--mobile {
  display: block;
}

@media (width >=768px) {
  .leadership-banner__bg:has(.leadership-banner__bg-layer--mobile) .leadership-banner__bg-layer--mobile {
    display: none;
  }
}

/* Stacked: hero image + scrim only behind first fold */
.leadership-banner:not(.leadership-banner--scroll-driven) .leadership-banner__bg,
.leadership-banner:not(.leadership-banner--scroll-driven) .leadership-banner__scrim {
  height: var(--leadership-banner-first-fold-h, 100vh);
  inset: 0 0 auto;
  width: 100%;
}

.leadership-banner:not(.leadership-banner--scroll-driven) .leadership-banner__fold--first {
  position: relative;
  z-index: 0;
}

.leadership-banner:not(.leadership-banner--scroll-driven) .leadership-banner__fold--second,
.leadership-banner:not(.leadership-banner--scroll-driven) .leadership-banner__fold--third {
  background-color: var(--corp-color-white);
  color: var(--corp-color-text);
}

.leadership-banner:not(.leadership-banner--scroll-driven) .leadership-banner__desc-slot,
.leadership-banner:not(.leadership-banner--scroll-driven) .leadership-banner__short-slot {
  color: var(--corp-color-text);
}

.leadership-banner:not(.leadership-banner--scroll-driven) .leadership-banner__card-body :where(h2, h3, h4, h5, h6),
.leadership-banner:not(.leadership-banner--scroll-driven) .leadership-banner__card-body .leadership-banner__card-title {
  color: var(--corp-color-heading);
}

.leadership-banner:not(.leadership-banner--scroll-driven) .leadership-banner__card-body h3,
.leadership-banner:not(.leadership-banner--scroll-driven) .leadership-banner__card-body .leadership-banner__card-subtitle {
  opacity: 1;
}

.leadership-banner__bg picture,
.leadership-banner__bg img {
  display: block;
  filter: none;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  width: 100%;
}

.leadership-banner__scrim {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.leadership-banner__folds {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  position: relative;
  z-index: 2;
}

.leadership-banner__folds-inner {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 0;
  transform: none;
  will-change: auto;
}

.leadership-banner__fold {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding-block: var(--corp-space-2xl);
  width: 100%;
}

.leadership-banner__fold--first {
  min-height: 100vh;
}

.leadership-banner__fold--third {
  justify-content: flex-start;
}

/* ——— Scroll-driven (added via JS: width >= 768px and not reduced motion) ——— */

.leadership-banner.leadership-banner--scroll-driven .leadership-banner__track {
  position: relative;
}

.leadership-banner.leadership-banner--scroll-driven .leadership-banner__wrapper {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.leadership-banner.leadership-banner--scroll-driven .leadership-banner__bg,
.leadership-banner.leadership-banner--scroll-driven .leadership-banner__scrim {
  height: auto;
  inset: 0;
  width: auto;
}

.leadership-banner.leadership-banner--scroll-driven .leadership-banner__folds-inner {
  min-height: 0;
  transform: translate3d(0, calc(var(--leadership-banner-p) * -1 * var(--leadership-banner-max-translate)), 0);
  will-change: transform;
}

.leadership-banner.leadership-banner--scroll-driven .leadership-banner__bg picture,
.leadership-banner.leadership-banner--scroll-driven .leadership-banner__bg img {
  filter: blur(calc(var(--leadership-banner-blur-max) * var(--leadership-banner-p)));
}

.leadership-banner.leadership-banner--scroll-driven .leadership-banner__fold--first {
  min-height: 100vh;
}

.leadership-banner.leadership-banner--scroll-driven .leadership-banner__fold--third {
  flex: 0 0 auto;
  min-height: 0;
}

.leadership-banner__first-inner,
.leadership-banner__second-inner {
  width: 100%;
}

.leadership-banner__discover {
  color: var(--corp-color-white);
  font-size: var(--corp-type-body-sm-font-size);
  font-weight: var(--corp-type-body-sm-font-weight);
  letter-spacing: 0.12em;
  line-height: var(--corp-type-body-sm-line-height);
  margin: 0;
  opacity: 0.8;
  text-transform: uppercase;
}

.leadership-banner__desc-slot,
.leadership-banner__short-slot {
  color: var(--corp-color-white);
  font-size: var(--corp-type-body-lg-font-size);
  font-weight: var(--corp-type-body-lg-font-weight);
  line-height: var(--corp-type-body-lg-line-height);
  opacity: 0.92;
}

.leadership-banner__desc-slot p,
.leadership-banner__short-slot p {
  margin: 0 0 var(--corp-space-md);
}

.leadership-banner__desc-slot p:last-child,
.leadership-banner__short-slot p:last-child {
  margin-bottom: 0;
}

.leadership-banner__grid {
  margin: 0;
  row-gap: var(--corp-space-xl);
  width: 100%;
}

.leadership-banner__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.leadership-banner__card-media picture,
.leadership-banner__card-media img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.leadership-banner__card-body :where(h2, h3, h4, h5, h6),
.leadership-banner__card-body .leadership-banner__card-title {
  color: var(--corp-color-white);
  margin: 0;
}

.leadership-banner__card-body h2,
.leadership-banner__card-body .leadership-banner__card-title {
  font-size: var(--corp-type-heading-md-font-size);
  font-weight: var(--corp-type-heading-md-font-weight);
  line-height: var(--corp-type-heading-md-line-height);
}

.leadership-banner__card-body h3,
.leadership-banner__card-body .leadership-banner__card-subtitle {
  font-size: var(--corp-type-heading-sm-font-size);
  font-weight: var(--corp-type-heading-sm-font-weight);
  line-height: var(--corp-type-heading-sm-line-height);
  opacity: 0.9;
}

.leadership-banner__card-body .button {
  align-self: flex-start;
  margin-top: var(--corp-space-sm);
}

.leadership-banner.block {
  .leadership-banner__fold--first {
    padding: 0;

    .leadership-banner__title-slot {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      text-align: center;
      padding-bottom: 56px;

      * {
        color: var(--corp-color-white);
        font-size: var(--corp-type-mobile-display-2-font-size);
        font-weight: var(--corp-type-mobile-display-2-font-weight);
        line-height: var(--corp-type-mobile-display-5-line-height);
      }

      @media (width >=768px) {
        padding-bottom: 43px;
        text-align: left;

        * {
          font-size: var(--corp-type-tablet-display-xl-font-size);
          font-weight: var(--corp-type-tablet-display-xl-font-weight);
          line-height: var(--corp-type-tablet-display-xl-line-height);
        }
      }

      @media (width >=1200px) {
        padding-bottom: 200px;

        * {
          font-size: var(--corp-type-desktop-display-font-size);
          font-weight: var(--corp-type-desktop-display-font-weight);
          line-height: var(--corp-type-desktop-display-line-height);
        }
      }
    }
  }

  .leadership-banner__fold--second {
    background: var(--corp-color-white);
    position: relative;
    padding: 80px 0 0 0;

    @media (width >=768px) {
      padding-block: 110px 48px;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: linear-gradient(to bottom,
            color-mix(in srgb, var(--corp-color-neutral-black) 10%, transparent) 1%,
            transparent 100%);
      }
    }

    @media (width >= 1200px) {
      padding-block: 81px 69px;
    }

    .leadership-banner__discover {
      color: var(--corp-color-text);
      font-size: var(--corp-type-mobile-tag-1-font-size);
      font-weight: var(--corp-type-mobile-tag-1-font-weight);
      line-height: var(--corp-type-mobile-tag-1-line-height);
      opacity: 0.4;
      text-transform: uppercase;

      @media (width >=768px) {
        font-size: var(--corp-type-desktop-body-xs-font-size);
        font-weight: var(--fw-500);
        line-height: var(--corp-type-desktop-body-2xs-line-height);
      }
    }

    .leadership-banner__desc-slot {
      margin-top: var(--corp-space-xl);

      * {
        color: var(--corp-color-text);
        font-size: var(--corp-type-mobile-heading-xl-font-size);
        font-weight: var(--fw-400);
        line-height: var(--corp-type-desktop-heading-3xl-line-height);
      }

      @media (width >=768px) {
        margin-top: 29px;

        * {
          font-size: var(--corp-type-tablet-display-l-font-size);
          font-weight: var(--corp-type-tablet-display-l-font-weight);
          line-height: var(--corp-type-tablet-display-l-line-height);
        }
      }

      @media (width >=1200px) {

        * {
          font-size: var(--corp-type-desktop-display-font-size);
          font-weight: var(--corp-type-desktop-display-font-weight);
          line-height: var(--corp-type-desktop-display-line-height);
        }
      }
    }

    .leadership-banner__short-slot {
      color: var(--corp-color-text);

      * {
        font-size: var(--corp-type-desktop-body-lg-font-size);
        font-weight: var(--fw-400);
        line-height: var(--corp-type-desktop-caption-5-line-height);
        margin-top: var(--corp-space-xl);
      }

      @media (width >=768px) {
        width: 63%;

        * {
          margin-top: 62px;
        }
      }

      @media (width >= 1200px) {
        width: 41%;
      }
    }
  }

  .leadership-banner__fold--third {
    padding-top: 110px;
    padding-bottom: 0;
    background: var(--corp-color-white);
    position: relative;

    @media (width >=768px) {
      padding-top: 50px;
      padding-bottom: 23px;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: linear-gradient(to bottom,
            color-mix(in srgb, var(--corp-color-neutral-black) 10%, transparent) 1%,
            transparent 100%);
      }
    }

    @media (width >=1200px) {
      padding-top: 120px;
      padding-bottom: 27px;
    }

    .leadership-banner__card {
      gap: var(--corp-space-lg);

      @media (width >=1200px) {
        gap: var(--corp-space-2xl);
      }

      &:hover {
        .leadership-banner__card-media {
          background: linear-gradient(228deg,
              color-mix(in srgb, var(--corp-color-primary) 10%, transparent) 31.52%,
              color-mix(in srgb, var(--corp-color-accent-coral) 10%, transparent) 111.9%);

          img {
            filter: grayscale(0%);
          }
        }
      }

      .leadership-banner__card-media {
        border-radius: var(--corp-radius-lg) var(--corp-radius-lg) 0 0;
        overflow: hidden;
        transition: all 0.5s ease;
        position: relative;
        height: 245px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        img {
          display: block;
          width: 100%;
          filter: grayscale(100%);
          transition:
            filter 0.5s ease,
            transform 0.5s ease;
          height: 245px;
          object-fit: cover;
          object-position: top;
        }


        &::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 81px;
          z-index: 2;
          pointer-events: none;
          background: radial-gradient(142.27% 91.76% at 50% 0%,
              rgb(255 255 255 / 0%) 42.98%,
              rgb(255 255 255 / 26%) 65.55%,
              var(--corp-color-white) 92.38%);
        }

        @media (width >= 768px) {
          height: 221px;

          img {
            height: 221px;
          }
        }

        @media (width >=1200px) {
          height: 450px;
          
          img {
            height: 450px;
          }

          &::before {
            height: 150px;
            background: radial-gradient(142.27% 91.76% at 50% 0%,
                rgb(255 255 255 / 0%) 42.98%,
                rgb(255 255 255 / 26%) 65.55%,
                var(--corp-color-white) 92.38%);
          }
        }
      }

      .leadership-banner__card-body {
        .leadership-banner__card-title {
          color: var(--corp-color-text);
          font-size: var(--corp-type-mobile-body-2-font-size);
          font-weight: var(--corp-type-mobile-body-2-font-weight);
          line-height: var(--corp-type-mobile-body-2-line-height);
          margin-bottom: 4px;

          @media (width >=768px) {
            font-size: var(--corp-type-tablet-body-1-font-size);
            font-weight: var(--corp-type-tablet-body-3-font-weight);
            line-height: var(--corp-type-tablet-body-sm-3-line-height);
            margin-bottom: 5px;
          }

          @media (width >=1200px) {
            font-size: var(--corp-type-desktop-heading-4-font-size);
            font-weight: var(--corp-type-desktop-heading-4-font-weight);
            line-height: var(--corp-type-desktop-heading-4-line-height);
            margin-bottom: 12px;
          }
        }
      }

      .leadership-banner__card-subtitle {
        color: var(--corp-color-text);
        font-size: var(--corp-type-mobile-body-sm-2-font-size);
        font-weight: var(--corp-type-mobile-body-sm-2-font-weight);
        line-height: var(--corp-type-mobile-body-sm-2-line-height);
        opacity: 0.3;

        @media (width >=768px) {
          font-size: var(--corp-type-tablet-body-sm-3-font-size);
          font-weight: var(--corp-type-tablet-body-sm-3-font-weight);
          line-height: var(--corp-type-tablet-body-sm-3-line-height);
        }

        @media (width >=1200px) {
          font-size: var(--corp-type-desktop-heading-4-font-size);
          font-weight: var(--corp-type-desktop-heading-4-font-weight);
          line-height: var(--corp-type-desktop-heading-4-line-height);
        }
      }

      .leadership-banner__card-link {
        color: var(--corp-color-primary);
        display: inline-block;
        font-size: var(--corp-type-mobile-body-sm-2-font-size);
        font-weight: var(--fw-500);
        line-height: var(--corp-type-mobile-body-sm-2-line-height);
        margin-top: var(--corp-space-sm);
        position: relative;
        transition: all 0.5s ease;

        &:hover {
          color: var(--corp-color-primary-hover);
        }

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          right: -16px;
          transform: translateY(-50%);
          width: 8px;
          height: 8px;
          background: url(/corporate/icons/corp-leader-btn-arrow.png) no-repeat center / contain;
        }

        @media (width >= 768px) {
          line-height: var(--corp-type-desktop-caption-2-line-height);
        }

        @media (width >=1200px) {
          font-size: var(--corp-type-desktop-body-font-size);
          font-weight: var(--corp-type-desktop-body-font-weight);
          line-height: var(--corp-type-desktop-caption-5-line-height);
          margin-top: 44px;
        }
      }
    }
  }
}

/* Leadership readmore modal */
.leadership-banner-modal-open {
  overflow: hidden;
}

/* Mobile first */
.leadership-banner__modal {
  background: transparent;
  border: 0;
  color: var(--corp-color-text);
  margin: auto;
  max-height: calc(100dvh - 16px);
  max-width: calc(100vw - 16px);
  overflow: visible;
  padding: 0;
  width: min(410px, calc(100vw - 16px));

  /* scrollbar */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: var(--corp-color-surface-secondary);
    border-left: none;
  }

  ::-webkit-scrollbar-track {
    background-color: var(--corp-color-surface-secondary);
    border-left: 4px solid var(--corp-color-surface-secondary);
  }

  ::-webkit-scrollbar-thumb {
    background: none;
    cursor: pointer;
    position: relative;
    background-color: var(--corp-color-primary);
  }

  &::backdrop {
    background: rgb(0 0 0 / 78%);
  }

  .leadership-banner__modal-card {
    background: var(--corp-color-white);
    border-radius: 13px;
    box-sizing: border-box;
    color: var(--corp-color-text);
    max-height: calc(100dvh - 16px);
    padding: 13px;
    overflow-y: auto;
    position: relative;
    width: 100%;
  }

  .leadership-banner__modal-close {
    background: rgb(0 0 0 / 22%) url('/corporate/icons/video-close.svg') no-repeat center / 14px 14px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    height: 22px;
    padding: 0;
    position: absolute;
    right: var(--corp-space-xl);
    top: var(--corp-space-xl);
    width: 22px;
    z-index: 2;
  }

  .leadership-banner__modal-media {
    aspect-ratio: 320 / 199;
    background: var(--corp-color-surface-tertiary);
    border-radius: var(--corp-radius-sm);
    height: auto;
    overflow: hidden;

    picture,
    img {
      display: block;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      width: 100%;
    }
  }

  .leadership-banner__modal-header {
    align-items: flex-start;
    display: flex;
    gap: var(--corp-space-md);
    justify-content: space-between;
    padding: 13px 0 18px;
  }

  .leadership-banner__modal-title,
  .leadership-banner__modal-title :where(h1, h2, h3, h4, h5, h6) {
    font-size: var(--corp-type-mobile-heading-2-medium-font-size);
    font-weight: var(--corp-type-mobile-heading-2-medium-font-weight);
    line-height: var(--corp-type-mobile-heading-2-medium-line-height);
    text-transform: uppercase;
  }

  .leadership-banner__modal-subtitle,
  .leadership-banner__modal-subtitle :where(p, h1, h2, h3, h4, h5, h6) {
    color:var(--corp-color-grey-2);
    font-size: var(--corp-type-mobile-body-1-font-size);
    font-weight: var(--corp-type-mobile-heading-2-medium-font-weight);
    line-height: var(--corp-type-mobile-body-3-line-height);
    margin: 6px 0 0;

    @media (width >= 768px) {
      font-size: var(--corp-type-desktop-heading-6-font-size);
      font-weight: var(--corp-type-mobile-heading-base-font-weight);
      line-height: var(--corp-type-desktop-heading-3xl-line-height);
      margin: 8px 0 0;
    }
  }

  .leadership-banner__modal-linkedin {
    background-color:var(--corp-color-blue-3);
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--corp-space-lg);
    margin-top: 3px;
    mask: url('/corporate/icons/linkedin-white.svg') no-repeat center / contain;
    text-decoration: none;
    width: var(--corp-space-lg);

    &[hidden] {
      display: none;
    }
  }

  .leadership-banner__modal-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .leadership-banner__modal-accordion-item {
    background: var(--corp-color-surface-secondary);
    border-radius: 7px;
    color: var( --corp-color-grey-3);
    overflow: hidden;
  }

  .leadership-banner__modal-accordion-summary {
    align-items: center;
    color: var( --corp-color-grey-3);
    cursor: pointer;
    display: flex;
    font-size: var(--corp-type-mobile-body-sm-2-font-size);
    font-weight: var(--corp-type-mobile-body-sm-2-font-weight);
    justify-content: space-between;
    letter-spacing: -0.24px;
    line-height: var(--corp-type-mobile-body-sm-2-line-height);
    list-style: none;
    padding: 13px 9px;

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      background-color: currentColor;
      content: '';
      flex: 0 0 auto;
      height: var(--corp-space-md);
      mask: url('/corporate/icons/plus.svg') no-repeat center / contain;
      width: var(--corp-space-md);
    }
  }

  .leadership-banner__modal-accordion-item[open] {
    .leadership-banner__modal-accordion-summary {
      color: var(--corp-color-primary);
      font-size: var(--corp-type-mobile-body-sm-font-size);
      font-weight: var(--corp-type-mobile-body-sm-font-weight);
      letter-spacing: -0.12px;
      line-height: 19.605px;
      padding: var(--corp-space-lg) 13px 0;

      &::after {
        mask-image: url('/corporate/icons/minus.svg');
      }
    }
  }

  .leadership-banner__modal-accordion-panel {
    color: var(--corp-color-neutral-black);
    font-size: var(--corp-type-mobile-body-sm-2-font-size);
    font-weight: var(--corp-type-mobile-body-sm-2-font-weight);
    letter-spacing: -0.24px;
    line-height: var(--corp-type-mobile-body-sm-2-line-height);
    padding: var(--corp-space-lg) 13px;

    :where(p, ul, ol) {
      margin: 0 0 10px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    ul,
    ol {
      padding-left: 0;
    }

    li {
      list-style: none;
      margin: 0 0 13px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  @media (width >= 768px) {
    width: 334px;

    .leadership-banner__modal-card {
      border-radius: var(--corp-radius-lg);
      padding: var(--corp-space-lg);
    }

    .leadership-banner__modal-close {
      background-size: 10px 10px;
      height: 18px;
      right: 30px;
      top: 30px;
      width: 18px;
    }

    .leadership-banner__modal-header {
      padding: 16px 0 24px;
    }

    .leadership-banner__modal-title,
    .leadership-banner__modal-title :where(h1, h2, h3, h4, h5, h6) {
      font-size: var(--corp-type-tablet-heading-xl-font-size);
      font-weight: var(--corp-type-cta-2-font-weight);
      letter-spacing: -0.4px;
      line-height: var(--corp-type-tablet-heading-xl-line-height);
      color: var(--corp-color-grey-3);
    }

    .leadership-banner__modal-accordion-summary {
      font-size: var(--corp-type-tablet-body-xl-font-size);
      font-weight: var(--corp-type-tablet-body-lg-font-weight);
      letter-spacing: -0.16px;
      line-height: 150%;
      padding: 16px 12px;

      &::after {
        height: 10px;
        width: 10px;
      }
    }

    .leadership-banner__modal-accordion-item[open] {
      .leadership-banner__modal-accordion-summary {
        font-size: var(--corp-type-tablet-body-xl-font-size);
        font-weight: var(--fw-500);
        letter-spacing: -0.12px;
      }
    }

    .leadership-banner__modal-accordion-panel {
      padding: 20px var(--corp-space-lg);

      li {
        font-size: var(--corp-type-tablet-body-lg-font-size);
        font-weight: var(--corp-type-tablet-body-lg-font-weight);
        letter-spacing: -0.42px;
        line-height: var(--corp-type-tablet-body-lg-line-height);
        margin-bottom: var(--corp-space-lg);
      }
    }
  }
}

@media (width < 768px) {
  .leadership-banner.block {
    .leadership-banner__fold--third {
      .leadership-banner__card {
        display: flex;
        flex-direction: column;
    
        .leadership-banner__card-body {
          display: flex;
          flex-direction: column;
          flex: 1;

          .leadership-banner__card-subtitle {
            margin-bottom: 8px;
          }
    
          .leadership-banner__card-link {
            margin-top: auto;
          }
        }
      }
    }
  }
}