/* =========================================================
     MISSION — Stacked Story Cards
  ========================================================== */
  #mission {
    --mission-bg: #f4efe6;

    --mission-card-1: #eee7de; /* sun mosaic: warm shell + pale sky */
    --mission-card-2: #dfe9f2; /* handshake: light sky blue */
    --mission-card-3: #efe4d8; /* Amicus mark: parchment / clay */
    --mission-card-4: #e8ece7; /* birds: pale stone + soft sage */
    --mission-card-5: #e3e8eb; /* mountain: cool alpine mist */

    --mission-ink: #2d2f30;
    --mission-ink-soft: rgba(45, 47, 48, 0.74);
    --mission-border: rgba(45, 47, 48, 0.06);
    --mission-accent: #df8668;

    --mission-card-height: clamp(32rem, 44vw, 40rem);
    --mission-card-margin: clamp(2rem, 4vw, 3.5rem);
    --mission-card-top-offset: 1.25rem;
    --mission-sticky-top: 18vh;

    position: relative;
    background: linear-gradient(180deg, #f8f3ec 0%, var(--mission-bg) 100%);
    padding: clamp(4rem, 8vw, 7rem) 0;
    overflow: visible;
  }

  #mission .mission-shell {
    width: min(1100px, calc(100% - 2rem));
    margin: 0 auto;
  }

  /* =========================================================
     SECTION INTRO
  ========================================================== */
  #mission .mission-intro {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
  }

  #mission .mission-kicker {
    margin: 0 0 0.65rem;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(44, 44, 44, 0.58);
  }

  #mission .mission-intro h2 {
    margin: 0;
    font-family: "Gloock", serif;
    font-size: clamp(2.2rem, 4vw, 4.25rem);
    line-height: 0.98;
    letter-spacing: 0.01em;
    color: var(--mission-ink);
  }

  /* =========================================================
     STACKED CARDS
  ========================================================== */
  #mission .mission-cards {
    list-style: none;
    margin: 0;
    padding: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, var(--mission-card-height));
    gap: var(--mission-card-margin);
  }

  #mission .mission-card {
    position: sticky;
    top: var(--mission-sticky-top);
    height: var(--mission-card-height);
    padding-top: calc(var(--card-index) * var(--mission-card-top-offset));
    perspective: 1000px;
  }

  #mission .mission-card__content {
    width: 100%;
    height: 100%;
    border: 1px solid var(--mission-border);
    border-radius: 32px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(280px, 34%) 1fr;
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
    will-change: transform, filter;
    animation: mission-scale-card linear forwards;
    animation-timeline: view();
    animation-range: exit-crossing 0% exit-crossing 100%;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.1);
  }

  #mission .mission-card--1 { --card-index: 1; }
  #mission .mission-card--2 { --card-index: 2; }
  #mission .mission-card--3 { --card-index: 3; }
  #mission .mission-card--4 { --card-index: 4; }
  #mission .mission-card--5 { --card-index: 5; }

  #mission .mission-card--1 .mission-card__content {
    background: var(--mission-card-1);
    --mission-shadow: rgba(226, 125, 96, 0.24);
  }

  #mission .mission-card--2 .mission-card__content {
    background: var(--mission-card-2);
    --mission-shadow: rgba(84, 103, 118, 0.24);
  }

  #mission .mission-card--3 .mission-card__content {
    background: var(--mission-card-3);
    --mission-shadow: rgba(126, 106, 88, 0.22);
  }

  #mission .mission-card--4 .mission-card__content {
    background: var(--mission-card-4);
    --mission-shadow: rgba(55, 67, 78, 0.22);
  }

  #mission .mission-card--5 .mission-card__content {
    background: var(--mission-card-5);
    --mission-shadow: rgba(120, 84, 58, 0.22);
  }

  @keyframes mission-scale-card {
    to {
      transform: scale(0.88) translateY(-3vh) rotateX(-14deg);
      filter: brightness(0.96);
      border-radius: 22px;
      box-shadow: 0 40px 70px -14px var(--mission-shadow);
    }
  }

  /* =========================================================
     CARD MEDIA
  ========================================================== */
  #mission .mission-card__media {
    position: relative;
    min-height: 100%;
    overflow: hidden;
  }

  #mission .mission-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* =========================================================
     CARD TEXT
  ========================================================== */
  #mission .mission-card__text {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.35rem, 3.6vw, 3.6rem) clamp(2.5rem, 4vw, 4.2rem);
    color: var(--mission-ink);
  }

  #mission .mission-card__text h3 {
    margin: 0 0 1.2rem;
    max-width: 16ch;
    font-family: "Gloock", serif;
    font-size: clamp(2.2rem, 2.4vw + 1rem, 3.6rem);
    line-height: 0.98;
    letter-spacing: 0.01em;
    color: var(--mission-ink);
  }

  #mission .mission-card__text p {
    margin: 0;
    max-width: 38ch;
    font-size: clamp(1.18rem, 0.7vw + 1rem, 1.5rem);
    line-height: 1.8;
    color: var(--mission-ink-soft);
    text-wrap: pretty;
  }

  #mission .mission-brand {
    font-family: "Gloock", serif;
    font-weight: 700;
    color: rgba(45, 47, 48, 0.92);
    letter-spacing: 0.01em;
  }

  /* =========================================================
     CLOSING CTA
  ========================================================== */
  #mission .mission-outro {
    max-width: 920px;
    margin: clamp(0.75rem, 2vw, 1.5rem) auto 0;
    padding: clamp(1.8rem, 2.8vw, 2.6rem);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(45, 42, 40, 0.07);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.07);
  }

  #mission .mission-outro-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }

  #mission .mission-outro p {
    max-width: 50ch;
    margin: 0 auto 1.35rem;
    font-size: clamp(1.42rem, 0.9vw + 1.1rem, 1.9rem);
    line-height: 1.52;
    letter-spacing: -0.015em;
    color: var(--mission-ink-soft);
    text-align: center;
    text-wrap: balance;
  }

  #mission .mission-actions {
    display: flex;
    justify-content: center;
  }

  #mission .mission-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 56px;
    padding: 0.95rem 1.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--mission-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(223, 134, 104, 0.24);
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  }

  #mission .mission-actions .btn:hover {
    transform: translateY(-1px);
    background: #d9785d;
    box-shadow: 0 14px 24px rgba(223, 134, 104, 0.28);
  }

  #mission .mission-actions .btn i {
    font-size: 0.95em;
    line-height: 1;
  }

  /* =========================================================
     REDUCED MOTION
  ========================================================== */
  @media (prefers-reduced-motion: reduce) {
    #mission .mission-card__content {
      animation: none;
      transform: none;
    }
  }

  /* =========================================================
     MOBILE / TABLET
  ========================================================== */
  @media (max-width: 991.98px) {
    #mission {
      --mission-card-height: auto;
      --mission-sticky-top: 1rem;
    }

    #mission .mission-cards {
      grid-template-rows: none;
      gap: 1.25rem;
      padding-bottom: 1rem;
    }

    #mission .mission-card {
      position: relative;
      top: auto;
      height: auto;
      padding-top: 0;
      perspective: none;
    }

    #mission .mission-card__content {
      grid-template-columns: 1fr;
      min-height: auto;
      animation: none;
      transform: none;
      border-radius: 22px;
    }

    #mission .mission-card__media {
      min-height: 220px;
    }

    #mission .mission-card__text {
      padding: 1.35rem 1.15rem 1.4rem;
    }

    #mission .mission-card__text h3 {
      max-width: none;
      font-size: clamp(1.6rem, 4vw, 2.1rem);
    }

    #mission .mission-card__text p {
      max-width: none;
      font-size: 1.05rem;
      line-height: 1.65;
    }

    #mission .mission-outro {
      padding: 1.2rem 1rem 1.1rem;
      border-radius: 18px;
    }

    #mission .mission-outro-inner {
      max-width: none;
    }

    #mission .mission-outro p {
      max-width: none;
      font-size: 1.08rem;
      line-height: 1.55;
    }
  }

  @media (max-width: 767.98px) {
    #mission .mission-actions {
      flex-direction: column;
      align-items: stretch;
    }

    #mission .mission-actions .btn {
      width: 100%;
      justify-content: center;
    }
  }