/* ZiFPIM client feedback — v1. Navigation, privacy and footer only.
   Intentionally separate from the locked homepage morph and Our Story CSS. */

/* A single hierarchy on every public page, including dark/blue pages. */
body .editorial-header,
body.internal .editorial-header,
body.internal.page-blue .editorial-header:not(.is-scrolled),
body.internal.page-dark .editorial-header:not(.is-scrolled),
body.home-page .editorial-header {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) minmax(122px, 162px) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: clamp(14px, 2.5vw, 42px) !important;
  height: 86px !important;
  min-height: 86px !important;
  padding: 0 max(3.2vw, calc((100vw - 1480px)/2)) !important;
  color: #262525 !important;
  background: #f7f6f2 !important;
  border-bottom: 1px solid rgba(38,37,37,.11) !important;
}
body .editorial-header.is-scrolled,
body.internal .editorial-header.is-scrolled,
body.home-page .editorial-header.is-scrolled {
  height: 70px !important;
  min-height: 70px !important;
  grid-template-columns: 52px minmax(0, 1fr) minmax(122px, 162px) !important;
}
body .editorial-header::before { display:none !important; }

body .editorial-header .editorial-menu-button,
body.internal .editorial-header .editorial-menu-button {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  background: #3558a7 !important;
  color: #fff !important;
  border: 1px solid #3558a7 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .2s ease !important;
}
body .editorial-menu-button:hover,
body .editorial-menu-button:focus-visible { background: #262525 !important; border-color: #262525 !important; }
body .editorial-menu-button .menu-bars {
  display: flex !important;
  width: 22px !important;
  height: 16px !important;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
body .editorial-menu-button .menu-bars i,
body .editorial-menu-button:hover .menu-bars i {
  display: block !important;
  height: 2px !important;
  width: 22px !important;
  opacity: 1 !important;
  transform: none !important;
  background: #fff !important;
  border-radius: 2px !important;
}
body .editorial-menu-button::before,
body .editorial-menu-button::after { display: none !important; }

body .editorial-header .editorial-nav,
body.internal .editorial-header .editorial-nav,
body.internal .editorial-header.is-scrolled .editorial-nav,
body.home-page .editorial-header .editorial-nav {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: clamp(14px, 3.1vw, 51px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}
body .editorial-nav > a,
body .editorial-nav__about-toggle {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  min-height: 44px;
  margin: 0 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #262525 !important;
  font-family: Manrope, sans-serif !important;
  font-size: clamp(10px, .89vw, 12.5px) !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: .025em;
  white-space: nowrap !important;
  cursor: pointer;
}
body .editorial-nav > a > span,
body .editorial-nav__about-toggle > span { color: inherit !important; }
body .editorial-nav > a.is-current-page,
body .editorial-nav > a[aria-current="page"],
body .editorial-nav__about-toggle.is-current-page,
body .editorial-nav > a:hover,
body .editorial-nav__about-toggle:hover { color: #bd880d !important; }
/* Client navigation wording: show the existing literal + beside ABOUT. */
body .editorial-nav__plus {
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 9px;
  margin-top: 0;
  border: 0;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1 !important;
  transform: none;
  transition: color .18s ease;
}
body .editorial-nav__about-toggle[aria-expanded="true"] .editorial-nav__plus { transform: none; }
body .editorial-nav__about { position: relative; display: flex; align-items: center; }
body .editorial-nav__about-dropdown[hidden] { display: none !important; }
body .editorial-nav__about-dropdown {
  position: absolute;
  top: calc(100% + 7px);
  left: -18px;
  z-index: 750;
  width: min(305px, calc(100vw - 28px));
  max-height: min(62vh, 420px);
  overflow-y: auto;
  padding: 10px;
  background: #f7f6f2;
  border: 1px solid rgba(38,37,37,.12);
  box-shadow: 0 16px 36px rgba(38,37,37,.13);
}
body .editorial-nav__about-dropdown a {
  display: block;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  color: #262525 !important;
  white-space: normal;
}
body .editorial-nav__about-dropdown a:hover,
body .editorial-nav__about-dropdown a:focus-visible { background: rgba(53,88,167,.08); color: #3558a7 !important; }
body .editorial-nav__about-dropdown a::after { display: none !important; }
body .editorial-nav__about-dropdown a > span { white-space: normal !important; }

body .editorial-header .editorial-brand,
body.internal .editorial-header .editorial-brand,
body.home-page .editorial-header .editorial-brand {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  position: relative !important;
  width: 154px !important;
  min-width: 0 !important;
  height: 46px !important;
  overflow: visible !important;
}
body .editorial-brand img { left: auto !important; right: 0 !important; object-position: right center !important; }
body .editorial-header .editorial-brand__full,
body.internal .editorial-header .editorial-brand__full,
body.home-page .editorial-header .editorial-brand__full,
body.internal.page-blue .editorial-header:not(.is-scrolled) .editorial-brand__full--colour,
body.internal.page-dark .editorial-header:not(.is-scrolled) .editorial-brand__full--colour {
  display: block !important;
  width: 154px !important;
  height: 46px !important;
  opacity: 1 !important;
  transform: translateY(-50%) !important;
}
body .editorial-header .editorial-brand__icon,
body.internal .editorial-header .editorial-brand__icon,
body.home-page .editorial-header .editorial-brand__icon,
body .editorial-header .editorial-brand__full--white,
body.internal.page-blue .editorial-header:not(.is-scrolled) .editorial-brand__full--white,
body.internal.page-dark .editorial-header:not(.is-scrolled) .editorial-brand__full--white { display: none !important; }
body .editorial-header__actions { display: none !important; }

/* The search control belongs to full navigation (including on desktop). */
body .mega-menu-search-trigger {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 42px !important;
  gap: 15px !important;
  width: 100%;
  min-height: 72px;
  align-items: center;
  padding: 0 8px !important;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  background: transparent;
  color: white;
  font-family: Manrope, sans-serif;
  text-align: left;
  cursor: pointer;
}
body .mega-menu-search-trigger > span { display: none !important; }
body .mega-menu-search-trigger strong { font-size: clamp(23px, 3.1vw, 40px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
body .mega-menu-search-trigger em { justify-self: end; width: 23px; height: 23px; background: var(--gold); }

/* Contact details sit beneath Legal, preserving live contact + social CMS wiring. */
body .footer-column--legal-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
body .footer-column--legal-contact .footer-column__legal-label,
body .footer-column--legal-contact .footer-column__contact-label {
  display: block;
  margin: 0 0 6px;
  color: rgba(255,255,255,.56);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
body .footer-column--legal-contact .footer-column__contact-label { margin-top: 23px; }
body .footer-column--legal-contact .footer-social-links { margin-top: 16px; }
body .site-footer { column-gap: clamp(25px, 5vw, 80px); row-gap: 42px; }

/* Internal pages: editorial breathing room without touching locked morph stages. */
body.internal:not(.page-story) .page-hero { padding-top: clamp(56px, 7vw, 85px); padding-bottom: clamp(60px, 7vw, 94px); }
body.internal:not(.page-story) .page-hero__grid { margin-top: clamp(18px, 2.2vw, 28px); }

/* Privacy: a deliberate, accessible legal document rather than a generic article. */
body.internal .privacy-page { background: #f7f6f2; min-height: 70vh; }
body.internal .privacy-page .page-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 18px 36px;
  max-width: 1200px;
  padding-top: clamp(65px, 8vw, 115px);
  padding-bottom: clamp(36px, 5vw, 62px);
  margin-bottom: clamp(28px, 4vw, 62px);
  border-bottom: 1px solid rgba(38,37,37,.13);
}
body.internal .privacy-page .page-hero__eyebrow { grid-column: 1 / -1; color: #3558a7; font-size: 11px; letter-spacing: .18em; }
body.internal .privacy-page .page-title {
  grid-column: 1;
  font-size: clamp(3.2rem, 6.2vw, 7rem);
  line-height: 1.01;
  letter-spacing: -.07em;
  max-width: none;
}
body.internal .privacy-page .page-hero__side { grid-column: 2; padding-bottom: 7px; font-size: 12px; white-space: nowrap; }
body.internal .privacy-copy {
  width: min(85vw, 790px);
  max-width: 790px;
  margin: 0 auto clamp(80px, 9vw, 150px);
  padding: 0;
  color: #262525;
}
body.internal .privacy-copy > p:first-child {
  max-width: 750px;
  margin-bottom: 40px;
  font-size: clamp(1.12rem, 1.8vw, 1.42rem);
  line-height: 1.7;
  font-weight: 550;
  color: #33332f;
}
body.internal .privacy-copy h2 {
  margin: 0 0 12px;
  padding-top: 34px;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.23;
  letter-spacing: -.045em;
  font-weight: 750;
  color: #262525;
}
body.internal .privacy-copy p { margin-top: 0; margin-bottom: 18px; font-size: 15px; line-height: 1.85; color: #515251; }
body.internal .privacy-copy a { color: #3558a7; text-decoration: underline; text-underline-offset: 3px; }

/* Mobile + tablet: the same priority navigation as desktop, arranged in two
   deliberate rows rather than hiding links or shrinking them to unreadable text.
   This block only touches the shared header and its existing opening offsets. */
@media (max-width: 900px) {
  body .editorial-header,
  body.internal .editorial-header,
  body.internal.page-blue .editorial-header:not(.is-scrolled),
  body.internal.page-dark .editorial-header:not(.is-scrolled),
  body.home-page .editorial-header,
  body .editorial-header.is-scrolled,
  body.internal .editorial-header.is-scrolled,
  body.home-page .editorial-header.is-scrolled {
    height: 124px !important;
    min-height: 124px !important;
    grid-template-columns: 48px minmax(0, 1fr) 155px !important;
    grid-template-rows: 64px 60px !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
    padding: 0 clamp(14px, 4vw, 25px) !important;
  }

  /* Row 1 — square menu on the left, full organisation logo on the right. */
  body .editorial-header .editorial-menu-button,
  body.internal .editorial-header .editorial-menu-button,
  body.home-page .editorial-header .editorial-menu-button {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  body .editorial-header .editorial-brand,
  body.internal .editorial-header .editorial-brand,
  body.home-page .editorial-header .editorial-brand {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 154px !important;
    min-width: 0 !important;
    height: 46px !important;
    overflow: visible !important;
  }
  body .editorial-header .editorial-brand__full--colour,
  body.internal .editorial-header .editorial-brand__full--colour,
  body.home-page .editorial-header .editorial-brand__full--colour,
  body.internal.page-blue .editorial-header:not(.is-scrolled) .editorial-brand__full--colour,
  body.internal.page-dark .editorial-header:not(.is-scrolled) .editorial-brand__full--colour {
    display: block !important;
    opacity: 1 !important;
    width: 154px !important;
    height: 46px !important;
    transform: translateY(-50%) !important;
  }
  body .editorial-header .editorial-brand__icon,
  body.internal .editorial-header .editorial-brand__icon,
  body.home-page .editorial-header .editorial-brand__icon {
    display: none !important;
    opacity: 0 !important;
  }

  /* Row 2 — the same three priority links, each with a reliable tap target. */
  body .editorial-header .editorial-nav,
  body.internal .editorial-header .editorial-nav,
  body.home-page .editorial-header .editorial-nav,
  body.internal .editorial-header.is-scrolled .editorial-nav,
  body.home-page .editorial-header.is-scrolled .editorial-nav {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: .86fr 1.23fr 1.08fr !important;
    align-items: stretch !important;
    align-self: stretch !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
    gap: clamp(5px, 1.8vw, 18px) !important;
    width: 100% !important;
    max-width: 100% !important;
    border-top: 1px solid rgba(38,37,37,.11) !important;
  }
  body .editorial-nav__about {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
  body .editorial-nav > a,
  body .editorial-nav__about-toggle {
    width: 100%;
    min-width: 0;
    min-height: 54px !important;
    padding: 6px 1px !important;
    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    text-align: center !important;
    overflow-wrap: normal;
  }
  /* Legacy matrix-hover CSS makes label spans max-content / nowrap.
     Remove that minimum on small screens so the words wrap cleanly. */
  body .editorial-nav > a > span,
  body .editorial-nav__about-toggle > span:first-child {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-wrap: balance;
  }
  body .editorial-nav__about-toggle { gap: 0; }
  body .editorial-nav__plus { margin-left: 7px; margin-top: 0; font-size: 14px !important; }
  body .editorial-nav__about-dropdown {
    left: -6px;
    top: calc(100% + 4px);
    text-align: left;
  }
  body.internal .privacy-page .page-hero { padding-top: 70px; }
  body.internal .privacy-page .page-title { font-size: clamp(2.8rem, 9vw, 5.5rem); }
  body.internal .privacy-page .page-hero__side { grid-column: 1; grid-row: 3; }
  body.internal .privacy-copy { width: calc(100% - 44px); }
  body.internal main.page,
  body.internal main.what-page,
  body.internal main.mission-page,
  body.internal main.investment-page,
  body.internal main.resources-page,
  body.internal main.zf-news-index,
  body.internal main.zf-news-article,
  body.internal main.partner-main-v2 { padding-top: 124px !important; }
  body.internal { --zifpim-page-opening-top: 148px; }
}
@media (max-width: 360px) {
  /* Three readable choices even on 320px devices — never ellipses or overlap. */
  body .editorial-header,
  body.internal .editorial-header,
  body.home-page .editorial-header,
  body .editorial-header.is-scrolled,
  body.internal .editorial-header.is-scrolled,
  body.home-page .editorial-header.is-scrolled {
    height: 132px !important;
    min-height: 132px !important;
    grid-template-columns: 46px minmax(0, 1fr) 136px !important;
    grid-template-rows: 64px 68px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body .editorial-header .editorial-brand,
  body.internal .editorial-header .editorial-brand,
  body.home-page .editorial-header .editorial-brand { width: 136px !important; }
  body .editorial-header .editorial-brand__full--colour,
  body.internal .editorial-header .editorial-brand__full--colour,
  body.home-page .editorial-header .editorial-brand__full--colour { width: 136px !important; }
  body .editorial-nav > a,
  body .editorial-nav__about-toggle {
    font-size: 10px !important;
    min-height: 64px !important;
  }
  body.internal main.page,
  body.internal main.what-page,
  body.internal main.mission-page,
  body.internal main.investment-page,
  body.internal main.resources-page,
  body.internal main.zf-news-index,
  body.internal main.zf-news-article,
  body.internal main.partner-main-v2 { padding-top: 132px !important; }
  body.internal { --zifpim-page-opening-top: 156px; }
}
@media (prefers-reduced-motion: reduce) { body .editorial-nav__about-dropdown { transition: none !important; } }

/* Neutralise the older absolute-positioned desktop nav and logo swap. */
@media (min-width: 901px) {
  body .editorial-header .editorial-nav,
  body.internal .editorial-header .editorial-nav,
  body.home-page .editorial-header .editorial-nav {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: 100% !important;
    justify-self: center !important;
  }
}
body.home-page .editorial-header .editorial-brand__full--white,
body.internal .editorial-header .editorial-brand__full--white,
body.internal.page-blue .editorial-header .editorial-brand__full--white,
body.internal.page-dark .editorial-header .editorial-brand__full--white { display: none !important; opacity: 0 !important; }
body .editorial-header .editorial-menu-button,
body.internal .editorial-header .editorial-menu-button,
body.home-page .editorial-header .editorial-menu-button {
  left: 0 !important;
  bottom: auto !important;
  justify-self: start !important;
}

/* Mobile viewport stabilisation — 2026-10-08.
   The homepage has large animated/decorative layers that deliberately extend
   beyond their chapters. Keep these INSIDE the visual clipping boundary so
   horizontal rubber-banding cannot move the reading column off-centre.
   Do not touch the horizontal-story desktop journey or the desktop morph. */
@media (max-width: 900px) {
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
    overscroll-behavior-x: none;
  }

  body.home-page,
  body.internal {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip !important;
    overscroll-behavior-x: none;
  }

  body.home-page main,
  body.internal main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.home-page .signature-hero,
  body.home-page .section--about,
  body.home-page .section--work,
  body.home-page .section--investment,
  body.home-page .section--resource,
  body.home-page .section--news,
  body.home-page .partner-section {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  /* Outsize backdrops and ticker rails are decoration, not page width. */
  body.home-page .about-motion,
  body.home-page .partner-backdrop,
  body.home-page .resource-backdrop,
  body.home-page .news-backdrop {
    max-width: 100%;
    overflow-x: clip;
    pointer-events: none;
  }

  /* The navigation and editorial columns must remain within the visible page. */
  body .editorial-header,
  body .editorial-header .editorial-nav {
    max-width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   MOBILE FULL-CHAPTER MORPH — EXACT DESKTOP STAGES & ENDPOINTS
   The desktop's real content stage shrinks to a 14px gold tick.
   On phones, natural reading is preserved before the chapter exit runway.
   This style applies ONLY below the original desktop 861px breakpoint.
   ============================================================ */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  /* The completed ticks live in a reserved, opaque 48px strip immediately
     beneath the mobile navigation. The body content can scroll behind this
     header extension, but cannot be seen or touched underneath the ticks. */
  body.home-page.has-mobile-full-morph .home-mobile-morph-allowance {
    position: fixed;
    display: block;
    top: 124px; /* Runtime reads the real header bottom (132px at 320px). */
    left: 0;
    right: 0;
    width: 100%;
    height: 48px;
    z-index: 270;
    background: #f7f6f2;
    border-bottom: 1px solid rgba(38,37,37,.07);
    pointer-events: none;
  }
  /* The mobile hero behaves like the other chapters: the photographic
     page surface stays in the scene; only its words/content transform.
     Never scale a photograph, colour block or dark overlay into a tick. */
  body.home-page.has-mobile-full-morph .signature-hero__mobile-backdrop {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: var(--hero-mobile-backdrop-height, 100svh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: #202322;
  }
  body.home-page.has-mobile-full-morph .signature-hero__stage,
  body.home-page.has-mobile-full-morph .signature-hero__stage .signature-hero__fullscreen {
    background: transparent !important;
  }
  body.home-page.has-mobile-full-morph .signature-hero__stage .signature-hero__photo,
  body.home-page.has-mobile-full-morph .signature-hero__stage .signature-hero__shade {
    visibility: hidden !important;
  }
  /* No added tick rail or closing lines from earlier mobile experiments. */
  body.home-page .zf-mobile-morph-rail,
  body.home-page .zf-mobile-morph-origin,
  body.home-page .zf-mobile-morph-source { display: none !important; }

  body.home-page.has-mobile-full-morph [data-hero-morph-scene],
  body.home-page.has-mobile-full-morph [data-about-morph-scene],
  body.home-page.has-mobile-full-morph [data-work-morph-scene],
  body.home-page.has-mobile-full-morph [data-memory-morph-scene] {
    position: relative !important;
    height: var(--mobile-morph-scene-height, auto) !important;
    min-height: var(--mobile-morph-scene-height, auto) !important;
    overflow: visible !important;
    /* Original mobile section padding remains part of the readable chapter. */
  }

  body.home-page.has-mobile-full-morph .signature-hero__stage.is-morph-active,
  body.home-page.has-mobile-full-morph .about-morph-stage.is-morph-active,
  body.home-page.has-mobile-full-morph .work-morph-stage.is-morph-active,
  body.home-page.has-mobile-full-morph .memory-morph-stage.is-morph-active {
    display: block !important;
    position: fixed !important;
    left: var(--mobile-morph-source-left, 0px) !important;
    top: var(--mobile-morph-base-top, 0px) !important;
    width: var(--mobile-morph-source-width, 100%) !important;
    height: var(--mobile-morph-source-height, auto) !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    /* JS writes the composited transform directly, avoiding a CSS variable
       cascade through every child of this complex chapter on each frame. */
    transform: none !important;
    transform-origin: top left !important;
    will-change: transform !important;
    overflow: hidden !important;
    backface-visibility: hidden;
    z-index: 275 !important; /* moves visibly into the strip, below the header */
    pointer-events: none;
  }

  /* Desktop-grade compositor isolation while the chapter itself moves:
     decorative loops never compete with the single scroll-linked transform. */
  body.home-page.has-mobile-full-morph .is-morph-moving *,
  body.home-page.has-mobile-full-morph .is-morph-moving *::before,
  body.home-page.has-mobile-full-morph .is-morph-moving *::after {
    animation-play-state: paused !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    will-change: auto !important;
  }

  body.home-page.has-mobile-full-morph .signature-hero__stage.is-dot-face,
  body.home-page.has-mobile-full-morph .about-morph-stage.is-dot-face,
  body.home-page.has-mobile-full-morph .work-morph-stage.is-dot-face,
  body.home-page.has-mobile-full-morph .memory-morph-stage.is-dot-face {
    overflow: visible !important;
    isolation: auto !important;
    background: transparent !important;
  }
  body.home-page.has-mobile-full-morph .is-dot-face > * { visibility: hidden !important; }
  body.home-page.has-mobile-full-morph .signature-hero__stage.is-dot-face::after,
  body.home-page.has-mobile-full-morph .about-morph-stage.is-dot-face::after,
  body.home-page.has-mobile-full-morph .work-morph-stage.is-dot-face::after,
  body.home-page.has-mobile-full-morph .memory-morph-stage.is-dot-face::after {
    content: '' !important;
    position: absolute !important;
    display: block !important;
    inset: 0 auto auto 0 !important;
    width: var(--mobile-morph-source-width, 100%) !important;
    height: var(--mobile-morph-source-width, 100%) !important;
    background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.7 12.6 9.3 17 19.4 6.8' fill='none' stroke='%23E2A814' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    visibility: visible !important;
    border-radius: 0 !important;
    pointer-events: none;
  }

  /* The footer is also the final chapter's runway, as it is on desktop.
     Without this there is not enough scroll distance on some tablets for
     Partner With Us to reach the seventh tick. */
  body.home-page.has-mobile-full-morph .site-footer.final-morph-runway {
    min-height: 100dvh !important;
  }

  /* Identical 14px parked endpoint marker as desktop, mobile coordinates. */
  body.home-page .home-morph-endpoint-mark {
    position: fixed;
    z-index: 285; /* completed endpoints stay above the moving chapter */
    display: none;
    width: 14px;
    height: 14px;
    background: center / 92% 92% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.7 12.6 9.3 17 19.4 6.8' fill='none' stroke='%23E2A814' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    pointer-events: none;
    contain: strict;
  }
  body.home-page .home-morph-endpoint-mark.is-visible { display: block; }
  body.home-page.has-mobile-full-morph .signature-hero__stage.is-morph-parked,
  body.home-page.has-mobile-full-morph .about-morph-stage.is-morph-parked,
  body.home-page.has-mobile-full-morph .work-morph-stage.is-morph-parked,
  body.home-page.has-mobile-full-morph .memory-morph-stage.is-morph-parked {
    display: none !important;
    will-change: auto !important;
  }
}

/* Hide the dedicated mobile endpoint strip outside the mobile morph state.
   Kept separate from desktop code paths and reduced-motion accessibility. */
body.home-page .home-mobile-morph-allowance { display: none; }
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  body.home-page.has-mobile-full-morph .home-mobile-morph-allowance { display: block; }
}

/* Desktop and reduced-motion continue rendering the original single-stage
   hero. The extra background layer exists only for the mobile morph. */
body.home-page .signature-hero__mobile-backdrop { display: none; }

/* ZiFPIM About — editorial flyout v2. One consistent design across devices.
   This block only affects the About dropdown, not the header or homepage stages. */
body .editorial-nav__about-toggle:focus-visible {
  outline: 2px solid #3558a7 !important;
  outline-offset: 4px;
}
body .editorial-nav__about.is-about-open .editorial-nav__about-toggle {
  color: #bd880d !important;
}
body .editorial-nav__about-dropdown {
  --about-gold: #e2a814;
  left: -22px;
  top: calc(100% + 12px);
  width: min(590px, calc(100vw - 40px));
  max-height: min(76vh, 510px);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, .81fr) minmax(0, 1.19fr);
  overflow: hidden;
  background: #f7f6f2;
  border: 1px solid rgba(38,37,37,.12);
  border-top: 3px solid var(--about-gold);
  border-radius: 1px 1px 5px 5px;
  box-shadow: 0 28px 66px rgba(20,25,35,.20), 0 3px 13px rgba(20,25,35,.08);
  transform-origin: 36px 0;
  isolation: isolate;
}
body .editorial-nav__about-dropdown.is-opening {
  animation: zifpim-about-in .25s cubic-bezier(.2,.84,.24,1) both;
}
body .editorial-nav__about-dropdown.is-closing {
  animation: zifpim-about-out .16s ease-in both;
  pointer-events: none;
}
@keyframes zifpim-about-in {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes zifpim-about-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-5px) scale(.99); }
}
body .about-flyout__story {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 31px 28px 25px;
  background: #262525;
  color: #f7f6f2;
  overflow: hidden;
}
body .about-flyout__story::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(226,168,20,.17);
  border-radius: 50%;
  bottom: -109px;
  right: -61px;
  pointer-events: none;
}
body .about-flyout__eyebrow,
body .about-flyout__heading {
  font-family: Manrope, sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .14em;
}
body .about-flyout__eyebrow { color: var(--about-gold); }
body .about-flyout__statement {
  margin-top: 23px;
  font-family: Manrope, sans-serif;
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 750;
  line-height: 1.17;
  letter-spacing: -.05em;
}
body .about-flyout__statement em { font-style: normal; color: var(--about-gold); }
body .about-flyout__description {
  max-width: 210px;
  margin-top: 20px;
  font-family: Manrope, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
  color: rgba(247,246,242,.72);
}
body .about-flyout__signature {
  margin-top: auto;
  padding-top: 27px;
  font-family: Manrope, sans-serif;
  font-size: 8px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .09em;
  color: rgba(247,246,242,.58);
}
body .about-flyout__panel {
  min-width: 0;
  min-height: 0;
  padding: 20px 19px 21px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(53,88,167,.3) transparent;
}
body .about-flyout__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 11px 13px;
  color: #7b7c7b;
}
body .about-flyout__heading-mark {
  width: 22px;
  height: 2px;
  background: var(--about-gold);
}
body .about-flyout__links { display: grid; gap: 2px; }
body .editorial-nav__about-dropdown .about-flyout__links a {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin: 0;
  padding: 11px 34px 11px 15px !important;
  background: transparent;
  color: #262525 !important;
  border-radius: 2px;
  font-family: Manrope, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35;
  letter-spacing: -.013em;
  text-decoration: none;
  text-align: left;
  transition: padding .2s ease, color .2s ease, background .2s ease;
}
body .editorial-nav__about-dropdown .about-flyout__links a::before {
  content: '';
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 3px;
  background: var(--about-gold);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .23s cubic-bezier(.2,.8,.2,1);
}
body .editorial-nav__about-dropdown .about-flyout__links a::after {
  content: '↗';
  position: absolute;
  right: 12px;
  top: 50%;
  display: block !important;
  font-size: 15px;
  font-weight: 500;
  color: #b5a78c;
  transform: translate(-5px,-50%);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease, color .2s ease;
}
body .editorial-nav__about-dropdown .about-flyout__links a:hover,
body .editorial-nav__about-dropdown .about-flyout__links a:focus-visible,
body .editorial-nav__about-dropdown .about-flyout__links a.is-active {
  padding-left: 19px !important;
  background: #eeece5 !important;
  color: #3558a7 !important;
}
body .editorial-nav__about-dropdown .about-flyout__links a:hover::before,
body .editorial-nav__about-dropdown .about-flyout__links a:focus-visible::before,
body .editorial-nav__about-dropdown .about-flyout__links a.is-active::before { transform: scaleY(1); }
body .editorial-nav__about-dropdown .about-flyout__links a:hover::after,
body .editorial-nav__about-dropdown .about-flyout__links a:focus-visible::after,
body .editorial-nav__about-dropdown .about-flyout__links a.is-active::after {
  transform: translate(0,-50%);
  opacity: 1;
  color: #3558a7;
}
body .editorial-nav__about-dropdown .about-flyout__links a:focus-visible {
  outline: 2px solid #3558a7;
  outline-offset: -3px;
}
@media (max-width: 900px) {
  body .editorial-nav__about-dropdown {
    left: -8px;
    top: calc(100% + 4px);
    width: min(352px, calc(100vw - 28px));
    max-height: min(calc(100dvh - 150px), 470px);
    grid-template-columns: minmax(0,1fr);
  }
  body .about-flyout__story { display: none; }
  body .about-flyout__panel { padding: 16px 15px 18px; }
  body .about-flyout__heading { padding: 5px 12px 12px; }
  body .editorial-nav__about-dropdown .about-flyout__links a {
    min-height: 47px;
    font-size: 13px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
@media (max-width: 360px) {
  body .editorial-nav__about-dropdown { max-height: min(calc(100dvh - 144px), 420px); }
  body .editorial-nav__about-dropdown .about-flyout__links a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body .editorial-nav__about-dropdown.is-opening,
  body .editorial-nav__about-dropdown.is-closing { animation: none !important; }
  body .editorial-nav__about-dropdown .about-flyout__links a,
  body .editorial-nav__about-dropdown .about-flyout__links a::before,
  body .editorial-nav__about-dropdown .about-flyout__links a::after { transition: none !important; }
}

/* Hover and keyboard-focus previews: movement is restricted to the text itself. */
/* Descriptions update in place. Do not fade the panel on pointer movements:
   opacity pulses looked like the dropdown itself was blinking. */
body .about-flyout__story .about-flyout__statement,
body .about-flyout__story .about-flyout__description {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  body .about-flyout__story.is-preview-changing .about-flyout__statement,
  body .about-flyout__story.is-preview-changing .about-flyout__description { animation: none !important; }
}

/* Keep homepage chapter chevrons below the About flyout while it is open.
   Chapter cues are intentionally at z-index: 520 above morph scenes, while the
   fixed header normally sits at 300. Only elevate the header during the
   flyout's opening/closing lifetime so the chapter animation remains locked. */
body .editorial-header:has(.editorial-nav__about-dropdown:not([hidden])) {
  z-index: 600;
}

/* Mobile tick allowance: seal the header edge and prevent chapter text
   from painting through the dedicated tick strip. No desktop changes. */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  body.home-page.has-mobile-full-morph .editorial-header,
  body.home-page.has-mobile-full-morph .editorial-header.is-scrolled {
    border-bottom-color: #f7f6f2 !important;
  }
  body.home-page.has-mobile-full-morph .home-mobile-morph-allowance {
    z-index: 280 !important; /* above moving content (275), below ticks (285) */
    background: #f7f6f2 !important;
    border: 0 !important;
    box-shadow: 0 -2px 0 #f7f6f2 !important;
  }
  /* Only the final 14px face enters the strip; no words or backgrounds. */
  body.home-page.has-mobile-full-morph .signature-hero__stage.is-dot-face,
  body.home-page.has-mobile-full-morph .about-morph-stage.is-dot-face,
  body.home-page.has-mobile-full-morph .work-morph-stage.is-dot-face,
  body.home-page.has-mobile-full-morph .memory-morph-stage.is-dot-face {
    z-index: 282 !important;
  }
}


/* MOBILE MORPH — keep actionable content tappable at every readable scroll
   position.  The moving chapter's shell stays pointer-transparent, so its
   background cannot block the next section or the fixed header/tick rail.
   Explicitly opt real controls back into native pointer hit testing: when a
   chapter begins shrinking, its CTAs are still usable while visible.
   Parked and tick-only stages remain noninteractive as before. */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  body.home-page.has-mobile-full-morph
  :is(.signature-hero__stage, .about-morph-stage, .work-morph-stage, .memory-morph-stage).is-morph-active:not(.is-dot-face):not(.is-morph-parked)
  :is(a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), summary, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])) {
    pointer-events: auto !important;
  }
}

/* A hover-safe connector across the small visual gap below About.
   Only created while the flyout is open; tap-only devices are unchanged. */
@media (hover: hover) and (pointer: fine) {
  body .editorial-nav__about.is-about-open::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 100%;
    left: -22px;
    width: min(590px, calc(100vw - 40px));
    height: 13px;
    pointer-events: auto;
    background: transparent;
  }
  body .editorial-nav__about.is-about-open .editorial-nav__about-dropdown {
    z-index: 2;
  }
}
/* ================================================================
   ZiFPIM — client feedback: public-site section rhythm (Oct 2026)
   Tighten only oversized gaps between existing content groups.
   Keep the page title/header offset, interactive states, Story journey,
   and the locked desktop/mobile HOME morph stages unchanged.
   Deliberately do not alter CMS/Admin styles or JS scroll runways.
   ================================================================ */
@media (min-width: 901px) {
  /* About gateway: hero → route directory → closing statement. */
  body.internal .page--about .page-hero--about { padding-bottom: clamp(52px, 5vw, 74px); }
  body.internal .page--about .about-directory {
    padding-top: clamp(58px, 5.7vw, 82px);
    padding-bottom: clamp(72px, 6.8vw, 100px);
  }
  body.internal .page--about .statement-band { padding-top: clamp(76px, 7vw, 100px); padding-bottom: clamp(76px, 7vw, 100px); }

  /* What We Do: shorten the blank breaks between the numbered chapters. */
  body.internal .what-page .what-hero { padding-bottom: clamp(68px, 5.9vw, 88px); }
  body.internal .what-page .what-chapters { padding-bottom: clamp(72px, 7vw, 98px); }
  body.internal .what-page .what-chapter { padding-top: clamp(45px, 4.5vw, 60px); padding-bottom: clamp(45px, 4.5vw, 60px); }

  /* Governance / partners: retain card proportions, reduce end runways. */
  body.internal .board-page .page-hero { padding-bottom: clamp(54px, 5.2vw, 76px); }
  body.internal .board-page .people-directory { padding-bottom: clamp(76px, 7vw, 108px); }
  body.internal .partner-page .partner-directory { padding-bottom: clamp(74px, 7vw, 106px); }
  body.internal .partner-page .partner-feature { padding-top: clamp(42px, 4.5vw, 66px); padding-bottom: clamp(42px, 4.5vw, 66px); }

  /* Who We Work With and Mission & Vision. */
  body.internal .who-page .ecosystem { margin-bottom: clamp(65px, 6vw, 90px); }
  body.internal .who-page .eligibility-band { padding-top: clamp(52px, 5vw, 68px); padding-bottom: clamp(52px, 5vw, 68px); }
  body.internal .mission-page .mission-panel { min-height: 70vh; padding-top: 78px; padding-bottom: 78px; }

  /* Investment case: long reading sections still have generous breathing room. */
  body.internal .investment-page .investment-hero-page { padding-bottom: clamp(78px, 7vw, 102px); }
  body.internal .investment-page .investment-story { padding-top: clamp(68px, 6.5vw, 92px); padding-bottom: clamp(88px, 8vw, 118px); }

  /* Resources: the most pronounced stacked whitespace on desktop. */
  body.resources-public-page .resources-hero { padding-bottom: clamp(66px, 6.4vw, 94px); }
  body.resources-public-page .resources-feature { padding-top: clamp(60px, 6vw, 88px); padding-bottom: clamp(74px, 7.5vw, 110px); }
  body.resources-public-page .resources-feature__article { padding-top: clamp(39px, 4.5vw, 66px); }
  body.resources-public-page .resources-library { padding-top: clamp(70px, 6.5vw, 98px); padding-bottom: clamp(76px, 7.7vw, 116px); }

  /* Partnership landing: remove the extra blank runway under the opening CTA. */
  body.partner-page-v2 .partner-hero-v2 { padding-bottom: clamp(48px, 5vw, 70px); }
  body.partner-page-v2 .partner-hero-v2__rule { margin-top: clamp(40px, 5vh, 70px); }
  body.partner-page-v2 .partner-routes-v2 { padding-top: clamp(70px, 7vw, 100px); padding-bottom: clamp(80px, 8vw, 116px); }
  body.partner-page-v2 .partner-routes-v2__head { margin-bottom: clamp(34px, 4vw, 56px); }
  body.partner-page-v2 .partner-route-v2 { padding-top: clamp(32px, 3.4vw, 48px); padding-bottom: clamp(32px, 3.4vw, 48px); }
  body.partner-page-v2 .partner-contact-v2__intro { min-height: 620px; }

  /* News: avoid an excessive pause before the recent stories list. */
  body.news-index-cms .zf-news-desk { padding-bottom: clamp(56px, 5.5vw, 82px); }
  body.news-index-cms .zf-news-archive { padding-top: clamp(50px, 5vw, 74px); padding-bottom: clamp(72px, 7vw, 104px); }
}

@media (max-width: 900px) {
  /* Keep mobile page openings and titles exactly where approved. */
  body.internal .page--about .page-hero--about { padding-bottom: 44px !important; }
  body.internal .page--about .about-directory { padding-top: 42px !important; padding-bottom: 52px !important; }
  body.internal .page--about .statement-band { padding-top: 52px; padding-bottom: 52px; }

  body.internal .what-page .what-hero { padding-bottom: 42px !important; }
  body.internal .what-page .what-chapter { padding-top: 25px !important; padding-bottom: 25px !important; }
  body.internal .what-page .what-chapters { padding-bottom: 72px !important; }

  body.internal .board-page .page-hero { padding-bottom: 46px !important; }
  body.internal .board-page .people-directory { padding-bottom: 76px; }
  body.internal .partner-page .partner-directory { padding-bottom: 62px; }
  body.internal .partner-page .partner-feature { padding-top: 38px; padding-bottom: 38px; }

  body.internal .who-page .ecosystem { margin-bottom: 58px; }
  body.internal .who-page .eligibility-band { padding-top: 52px; padding-bottom: 52px; }
  body.internal .mission-page .mission-panel { min-height: auto; padding-top: 64px; padding-bottom: 64px; }

  body.internal .investment-page .investment-hero-page { padding-bottom: 52px; }
  body.internal .investment-page .investment-story { padding-top: 42px; padding-bottom: 68px; }

  body.resources-public-page .resources-hero { padding-bottom: 40px; }
  body.resources-public-page .resources-feature { padding-top: 54px; padding-bottom: 70px; }
  body.resources-public-page .resources-feature__article { padding-top: 38px; }
  body.resources-public-page .resources-library { padding-top: 60px; padding-bottom: 72px; }

  body.partner-page-v2 .partner-hero-v2__rule { margin-top: 40px; }
  body.partner-page-v2 .partner-routes-v2 { padding-top: 50px; padding-bottom: 62px; }
  body.partner-page-v2 .partner-routes-v2__head { margin-bottom: 30px; }
  body.partner-page-v2 .partner-route-v2 { padding-top: 27px; padding-bottom: 30px; }
  body.partner-page-v2 .partner-contact-v2__intro { padding-top: 54px; padding-bottom: 58px; }
  body.partner-page-v2 .partner-contact-v2__direct { margin-top: 40px; }
  body.partner-page-v2 .partner-contact-v2__form-shell { padding-top: 54px; padding-bottom: 68px; }

  body.news-index-cms .zf-news-desk { padding-bottom: 50px; }
  body.news-index-cms .zf-news-archive { padding-top: 42px; padding-bottom: 68px; }
}

/* The 901–1199px partnership hero is content-sized by its original tablet
   layout. Only shorten the intentional full-height DESKTOP stage. */
@media (min-width: 1200px) {
  body.partner-page-v2 .partner-hero-v2 { min-height: min(670px, calc(100svh - 86px)); }
}

/* Partners page has no opening hero. Its desktop main previously began at
   y=0 behind the fixed 86px navigation, hiding the directory heading.
   Reserve the header plus a 28px opening margin, without altering the
   refined partner list rhythm or the already-correct mobile layout. */
@media (min-width: 901px) {
  body.internal main.page.partner-page {
    padding-top: 114px !important;
  }
}

/* ================================================================
   ZiFPIM — Our Partners: deliberate, restrained section dividers
   The navigation's existing bottom edge is the only full-width rule
   at the top of this page. A short gold mark anchors the directory.
   Scope: Partners page only, across all viewport sizes.
   ================================================================ */
body.internal main.page.partner-page .partner-directory__header {
  position: relative;
  border-top: 0;
  border-bottom: 0;
}

body.internal main.page.partner-page .partner-directory__header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--gold, #E2A814);
  pointer-events: none;
}

body.internal main.page.partner-page .partner-directory__list {
  border: 0;
}

body.internal main.page.partner-page .partner-feature {
  border-top: 0;
}

/* Distinguish subsequent CMS partners only if more than one is shown. */
body.internal main.page.partner-page .partner-feature + .partner-feature {
  border-top: 1px solid rgba(38, 37, 37, .12);
}

/* Remove the extra gold line spanning the top of the partner card;
   the discreet mark under the heading now supplies the accent. */
body.internal main.page.partner-page .partner-feature::before {
  content: none;
}

/* Avoid double framing around partner logos. */
body.internal main.page.partner-page .partner-feature__logo::after {
  content: none;
}

/* Mobile header — preserve one ZiFPIM identity during scrolling.
   Legacy internal-page styles re-enable the compact icon on .is-scrolled,
   even when the full colour logo remains visible. Keep only the full logo.
   Scoped to internal pages on phone/tablet; desktop is unchanged. */
@media (max-width: 900px) {
  body.internal .editorial-header .editorial-brand img.editorial-brand__icon,
  body.internal .editorial-header.is-scrolled .editorial-brand img.editorial-brand__icon,
  body.internal.page-blue .editorial-header:not(.is-scrolled) .editorial-brand img.editorial-brand__icon,
  body.internal.page-dark .editorial-header:not(.is-scrolled) .editorial-brand img.editorial-brand__icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.internal .editorial-header .editorial-brand img.editorial-brand__full--colour,
  body.internal .editorial-header.is-scrolled .editorial-brand img.editorial-brand__full--colour {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
  }
}


/* ================================================================
   09 OCT 2026 — mobile opening rhythm + scroll compositor budget
   The two-row fixed header already consumes 124–132px. Do not add
   another 148px of empty opening space inside internal-page heroes.
   This changes no desktop geometry or page-copy content.
   ================================================================ */
@media (max-width: 860px) {
  body.internal {
    --zifpim-page-opening-top: 72px;
  }
}
@media (max-width: 700px) {
  body.internal {
    --zifpim-page-opening-top: 64px;
  }
}
/* The Board title has a separate offset system between phone and desktop
   breakpoints. Keep it below the two-row header at tablet widths as well. */
@media (min-width: 701px) and (max-width: 860px) {
  body.internal .board-page .board-hero { padding-top: 155px !important; }
}

/* Pause decorative loops in chapters well outside the viewport. The
   actual content-to-tick transform, interactive elements, and ongoing
   animations in the visible/adjacent chapters are all retained. */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  /* The mobile header uses solid paper already: a filtered pseudo-layer
     would re-sample the giant moving chapter underneath on every frame. */
  body.home-page .editorial-header::before {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.home-page .morph-performance-scene:not(.is-morph-performance-near) *,
  body.home-page .morph-performance-scene:not(.is-morph-performance-near) *::before,
  body.home-page .morph-performance-scene:not(.is-morph-performance-near) *::after,
  body.home-page.has-mobile-full-morph.is-morphing .morph-performance-scene *,
  body.home-page.has-mobile-full-morph.is-morphing .morph-performance-scene *::before,
  body.home-page.has-mobile-full-morph.is-morphing .morph-performance-scene *::after {
    animation-play-state: paused !important;
  }
}

/* ===============================================================
   iPhone reverse-scroll safeguard — Featured Resource / Evidence Brief
   The animated backdrop and book are nested compositor layers inside a
   fixed, scaled morph stage.  Safari can leave that texture visually on
   top of earlier chapters when travelling back up.  Retire the complete
   resource stage from painting when its original scene is well outside
   the viewport (the observer already supplies this state).  The fixed
   14px completed tick is NOT part of the stage and stays visible.
   Visibility, unlike display/content-visibility, preserves every cached
   layout measurement and the unmodified forward/reverse scroll geometry.
   =============================================================== */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  body.home-page.has-mobile-full-morph
  .section--resource.morph-performance-scene:not(.is-morph-performance-near)
  .memory-morph-stage--resource {
    visibility: hidden !important;
  }

  /* The chapter itself remains the single moving object.  Flatten nested
     animation/compositor contexts while it morphs to prevent an old giant
     headline or book layer painting over the preceding chapter on reverse.
     Original nested treatments resume when the chapter is readable. */
  body.home-page.has-mobile-full-morph
  .memory-morph-stage--resource.is-morph-moving {
    isolation: isolate !important;
    contain: paint !important;
    transform-style: flat !important;
  }

  body.home-page.has-mobile-full-morph
  .memory-morph-stage--resource.is-morph-moving
  :is(.resource-backdrop, .resource-cover__object, .publication-cover, .resource-grid, .resource-copy) {
    transform-style: flat !important;
    will-change: auto !important;
  }
}

/* ================================================================
   12 OCT 2026 — compact mobile footer
   Client feedback: remove oversized spaces between Explore, Legal and
   Contact entries. Phone-only; desktop layout and homepage morph
   scroll/runway geometry remain untouched.
   ================================================================ */
@media (max-width: 700px) {
  /* The internal-page footer becomes a single column at this size. */
  body.internal .site-footer {
    row-gap: 22px !important;
  }

  body.internal .site-footer .footer-column {
    gap: 6px;
  }

  body.internal .site-footer .footer-column > span {
    margin-bottom: 2px;
  }

  body.internal .site-footer .footer-column a,
  body.internal .site-footer .footer-column p {
    line-height: 1.4;
  }

  body.internal .site-footer .footer-column--legal-contact .footer-column__legal-label,
  body.internal .site-footer .footer-column--legal-contact .footer-column__contact-label {
    margin-bottom: 2px;
  }

  body.internal .site-footer .footer-column--legal-contact .footer-column__contact-label {
    margin-top: 8px;
  }

  body.internal .site-footer .footer-bottom {
    margin-top: 8px;
  }

  /* Use the same tighter link rhythm on the homepage footer. Leave its
     minimum scroll height and final chapter runway unchanged. */
  body.home-page .site-footer .footer-column {
    gap: 6px;
  }

  body.home-page .site-footer .footer-column > span {
    margin-bottom: 2px;
  }

  body.home-page .site-footer .footer-column--legal-contact .footer-column__legal-label,
  body.home-page .site-footer .footer-column--legal-contact .footer-column__contact-label {
    margin-bottom: 2px;
  }

  body.home-page .site-footer .footer-column--legal-contact .footer-column__contact-label {
    margin-top: 8px;
  }
}

/* 12 Oct 2026 — footer social icon proportions (desktop + mobile).
   The internal-page footer's generic `a { width: fit-content; }` must not
   override the fixed square size of the icon-only social links. */
body .site-footer .footer-social-links__items > a.footer-social-link {
  box-sizing: border-box;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  flex: 0 0 32px;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
body .site-footer .footer-social-links__items > a.footer-social-link svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}

/* 14 Oct 2026 — disable the light-blue mobile tap rectangle on the two
   priority navigation links. Preserve desktop hover and keyboard focus. */
@media (hover: none), (pointer: coarse) {
  body .editorial-header .editorial-nav > a[href="/investment-case/index.html"],
  body .editorial-header .editorial-nav > a.editorial-nav__partner,
  body .editorial-header .editorial-nav > a[href="/investment-case/index.html"] > span,
  body .editorial-header .editorial-nav > a.editorial-nav__partner > span {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ================================================================
   14 OCT 2026 — unified footer section hierarchy
   Match Website Links, Legal, Contact and Social heading typography
   without modifying footer content, CMS social links or morph runway.
   ================================================================ */
body .site-footer .footer-column > span:first-child,
body .site-footer .footer-column--legal-contact .footer-column__legal-label,
body .site-footer .footer-column--legal-contact .footer-column__contact-label,
body .site-footer .footer-social-links__label {
  display: block;
  align-self: flex-start;
  font-family: "Manrope", sans-serif;
  color: #E2A814;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Contact and Social are independent, equally prominent sections,
   rather than visually subordinate grey captions under Legal. */
body .site-footer .footer-column--legal-contact .footer-column__contact-label {
  margin-top: 22px;
}
body .site-footer .footer-social-links {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
  gap: 12px;
}
body .site-footer .footer-social-links__label {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 700px) {
  /* A consistent compact rhythm on both homepage and inner pages. */
  body.home-page .site-footer .footer-column > span:first-child,
  body.internal .site-footer .footer-column > span:first-child,
  body.home-page .site-footer .footer-column--legal-contact .footer-column__legal-label,
  body.internal .site-footer .footer-column--legal-contact .footer-column__legal-label,
  body.home-page .site-footer .footer-column--legal-contact .footer-column__contact-label,
  body.internal .site-footer .footer-column--legal-contact .footer-column__contact-label {
    margin-bottom: 8px;
  }
  /* Make the space before Contact equal to the space before Legal:
     internal footer has a 22px grid row-gap, while the home footer
     uses 42px. The legal/contact column itself has a 6px flex gap. */
  body.internal .site-footer .footer-column--legal-contact .footer-column__contact-label {
    margin-top: 16px;
  }
  body.home-page .site-footer .footer-column--legal-contact .footer-column__contact-label {
    margin-top: 36px;
  }
  body .site-footer .footer-social-links {
    margin-top: 22px;
  }
  body .site-footer .footer-social-links__items {
    gap: 12px;
  }
}


/* ================================================================
   15 OCT 2026 — Privacy Policy mobile reading rhythm
   Client review: equalise space after the effective date, between the
   introduction and first heading, and between later legal sections.
   Page-scoped: no changes to shared header/footer, other pages or CMS.
   ================================================================ */
@media (max-width: 700px) {
  body.internal .privacy-page .page-hero {
    /* The heading/date already have their own grid gap. Keep the
       separator comfortably below the date without a huge dead zone. */
    row-gap: 12px;
    padding-bottom: 26px;
    margin-bottom: 34px;
  }

  body.internal .privacy-page .privacy-copy > p {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* A single, predictable paragraph rhythm rather than accumulated
     margins and heading padding from the legacy privacy styles. */
  body.internal .privacy-page .privacy-copy > p + p {
    margin-top: 16px;
  }

  body.internal .privacy-page .privacy-copy > h2 {
    padding-top: 0;
    margin: 42px 0 14px;
  }

  body.internal .privacy-page .privacy-copy > h2 + p {
    margin-top: 0;
  }
}


/* 15 Oct 2026 — Privacy document editor output (News-style rich text).
   Keep the legal document hierarchy, and respect paragraphs created in CMS. */
body.internal .privacy-page .privacy-copy > .privacy-rich--intro {
  max-width: 750px;
  margin-bottom: 40px;
}
body.internal .privacy-page .privacy-copy > .privacy-rich--intro > p {
  font-size: clamp(1.12rem, 1.8vw, 1.42rem);
  line-height: 1.7;
  font-weight: 550;
  color: #33332f;
}
body.internal .privacy-page .privacy-copy .privacy-rich p {
  margin: 0 0 18px;
}
body.internal .privacy-page .privacy-copy .privacy-rich p:last-child,
body.internal .privacy-page .privacy-copy .privacy-rich > :last-child {
  margin-bottom: 0;
}
body.internal .privacy-page .privacy-copy .privacy-rich ul,
body.internal .privacy-page .privacy-copy .privacy-rich ol {
  margin: 8px 0 22px;
  padding-left: 1.35em;
  color: #515251;
  font-size: 15px;
  line-height: 1.8;
}
body.internal .privacy-page .privacy-copy .privacy-rich li + li { margin-top: 7px; }
body.internal .privacy-page .privacy-copy .privacy-rich blockquote {
  margin: 18px 0 24px;
  padding: 3px 0 3px 18px;
  border-left: 2px solid #E2A814;
  color: #515251;
}
body.internal .privacy-page .privacy-copy .privacy-rich strong,
body.internal .privacy-page .privacy-copy .privacy-rich b { font-weight: 750; }
body.internal .privacy-page .privacy-copy .privacy-rich h2,
body.internal .privacy-page .privacy-copy .privacy-rich h3 {
  padding: 0;
  margin: 24px 0 12px;
  font-size: clamp(1.06rem, 1.55vw, 1.28rem);
  line-height: 1.38;
  letter-spacing: -.02em;
}
@media (max-width: 700px) {
  body.internal .privacy-page .privacy-copy > .privacy-rich--intro { margin-bottom: 0; }
  body.internal .privacy-page .privacy-copy > h2 { margin: 42px 0 14px; }
  body.internal .privacy-page .privacy-copy .privacy-rich p { margin: 0 0 16px; }
  body.internal .privacy-page .privacy-copy .privacy-rich p:last-child { margin-bottom: 0; }
}

/* 15 Oct 2026 — Mission & Vision: tighten phone-only vertical rhythm.
   Do not change the approved matching heading sizes, tablet or desktop. */
@media (max-width: 700px) {
  body.internal .mission-page .mission-panel {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  body.internal .mission-page .mission-panel h1,
  body.internal .mission-page .mission-panel h2 {
    margin-bottom: 20px;
  }

  body.internal .mission-page .mission-panel p {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* 15 Oct 2026 — consistent desktop footer on internal pages and homepage.
   Four visual columns; preserve the homepage's full-viewport morph runway,
   CMS-injected Social links and all existing phone/tablet layout rules. */
@media (min-width: 1080px) {
  body.internal .site-footer,
  body.home-page .site-footer.final-morph-runway {
    grid-template-columns: minmax(235px, 1.25fr) minmax(145px, .64fr) minmax(390px, 1.55fr);
    column-gap: clamp(26px, 3.2vw, 55px);
    align-items: start;
  }

  /* The horizontal logo already spells out the organisation's name. */
  body.home-page .site-footer .footer-brand__name {
    display: none;
  }

  body.internal .site-footer .footer-column--legal-contact,
  body.home-page .site-footer .footer-column--legal-contact {
    display: grid;
    grid-template-columns: minmax(110px, .75fr) minmax(188px, 1.35fr);
    column-gap: clamp(24px, 2.6vw, 44px);
    row-gap: 12px;
    align-content: start;
    align-items: start;
  }

  body.internal .site-footer .footer-column--legal-contact .footer-column__legal-label,
  body.home-page .site-footer .footer-column--legal-contact .footer-column__legal-label {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }
  body.internal .site-footer .footer-column--legal-contact > a[href^="/privacy/"],
  body.home-page .site-footer .footer-column--legal-contact > a[href^="/privacy/"] {
    grid-column: 1;
    grid-row: 2;
  }
  body.internal .site-footer .footer-column--legal-contact .footer-column__contact-label,
  body.home-page .site-footer .footer-column--legal-contact .footer-column__contact-label {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
  body.internal .site-footer .footer-column--legal-contact > a[href^="mailto:"],
  body.home-page .site-footer .footer-column--legal-contact > a[href^="mailto:"] {
    grid-column: 2;
    grid-row: 2;
  }
  body.internal .site-footer .footer-column--legal-contact > a[href^="tel:"],
  body.home-page .site-footer .footer-column--legal-contact > a[href^="tel:"] {
    grid-column: 2;
    grid-row: 3;
  }
  body.internal .site-footer .footer-column--legal-contact > p,
  body.home-page .site-footer .footer-column--legal-contact > p {
    grid-column: 2;
    grid-row: 4;
  }
  body.internal .site-footer .footer-column--legal-contact > .footer-social-links,
  body.home-page .site-footer .footer-column--legal-contact > .footer-social-links {
    grid-column: 2;
    grid-row: 5;
    margin-top: 22px;
  }
}