/* ==========================================================================
   Sustainability — split hero, aside/story layout and the impact section.
   ========================================================================== */

@layer pages {

  /* --- Page type scale ----------------------------------------------------
     This page tracks section headings at -.015em (the site default is -.018em)
     and runs taller section padding. Values are the original design's. Each
     heading is targeted by its own class — a blanket `h1,h2,h3` rule here
     would outrank every component heading it passes over.

     The eyebrow used to be tightened here too (.2em tracking, 11px gap, a
     26px dash instead of 30px). That override is gone: all nine eyebrows on
     this page now take the shared 11.5px / .22em / 13px / 30px so they match
     the rest of the site.
     ------------------------------------------------------------------------ */
  .story-head,
  .memb-head .display-3,
  .cta-band__title {
    letter-spacing: -.015em;
  }

  /* These two are display headings without a .display-* class. The hero title
     is deliberately in neither group — its spacing follows the home page
     instead; see .sus-hero__title below. */
  .story-head,
  .cta-band__title {
    line-height: var(--leading-tight);
  }

  /* 22px under the eyebrow, matching the home page. Only these four blocks
     needed it — every other eyebrow on this page is followed by something
     that already sets its own margin. Deliberately not a blanket
     `.eyebrow + *`: elsewhere on the site the spacing comes from a flex gap
     on the parent, and a margin here would stack on top of it. */
  .eyebrow + .principles,
  .eyebrow + .display-3,
  .eyebrow + .grid {
    margin-top: var(--space-5);
  }

  .section--screen { padding-block: clamp(96px, 13vh, 150px); }

  /* --- Split hero --------------------------------------------------------- */
  .sus-hero {
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    align-items: stretch;
    min-height: 92vh;
  }

  .sus-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(64px, 11vh, 120px) clamp(40px, 6vw, 104px);
    padding-left: 12.5vw;
  }

  /* Spacing tracks the home page — .display-hero's 1.02 / -.03em, over the
     22px eyebrow gap already set here. Only the size stays local. */
  .sus-hero__title {
    max-width: 14ch;
    margin-top: var(--space-5);
    font-size: clamp(44px, 5.2vw, 72px);
    line-height: 1.02;
    letter-spacing: -.03em;
  }

  .sus-hero__lede {
    max-width: 520px;
    margin-top: 26px;
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.78;
    color: var(--text-muted);
  }

  .sus-hero__cta {
    align-self: flex-start;
    margin-top: 42px;
  }

  .sus-hero__media {
    position: relative;
    overflow: hidden;
  }

  .sus-hero__wash {
    background: linear-gradient(90deg, var(--surface-black) 0%, rgba(0, 0, 0, .45) 22%, rgba(0, 0, 0, 0) 55%);
  }

  /* Only shown once the hero stacks and the copy sits over the photo. */
  .sus-hero__scrim-mobile {
    display: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .72));
  }

  /* --- Story layout ------------------------------------------------------- */
  .story-head {
    margin-top: 20px;
    font-size: clamp(30px, 3.3vw, 44px);
  }

  .story-lede {
    max-width: 380px;
    margin-top: var(--space-5);
    font-size: 16px;
    line-height: 1.74;
    color: var(--text-muted);
  }

  /* --- Impact / SDGs ------------------------------------------------------ */
  .impact__title {
    max-width: 13ch;
    margin-top: var(--space-5);
    font-family: var(--font-display);
    font-size: clamp(34px, 3.6vw, 54px);
    font-weight: var(--weight-bold);
    line-height: 1.08;
    letter-spacing: -.018em;
  }

  .impact__lede {
    max-width: 460px;
    margin-top: 26px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-muted);
  }

  /* --- Diversity & inclusion ---------------------------------------------- */
  .di-image {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 540px;
    height: 100%;
    overflow: hidden;
  }

  .di-image__wash {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 80%, var(--surface-black) 100%),
      linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 34%);
  }

  .di-image__caption {
    position: relative;
    margin: var(--space-5);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-primary);
    opacity: .85;
  }

  /* --- Closing CTA band --------------------------------------------------- */
  .cta-band {
    position: relative;
    padding-block: var(--space-10);
    overflow: hidden;
    color: var(--surface-black);
    background: var(--cx-green);
  }

  .cta-band__glyph {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
  }

  .cta-band__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-7);
  }

  .cta-band__copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-7);
  }

  .cta-band__title { font-size: clamp(28px, 2.8vw, 40px); }

  .cta-band__note {
    max-width: 320px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(0, 0, 0, .72);
  }

  /* --- Responsive --------------------------------------------------------- */
  @media (max-width: 1080px) {
    .sus-hero {
      position: relative;
      grid-template-columns: 1fr;
      min-height: 74vh;
    }

    .sus-hero__media {
      position: absolute;
      inset: 0;
      z-index: 0;
      order: -1;
      height: 100%;
    }

    .sus-hero__copy {
      position: relative;
      z-index: 2;
      padding-inline: clamp(28px, 7vw, 64px);
    }

    .sus-hero__scrim-mobile { display: block; }
  }

  /* People & culture image. css/layout/grid.css collapses the .split at this
     width, so rather than sit beside the copy it becomes a 540px-tall band
     shoved above it. It is decorative — the section reads fine without it. */
  @media (max-width: 1020px) {
    .di-image { display: none; }
  }

  @media (max-width: 680px) {
    .cta-band__inner {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}