/* ===== BASE ===== */

  .who-we-are-hero {
    position: relative;
    background: none;
  }

  .who-we-are-hero {
    transform: none !important;
  }

  .who-we-are-hero__pin {
    position: relative;
    z-index: 1;
  }

  .who-we-are-hero__text-mobile,
  .who-we-are-hero__text { 
    margin: 0 auto 24px;

    max-width: 370px;
    color: #141635;
    text-align: center;
    font-family: "Inter Display";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.18px;
  }

  /* ===== DESKTOP ===== */

  @media (min-width: 1025px) {

    .who-we-are-hero {
      min-height: calc(100vh - 72px);
    }

    .who-we-are-hero__pin {
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }


    .who-we-are-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      height: 100vh;

      background: radial-gradient(
        70% 100% at 50% 50%,
        rgba(255, 192, 137, 0.60) 10.92%,
        rgba(255, 192, 137, 0.40) 31.75%,
        rgba(255, 192, 137, 0.20) 57.04%,
        rgba(255, 192, 137, 0.00) 80%
      );

      -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 65%,
        rgba(0,0,0,0) 100%
      );

      mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 65%,
        rgba(0,0,0,0) 100%
      );

      pointer-events: none;
      z-index: 0;
    }

    .who-we-are-hero__row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 100%;
      pointer-events: none;
    }

    .who-we-are-hero__video {
      overflow: hidden;
      margin: 40px 0;
      min-width: 226px;
      min-height: 118px;
      flex: 0 0 auto;
    }

    .who-we-are-hero__video video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .who-we-are-hero__title-mobile,
    .who-we-are-hero__text-mobile,
    .who-we-are-hero__video--mobile {
      display: none;
    }
  }

  /* ===== MOBILE ===== */

  @media (max-width: 1024px) {

    .who-we-are-hero {
      padding: 80px 20px 60px;
    }

    .who-we-are-hero__pin {
      height: auto;
      display: block;
      text-align: center;
    }

    .who-we-are-hero__text,
    .who-we-are-hero__row {
      display: none;
    }

    .who-we-are-hero__title-mobile {
      font-size: 42px;
      margin-bottom: 24px;
    }

    .who-we-are-hero__video {
      width: 100%;
      height: auto;
      margin: 0;
    }

    .who-we-are-hero__video video {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
    }
  }

  /* ============================================================
    WHO WE ARE — STEPS SECTION (TEXT + IMAGE SCROLL STORY)
    ============================================================ */

  /* ===== BASE ===== */

  .who-we-are-steps {
    position: relative;
    padding-top: 72px; /* offset for fixed header */
  }

  .who-we-are-steps__pin {
    height: calc(100vh - 72px);
    display: flex;
  }

  /* Split layout 50 / 50 */
  .who-we-are-steps__left,
  .who-we-are-steps__right {
    width: 50%;
    position: relative;
  }

    .who-we-are-steps .step h3 {
      color: #141635;
      font-family: "PP Editorial New";
    }

    .who-we-are-steps .step p {
      color: #141635;
      font-family: "Inter Display";
    }

  /* ============================================================
    DESKTOP LAYOUT (ANIMATED)
    ============================================================ */

  @media (min-width: 1025px) {

    /* Hide mobile images */
    .step__image {
      display: none;
    }

    /* ===== LEFT SIDE — TEXT ===== */

    .who-we-are-steps .step h3 {
      font-size: 46px;
    }

    .who-we-are-steps .step p {
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 130%;
      letter-spacing: -0.18px;
    }

    .who-we-are-steps__left {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .who-we-are-steps__texts {
      position: relative;
      height: 320px;
      overflow: hidden;
      width: 100%;
      max-width: 540px;
    }

    .who-we-are-steps .step {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

    /* ===== RIGHT SIDE — IMAGES ===== */

    .who-we-are-steps__right {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .who-we-are-steps__images {
      position: relative;
      width: 70%;
      aspect-ratio: 3 / 4;
    }

    .who-we-are-steps .image {
      position: absolute;
      inset: 0;
      transform: scale(0);
      will-change: transform;
    }

    .who-we-are-steps .image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  /* ============================================================
    MOBILE & TABLET (STACKED, NO ANIMATIONS)
    ============================================================ */

  @media (max-width: 1024px) {

    /* Hide desktop image stack */
    .who-we-are-steps__right {
      display: none;
    }

    .who-we-are-steps {
      padding: 80px 20px;
    }

    .who-we-are-steps__pin {
      height: auto;
      display: block;
    }

    /* Stack columns */
    .who-we-are-steps__left {
      width: 100%;
    }

    /* TEXT — normal document flow */
    .who-we-are-steps__texts {
      position: static;
      height: auto;
      overflow: visible;
      max-width: none;
    }

    .who-we-are-steps .step {
      position: static;
      margin-bottom: 48px;
    }

    .who-we-are-steps .step h3 {
      font-size: 28px;
      margin-bottom: 12px;
    }

    .who-we-are-steps .step p {
      font-size: 16px;
      line-height: 1.4;
      margin-bottom: 24px;
    }

    /* MOBILE IMAGE INSIDE STEP */
    .step__image {
      margin-top: 24px;
      width: 100%;
    }

    .step__image img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }
  }