/* =========================================================
   ZiFPIM CREATIVE RESET — V10
   Signature header, navigation, transitions, home opening
   ========================================================= */

/* ---------- Editorial header ---------- */
.editorial-header {
  position: fixed;
  z-index: 300;
  top: 0;
  left: 0;
  width: 100%;
  height: 92px;
  display: grid;
  grid-template-columns: 190px 1fr auto;
  align-items: center;
  gap: 34px;
  padding: 0 max(3.2vw, calc((100vw - 1480px)/2));
  color: var(--charcoal);
  background: transparent;
  border-bottom: 1px solid rgba(38,37,37,.16);
  transition:
    height .35s var(--ease),
    background .35s ease,
    color .35s ease,
    border-color .35s ease;
}

.editorial-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(247,246,242,.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .35s ease;
}

.editorial-header.is-scrolled {
  height: 66px;
  border-color: rgba(38,37,37,.11);
  color: var(--charcoal);
}

.editorial-header.is-scrolled::before {
  opacity: 1;
}

.editorial-brand {
  position: relative;
  display: block;
  width: 154px;
  height: 52px;
}

.editorial-brand img {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  object-fit: contain;
  object-position: left center;
  transform: translateY(-50%);
  transition: opacity .3s ease, transform .35s var(--ease);
}

.editorial-brand__full {
  width: 154px;
  height: 48px;
}

.editorial-brand__icon {
  width: 38px;
  height: 42px;
  opacity: 0;
  transform: translateY(-50%) scale(.78);
}

.editorial-brand__full--white,
.editorial-brand__icon--white {
  display: none !important;
}

.editorial-header.is-scrolled .editorial-brand__full {
  opacity: 0;
  transform: translateY(-50%) translateX(-8px) scale(.93);
}

.editorial-header.is-scrolled .editorial-brand__icon {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.editorial-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 52px);
}

.editorial-nav a {
  position: relative;
  display: flex;
  gap: 7px;
  align-items: flex-start;
  padding: 9px 0;
  font-size: .79rem;
  font-weight: 700;
  white-space: nowrap;
}

.editorial-nav sup {
  top: auto;
  color: var(--blue);
  font-size: .52rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .08em;
}

.editorial-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 1px;
  height: 2px;
  background: var(--gold);
  transition: right .26s var(--ease);
}

.editorial-nav a:hover::after {
  right: 0;
}

.editorial-header.is-scrolled .editorial-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
}

.editorial-header__actions {
  display: flex;
  align-items: center;
  gap: 26px;
}

.editorial-partner {
  position: relative;
  font-size: .78rem;
  font-weight: 800;
  padding: 8px 0;
}

.editorial-partner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
}

.editorial-partner span {
  color: var(--blue);
}

.editorial-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}

.editorial-menu-button__label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.editorial-menu-button__glyph {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}

.editorial-menu-button__glyph::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  transform: rotate(45deg) scale(.72);
  transition: transform .3s var(--ease), background .3s ease;
}

.editorial-menu-button:hover .editorial-menu-button__glyph::before {
  transform: rotate(135deg) scale(.82);
  background: var(--gold);
}

.editorial-menu-button__glyph i {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 1px;
  background: currentColor;
}

.editorial-menu-button__glyph i:last-child {
  transform: rotate(90deg);
}

/* Dark/blue page opening theme */
.page-dark .editorial-header:not(.is-scrolled),
.page-blue .editorial-header:not(.is-scrolled) {
  color: white;
  border-bottom-color: rgba(255,255,255,.22);
}

.page-dark .editorial-header:not(.is-scrolled) .editorial-brand__full--colour,
.page-blue .editorial-header:not(.is-scrolled) .editorial-brand__full--colour,
.page-dark .editorial-header:not(.is-scrolled) .editorial-brand__icon--colour,
.page-blue .editorial-header:not(.is-scrolled) .editorial-brand__icon--colour {
  display: none;
}

.page-dark .editorial-header:not(.is-scrolled) .editorial-brand__full--white,
.page-blue .editorial-header:not(.is-scrolled) .editorial-brand__full--white {
  display: block !important;
}

.page-dark .editorial-header:not(.is-scrolled) .editorial-nav sup,
.page-blue .editorial-header:not(.is-scrolled) .editorial-nav sup,
.page-dark .editorial-header:not(.is-scrolled) .editorial-partner span,
.page-blue .editorial-header:not(.is-scrolled) .editorial-partner span {
  color: var(--gold);
}

/* ---------- Full screen navigation ---------- */
.mega-menu {
  position: fixed;
  z-index: 700;
  inset: 0;
  display: block;
  padding: 0 max(3.2vw, calc((100vw - 1480px)/2));
  background: var(--charcoal);
  color: white;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path .62s var(--ease),
    opacity .2s ease,
    visibility 0s linear .64s;
}

.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path .62s var(--ease),
    opacity .2s ease,
    visibility 0s linear 0s;
}

.mega-menu__gold-edge {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 0;
  background: var(--gold);
  transition: height .72s .16s var(--ease);
}

.mega-menu.is-open .mega-menu__gold-edge {
  height: 100%;
}

.mega-menu__header {
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.mega-menu__brand img {
  display: block;
  width: 210px;
  max-height: 58px;
  object-fit: contain;
  object-position: left center;
}

.mega-menu__close {
  display: flex;
  gap: 13px;
  align-items: center;
  border: 0;
  background: transparent;
  color: white;
  font: inherit;
  cursor: pointer;
}

.mega-menu__close span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
}

.mega-menu__close b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.6);
  font-size: 1.4rem;
  font-weight: 400;
  transform: rotate(0);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.mega-menu__close:hover b {
  transform: rotate(90deg);
  background: var(--gold);
  color: var(--charcoal);
  border-color: var(--gold);
}

.mega-menu__grid {
  min-height: calc(100vh - 104px);
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(330px, .72fr);
  gap: 5vw;
}

.mega-menu__primary {
  padding: 6vh 0 5vh;
}

.mega-menu__primary > a {
  display: grid;
  grid-template-columns: 54px 1fr 42px;
  gap: 18px;
  align-items: center;
  min-height: 14vh;
  border-bottom: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.94);
  transform: translateY(22px);
  opacity: 0;
  transition:
    color .22s ease,
    padding .25s var(--ease),
    opacity .42s ease,
    transform .42s var(--ease);
}

.mega-menu.is-open .mega-menu__primary > a {
  opacity: 1;
  transform: translateY(0);
}

.mega-menu.is-open .mega-menu__primary > a:nth-child(1) { transition-delay: .12s; }
.mega-menu.is-open .mega-menu__primary > a:nth-child(2) { transition-delay: .16s; }
.mega-menu.is-open .mega-menu__primary > a:nth-child(3) { transition-delay: .20s; }
.mega-menu.is-open .mega-menu__primary > a:nth-child(4) { transition-delay: .24s; }
.mega-menu.is-open .mega-menu__primary > a:nth-child(5) { transition-delay: .28s; }

.mega-menu__primary > a > span {
  color: var(--gold);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
}

.mega-menu__primary strong {
  font-size: clamp(2.4rem, 5vw, 5.5rem);
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 600;
}

.mega-menu__primary em {
  font-style: normal;
  font-size: 1.5rem;
  opacity: .45;
  transition: opacity .2s ease, transform .2s ease;
}

.mega-menu__primary > a:hover {
  color: var(--gold);
  padding-left: 18px;
}

.mega-menu__primary > a:hover em {
  opacity: 1;
  transform: translate(4px,-4px);
}

.mega-menu__aside {
  position: relative;
  min-height: 100%;
  padding: 7vh 0 4vh 4vw;
  border-left: 1px solid rgba(255,255,255,.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mega-menu__ghost {
  position: absolute;
  right: -6vw;
  top: 8vh;
  width: min(33vw, 430px);
  opacity: .055;
  transform: rotate(5deg);
  pointer-events: none;
}

.mega-menu__preview {
  position: relative;
  z-index: 2;
  max-width: 500px;
}

.mega-menu__preview-index {
  color: var(--gold);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
}

.mega-menu__preview h2 {
  margin: 17px 0;
  font-size: clamp(2.2rem, 3.8vw, 4.3rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.mega-menu__preview p {
  max-width: 440px;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
}

.mega-menu__about-links {
  position: relative;
  z-index: 2;
  margin-top: 4vh;
  display: grid;
  gap: 8px;
  max-width: 430px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s var(--ease);
}

.mega-menu__about-links.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.mega-menu__about-links a {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.8);
  font-size: .9rem;
}

.mega-menu__about-links a::after {
  content: "";
  width: .9em;
  height: .9em;
  flex: 0 0 auto;
  background: var(--gold);
  -webkit-mask: url('/assets/icons/arrow-ne.svg') center / contain no-repeat;
  mask: url('/assets/icons/arrow-ne.svg') center / contain no-repeat;
}

.mega-menu__about-links a:hover {
  color: white;
}

.mega-menu__meta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,.15);
  display: grid;
  gap: 7px;
  color: rgba(255,255,255,.54);
  font-size: .72rem;
}

.mega-menu__meta a {
  color: white;
}

/* lock body while navigation is open */
body.menu-open {
  overflow: hidden;
}

/* ---------- Signature gold-frame transition ---------- */
.page-transition {
  position: fixed;
  z-index: 900;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--blue);
  opacity: 1;
  visibility: visible;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path .72s var(--ease),
    visibility 0s linear .73s;
}

body.is-ready .page-transition {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}

body.is-leaving .page-transition {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path .64s var(--ease),
    visibility 0s linear 0s;
}

.transition-frame {
  position: absolute;
  width: min(46vw, 610px);
  height: min(52vh, 430px);
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.transition-frame i {
  position: absolute;
  display: block;
  background: var(--gold);
}

.transition-frame__top {
  left: 0;
  top: 0;
  width: 0;
  height: 8px;
}

.transition-frame__left {
  left: 0;
  top: 0;
  width: 8px;
  height: 0;
}

.transition-frame__bottom {
  left: 0;
  bottom: 0;
  width: 0;
  height: 8px;
}

body:not(.is-ready) .transition-frame__top,
body.is-leaving .transition-frame__top {
  animation: frameTop .52s .08s var(--ease) forwards;
}

body:not(.is-ready) .transition-frame__left,
body.is-leaving .transition-frame__left {
  animation: frameLeft .52s .18s var(--ease) forwards;
}

body:not(.is-ready) .transition-frame__bottom,
body.is-leaving .transition-frame__bottom {
  animation: frameBottom .52s .26s var(--ease) forwards;
}

@keyframes frameTop { to { width: 82%; } }
@keyframes frameLeft { to { height: 100%; } }
@keyframes frameBottom { to { width: 66%; } }

.transition-brand {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: 16px;
  color: white;
  opacity: 0;
  transform: translateY(8px);
}

body:not(.is-ready) .transition-brand,
body.is-leaving .transition-brand {
  animation: transitionBrandIn .34s .22s ease forwards;
}

@keyframes transitionBrandIn {
  to { opacity: 1; transform: none; }
}

.transition-brand img {
  width: 92px;
  height: 98px;
  object-fit: contain;
}

.transition-brand span {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- Signature home opening ---------- */
.home-page .editorial-header {
  background: transparent;
}

.signature-hero {
  position: relative;
  width: min(93vw, 1480px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 132px 0 42px;
}

.signature-hero__topline {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 0 0 17px;
  border-bottom: 1px solid var(--line);
  color: var(--blue);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.signature-hero__statement {
  position: relative;
  padding: 26px 0 0;
}

.signature-hero h1 {
  max-width: 1260px;
  margin: 0;
  font-size: clamp(3.65rem, 6.85vw, 7.5rem);
  line-height: .88;
  letter-spacing: -.072em;
  font-weight: 650;
}

.signature-line {
  display: block;
  overflow: hidden;
}

.signature-line > span {
  display: block;
  transform: translateY(112%);
  transition: transform .78s var(--ease);
}

body.is-ready .signature-line > span {
  transform: translateY(0);
}

body.is-ready .signature-line:nth-child(1) > span { transition-delay: .08s; }
body.is-ready .signature-line:nth-child(2) > span { transition-delay: .15s; }
body.is-ready .signature-line:nth-child(3) > span { transition-delay: .22s; }

.signature-line--blue {
  color: var(--blue);
  font-style: italic;
  font-weight: 500;
}

.signature-hero__motto {
  position: absolute;
  right: 0;
  top: 38px;
  width: 180px;
  padding-top: 14px;
  border-top: 7px solid var(--gold);
  display: grid;
  gap: 2px;
  font-size: .8rem;
  line-height: 1.3;
}

.signature-hero__motto strong {
  color: var(--blue);
}

.signature-hero__lower {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 8vw;
  align-items: end;
  padding: 30px 0 24px;
}

.signature-hero__intro {
  max-width: 670px;
  margin: 0;
  color: var(--grey);
  font-size: clamp(.95rem, 1.15vw, 1.12rem);
}

.signature-hero__actions {
  justify-self: end;
  display: flex;
  gap: 28px;
}

.signature-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--blue);
  font-size: .82rem;
  font-weight: 800;
}

.signature-link span {
  color: var(--blue);
}

.signature-link--quiet {
  border-bottom-color: var(--line);
}

.signature-media {
  position: relative;
  height: clamp(250px, 31vh, 360px);
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 14%, rgba(226,168,20,.23), transparent 22%),
    radial-gradient(circle at 18% 78%, rgba(53,88,167,.15), transparent 30%),
    #ECEAE2;
}

.signature-media__open-frame {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 38%;
  height: 100%;
  pointer-events: none;
}

.signature-media__open-frame i {
  position: absolute;
  background: var(--gold);
}

.signature-media__open-frame i:nth-child(1) {
  top: 0; left: 0; width: 100%; height: 13px;
}

.signature-media__open-frame i:nth-child(2) {
  top: 0; left: 0; width: 13px; height: 100%;
}

.signature-media__open-frame i:nth-child(3) {
  left: 0; bottom: 0; width: 72%; height: 13px;
}

.signature-media__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.signature-media__placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(38,37,37,.08), transparent 42%);
  pointer-events: none;
}

.signature-media__placeholder img {
  width: min(210px, 20vw);
  opacity: .085;
}

.signature-media__placeholder > div {
  position: absolute;
  right: 28px;
  bottom: 22px;
  text-align: right;
}

.signature-media__placeholder span {
  display: block;
  font-weight: 800;
}

.signature-media__placeholder small {
  color: var(--grey);
}

.signature-media__rail {
  position: absolute;
  z-index: 5;
  left: 28px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,.9);
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.signature-media__rail i {
  width: 16px;
  height: 1px;
  background: var(--gold);
}

.signature-scroll {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  color: var(--grey);
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.signature-scroll i {
  width: 55px;
  height: 1px;
  background: var(--charcoal);
  animation: scrollPulse 1.6s ease-in-out infinite alternate;
  transform-origin: right;
}

@keyframes scrollPulse {
  from { transform: scaleX(.35); }
  to { transform: scaleX(1); }
}

/* Remove legacy header/menu presentation if any old nodes survive */
.site-header,
.mobile-menu {
  display: none !important;
}

/* Internal pages need room for new 92px header */
.page,
.what-page,
.investment-page,
.engage-page,
.mission-page {
  padding-top: 92px;
}

/* ---------- Responsive creative layer ---------- */
@media (max-width: 1080px) {
  .editorial-header {
    grid-template-columns: 150px 1fr auto;
    gap: 20px;
  }

  .editorial-brand,
  .editorial-brand__full {
    width: 138px;
  }

  .editorial-nav {
    gap: 20px;
  }

  .editorial-nav a {
    font-size: .72rem;
  }

  .mega-menu__grid {
    grid-template-columns: 1fr .62fr;
  }

  .signature-hero h1 {
    font-size: clamp(3.5rem, 6.4vw, 6.7rem);
    padding-right: 110px;
  }

  .signature-hero__motto {
    width: 145px;
  }
}

@media (max-width: 860px) {
  .editorial-header {
    height: 76px;
    grid-template-columns: 1fr auto;
    padding-inline: 5vw;
  }

  .editorial-nav,
  .editorial-partner {
    display: none;
  }

  .editorial-brand,
  .editorial-brand__full {
    width: 136px;
  }

  .editorial-brand__full {
    height: 44px;
  }

  .editorial-header.is-scrolled {
    height: 62px;
  }

  .mega-menu {
    padding-inline: 5vw;
  }

  .mega-menu__header {
    height: 82px;
  }

  .mega-menu__brand img {
    width: 170px;
  }

  .mega-menu__grid {
    grid-template-columns: 1fr;
  }

  .mega-menu__primary {
    padding: 3vh 0;
  }

  .mega-menu__primary > a {
    min-height: 10vh;
  }

  .mega-menu__primary strong {
    font-size: clamp(2.1rem, 7vw, 4.4rem);
  }

  .mega-menu__aside {
    display: none;
  }

  .signature-hero {
    width: 90vw;
    padding-top: 112px;
  }

  .signature-hero__topline span:last-child {
    display: none;
  }

  .signature-hero h1 {
    padding-right: 0;
    font-size: clamp(3rem, 10vw, 5rem);
  }

  .signature-hero__motto {
    position: static;
    margin-top: 25px;
  }

  .signature-hero__lower {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .signature-hero__actions {
    justify-self: start;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .editorial-header {
    padding-inline: 5vw;
  }

  .editorial-brand,
  .editorial-brand__full {
    width: 122px;
  }

  .editorial-menu-button__label {
    display: none;
  }

  .mega-menu__brand img {
    width: 148px;
  }

  .mega-menu__primary > a {
    grid-template-columns: 36px 1fr 25px;
    min-height: 11vh;
  }

  .mega-menu__primary strong {
    font-size: clamp(2rem, 9.2vw, 3.6rem);
  }

  .signature-hero {
    padding-top: 98px;
  }

  .signature-hero h1 {
    font-size: clamp(2.8rem, 13vw, 4.4rem);
  }

  .signature-media {
    height: 270px;
  }

  .signature-media__open-frame {
    width: 62%;
  }

  .signature-media__placeholder > div {
    right: 16px;
    bottom: 16px;
    font-size: .78rem;
  }

  .signature-media__rail {
    left: 15px;
    bottom: 15px;
    max-width: calc(100% - 30px);
    flex-wrap: wrap;
  }

  .transition-frame {
    width: 72vw;
    height: 34vh;
  }

  .transition-brand span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signature-line > span {
    transform: none !important;
  }

  .mega-menu,
  .mega-menu__primary > a,
  .page-transition {
    transition-duration: .01ms !important;
  }

  .transition-frame i,
  .transition-brand,
  .signature-scroll i {
    animation: none !important;
  }
}


/* =========================================================
   V11 — UI CLEANUP + SIGNATURE FLOATING MENU CONTROL
   ========================================================= */

/* ---------- Fix hero motto overlap ---------- */
.signature-hero__statement {
  padding-right: 0;
}

.signature-hero__motto {
  display: none !important;
}

.signature-media__motto {
  position: absolute;
  z-index: 7;
  right: 24px;
  top: 22px;
  min-width: 190px;
  padding: 14px 16px 15px 18px;
  background: rgba(247,246,242,.94);
  border-top: 6px solid var(--gold);
  box-shadow: 0 10px 32px rgba(38,37,37,.08);
  display: grid;
  gap: 1px;
  font-size: .76rem;
  line-height: 1.25;
  pointer-events: none;
}

.signature-media__motto span {
  color: var(--charcoal);
}

.signature-media__motto strong {
  color: var(--blue);
  font-weight: 800;
}

/* ---------- Header action now stays clean ---------- */
.editorial-header {
  grid-template-columns: 190px 1fr auto;
}

.editorial-header__actions {
  gap: 0;
}

/* ---------- Floating menu trigger ---------- */
/*
   The trigger is intentionally removed from the ordinary header flow.
   It becomes a persistent branded control on the right edge of the screen.
*/
.editorial-menu-button {
  position: fixed;
  z-index: 520;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 78px;
  min-height: 128px;
  padding: 15px 10px 14px;
  background: var(--charcoal);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  border: 0;
  box-shadow: 0 18px 40px rgba(38,37,37,.14);
  transition:
    transform .3s var(--ease),
    width .3s var(--ease),
    background .3s ease;
}

.editorial-menu-button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: var(--gold);
}

.editorial-menu-button::after {
  content: "EXPLORE";
  position: absolute;
  right: -1px;
  top: 10px;
  color: rgba(255,255,255,.42);
  font-size: .46rem;
  font-weight: 800;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
  text-transform: uppercase;
}

.editorial-menu-button:hover {
  width: 88px;
  transform: translate(-7px,-50%);
  background: #1f1f1f;
}

.editorial-menu-button__label {
  position: relative;
  z-index: 3;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Custom ZiFPIM-inspired "open portal" menu icon */
.editorial-menu-button__glyph {
  position: relative;
  width: 42px;
  height: 42px;
  display: block;
  margin: 0 auto;
}

.editorial-menu-button__glyph::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 2px;
  width: 27px;
  height: 34px;
  border-left: 3px solid var(--gold);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  transition:
    width .28s var(--ease),
    transform .32s var(--ease);
}

.editorial-menu-button__glyph::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 8px;
  height: 8px;
  background: var(--blue);
  box-shadow: 0 -15px 0 var(--white);
  transition: transform .3s var(--ease);
}

.editorial-menu-button__glyph i {
  position: absolute;
  z-index: 2;
  left: 10px;
  width: 18px;
  height: 2px;
  background: white;
  transform-origin: center;
  transition:
    transform .3s var(--ease),
    width .3s var(--ease),
    left .3s var(--ease);
}

.editorial-menu-button__glyph i:first-child {
  top: 15px;
}

.editorial-menu-button__glyph i:last-child {
  top: 24px;
}

.editorial-menu-button:hover .editorial-menu-button__glyph::before {
  width: 33px;
  transform: skewY(-4deg);
}

.editorial-menu-button:hover .editorial-menu-button__glyph::after {
  transform: translateY(-3px);
}

.editorial-menu-button:hover .editorial-menu-button__glyph i:first-child {
  transform: translateX(5px);
  width: 13px;
}

.editorial-menu-button:hover .editorial-menu-button__glyph i:last-child {
  transform: translateX(-2px);
  width: 22px;
}

/* Keep menu trigger visible even when the header compresses */
.editorial-header.is-scrolled .editorial-menu-button {
  color: white;
}

/* ---------- Mega menu now opens spatially FROM the trigger ---------- */
.mega-menu {
  clip-path: inset(0 0 0 100%);
  transition:
    clip-path .68s var(--ease),
    opacity .18s ease,
    visibility 0s linear .70s;
}

.mega-menu.is-open {
  clip-path: inset(0 0 0 0);
  transition:
    clip-path .68s var(--ease),
    opacity .18s ease,
    visibility 0s linear 0s;
}

.mega-menu__gold-edge {
  left: auto;
  right: 0;
  width: 7px;
}

.mega-menu__ghost {
  transform: rotate(8deg) scale(.92);
  transition: transform 1s var(--ease), opacity .5s ease;
}

.mega-menu.is-open .mega-menu__ghost {
  transform: rotate(-2deg) scale(1);
}

/* menu items enter with a stronger directional gesture */
.mega-menu__primary > a {
  transform: translateX(36px);
}

.mega-menu.is-open .mega-menu__primary > a {
  transform: translateX(0);
}

/* When menu is open, hide the floating trigger so it doesn't compete with Close */
body.menu-open .editorial-menu-button {
  opacity: 0;
  pointer-events: none;
  transform: translate(25px,-50%);
}

/* Slightly improve page-transition feel after menu click */
body.menu-open.is-leaving .mega-menu {
  clip-path: inset(0 0 0 0);
}

/* ---------- Desktop layout safety ---------- */
@media (max-width: 1180px) {
  .editorial-menu-button {
    right: 12px;
  }

  .editorial-partner {
    margin-right: 78px;
  }
}

/* ---------- Tablet/mobile: return trigger to header, but keep new icon ---------- */
@media (max-width: 860px) {
  .editorial-header {
    grid-template-columns: 1fr auto;
  }

  .editorial-menu-button {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 54px;
    min-height: 54px;
    padding: 5px;
    background: transparent;
    color: var(--charcoal);
    box-shadow: none;
  }

  .page-dark .editorial-header:not(.is-scrolled) .editorial-menu-button,
  .page-blue .editorial-header:not(.is-scrolled) .editorial-menu-button {
    color: white;
  }

  .editorial-menu-button::before,
  .editorial-menu-button::after,
  .editorial-menu-button__label {
    display: none;
  }

  .editorial-menu-button:hover {
    width: 54px;
    transform: none;
    background: transparent;
  }

  .editorial-menu-button__glyph {
    width: 38px;
    height: 38px;
  }

  .editorial-menu-button__glyph::before {
    border-color: var(--gold);
  }

  .editorial-menu-button__glyph i {
    background: currentColor;
  }

  body.menu-open .editorial-menu-button {
    opacity: 0;
    transform: none;
  }

  .signature-media__motto {
    right: 15px;
    top: 15px;
    min-width: 160px;
  }
}

@media (max-width: 600px) {
  .signature-media__motto {
    right: 12px;
    top: 12px;
    min-width: 145px;
    padding: 10px 12px;
    font-size: .66rem;
  }
}


/* =========================================================
   V12 — SIMPLE GOLD MENU + SCROLL CHOREOGRAPHY + HOVER DEPTH
   ========================================================= */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Header: MENU now sits directly before About ---------- */
.editorial-header {
  grid-template-columns: 190px auto 1fr auto;
  gap: 22px;
}

.editorial-menu-button {
  position: relative;
  z-index: auto;
  right: auto;
  top: auto;
  transform: none;
  width: 38px;
  min-height: 34px;
  padding: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  display: grid;
  place-items: center;
  border: 0;
}

.editorial-menu-button::before,
.editorial-menu-button::after,
.editorial-menu-button__label,
.editorial-menu-button__glyph {
  display: none !important;
}

.editorial-menu-button:hover {
  width: 38px;
  transform: none;
  background: transparent;
}

.menu-bars {
  width: 28px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-bars i {
  display: block;
  height: 2px;
  background: var(--gold);
  transform-origin: left center;
  transition:
    width .25s var(--ease),
    transform .25s var(--ease),
    opacity .25s ease;
}

.menu-bars i:nth-child(1) { width: 28px; }
.menu-bars i:nth-child(2) { width: 21px; }
.menu-bars i:nth-child(3) { width: 26px; }
.menu-bars i:nth-child(4) { width: 16px; }

.editorial-menu-button:hover .menu-bars i:nth-child(1) {
  width: 18px;
  transform: translateX(5px);
}
.editorial-menu-button:hover .menu-bars i:nth-child(2) {
  width: 28px;
}
.editorial-menu-button:hover .menu-bars i:nth-child(3) {
  width: 18px;
  transform: translateX(8px);
}
.editorial-menu-button:hover .menu-bars i:nth-child(4) {
  width: 28px;
}

/* Gold navigation numbers, as requested */
.editorial-nav {
  justify-self: start;
  gap: clamp(24px, 3vw, 52px);
}

.editorial-nav sup {
  color: var(--gold) !important;
}

/* Partner action gets a more surprising hover without a pill */
.editorial-partner {
  overflow: hidden;
  isolation: isolate;
}

.editorial-partner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 0;
  background: var(--gold);
  transition: height .28s var(--ease);
}

.editorial-partner:hover::before {
  height: calc(100% + 4px);
}

.editorial-partner:hover {
  color: var(--charcoal);
}

.editorial-partner:hover span {
  color: var(--charcoal) !important;
}

/* Header collapses but MENU remains visible next to the icon */
.editorial-header.is-scrolled {
  grid-template-columns: 60px auto 1fr auto;
}

.editorial-header.is-scrolled .editorial-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
}

/* ---------- Full-screen menu now unfolds DOWN from the header ---------- */
.mega-menu {
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path .68s var(--ease),
    opacity .18s ease,
    visibility 0s linear .70s;
}

.mega-menu.is-open {
  clip-path: inset(0 0 0 0);
  transition:
    clip-path .68s var(--ease),
    opacity .18s ease,
    visibility 0s linear 0s;
}

.mega-menu__gold-edge {
  left: 0;
  right: auto;
  top: 0;
  width: 0;
  height: 6px;
  transition: width .82s .1s var(--ease);
}

.mega-menu.is-open .mega-menu__gold-edge {
  width: 100%;
  height: 6px;
}

.mega-menu__primary > a {
  transform: translateY(-24px);
}

.mega-menu.is-open .mega-menu__primary > a {
  transform: translateY(0);
}

body.menu-open .editorial-menu-button {
  opacity: 0;
  pointer-events: none;
  transform: none;
}

/* ---------- Home hero: single-object morph test ----------
   V20 keeps the approved V19 destination but makes the movement
   compositor-first: one translate3d + one UNIFORM scale only.
   No per-frame colour, border-radius, opacity, blur or layout work.
   --------------------------------------------------------- */
.signature-hero {
  width: 100%;
  min-height: 176vh;
  margin: 0;
  padding: 0;
}

.signature-hero__stage {
  position: sticky;
  z-index: 240;
  top: 0;
  width: min(93vw, 1480px);
  height: 100vh;
  margin: 0 auto;
  padding: 132px 0 30px;
  overflow: hidden;
  background: var(--paper);
  border-radius: 0;
  transform-origin: 0 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* During the desktop morph the stage is fixed from the beginning, rather
   than switching from sticky -> fixed at the endpoint. The section itself
   still reserves the scroll distance. This removes the small end-of-morph
   layout jump that V19 could show on slower machines. */
.signature-hero__stage.is-morph-active {
  position: fixed;
  left: var(--hero-source-left, 0px);
  top: 0;
  margin: 0;
}

/* The dot is the final visual face of this SAME transformed hero object.
   Its unscaled square uses the hero's source width; because V20 uses a
   uniform scale of 14 / sourceWidth, the endpoint is mathematically
   14px x 14px and perfectly round. */
.signature-hero__stage.is-dot-face {
  overflow: visible;
  background: transparent;
  pointer-events: none;
}

.signature-hero__stage.is-dot-face > * {
  visibility: hidden;
}

.signature-hero__stage.is-dot-face::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: var(--hero-source-width, 100%);
  height: var(--hero-source-width, 100%);
  border-radius: 50%;
  background: var(--gold);
  visibility: visible;
  pointer-events: none;
}

/* Nothing inside the hero gets its own scroll transform. */
.signature-hero__topline,
.signature-hero__statement,
.signature-hero__lower,
.signature-media {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.signature-media {
  border-radius: 0;
  box-shadow: 0 18px 46px rgba(38,37,37,.06);
}

.signature-media__placeholder {
  transform: none;
  transition: none;
  will-change: auto;
}

/* Keep the opening visually calm: no pulsing scroll indicator. */
.signature-scroll i {
  animation: none;
  transform: scaleX(1);
}

/* V12's staged "Next / About" reveal is intentionally removed. */
.signature-next {
  display: none;
}

/* V21: What We Do remains completely normal. About now becomes the
   second memory marker using the same restrained transform language. */
.section--work {
  transform: none;
  border-radius: 0;
}

.section--about .about-editorial__statement,
.section--about .about-editorial__copy,
.section--about .about-editorial__mark {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ---------- V21 — About -> second gold memory marker ----------
   Desktop only. The About section stays completely ordinary until its
   top reaches the viewport. From there, ONE wrapper translates and scales
   toward the second marker. No fade, blur, pulse, clip-path or child motion.
   ------------------------------------------------------------ */
@media (min-width: 861px) {
  .section--about[data-about-morph-scene] {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none;
    border-radius: 0;
  }

  .about-morph-stage {
    position: relative;
    z-index: 239;
    width: var(--page);
    margin: 0 auto;
    padding: 115px 0 130px;
    overflow: hidden;
    background: var(--paper);
    transform-origin: 0 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    min-height: 100vh;
  }

  .about-morph-stage.is-morph-active {
    position: fixed;
    left: var(--about-source-left, 0px);
    top: 0;
    margin: 0;
  }

  .about-morph-stage.is-dot-face {
    overflow: visible;
    background: transparent;
    pointer-events: none;
  }

  .about-morph-stage.is-dot-face > * {
    visibility: hidden;
  }

  .about-morph-stage.is-dot-face::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: var(--about-source-width, 100%);
    height: var(--about-source-width, 100%);
    border-radius: 50%;
    background: var(--gold);
    visibility: visible;
    pointer-events: none;
  }
}

/* ---------- V22 — What We Do -> third gold memory marker ----------
   Hero and About are unchanged. The blue What We Do panel is now a single
   desktop morph object using only one translate3d + one uniform scale.
   The third endpoint follows the same 14px / 10px marker rhythm.
   ------------------------------------------------------------------ */
@media (min-width: 861px) {
  .section--work[data-work-morph-scene] {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    color: var(--white);
    transform: none;
    border-radius: 0;
  }

  .work-morph-stage {
    position: relative;
    z-index: 238;
    width: 100%;
    margin: 0;
    padding: 120px max(4vw, calc((100vw - 1440px)/2)) 110px;
    overflow: hidden;
    background: var(--blue);
    color: var(--white);
    transform-origin: 0 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    min-height: 100vh;
  }

  .work-morph-stage.is-morph-active {
    position: fixed;
    left: var(--work-source-left, 0px);
    top: 0;
    margin: 0;
  }

  .work-morph-stage.is-dot-face {
    overflow: visible;
    background: transparent;
    pointer-events: none;
  }

  .work-morph-stage.is-dot-face > * {
    visibility: hidden;
  }

  .work-morph-stage.is-dot-face::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: var(--work-source-width, 100%);
    height: var(--work-source-width, 100%);
    border-radius: 50%;
    background: var(--gold);
    visibility: visible;
    pointer-events: none;
  }
}

/* ---------- More surprising hover behaviour ---------- */
.signature-link {
  position: relative;
  overflow: hidden;
}

.signature-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 3px;
  background: var(--gold);
  transition: right .28s var(--ease);
}

.signature-link:hover::before {
  right: 0;
}

.signature-link span,
.text-link span {
  display: inline-block;
  transition: transform .25s var(--ease);
}

.signature-link:hover span,
.text-link:hover span {
  transform: translate(5px,-5px);
}

/* Menu rows feel alive on hover */
.mega-menu__primary > a {
  position: relative;
  isolation: isolate;
}

.mega-menu__primary > a::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -20px;
  right: 100%;
  top: 8px;
  bottom: 8px;
  background: rgba(226,168,20,.08);
  transition: right .3s var(--ease);
}

.mega-menu__primary > a:hover::before {
  right: -20px;
}

/* Home What We Do system: active/hover row sweeps in */
.work-system__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.work-system__item::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 100% 0 0;
  background: rgba(255,255,255,.055);
  transition: right .32s var(--ease);
}

.work-system__item:hover::before,
.work-system__item.is-active::before {
  right: 0;
}

/* About landing route rows */
.route-row {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.route-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 100% 0 0;
  background: rgba(53,88,167,.055);
  transition: right .32s var(--ease);
}

.route-row:hover::before {
  right: 0;
}

/* Resource cover becomes a tactile object */
.publication-cover {
  transition: transform .38s var(--ease), box-shadow .38s ease;
}

.resource-cover:hover .publication-cover,
.resource-feature-page:hover .publication-cover {
  transform: rotate(.5deg) scale(1.025);
  box-shadow: 28px 34px 65px rgba(0,0,0,.18);
}

/* People cards feel less static */
.person-card {
  transition: transform .32s var(--ease);
}

.person-card:hover {
  transform: translateY(-8px);
}

.person-photo {
  overflow: hidden;
  transition: transform .35s var(--ease);
}

.person-card:hover .person-photo {
  transform: scale(.975);
}

.person-card h2 {
  transition: color .25s ease, transform .25s var(--ease);
}

.person-card:hover h2 {
  color: var(--blue);
  transform: translateX(5px);
}

/* Partner pathways lift and change tone */
.engage-pathway {
  transition:
    transform .3s var(--ease),
    background .3s ease,
    box-shadow .3s ease;
}

.engage-pathway:hover {
  z-index: 2;
  transform: translateY(-8px);
  background: white;
  box-shadow: 0 22px 45px rgba(38,37,37,.08);
}

/* Reveal headings through a mask rather than simple fade only */
.page-title.reveal,
.display-heading.reveal,
.investment-title.reveal {
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path .82s var(--ease),
    opacity .6s ease,
    transform .82s var(--ease);
}

.page-title.reveal.is-visible,
.display-heading.reveal.is-visible,
.investment-title.reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .editorial-header {
    grid-template-columns: 150px auto 1fr auto;
    gap: 17px;
  }

  .editorial-nav {
    gap: 20px;
  }
}

@media (max-width: 860px) {
  .editorial-header {
    grid-template-columns: 1fr auto;
  }

  .editorial-menu-button {
    width: 40px;
    min-height: 38px;
  }

  .menu-bars {
    width: 27px;
  }

  .editorial-nav,
  .editorial-partner {
    display: none;
  }

  .signature-hero {
    min-height: auto;
  }

  .signature-hero__stage {
    position: relative;
    width: 90vw;
    height: auto;
    min-height: 100vh;
    padding-top: 112px;
    overflow: visible;
  }

  .signature-hero__statement,
  .signature-media {
    transform: none !important;
    opacity: 1 !important;
  }

  .signature-hero__topline,
  .signature-hero__lower,
  .signature-scroll {
    opacity: 1 !important;
  }

  .signature-next {
    display: none;
  }

  .section--about .about-editorial__statement,
  .section--about .about-editorial__copy,
  .section--about .about-editorial__mark {
    transform: none !important;
    opacity: 1 !important;
  }

  .section--work {
    transform: none !important;
    border-radius: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signature-hero {
    min-height: auto;
  }

  .signature-hero__stage {
    position: relative;
    height: auto;
  }

  .signature-hero__statement,
  .signature-media,
  .section--about .about-editorial__statement,
  .section--about .about-editorial__copy,
  .section--about .about-editorial__mark,
  .section--work {
    transform: none !important;
    opacity: 1 !important;
  }

  .signature-next {
    display: none;
  }
}

/* ============================================================
   V23 — Complete homepage memory trail
   Investment Case -> dot 4
   Featured Resource -> dot 5
   Latest News -> dot 6
   Partner With Us -> dot 7

   The approved Hero/About/What We Do morphs above are untouched.
   These remaining sections share one lightweight engine: cached
   geometry + translate3d + uniform scale only. No fade, blur,
   spring, pulse, clip-path or per-child scroll animation.
   ============================================================ */
@media (min-width: 861px) {
  /* Outer elements become scroll scenes only. Their original visual skin
     moves into the inner stage so the section itself can reserve travel. */
  .section--investment[data-memory-morph-scene],
  .section--resource[data-memory-morph-scene],
  .section--news[data-memory-morph-scene],
  .partner-section[data-memory-morph-scene] {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    color: inherit;
  }

  .memory-morph-stage {
    position: relative;
    margin: 0;
    overflow: hidden;
    transform-origin: 0 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    min-height: 100vh;
  }

  .memory-morph-stage--investment {
    z-index: 237;
    width: 100%;
    padding: 120px max(4vw, calc((100vw - 1440px)/2));
    background: var(--charcoal);
    color: var(--white);
  }

  .memory-morph-stage--resource,
  .memory-morph-stage--news {
    width: var(--page);
    margin: 0 auto;
    padding: 120px 0;
    background: var(--paper);
    color: var(--charcoal);
  }

  .memory-morph-stage--resource { z-index: 236; }
  .memory-morph-stage--news { z-index: 235; }

  .memory-morph-stage--partner {
    z-index: 234;
    width: 100%;
    padding: 120px max(4vw, calc((100vw - 1440px)/2));
    background: var(--blue);
    color: var(--white);
  }

  .memory-morph-stage.is-morph-active {
    position: fixed;
    left: var(--memory-source-left, 0px);
    top: 0;
    margin: 0;
  }

  .memory-morph-stage.is-dot-face {
    overflow: visible;
    background: transparent;
    pointer-events: none;
  }

  .memory-morph-stage.is-dot-face > * {
    visibility: hidden;
  }

  .memory-morph-stage.is-dot-face::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: var(--memory-source-width, 100%);
    height: var(--memory-source-width, 100%);
    border-radius: 50%;
    background: var(--gold);
    visibility: visible;
    pointer-events: none;
  }
}

/* V29: takeover positioning removed. Native scroll owns the viewport. */

/* ============================================================
   V30 — Native snap scrolling, no synthetic settle
   ------------------------------------------------------------
   Each homepage chapter occupies one native viewport of scroll.
   Chrome/Safari's own scroll physics do the movement; mandatory
   snap locks the page onto a complete chapter after the gesture,
   and scroll-snap-stop: always prevents a strong wheel/trackpad
   movement from jumping over multiple chapters.
   ============================================================ */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: auto !important;
    scroll-snap-type: y mandatory;
  }

  body.home-page main > [data-hero-morph-scene],
  body.home-page main > [data-about-morph-scene],
  body.home-page main > [data-work-morph-scene],
  body.home-page main > [data-memory-morph-scene] {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.home-page .site-footer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Keep the browser's compositing path clean on older GPUs. */
  body.home-page [data-hero-morph],
  body.home-page [data-about-morph],
  body.home-page [data-work-morph],
  body.home-page [data-memory-morph] {
    contain: paint;
    transform-style: flat;
  }

  /* The dot pseudo-element must remain visible outside the source paint box. */
  body.home-page .is-dot-face {
    contain: none;
  }
}

/* ============================================================
   V32 — Stable full-viewport composition
   ------------------------------------------------------------
   Built on the approved V30 native scroll/snap engine.
   IMPORTANT: this layer does NOT change scene heights, snap
   geometry, scroll physics or morph timing. It only composes the
   contents inside each 100vh chapter so the page breathes from
   top to bottom and leaves a deliberate gap below the memory dots.
   ============================================================ */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  body.home-page {
    --chapter-top: clamp(116px, 16vh, 150px);
    --chapter-bottom: clamp(24px, 5vh, 54px);
    --chapter-gap: clamp(20px, 4vh, 52px);
    --chapter-small-gap: clamp(10px, 2vh, 22px);
  }

  /* Keep the approved V30 scene / stage sizing untouched.
     Only increase the internal top breathing room so the dot rail
     never visually collides with the section label. */
  body.home-page .about-morph-stage,
  body.home-page .work-morph-stage,
  body.home-page .memory-morph-stage--investment,
  body.home-page .memory-morph-stage--resource,
  body.home-page .memory-morph-stage--news,
  body.home-page .memory-morph-stage--partner {
    padding-top: var(--chapter-top);
    padding-bottom: var(--chapter-bottom);
  }

  /* ABOUT — label at top, editorial body uses the rest of the viewport. */
  body.home-page .about-morph-stage {
    display: flex;
    flex-direction: column;
  }

  body.home-page .about-editorial {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    align-items: center;
    align-content: center;
    padding-top: var(--chapter-gap);
    padding-bottom: var(--chapter-small-gap);
  }

  body.home-page .about-editorial__statement .display-heading {
    font-size: clamp(2.9rem, min(5.35vw, 8vh), 6rem) !important;
    line-height: .94;
  }

  body.home-page .about-editorial__copy p {
    font-size: clamp(.92rem, 1.75vh, 1.06rem);
  }

  /* WHAT WE DO — footer deliberately anchors the bottom of the chapter. */
  body.home-page .work-morph-stage {
    display: flex;
    flex-direction: column;
  }

  body.home-page .work-editorial {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    padding-top: var(--chapter-gap);
    align-items: center;
    gap: clamp(38px, 7vw, 112px);
  }

  body.home-page .work-editorial__intro {
    position: relative;
    top: auto;
    align-self: center;
  }

  body.home-page .work-editorial__intro h2 {
    font-size: clamp(2.8rem, min(5.45vw, 8vh), 6.3rem) !important;
  }

  body.home-page .work-editorial__lead {
    margin-top: clamp(15px, 3vh, 30px);
  }

  body.home-page .work-system {
    align-self: center;
    width: 100%;
  }

  body.home-page .work-system__item {
    padding-top: clamp(12px, 2.25vh, 22px);
    padding-bottom: clamp(12px, 2.25vh, 22px);
  }

  body.home-page .work-system__detail {
    margin-top: clamp(15px, 3vh, 34px);
    min-height: 0;
    padding-top: clamp(15px, 2.7vh, 26px);
    padding-bottom: clamp(15px, 2.7vh, 26px);
  }

  body.home-page .work-editorial__footer {
    flex: 0 0 auto;
    margin-top: clamp(14px, 2.5vh, 30px);
    padding-top: clamp(12px, 2vh, 22px);
  }

  /* INVESTMENT CASE — use the entire vertical canvas instead of leaving
     the lower third empty. The narrative opening stays near the top and
     the explanation / CTA become the grounded bottom edge. */
  body.home-page .memory-morph-stage--investment {
    display: flex;
    flex-direction: column;
  }

  body.home-page .investment-copy {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    padding-top: clamp(28px, 6vh, 72px);
    display: flex;
    flex-direction: column;
  }

  body.home-page .investment-kicker {
    font-size: clamp(2rem, min(4.2vw, 5.8vh), 4.5rem);
  }

  body.home-page .investment-title {
    font-size: clamp(3.45rem, min(7.7vw, 10.2vh), 8.5rem) !important;
    margin-top: clamp(4px, 1vh, 10px);
    margin-bottom: 0;
    line-height: .9;
  }

  body.home-page .investment-bottom {
    margin-top: auto;
    padding-top: clamp(20px, 3.5vh, 34px);
    padding-bottom: clamp(4px, 1vh, 12px);
  }

  body.home-page .investment-bottom p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: clamp(.92rem, 1.75vh, 1.03rem);
    line-height: 1.55;
  }

  /* RESOURCE — centre the two-column feature in the available vertical
     field, while allowing the artwork to grow on taller screens. */
  body.home-page .memory-morph-stage--resource {
    display: flex;
    flex-direction: column;
  }

  body.home-page .resource-grid {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    padding-top: var(--chapter-small-gap);
    padding-bottom: var(--chapter-small-gap);
    align-items: center;
  }

  body.home-page .publication-cover {
    width: min(370px, 42vh, 90%);
  }

  body.home-page .resource-copy h2 {
    font-size: clamp(2.7rem, min(4.75vw, 7.1vh), 5.2rem) !important;
  }

  /* NEWS — cards consume the remaining viewport instead of ending early. */
  body.home-page .memory-morph-stage--news {
    display: flex;
    flex-direction: column;
  }

  body.home-page .news-heading {
    flex: 0 0 auto;
    margin: clamp(22px, 4vh, 46px) 0 clamp(18px, 3vh, 34px);
  }

  body.home-page .news-heading .display-heading {
    font-size: clamp(2.9rem, min(5.25vw, 7.6vh), 5.9rem) !important;
  }

  body.home-page .news-grid {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }

  body.home-page .news-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.home-page .news-card__image,
  body.home-page .news-card--featured .news-card__image {
    flex: 1 1 auto;
    min-height: clamp(150px, 24vh, 330px);
  }

  body.home-page .news-card--featured .news-card__image {
    min-height: clamp(210px, 33vh, 430px);
  }

  body.home-page .news-card__content {
    flex: 0 0 auto;
  }

  /* PARTNER — treat the closing CTA as a full-screen editorial statement. */
  body.home-page .memory-morph-stage--partner {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.home-page .partner-section__inner {
    width: 100%;
    max-width: min(1120px, 82vw);
  }

  body.home-page .partner-section__inner h2 {
    font-size: clamp(4rem, min(8vw, 11vh), 9rem) !important;
    margin-top: clamp(18px, 3vh, 30px);
    margin-bottom: clamp(24px, 4.5vh, 46px);
  }
}

/* Short desktop / laptop viewports: compact ONLY internal rhythm.
   The V30 snap engine and scene heights remain untouched. */
@media (min-width: 861px) and (max-height: 720px) and (prefers-reduced-motion: no-preference) {
  body.home-page {
    --chapter-top: 112px;
    --chapter-bottom: 18px;
    --chapter-gap: 20px;
    --chapter-small-gap: 9px;
  }

  body.home-page .section-label {
    padding-bottom: 11px;
    font-size: .68rem;
  }

  body.home-page .about-editorial__statement .display-heading {
    font-size: clamp(2.55rem, 6.5vh, 4.65rem) !important;
  }

  body.home-page .work-editorial__intro h2 {
    font-size: clamp(2.45rem, 6.8vh, 4.5rem) !important;
  }

  body.home-page .work-editorial__lead {
    margin-top: 13px;
    font-size: .9rem;
  }

  body.home-page .work-system__item {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  body.home-page .work-system__title {
    font-size: clamp(1.15rem, 3.2vh, 1.85rem);
  }

  body.home-page .work-system__detail {
    margin-top: 11px;
    padding: 12px 20px;
  }

  body.home-page .work-system__detail p {
    font-size: clamp(.95rem, 2.5vh, 1.25rem);
  }

  body.home-page .work-editorial__footer {
    margin-top: 10px;
    padding-top: 9px;
    font-size: .76rem;
  }

  body.home-page .investment-copy {
    padding-top: 22px;
  }

  body.home-page .investment-kicker {
    font-size: clamp(1.7rem, 4.7vh, 3rem);
  }

  body.home-page .investment-title {
    font-size: clamp(3rem, 8.5vh, 5.5rem) !important;
  }

  body.home-page .investment-bottom {
    padding-top: 16px;
  }

  body.home-page .publication-cover {
    width: min(300px, 39vh, 86%);
  }

  body.home-page .resource-copy h2 {
    font-size: clamp(2.35rem, 6.2vh, 4rem) !important;
  }

  body.home-page .resource-copy h3,
  body.home-page .resource-copy > p:not(.eyebrow) {
    margin-bottom: 14px;
  }

  body.home-page .news-heading {
    margin: 17px 0 13px;
  }

  body.home-page .news-card__image {
    min-height: 18vh;
    margin-bottom: 12px;
  }

  body.home-page .news-card--featured .news-card__image {
    min-height: 25vh;
  }

  body.home-page .news-card h3 {
    font-size: 1rem;
  }

  body.home-page .partner-section__inner h2 {
    font-size: clamp(3.6rem, 9vh, 5.7rem) !important;
    margin: 15px 0 22px;
  }
}


/* ============================================================
   V33 — final morph runway + repaired What We Do selector rail
   ------------------------------------------------------------
   Scroll/morph engine remains V30/V32. These are layout/control
   fixes only.
   ============================================================ */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  /* V34: the real footer is now the final viewport/runway. This preserves
     the full 100vh of native travel Partner With Us needs to reach dot 7,
     but replaces the previous blank white screen with useful footer content. */
  body.home-page .site-footer.final-morph-runway {
    height: 100vh;
    min-height: 100vh;
    box-sizing: border-box;
    background: var(--charcoal);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    grid-template-rows: 1fr auto;
    align-content: stretch;
    align-items: start;
    padding-top: clamp(150px, 18vh, 190px);
    padding-bottom: 30px;
  }

  body.home-page .site-footer.final-morph-runway .footer-bottom {
    align-self: end;
    margin-top: 0;
  }

  /* The selector uses one consistent row metric. The connector is no
     longer positioned with guessed top/bottom offsets: its top is the
     centre of row 1 and its height is exactly two row heights, ending at
     the centre of row 3. */
  body.home-page .work-system {
    --work-row-height: clamp(58px, 8.4vh, 82px);
    --work-dot-center-x: 86px;
  }

  body.home-page .work-system__item {
    height: var(--work-row-height);
    min-height: var(--work-row-height);
    padding-top: 0;
    padding-bottom: 0;
  }

  body.home-page .work-system__line {
    display: block;
    left: var(--work-dot-center-x);
    top: calc(8px + (var(--work-row-height) / 2));
    bottom: auto;
    height: calc(var(--work-row-height) * 2);
    width: 1px;
    background: rgba(255,255,255,.32);
    z-index: 0;
    pointer-events: none;
  }

  body.home-page .work-system__dot {
    z-index: 2;
  }
}

@media (min-width: 861px) and (max-height: 720px) and (prefers-reduced-motion: no-preference) {
  body.home-page .work-system {
    --work-row-height: clamp(48px, 7.5vh, 58px);
  }
}


/* ============================================================
   V35 — Client-copy accuracy pass
   Content presentation only. No scroll, snap or morph geometry changes.
   ============================================================ */
body.home-page .news-grid.news-grid--single {
  grid-template-columns: 1fr;
}

@media (min-width: 861px) {
  body.home-page .news-grid.news-grid--single .news-card--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: clamp(28px, 5vw, 76px);
    align-items: end;
  }

  body.home-page .news-grid.news-grid--single .news-card--featured .news-card__image {
    margin-bottom: 0;
  }
}

body.home-page .footer-brand__name {
  display: block;
  margin-top: 18px;
  max-width: 320px;
  font-size: .88rem;
  line-height: 1.35;
  font-weight: 700;
}

body.home-page .footer-column__subheading {
  margin-top: 14px;
  margin-bottom: 0;
}


/* =========================================================
   V36 — ZiFPIM signature homepage CTAs
   Two different interface objects, one visual language.
   Lightweight: transform + width only; no blur/filter.
   ========================================================= */

.signature-hero__actions--v36 {
  align-items: center;
  gap: clamp(22px, 2.2vw, 38px);
}

/* Reset the old text-link treatment for the new CTA objects. */
.signature-hero__actions--v36 .signature-cta {
  position: relative;
  color: var(--charcoal);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* ABOUT — editorial navigation instrument */
.signature-cta--about {
  min-width: clamp(190px, 16vw, 250px);
  display: grid;
  grid-template-columns: auto auto minmax(34px, 1fr) 34px;
  align-items: center;
  column-gap: 10px;
  min-height: 56px;
}

.signature-cta--about .signature-cta__index {
  color: var(--gold);
  font-size: .64rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .12em;
}

.signature-cta--about .signature-cta__label {
  font-size: .76rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .09em;
  white-space: nowrap;
}

.signature-cta--about .signature-cta__rail {
  position: relative;
  display: block;
  height: 1px;
  background: rgba(38,37,37,.24);
  overflow: hidden;
}

.signature-cta--about .signature-cta__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-101%);
  transition: transform .34s var(--ease);
}

.signature-cta--about .signature-cta__arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(38,37,37,.28);
  border-radius: 50%;
  font-size: .9rem;
  transition:
    transform .28s var(--ease),
    background-color .28s ease,
    border-color .28s ease;
}

.signature-cta--about:hover .signature-cta__rail::after,
.signature-cta--about:focus-visible .signature-cta__rail::after {
  transform: translateX(0);
}

.signature-cta--about:hover .signature-cta__arrow,
.signature-cta--about:focus-visible .signature-cta__arrow {
  transform: translate(3px,-3px);
  background: var(--gold);
  border-color: var(--gold);
}

/* PARTNER — a compact ZiFPIM command object */
.signature-cta--partner {
  display: grid;
  grid-template-columns: minmax(176px, 1fr) 58px;
  min-height: 58px;
  background: var(--blue);
  color: #fff !important;
  overflow: hidden;
  isolation: isolate;
}

.signature-cta--partner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 58px 0 0;
  background: var(--charcoal);
  transform: translateX(-101%);
  transition: transform .34s var(--ease);
}

.signature-cta__partner-copy {
  min-width: 0;
  padding: 10px 18px 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.signature-cta__partner-copy small {
  color: rgba(255,255,255,.67);
  font-size: .54rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .14em;
}

.signature-cta__partner-copy strong {
  color: #fff;
  font-size: .76rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .075em;
  white-space: nowrap;
}

.signature-cta__partner-action {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--charcoal);
  overflow: hidden;
}

.signature-cta__partner-action i {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--charcoal);
  transform: scale(0);
  transition: transform .32s var(--ease);
}

.signature-cta__partner-action > span {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  transition: transform .28s var(--ease), color .22s ease;
}

.signature-cta--partner:hover::before,
.signature-cta--partner:focus-visible::before {
  transform: translateX(0);
}

.signature-cta--partner:hover .signature-cta__partner-action i,
.signature-cta--partner:focus-visible .signature-cta__partner-action i {
  transform: scale(3.9);
}

.signature-cta--partner:hover .signature-cta__partner-action > span,
.signature-cta--partner:focus-visible .signature-cta__partner-action > span {
  transform: translate(3px,-3px);
  color: var(--gold);
}

.signature-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* Shorter / narrower desktop viewports: keep the CTA pair composed. */
@media (max-width: 1120px) {
  .signature-hero__actions--v36 {
    gap: 18px;
  }

  .signature-cta--about {
    min-width: 176px;
  }

  .signature-cta--partner {
    grid-template-columns: minmax(158px, 1fr) 54px;
  }

  .signature-cta__partner-copy {
    padding-inline: 14px;
  }
}

@media (max-width: 820px) {
  .signature-hero__actions--v36 {
    width: 100%;
    justify-self: stretch;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .signature-cta--about,
  .signature-cta--partner {
    width: 100%;
    max-width: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signature-cta--about .signature-cta__rail::after,
  .signature-cta--about .signature-cta__arrow,
  .signature-cta--partner::before,
  .signature-cta__partner-action i,
  .signature-cta__partner-action > span {
    transition: none;
  }
}


/* =========================================================
   V37 — refined CTA system
   Cleaner, shorter, more designed.
   Removes long microcopy and gives both hero CTAs plus the
   header CTA a stronger, more distinctive identity.
   ========================================================= */

/* Header CTA: compact command object */
.editorial-partner--v37 {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto 34px;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(38,37,37,.18);
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0 0 0 12px;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
}

.editorial-partner--v37::after {
  display: none;
}

.editorial-partner--v37::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto auto 0 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(.18);
  transform-origin: left center;
  transition: transform .28s var(--ease);
}

.editorial-partner--v37 .editorial-partner__label {
  line-height: 1;
  white-space: nowrap;
}

.editorial-partner--v37 .editorial-partner__cell {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--charcoal) !important;
  font-size: .85rem;
  transition: transform .28s var(--ease), background-color .28s ease;
}

.editorial-partner--v37:hover,
.editorial-partner--v37:focus-visible {
  color: var(--charcoal);
}

.editorial-partner--v37:hover::before,
.editorial-partner--v37:focus-visible::before {
  transform: scaleX(1);
}

.editorial-partner--v37:hover .editorial-partner__cell,
.editorial-partner--v37:focus-visible .editorial-partner__cell {
  transform: translate(2px,-2px);
  background: var(--blue);
  color: #fff !important;
}

/* Hero CTA pair */
.signature-hero__actions--v37 {
  align-items: center;
  gap: clamp(16px, 1.9vw, 30px);
}

.signature-cta-v37 {
  position: relative;
  display: inline-grid;
  align-items: center;
  text-decoration: none;
  color: var(--charcoal);
  overflow: hidden;
  isolation: isolate;
  min-height: 58px;
  -webkit-tap-highlight-color: transparent;
}

.signature-cta-v37::before,
.signature-cta-v37::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.signature-cta-v37__text,
.signature-cta-v37__count,
.signature-cta-v37__arrow {
  position: relative;
  z-index: 1;
}

.signature-cta-v37__arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: .96rem;
  font-weight: 700;
  transition: transform .28s var(--ease), background-color .28s ease, color .28s ease;
}

.signature-cta-v37--about {
  grid-template-columns: 46px auto 44px;
  padding-right: 8px;
  border: 1px solid rgba(38,37,37,.14);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.signature-cta-v37--about::before {
  inset: 0;
  border-left: 3px solid var(--gold);
  border-top: 3px solid var(--gold);
  width: 26px;
  height: 26px;
  transition: transform .3s var(--ease);
}

.signature-cta-v37--about::after {
  right: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  border-right: 3px solid var(--blue);
  border-bottom: 3px solid var(--blue);
  transition: transform .3s var(--ease);
}

.signature-cta-v37--about .signature-cta-v37__count {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--gold);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  background: rgba(226,168,20,.08);
}

.signature-cta-v37--about .signature-cta-v37__text {
  padding: 0 18px 0 14px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}

.signature-cta-v37--about .signature-cta-v37__arrow {
  color: var(--blue);
}

.signature-cta-v37--about:hover::before,
.signature-cta-v37--about:focus-visible::before {
  transform: translate(3px,3px);
}

.signature-cta-v37--about:hover::after,
.signature-cta-v37--about:focus-visible::after {
  transform: translate(-3px,-3px);
}

.signature-cta-v37--about:hover .signature-cta-v37__arrow,
.signature-cta-v37--about:focus-visible .signature-cta-v37__arrow {
  transform: translate(4px,-4px);
  color: var(--gold);
}

.signature-cta-v37--partner {
  grid-template-columns: auto 48px;
  min-width: clamp(220px, 18vw, 280px);
  background: var(--blue);
  color: #fff;
  box-shadow: 12px 12px 0 rgba(226,168,20,.16);
}

.signature-cta-v37--partner::before {
  inset: 0;
  background: linear-gradient(90deg, var(--blue) 0%, var(--charcoal) 100%);
}

.signature-cta-v37--partner::after {
  inset: auto auto 0 0;
  width: 100%;
  height: 3px;
  background: var(--gold);
  transform: scaleX(.28);
  transform-origin: left center;
  transition: transform .32s var(--ease);
}

.signature-cta-v37--partner .signature-cta-v37__text {
  padding: 0 18px;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
}

.signature-cta-v37--partner .signature-cta-v37__arrow {
  background: var(--gold);
  color: var(--charcoal);
}

.signature-cta-v37--partner:hover,
.signature-cta-v37--partner:focus-visible {
  color: #fff;
}

.signature-cta-v37--partner:hover::after,
.signature-cta-v37--partner:focus-visible::after {
  transform: scaleX(1);
}

.signature-cta-v37--partner:hover .signature-cta-v37__arrow,
.signature-cta-v37--partner:focus-visible .signature-cta-v37__arrow {
  transform: translate(4px,-4px);
  background: #fff;
}

.signature-cta-v37:focus-visible,
.editorial-partner--v37:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

@media (max-width: 1120px) {
  .signature-hero__actions--v37 {
    gap: 14px;
  }

  .signature-cta-v37--partner {
    min-width: 205px;
  }
}

@media (max-width: 820px) {
  .signature-hero__actions--v37 {
    width: 100%;
    justify-self: stretch;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .signature-cta-v37 {
    width: 100%;
    max-width: 360px;
  }

  .signature-cta-v37--partner {
    min-width: 0;
  }

  .editorial-partner--v37 {
    grid-template-columns: auto 30px;
    min-height: 30px;
    padding-left: 10px;
    font-size: .62rem;
  }

  .editorial-partner--v37 .editorial-partner__cell {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-partner--v37::before,
  .editorial-partner--v37 .editorial-partner__cell,
  .signature-cta-v37,
  .signature-cta-v37::before,
  .signature-cta-v37::after,
  .signature-cta-v37__arrow {
    transition: none !important;
  }
}


/* =========================================================
   V38 — CTA cleanup
   - remove hero Partner With Us CTA
   - remove arrow glyph from header Partner CTA and hero About CTA
   - only essential file updates
   ========================================================= */

.signature-hero__actions--v37 {
  justify-self: end;
}

.signature-hero__actions--v37 .signature-cta-v37--about {
  grid-template-columns: 46px auto;
  padding-right: 16px;
}

.signature-hero__actions--v37 .signature-cta-v37--about .signature-cta-v37__arrow {
  display: none;
}

.editorial-partner--v37 {
  grid-template-columns: auto 20px;
}

.editorial-partner--v37 .editorial-partner__cell {
  width: 20px;
  height: 34px;
  font-size: 0;
  background: transparent;
  position: relative;
}

.editorial-partner--v37 .editorial-partner__cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  background: rgba(38,37,37,.16);
  transform: translateY(-50%);
}

.editorial-partner--v37:hover .editorial-partner__cell,
.editorial-partner--v37:focus-visible .editorial-partner__cell {
  transform: none;
  background: transparent;
}

@media (max-width: 820px) {
  .signature-hero__actions--v37 {
    justify-self: start;
  }

  .editorial-partner--v37 {
    grid-template-columns: auto 16px;
  }

  .editorial-partner--v37 .editorial-partner__cell {
    width: 16px;
    height: 30px;
  }
}


/* =========================================================
   V39 — Creative hero refresh
   More distinctive composition.
   The image panel now sits as a true right-hand hero object,
   not as a strip at the bottom.
   ========================================================= */

.signature-hero__core {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr);
  align-items: end;
  gap: clamp(30px, 3vw, 54px);
  padding-top: 24px;
}

.signature-hero__content {
  display: grid;
  align-content: start;
  min-width: 0;
}

.signature-hero__statement {
  padding-top: 0;
}

.signature-hero__lower {
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 2.4vw, 40px);
  align-items: end;
  padding: 28px 0 0;
}

.signature-hero__intro {
  max-width: 630px;
}

.signature-hero__chapter-rail {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--grey);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.signature-hero__chapter-rail i {
  width: 18px;
  height: 1px;
  background: var(--gold);
}

.signature-media {
  position: relative;
  align-self: stretch;
  min-height: clamp(400px, 60vh, 610px);
  height: auto;
  border-left: 1px solid rgba(38,37,37,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,0) 28%),
    radial-gradient(circle at 74% 14%, rgba(226,168,20,.28), transparent 24%),
    radial-gradient(circle at 18% 80%, rgba(53,88,167,.18), transparent 32%),
    linear-gradient(145deg, #f1efe7 0%, #eae6da 55%, #f4f1e9 100%);
  box-shadow: 0 24px 60px rgba(38,37,37,.08);
}

.signature-media__backplate {
  position: absolute;
  z-index: 0;
  inset: 18px -16px -16px 48px;
  background: linear-gradient(180deg, rgba(53,88,167,.12), rgba(38,37,37,.08));
  border: 1px solid rgba(38,37,37,.06);
}

.signature-media__eyebrow {
  position: absolute;
  z-index: 7;
  left: -1px;
  top: 34px;
  padding: 10px 18px 10px 16px;
  background: var(--charcoal);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.signature-media__motto {
  right: 20px;
  top: 20px;
}

.signature-media__open-frame {
  left: 0;
  top: 0;
  width: 46%;
  height: calc(100% - 52px);
}

.signature-media__placeholder {
  inset: 52px 28px 78px 28px;
  z-index: 2;
  border: 1px solid rgba(38,37,37,.08);
  background:
    linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%),
    linear-gradient(90deg, rgba(38,37,37,.07), rgba(38,37,37,0) 42%);
}

.signature-media__placeholder::after {
  display: none;
}

.signature-media__placeholder img {
  width: min(230px, 18vw);
  opacity: .09;
}

.signature-media__placeholder > div {
  right: 20px;
  bottom: 18px;
  text-align: right;
  background: rgba(247,246,242,.88);
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
}

.signature-media__impact-card {
  position: absolute;
  z-index: 7;
  left: 18px;
  bottom: 92px;
  max-width: 240px;
  padding: 14px 16px 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(38,37,37,.08);
}

.signature-media__impact-card small {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.signature-media__impact-card strong {
  display: block;
  font-size: 1.08rem;
  line-height: 1.15;
  font-weight: 800;
}

.signature-media__rail {
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  background: rgba(38,37,37,.92);
  color: #fff;
  padding: 12px 18px;
}

.signature-media__rail i {
  background: var(--gold);
}

.signature-scroll {
  padding-top: 20px;
}

@media (max-width: 1100px) {
  .signature-hero__core {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .signature-media {
    min-height: 360px;
  }

  .signature-media__backplate {
    inset: 16px -10px -10px 30px;
  }

  .signature-hero__chapter-rail {
    margin-top: 24px;
  }
}

@media (max-width: 800px) {
  .signature-hero__lower {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .signature-media {
    min-height: 320px;
  }

  .signature-media__placeholder {
    inset: 46px 18px 68px 18px;
  }

  .signature-media__eyebrow {
    top: 18px;
    max-width: calc(100% - 36px);
    font-size: .56rem;
  }

  .signature-media__impact-card {
    left: 14px;
    bottom: 78px;
    max-width: 210px;
    padding: 12px 14px 14px;
  }

  .signature-media__impact-card strong {
    font-size: .98rem;
  }
}

@media (max-width: 600px) {
  .signature-hero__chapter-rail {
    gap: 8px;
    font-size: .58rem;
  }

  .signature-media {
    min-height: 290px;
  }

  .signature-media__backplate {
    inset: 12px -6px -6px 18px;
  }

  .signature-media__motto {
    right: 14px;
    top: 14px;
    min-width: 148px;
    padding: 10px 12px;
    font-size: .68rem;
  }

  .signature-media__open-frame {
    width: 58%;
  }

  .signature-media__placeholder img {
    width: 120px;
  }

  .signature-media__impact-card {
    max-width: 170px;
  }

  .signature-media__rail {
    font-size: .54rem;
    gap: 7px;
    padding-inline: 10px;
  }

  .signature-media__rail i {
    width: 12px;
  }
}


/* =========================================================
   V40 — Full-bleed editorial hero
   Inspired by the reference's cinematic simplicity, while
   keeping ZiFPIM's own typography, copy and colour system.
   ========================================================= */

/* Let the hero own the entire first viewport. */
.signature-hero__stage {
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #fff;
  background: var(--charcoal);
}

.signature-hero__topline {
  position: absolute;
  z-index: 12;
  top: 116px;
  left: max(3.2vw, calc((100vw - 1480px)/2));
  right: max(3.2vw, calc((100vw - 1480px)/2));
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.30);
  color: rgba(255,255,255,.88);
}

.signature-hero__fullscreen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #202322;
}

.signature-hero__photo {
  position: absolute;
  inset: 0;
  background-image: url("/assets/images/zifpim-hero-local.png");
  background-size: cover;
  background-position: center 44%;
  transform: scale(1.015);
}

.signature-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18,20,20,.86) 0%, rgba(18,20,20,.66) 38%, rgba(18,20,20,.20) 68%, rgba(18,20,20,.12) 100%),
    linear-gradient(180deg, rgba(18,20,20,.28) 0%, rgba(18,20,20,.02) 34%, rgba(18,20,20,.38) 100%);
}

.signature-hero__fullscreen-content {
  position: relative;
  z-index: 4;
  width: min(93.6vw, 1500px);
  height: 100%;
  margin: 0 auto;
  padding: 170px 0 46px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
}

.signature-hero__fullscreen .signature-hero__statement {
  align-self: center;
  padding: 42px 0 70px;
}

.signature-hero__fullscreen .signature-hero__statement h1 {
  max-width: 1230px;
  color: #fff;
  font-size: clamp(4.5rem, 7.35vw, 8.5rem);
  line-height: .86;
  letter-spacing: -.068em;
  font-weight: 650;
  text-shadow: 0 2px 22px rgba(0,0,0,.16);
}

.signature-hero__fullscreen .signature-line--blue {
  color: var(--gold);
  font-style: italic;
  font-weight: 520;
}

.signature-hero__fullscreen-bottom {
  display: grid;
  grid-template-columns: minmax(0, 650px) auto;
  align-items: end;
  gap: clamp(28px, 6vw, 110px);
  padding-right: 6vw;
}

.signature-hero__fullscreen .signature-hero__intro {
  max-width: 650px;
  color: rgba(255,255,255,.92);
  font-size: clamp(.98rem, 1.05vw, 1.13rem);
  line-height: 1.52;
  text-shadow: 0 1px 12px rgba(0,0,0,.20);
}

.signature-hero__fullscreen .signature-hero__actions {
  justify-self: end;
}

/* About CTA becomes a quiet glass/editorial control on the photograph. */
.signature-hero__fullscreen .signature-cta-v37--about {
  grid-template-columns: 46px auto;
  min-height: 54px;
  padding-right: 18px;
  border-color: rgba(255,255,255,.34);
  background: rgba(10,12,12,.32);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.signature-hero__fullscreen .signature-cta-v37--about::before {
  border-left-color: var(--gold);
  border-top-color: var(--gold);
}

.signature-hero__fullscreen .signature-cta-v37--about::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}

.signature-hero__fullscreen .signature-cta-v37__count {
  color: var(--gold);
  background: rgba(226,168,20,.10);
}

.signature-hero__fullscreen .signature-cta-v37__text {
  color: #fff;
}

.signature-hero__motto-v40 {
  position: absolute;
  z-index: 8;
  right: 0;
  top: 168px;
  display: grid;
  gap: 2px;
  min-width: 175px;
  padding: 12px 14px 13px;
  border-top: 4px solid var(--gold);
  background: rgba(10,12,12,.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: .74rem;
  line-height: 1.25;
}

.signature-hero__motto-v40 strong {
  color: var(--gold);
}

.signature-scroll {
  position: absolute;
  z-index: 8;
  right: max(3.2vw, calc((100vw - 1480px)/2));
  bottom: 22px;
  color: rgba(255,255,255,.78);
  padding-top: 0;
}

.signature-scroll i {
  background: var(--gold);
}

.signature-next {
  display: none !important;
}

/* V41: retain the existing/original ZiFPIM header treatment over the full-bleed hero. */

/* Morph engine: keep all hero contents as one object. */
.signature-hero__fullscreen,
.signature-hero__fullscreen-content,
.signature-hero__photo,
.signature-hero__shade {
  will-change: auto;
}

@media (max-width: 1100px) {
  .signature-hero__fullscreen-content {
    width: 90vw;
    padding-top: 150px;
    padding-bottom: 40px;
  }

  .signature-hero__topline {
    left: 5vw;
    right: 5vw;
    top: 104px;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(4rem, 8.6vw, 6.8rem);
  }

  .signature-hero__fullscreen-bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-right: 0;
  }

  .signature-hero__motto-v40 {
    right: 0;
    top: 144px;
  }
}

@media (max-width: 860px) {
  .signature-hero,
  .signature-hero__stage {
    min-height: 100vh;
    height: auto;
  }

  .signature-hero__stage {
    position: relative;
  }

  .signature-hero__fullscreen {
    position: relative;
    min-height: 100svh;
  }

  .signature-hero__fullscreen-content {
    min-height: 100svh;
    padding: 150px 0 42px;
    grid-template-rows: 1fr auto;
  }

  .signature-hero__photo {
    background-position: 58% center;
  }

  .signature-hero__shade {
    background:
      linear-gradient(90deg, rgba(18,20,20,.83), rgba(18,20,20,.36)),
      linear-gradient(180deg, rgba(18,20,20,.26), rgba(18,20,20,.48));
  }

  .signature-hero__fullscreen .signature-hero__statement {
    padding: 24px 0 48px;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(3.5rem, 10.8vw, 6rem);
    line-height: .89;
  }

  .signature-hero__fullscreen-bottom {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .signature-hero__fullscreen .signature-hero__actions {
    justify-self: start;
  }

  .signature-hero__motto-v40 {
    display: none;
  }

  .signature-scroll {
    display: none;
  }
}

@media (max-width: 600px) {
  .signature-hero__topline {
    top: 88px;
    font-size: .58rem;
  }

  .signature-hero__topline span:last-child {
    display: none;
  }

  .signature-hero__fullscreen-content {
    width: 90vw;
    padding-top: 120px;
    padding-bottom: 34px;
  }

  .signature-hero__fullscreen .signature-hero__statement {
    align-self: end;
    padding-bottom: 34px;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(3rem, 13vw, 4.7rem);
    line-height: .91;
    letter-spacing: -.055em;
  }

  .signature-hero__fullscreen .signature-hero__intro {
    font-size: .92rem;
  }

  .signature-hero__photo {
    background-position: 62% center;
  }
}


/* =========================================================
   V42 — opaque header + local hero image
   Keeps the full-bleed hero while restoring the solid paper header.
   ========================================================= */
.home-page .editorial-header,
.editorial-header {
  background: var(--paper);
  color: var(--charcoal);
}

.editorial-header::before,
.editorial-header.is-scrolled::before {
  opacity: 0 !important;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.editorial-header {
  border-bottom-color: rgba(38,37,37,.16);
}

.editorial-header.is-scrolled {
  background: var(--paper);
  border-bottom-color: rgba(38,37,37,.11);
}

.signature-hero__photo {
  background-image: url("/assets/images/zifpim-hero-local.png");
}


/* =========================================================
   V43 — hero safe text zone
   Keep the full-bleed hero, but ensure the large headline does not
   run over the subject on the right side of the photograph.
   ========================================================= */

/* Strengthen the left-side reading field and reserve the right for the subject. */
.signature-hero__shade {
  background:
    linear-gradient(90deg,
      rgba(18,20,20,.90) 0%,
      rgba(18,20,20,.76) 30%,
      rgba(18,20,20,.38) 54%,
      rgba(18,20,20,.08) 71%,
      rgba(18,20,20,.05) 100%),
    linear-gradient(180deg,
      rgba(18,20,20,.24) 0%,
      rgba(18,20,20,.03) 36%,
      rgba(18,20,20,.36) 100%);
}

.signature-hero__fullscreen .signature-hero__statement {
  align-self: center;
  padding: 42px 0 64px;
  width: min(66vw, 980px);
  max-width: 980px;
}

.signature-hero__fullscreen .signature-hero__statement h1 {
  max-width: min(66vw, 980px);
}

.signature-hero__fullscreen-bottom {
  grid-template-columns: minmax(0, 600px) auto;
  gap: clamp(24px, 5vw, 90px);
  padding-right: clamp(260px, 27vw, 420px);
}

.signature-hero__intro {
  max-width: 600px;
}

/* Keep the CTA anchored within the left composition rather than floating into the subject zone. */
.signature-hero__actions {
  justify-self: start;
}

/* Move the small motto card further right/up so it lives with the image subject area, not the type area. */
.signature-media__motto {
  right: 18px;
  top: 22px;
}

@media (max-width: 1400px) {
  .signature-hero__fullscreen .signature-hero__statement {
    width: min(64vw, 900px);
    max-width: 900px;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    max-width: min(64vw, 900px);
    font-size: clamp(4rem, 7vw, 7.5rem);
  }

  .signature-hero__fullscreen-bottom {
    padding-right: clamp(200px, 21vw, 320px);
  }
}

@media (max-width: 1100px) {
  .signature-hero__shade {
    background:
      linear-gradient(180deg,
        rgba(18,20,20,.58) 0%,
        rgba(18,20,20,.28) 28%,
        rgba(18,20,20,.32) 100%),
      linear-gradient(90deg,
        rgba(18,20,20,.62) 0%,
        rgba(18,20,20,.38) 45%,
        rgba(18,20,20,.16) 100%);
  }

  .signature-hero__fullscreen .signature-hero__statement,
  .signature-hero__fullscreen .signature-hero__statement h1 {
    width: min(82vw, 860px);
    max-width: min(82vw, 860px);
  }

  .signature-hero__fullscreen-bottom {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-right: 0;
  }

  .signature-hero__actions {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .signature-hero__fullscreen .signature-hero__statement,
  .signature-hero__fullscreen .signature-hero__statement h1 {
    width: 100%;
    max-width: 100%;
  }
}


/* =========================================================
   V44 — fit hero content within every viewport
   - removes floating motto card
   - moves tagline into hero topline
   - uses viewport-aware type and spacing
   - keeps subject-safe image composition
   ========================================================= */

.signature-media__motto {
  display: none !important;
}

/* Hero content is vertically composed inside the available viewport,
   accounting for the fixed 92px header. */
.signature-hero__fullscreen-content {
  height: 100%;
  padding:
    clamp(126px, 14vh, 154px)
    max(3.2vw, calc((100vw - 1480px)/2))
    clamp(22px, 3vh, 34px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  box-sizing: border-box;
}

/* Topline now carries the brand tagline on the right. */
.signature-hero__topline {
  position: static;
  z-index: 12;
  left: auto;
  right: auto;
  top: auto;
  width: 100%;
  padding: 0 0 clamp(10px, 1.5vh, 14px);
  margin: 0;
}

.signature-hero__topline span:last-child {
  text-align: right;
  color: rgba(255,255,255,.94);
}

/* The headline scales against BOTH width and viewport height so it
   never pushes the intro/action below the fold. */
.signature-hero__fullscreen .signature-hero__statement {
  align-self: center;
  width: min(63vw, 920px);
  max-width: 920px;
  padding: clamp(14px, 2.4vh, 28px) 0 clamp(12px, 2.2vh, 24px);
}

.signature-hero__fullscreen .signature-hero__statement h1 {
  max-width: 100%;
  font-size: clamp(3rem, min(6.15vw, 9.2vh), 7.15rem);
  line-height: .88;
}

/* Lower copy is held inside the viewport instead of being allowed to
   drift below the screen. */
.signature-hero__fullscreen-bottom {
  align-self: end;
  grid-template-columns: minmax(0, 580px) auto;
  gap: clamp(18px, 3vw, 48px);
  padding-right: clamp(210px, 23vw, 350px);
  padding-bottom: 0;
}

.signature-hero__intro {
  max-width: 580px;
  font-size: clamp(.84rem, min(1.02vw, 1.8vh), 1rem);
  line-height: 1.45;
}

.signature-hero__actions {
  align-self: end;
  justify-self: start;
}

/* Compact desktop heights: this is the case shown in the screenshot.
   Reduce type/spacing before anything can be cut off. */
@media (min-width: 901px) and (max-height: 820px) {
  .signature-hero__fullscreen-content {
    padding-top: 112px;
    padding-bottom: 18px;
  }

  .signature-hero__topline {
    padding-bottom: 9px;
    font-size: .58rem;
  }

  .signature-hero__fullscreen .signature-hero__statement {
    width: min(61vw, 850px);
    padding: 10px 0 10px;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(2.8rem, min(5.65vw, 8.3vh), 6.4rem);
    line-height: .86;
  }

  .signature-hero__fullscreen-bottom {
    grid-template-columns: minmax(0, 545px) auto;
    gap: 20px;
    padding-right: clamp(190px, 21vw, 310px);
  }

  .signature-hero__intro {
    max-width: 545px;
    font-size: .82rem;
    line-height: 1.38;
  }

  .signature-cta-v37--about {
    min-height: 48px;
  }

  .signature-scroll {
    padding-top: 8px;
  }
}

@media (min-width: 901px) and (max-height: 700px) {
  .signature-hero__fullscreen-content {
    padding-top: 102px;
    padding-bottom: 12px;
  }

  .signature-hero__fullscreen .signature-hero__statement {
    width: min(59vw, 790px);
    padding: 7px 0;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(2.45rem, min(5.15vw, 7.5vh), 5.7rem);
  }

  .signature-hero__intro {
    font-size: .76rem;
    line-height: 1.34;
  }

  .signature-hero__fullscreen-bottom {
    padding-right: clamp(170px, 19vw, 280px);
  }
}

/* Tablet: keep everything visible and don't force desktop-safe-zone
   widths once the viewport becomes narrow. */
@media (max-width: 1100px) {
  .signature-hero__fullscreen-content {
    padding:
      clamp(112px, 13vh, 138px)
      5vw
      clamp(18px, 2.5vh, 28px);
  }

  .signature-hero__fullscreen .signature-hero__statement,
  .signature-hero__fullscreen .signature-hero__statement h1 {
    width: min(78vw, 820px);
    max-width: min(78vw, 820px);
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(3rem, min(8vw, 8.7vh), 6.2rem);
  }

  .signature-hero__fullscreen-bottom {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-right: 0;
  }
}

/* Mobile: smaller type, tighter spacing, complete content visible. */
@media (max-width: 760px) {
  .signature-hero__fullscreen-content {
    padding: 94px 5vw 16px;
  }

  .signature-hero__topline {
    gap: 12px;
    font-size: .52rem;
    padding-bottom: 8px;
  }

  .signature-hero__topline span:first-child {
    max-width: 48%;
  }

  .signature-hero__topline span:last-child {
    display: block !important;
    max-width: 48%;
  }

  .signature-hero__fullscreen .signature-hero__statement {
    width: 100%;
    max-width: 100%;
    padding: 10px 0 8px;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2.35rem, min(11.5vw, 7.4vh), 4.7rem);
    line-height: .9;
  }

  .signature-hero__intro {
    max-width: 100%;
    font-size: clamp(.74rem, 3.2vw, .9rem);
    line-height: 1.35;
  }

  .signature-hero__fullscreen-bottom {
    gap: 10px;
  }

  .signature-hero__actions {
    margin-top: 0;
  }

  .signature-scroll {
    display: none;
  }
}

/* Very short phones / landscape phones */
@media (max-height: 560px) {
  .signature-hero__fullscreen-content {
    padding-top: 78px;
    padding-bottom: 8px;
  }

  .signature-hero__topline {
    font-size: .46rem;
    padding-bottom: 5px;
  }

  .signature-hero__fullscreen .signature-hero__statement {
    padding: 4px 0;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(2rem, min(7vw, 10.2vh), 4.4rem);
    line-height: .86;
  }

  .signature-hero__intro {
    font-size: .68rem;
    line-height: 1.26;
  }

  .signature-hero__fullscreen-bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .signature-cta-v37--about {
    min-height: 42px;
  }
}


/* =========================================================
   V45 — slightly smaller hero headline
   ========================================================= */

.signature-hero__fullscreen .signature-hero__statement h1 {
  font-size: clamp(2.85rem, min(5.75vw, 8.5vh), 6.75rem);
}

@media (min-width: 901px) and (max-height: 820px) {
  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(2.65rem, min(5.25vw, 7.8vh), 6rem);
  }
}

@media (min-width: 901px) and (max-height: 700px) {
  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(2.3rem, min(4.8vw, 7.1vh), 5.35rem);
  }
}

@media (max-width: 1100px) {
  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(2.75rem, min(7.4vw, 8.2vh), 5.8rem);
  }
}

@media (max-width: 760px) {
  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(2.15rem, min(10.7vw, 7vh), 4.4rem);
  }
}

@media (max-height: 560px) {
  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(1.9rem, min(6.5vw, 9.5vh), 4.1rem);
  }
}


/* =========================================================
   V47 — stacked hero copy
   - restore top-right metadata
   - intro directly beneath headline
   - About Us CTA beneath intro, left aligned
   - headline broken into requested lines and centred vertically
   ========================================================= */

/* Make the hero text a single left-aligned vertical stack. */
.signature-hero__fullscreen-content {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: clamp(118px, 13.5vh, 148px) max(3.2vw, calc((100vw - 1480px)/2)) clamp(28px, 3vh, 36px);
  box-sizing: border-box;
}

.signature-hero__left-stack {
  width: min(53vw, 690px);
  max-width: 690px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(18px, 2.4vh, 26px);
}

.signature-hero__fullscreen .signature-hero__statement {
  position: static;
  width: 100%;
  max-width: none;
  padding: 0;
  transform: none;
  text-align: left;
}

.signature-hero__fullscreen .signature-hero__statement h1 {
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-size: clamp(2.75rem, min(4.25vw, 7.2vh), 5.2rem);
  line-height: .9;
  text-align: left;
}

.signature-hero__fullscreen-bottom {
  position: static;
  display: block;
  width: 100%;
  padding: 0;
}

.signature-hero__copygroup {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.signature-hero__intro {
  max-width: 560px;
  margin: 0;
}

.signature-hero__actions {
  margin-top: 0;
  justify-self: start;
  align-self: flex-start;
}

/* Keep the hero metadata correct. */
.signature-hero__topline span:last-child {
  display: block !important;
  text-align: right;
  color: rgba(255,255,255,.88);
}

@media (min-width: 901px) and (max-height: 820px) {
  .signature-hero__fullscreen-content {
    padding-top: 108px;
    padding-bottom: 18px;
  }

  .signature-hero__left-stack {
    width: min(52vw, 650px);
    max-width: 650px;
    gap: 14px;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(2.55rem, min(4vw, 6.75vh), 4.85rem);
  }

  .signature-hero__copygroup {
    max-width: 530px;
    gap: 14px;
  }
}

@media (min-width: 901px) and (max-height: 700px) {
  .signature-hero__fullscreen-content {
    padding-top: 100px;
    padding-bottom: 12px;
  }

  .signature-hero__left-stack {
    width: min(50vw, 610px);
    max-width: 610px;
    gap: 12px;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(2.25rem, min(3.8vw, 6.05vh), 4.35rem);
  }

  .signature-hero__copygroup {
    gap: 12px;
  }
}

@media (max-width: 1100px) {
  .signature-hero__fullscreen-content {
    padding: clamp(110px, 13vh, 136px) 5vw clamp(22px, 2.6vh, 30px);
  }

  .signature-hero__left-stack {
    width: min(72vw, 760px);
    max-width: 760px;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(2.55rem, min(6.6vw, 7.4vh), 5.4rem);
  }

  .signature-hero__copygroup,
  .signature-hero__intro {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .signature-hero__fullscreen-content {
    align-items: center;
    padding: 94px 5vw 16px;
  }

  .signature-hero__left-stack {
    width: 100%;
    max-width: 100%;
    gap: 12px;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(2.05rem, min(10.3vw, 6.8vh), 4.1rem);
  }

  .signature-hero__copygroup {
    gap: 12px;
  }
}

@media (max-height: 560px) {
  .signature-hero__fullscreen-content {
    padding-top: 78px;
    padding-bottom: 8px;
  }

  .signature-hero__left-stack {
    width: min(55vw, 560px);
    max-width: 560px;
    gap: 10px;
  }

  .signature-hero__fullscreen .signature-hero__statement h1 {
    font-size: clamp(1.85rem, min(4.7vw, 8.9vh), 3.9rem);
  }

  .signature-hero__copygroup {
    gap: 10px;
  }
}


/* =========================================================
   V48 — clean hero bottom line
   - floating tagline card removed
   - HARARE metadata restored
   - About Us sits on same bottom line as Scroll to explore
   ========================================================= */

.signature-hero__motto-v40 {
  display: none !important;
}

/* Keep the intro immediately under the headline, but remove the button
   from the copy flow so it can share the bottom baseline with Scroll. */
.signature-hero__copygroup {
  gap: 0;
}

.signature-hero__actions {
  position: absolute;
  z-index: 9;
  left: 0;
  bottom: 22px;
  margin: 0;
  align-self: auto;
  justify-self: auto;
}

/* Scroll stays exactly on its existing right-hand baseline. */
.signature-scroll {
  bottom: 22px;
}

/* Make sure the lower CTA line remains comfortable on shorter screens. */
@media (min-width: 901px) and (max-height: 820px) {
  .signature-hero__actions,
  .signature-scroll {
    bottom: 16px;
  }
}

@media (min-width: 901px) and (max-height: 700px) {
  .signature-hero__actions,
  .signature-scroll {
    bottom: 10px;
  }
}

/* On narrower screens, preserve the same baseline without allowing overlap. */
@media (max-width: 900px) {
  .signature-hero__actions {
    left: 0;
    bottom: 16px;
  }

  .signature-scroll {
    bottom: 16px;
  }
}

@media (max-width: 760px) {
  .signature-hero__actions {
    bottom: 12px;
  }
}


/* =========================================================
   V49 — align hero action with copy
   - About Us starts on the exact same left edge as hero text
   - bottom-right label becomes the ZiFPIM tagline
   ========================================================= */

.signature-hero__actions {
  left: max(3.2vw, calc((100vw - 1480px)/2));
}

/* Give the longer tagline enough room without moving its baseline. */
.signature-scroll {
  min-width: 250px;
}

.signature-scroll span {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .signature-hero__actions {
    left: 5vw;
  }
}

@media (max-width: 760px) {
  .signature-hero__actions {
    left: 5vw;
  }

  .signature-scroll {
    min-width: 0;
  }

  .signature-scroll span {
    white-space: normal;
    text-align: right;
  }
}


/* =========================================================
   V50 — About ZiFPIM editorial refinement
   - removes the decorative/broken logo mark
   - right-aligns the statement toward the body copy
   - pulls statement and copy into one editorial composition
   - adds a restrained gold connector
   - refines Learn About ZiFPIM action
   Morph geometry / scroll engine untouched.
   ========================================================= */

body.home-page .about-editorial {
  width: min(100%, 1120px);
  margin-left: auto;
  margin-right: 0;
  padding-right: 0;
  grid-template-columns: minmax(360px, 1fr) 2px minmax(300px, .72fr);
  gap: clamp(24px, 2.7vw, 46px);
  align-items: center;
}

body.home-page .about-editorial__statement {
  justify-self: end;
  max-width: 700px;
}

body.home-page .about-editorial__statement .display-heading {
  max-width: 13.5ch !important;
  margin: 0;
  text-align: right !important;
  line-height: .94;
}

body.home-page .about-editorial__connector {
  width: 2px;
  height: clamp(66px, 10vh, 92px);
  align-self: center;
  justify-self: center;
  background: var(--gold);
}

body.home-page .about-editorial__copy {
  align-self: center;
  max-width: 410px;
  padding-bottom: 0;
}

body.home-page .about-editorial__copy p {
  margin: 0 0 26px;
  line-height: 1.62;
}

body.home-page .about-editorial__copy .text-link {
  position: relative;
  border-bottom: 0;
  padding: 0 0 10px;
  gap: 12px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

body.home-page .about-editorial__copy .text-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 2px;
  background: var(--gold);
  transition: width .3s var(--ease);
}

body.home-page .about-editorial__copy .text-link:hover::after {
  width: 100%;
}

/* Remove any legacy decorative mark if an older cached HTML version is loaded. */
body.home-page .about-editorial__mark {
  display: none !important;
}

/* Tablet / smaller laptop: keep the relationship, but reduce the spread. */
@media (max-width: 1100px) and (min-width: 861px) {
  body.home-page .about-editorial {
    width: 100%;
    grid-template-columns: minmax(320px, 1fr) 2px minmax(280px, .82fr);
    gap: clamp(20px, 2.2vw, 34px);
  }

  body.home-page .about-editorial__statement .display-heading {
    max-width: 12.5ch !important;
  }

  body.home-page .about-editorial__copy {
    max-width: 360px;
  }
}

/* Mobile/tablet stack: readability wins over forced right alignment. */
@media (max-width: 860px) {
  body.home-page .about-editorial {
    width: 100%;
    margin-left: 0;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-right: 0;
  }

  body.home-page .about-editorial__statement {
    justify-self: start;
    max-width: 100%;
  }

  body.home-page .about-editorial__statement .display-heading {
    max-width: 100% !important;
    text-align: left !important;
  }

  body.home-page .about-editorial__connector {
    width: 56px;
    height: 2px;
    justify-self: start;
  }

  body.home-page .about-editorial__copy {
    max-width: 620px;
    justify-self: start;
  }
}


/* =========================================================
   V51 — About ZiFPIM layout correction
   Fixes grid placement and tightens the editorial relationship.
   ========================================================= */

body.home-page .about-editorial {
  width: min(100%, 1040px);
  margin-left: auto;
  margin-right: 5%;
  grid-template-columns: minmax(390px, 1.08fr) 2px minmax(330px, .82fr);
  column-gap: clamp(22px, 2.35vw, 36px);
  align-items: center;
}

body.home-page .about-editorial__statement {
  grid-column: 1;
  justify-self: end;
  width: 100%;
  max-width: 610px;
}

body.home-page .about-editorial__statement .display-heading {
  max-width: 12ch !important;
  margin: 0;
  text-align: right !important;
  line-height: .93;
}

body.home-page .about-editorial__connector {
  grid-column: 2;
  width: 2px;
  height: clamp(68px, 10vh, 92px);
  margin: 0;
  align-self: center;
  justify-self: center;
  background: var(--gold);
}

body.home-page .about-editorial__copy {
  grid-column: 3;
  width: 100%;
  max-width: 390px;
  justify-self: start;
  align-self: center;
}

body.home-page .about-editorial__copy p {
  max-width: 38ch;
  margin: 0 0 24px;
  line-height: 1.58;
}

/* Prevent any legacy grid-auto-placement rules from squeezing the paragraph. */
body.home-page .about-editorial__statement,
body.home-page .about-editorial__connector,
body.home-page .about-editorial__copy {
  min-width: 0;
}

@media (max-width: 1100px) and (min-width: 861px) {
  body.home-page .about-editorial {
    width: min(100%, 920px);
    margin-right: 3%;
    grid-template-columns: minmax(330px, 1fr) 2px minmax(300px, .86fr);
    column-gap: 24px;
  }

  body.home-page .about-editorial__statement {
    max-width: 520px;
  }

  body.home-page .about-editorial__copy {
    max-width: 350px;
  }
}

@media (max-width: 860px) {
  body.home-page .about-editorial {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr;
    row-gap: 22px;
  }

  body.home-page .about-editorial__statement,
  body.home-page .about-editorial__connector,
  body.home-page .about-editorial__copy {
    grid-column: 1;
  }

  body.home-page .about-editorial__statement {
    justify-self: start;
    max-width: 100%;
  }

  body.home-page .about-editorial__statement .display-heading {
    max-width: 100% !important;
    text-align: left !important;
  }

  body.home-page .about-editorial__connector {
    width: 54px;
    height: 2px;
    justify-self: start;
  }

  body.home-page .about-editorial__copy {
    max-width: 620px;
  }
}


/* =========================================================
   V52 — About ZiFPIM tight alignment
   - "pathways to finance" stays on one line
   - title moved closer to copy
   - top edges aligned
   - vertical connector removed
   ========================================================= */

body.home-page .about-editorial {
  width: min(100%, 980px);
  margin-left: auto;
  margin-right: 5%;
  display: grid;
  grid-template-columns: minmax(420px, 1.06fr) minmax(330px, .84fr);
  column-gap: clamp(14px, 1.5vw, 22px);
  align-items: start;
}

body.home-page .about-editorial__statement {
  grid-column: 1;
  width: 100%;
  max-width: 590px;
  justify-self: end;
  align-self: start;
  margin: 0;
}

body.home-page .about-editorial__statement .display-heading {
  max-width: none !important;
  width: 100%;
  margin: 0;
  text-align: right !important;
  line-height: .93;
}

body.home-page .about-editorial__nowrap {
  white-space: nowrap;
}

body.home-page .about-editorial__copy {
  grid-column: 2;
  width: 100%;
  max-width: 390px;
  justify-self: start;
  align-self: start;
  margin: 0;
  padding-top: 0;
}

body.home-page .about-editorial__copy p {
  margin-top: 0;
}

/* The connector is no longer part of this composition. */
body.home-page .about-editorial__connector {
  display: none !important;
}

@media (max-width: 1100px) and (min-width: 861px) {
  body.home-page .about-editorial {
    width: min(100%, 900px);
    margin-right: 3%;
    grid-template-columns: minmax(380px, 1fr) minmax(300px, .82fr);
    column-gap: 16px;
  }

  body.home-page .about-editorial__statement {
    max-width: 520px;
  }

  body.home-page .about-editorial__copy {
    max-width: 350px;
  }
}

@media (max-width: 860px) {
  body.home-page .about-editorial {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  body.home-page .about-editorial__statement,
  body.home-page .about-editorial__copy {
    grid-column: 1;
    max-width: 100%;
    justify-self: start;
  }

  body.home-page .about-editorial__statement .display-heading {
    text-align: left !important;
  }

  body.home-page .about-editorial__nowrap {
    white-space: normal;
  }

  body.home-page .about-editorial__copy {
    max-width: 620px;
  }
}


/* =========================================================
   V53 — About ZiFPIM centred alignment refinement
   - "media" moves to its own line
   - slightly more space between title and copy
   - title/copy cluster centred on the page
   - copy top kept aligned with the title's first line ("new")
   ========================================================= */

body.home-page .about-editorial {
  width: min(100%, 900px);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: minmax(390px, 1fr) minmax(320px, .86fr);
  column-gap: clamp(28px, 3vw, 40px);
  align-items: start;
  justify-content: center;
}

body.home-page .about-editorial__statement {
  grid-column: 1;
  width: 100%;
  max-width: 520px;
  justify-self: end;
  align-self: start;
  margin: 0;
}

body.home-page .about-editorial__statement .display-heading {
  width: 100%;
  max-width: none !important;
  margin: 0;
  text-align: right !important;
  line-height: .92;
}

body.home-page .about-editorial__copy {
  grid-column: 2;
  width: 100%;
  max-width: 370px;
  justify-self: start;
  align-self: start;
  margin: 0;
  padding-top: 4px; /* keeps the paragraph line aligned with the "Building new" line */
}

body.home-page .about-editorial__copy p {
  max-width: 37ch;
  margin: 0 0 24px;
  line-height: 1.58;
}

@media (max-width: 1100px) and (min-width: 861px) {
  body.home-page .about-editorial {
    width: min(100%, 860px);
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: minmax(360px, 1fr) minmax(300px, .84fr);
    column-gap: 28px;
  }

  body.home-page .about-editorial__statement {
    max-width: 490px;
  }

  body.home-page .about-editorial__copy {
    max-width: 340px;
  }
}

@media (max-width: 860px) {
  body.home-page .about-editorial {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  body.home-page .about-editorial__statement,
  body.home-page .about-editorial__copy {
    grid-column: 1;
    max-width: 100%;
    justify-self: start;
  }

  body.home-page .about-editorial__statement .display-heading {
    text-align: left !important;
  }

  body.home-page .about-editorial__nowrap {
    white-space: normal;
  }

  body.home-page .about-editorial__copy {
    max-width: 620px;
    padding-top: 0;
  }
}


/* =========================================================
   V54 — forward page stacking during dot morphs
   The chapter BELOW now sits above the chapter ABOVE while
   it enters the viewport. This removes the visible "old page lip"
   hanging over the next coloured section.

   Completed dots are lifted back above the chapter stack, so the
   memory trail remains visible under the header.
   Scroll geometry and morph timing are untouched.
   ========================================================= */

@media (min-width: 861px) {
  /* Document-order stacking: every following chapter is above
     the previous one while the pages overlap during scrolling. */
  .signature-hero__stage {
    z-index: 230;
  }

  .about-morph-stage {
    z-index: 231;
  }

  .work-morph-stage {
    z-index: 232;
  }

  .memory-morph-stage--investment {
    z-index: 233;
  }

  .memory-morph-stage--resource {
    z-index: 234;
  }

  .memory-morph-stage--news {
    z-index: 235;
  }

  .memory-morph-stage--partner {
    z-index: 236;
  }

  /* Once a chapter has fully become a dot, only that small dot
     should sit over the newer pages — never the old full page. */
  .signature-hero__stage.is-dot-face,
  .about-morph-stage.is-dot-face,
  .work-morph-stage.is-dot-face,
  .memory-morph-stage.is-dot-face {
    z-index: 280;
  }
}


/* =========================================================
   V55 — non-overlapping page backgrounds
   Instead of putting the next page ABOVE the previous page,
   each scene now owns its own stationary page background while
   only the INFORMATION stage transforms toward the memory dot.

   Result:
   - no page-on-page stacking trick
   - no white "lip" over the blue What We Do section
   - no strange hero crop caused by forward z-index stacking
   - morph timing / scroll geometry remain untouched
   ========================================================= */

@media (min-width: 861px) {
  /* Undo V54's forward page stacking and restore the original
     morph-stage ordering that the V30 engine was designed around. */
  .signature-hero__stage {
    z-index: 240;
  }

  .about-morph-stage {
    z-index: 239;
  }

  .work-morph-stage {
    z-index: 238;
  }

  .memory-morph-stage--investment {
    z-index: 237;
  }

  .memory-morph-stage--resource {
    z-index: 236;
  }

  .memory-morph-stage--news {
    z-index: 235;
  }

  .memory-morph-stage--partner {
    z-index: 234;
  }

  .signature-hero__stage.is-dot-face,
  .about-morph-stage.is-dot-face,
  .work-morph-stage.is-dot-face,
  .memory-morph-stage.is-dot-face {
    z-index: inherit;
  }

  /* The OUTER scene owns the page colour.
     It scrolls normally in document flow and never scales. */
  .section--about[data-about-morph-scene] {
    background: var(--paper);
  }

  .section--work[data-work-morph-scene] {
    background: var(--blue);
  }

  .section--investment[data-memory-morph-scene] {
    background: var(--charcoal);
    color: var(--white);
  }

  .section--resource[data-memory-morph-scene],
  .section--news[data-memory-morph-scene] {
    background: var(--paper);
    color: var(--charcoal);
  }

  .partner-section[data-memory-morph-scene] {
    background: var(--blue);
    color: var(--white);
  }

  /* The transforming stage is now only the information/object layer.
     Its full-page background no longer shrinks over the next chapter. */
  .about-morph-stage,
  .work-morph-stage,
  .memory-morph-stage--investment,
  .memory-morph-stage--resource,
  .memory-morph-stage--news,
  .memory-morph-stage--partner {
    background: transparent;
  }

  /* Preserve each final dot face exactly as before. */
  .about-morph-stage.is-dot-face,
  .work-morph-stage.is-dot-face,
  .memory-morph-stage.is-dot-face {
    background: transparent;
  }
}


/* =========================================================
   V56 — restore memory dots above section backgrounds
   V55 correctly separated page backgrounds from morphing content,
   but the final dot faces were left behind the later sections.
   Only the tiny completed dots are raised; the full pages are not.
   ========================================================= */

@media (min-width: 861px) {
  .signature-hero__stage.is-dot-face,
  .about-morph-stage.is-dot-face,
  .work-morph-stage.is-dot-face,
  .memory-morph-stage.is-dot-face {
    z-index: 280 !important;
  }
}


/* =========================================================
   V57 — What We Do / living editorial system
   Matches the centred editorial relationship established in About,
   while keeping the selector genuinely interactive and lightweight.
   Scroll / dot morph geometry is untouched.
   ========================================================= */

@media (min-width: 861px) {
  body.home-page .work-editorial--live {
    width: min(100%, 1040px);
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--chapter-gap);
    display: grid;
    grid-template-columns: minmax(330px, .82fr) minmax(470px, 1.18fr);
    column-gap: clamp(42px, 5vw, 76px);
    align-items: start;
  }

  body.home-page .work-editorial--live .work-editorial__intro {
    position: static;
    width: 100%;
    max-width: 410px;
    justify-self: end;
    align-self: start;
    text-align: right;
  }

  body.home-page .work-editorial--live .work-editorial__intro .eyebrow {
    margin: 0 0 16px;
    color: var(--gold);
    font-size: .69rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-weight: 800;
  }

  body.home-page .work-editorial--live .work-editorial__intro h2 {
    margin: 0;
    font-size: clamp(3rem, min(5vw, 7.5vh), 5.8rem) !important;
    line-height: .88;
    letter-spacing: -.06em;
    text-align: right;
  }

  body.home-page .work-editorial__panel {
    width: 100%;
    max-width: 590px;
    justify-self: start;
    padding-top: 31px;
  }

  body.home-page .work-editorial--live .work-editorial__lead {
    max-width: 510px;
    margin: 0 0 clamp(20px, 3vh, 30px);
    color: rgba(255,255,255,.78);
    font-size: clamp(.92rem, 1.7vh, 1.04rem);
    line-height: 1.55;
  }

  body.home-page .work-editorial--live .work-system {
    --work-row-height: clamp(56px, 7.4vh, 72px);
    --work-dot-center-x: 61px;
    position: relative;
    width: 100%;
    padding: 0;
  }

  body.home-page .work-editorial--live .work-system__item {
    position: relative;
    height: var(--work-row-height);
    min-height: var(--work-row-height);
    display: grid;
    grid-template-columns: 42px 38px minmax(0, 1fr);
    align-items: center;
    padding: 0 16px 0 0;
    border-bottom: 1px solid rgba(255,255,255,.20);
    overflow: hidden;
    isolation: isolate;
  }

  body.home-page .work-editorial--live .work-system__item::before {
    inset: 0 100% 0 0;
    background: rgba(255,255,255,.055);
  }

  body.home-page .work-editorial--live .work-system__item::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: var(--gold);
    transform: translateY(-50%);
    transition: height .25s var(--ease);
  }

  body.home-page .work-editorial--live .work-system__item:hover::after,
  body.home-page .work-editorial--live .work-system__item.is-active::after {
    height: 56%;
  }

  body.home-page .work-editorial--live .work-system__number {
    padding-left: 12px;
    color: rgba(255,255,255,.55);
  }

  body.home-page .work-editorial--live .work-system__dot {
    width: 13px;
    height: 13px;
    margin-left: 12px;
    background: var(--blue);
  }

  body.home-page .work-editorial--live .work-system__title {
    font-size: clamp(1.16rem, min(2vw, 3.1vh), 1.72rem);
    line-height: 1.04;
    letter-spacing: -.035em;
  }

  /* One live connection line, with a tiny gold signal moving through it. */
  body.home-page .work-editorial--live .work-system__line {
    display: block;
    left: var(--work-dot-center-x);
    top: calc(var(--work-row-height) / 2);
    bottom: auto;
    width: 1px;
    height: calc(var(--work-row-height) * 2);
    background: rgba(255,255,255,.32);
    overflow: visible;
    pointer-events: none;
  }

  body.home-page .work-editorial--live .work-system__line::after {
    content: "";
    position: absolute;
    left: -2px;
    top: -2px;
    width: 5px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(226,168,20,0), var(--gold), rgba(226,168,20,0));
    animation: zifpimWorkSignal 2.7s ease-in-out infinite;
    will-change: transform;
  }

  @keyframes zifpimWorkSignal {
    0%, 12% { transform: translateY(0); opacity: 0; }
    22% { opacity: 1; }
    78% { opacity: 1; }
    88%, 100% { transform: translateY(calc((var(--work-row-height) * 2) - 20px)); opacity: 0; }
  }

  body.home-page .work-editorial--live .work-system__detail {
    position: relative;
    margin: clamp(18px, 2.5vh, 26px) 0 0;
    min-height: 112px;
    padding: 20px 24px 22px;
    border-left: 0;
    background: rgba(255,255,255,.07);
    overflow: hidden;
  }

  body.home-page .work-editorial--live .work-system__detail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 3px;
    background: var(--gold);
  }

  body.home-page .work-editorial--live .work-system__detail::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -34px;
    width: 96px;
    height: 96px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    pointer-events: none;
  }

  body.home-page .work-editorial--live .work-system__detail-kicker {
    margin-bottom: 9px;
  }

  body.home-page .work-editorial--live .work-system__detail p {
    max-width: 500px;
    font-size: clamp(1rem, min(1.55vw, 2.45vh), 1.3rem);
    line-height: 1.38;
  }

  body.home-page .work-editorial--live .work-system__detail.is-refreshing {
    animation: zifpimDetailIn .28s var(--ease);
  }

  @keyframes zifpimDetailIn {
    from { opacity: .2; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  body.home-page .work-editorial__footer {
    width: min(100%, 1040px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Compact desktop heights without altering the viewport/snap geometry. */
@media (min-width: 861px) and (max-height: 720px) {
  body.home-page .work-editorial--live {
    column-gap: 40px;
  }

  body.home-page .work-editorial__panel {
    padding-top: 26px;
  }

  body.home-page .work-editorial--live .work-editorial__intro h2 {
    font-size: clamp(2.55rem, 6.2vh, 4.25rem) !important;
  }

  body.home-page .work-editorial--live .work-editorial__lead {
    margin-bottom: 14px;
  }

  body.home-page .work-editorial--live .work-system {
    --work-row-height: clamp(45px, 6.6vh, 54px);
  }

  body.home-page .work-editorial--live .work-system__detail {
    min-height: 0;
    margin-top: 12px;
    padding: 14px 18px 15px;
  }
}

/* Tablet/mobile: preserve the interaction, but stack cleanly. */
@media (max-width: 860px) {
  body.home-page .work-editorial--live {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.home-page .work-editorial--live .work-editorial__intro {
    position: static;
    text-align: left;
  }

  body.home-page .work-editorial--live .work-editorial__intro h2 {
    text-align: left;
  }

  body.home-page .work-editorial__panel {
    padding-top: 0;
  }

  body.home-page .work-editorial--live .work-system__detail {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .work-editorial--live .work-system__line::after {
    animation: none;
    display: none;
  }

  body.home-page .work-editorial--live .work-system__detail.is-refreshing {
    animation: none;
  }
}


/* =========================================================
   V58 — What We Do: ENERGY interaction
   More expressive click choreography, still transform/opacity based
   and isolated from the scroll/morph engine.
   ========================================================= */

@media (min-width: 861px) {
  /* Match the About section's editorial relationship:
     right-aligned statement + a deliberate, equal gap to the copy. */
  body.home-page .work-editorial--live {
    width: min(100%, 960px);
    grid-template-columns: minmax(360px, .88fr) minmax(500px, 1.12fr);
    column-gap: clamp(30px, 3vw, 38px);
    justify-content: center;
  }

  body.home-page .work-editorial--live .work-editorial__intro {
    width: 100%;
    max-width: 400px;
    justify-self: end;
    text-align: right;
  }

  body.home-page .work-editorial--live .work-editorial__intro .eyebrow {
    text-align: right;
  }

  body.home-page .work-editorial--live .work-editorial__intro h2 {
    width: 100%;
    max-width: 100%;
    text-align: right !important;
  }

  body.home-page .work-editorial__panel {
    width: 100%;
    max-width: 540px;
    justify-self: start;
    padding-top: 31px;
  }

  body.home-page .work-editorial--live .work-editorial__lead {
    max-width: 500px;
  }

  /* --- Interaction stage --- */
  body.home-page .work-editorial--live .work-system {
    overflow: visible;
  }

  /* Travelling gold "charge" between the selected nodes. */
  body.home-page .work-editorial--live .work-system__click-signal {
    position: absolute;
    z-index: 12;
    left: calc(var(--work-dot-center-x) - 5px);
    top: calc((var(--work-row-height) / 2) - 5px);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0;
    pointer-events: none;
    box-shadow:
      0 0 0 5px rgba(226,168,20,.18),
      0 0 22px rgba(226,168,20,.72);
  }

  body.home-page .work-editorial--live .work-system.is-switching .work-system__click-signal {
    animation: zifpimNodeTravel .52s cubic-bezier(.2,.9,.25,1) both;
  }

  @keyframes zifpimNodeTravel {
    0% {
      opacity: 0;
      transform:
        translateY(calc(var(--pulse-from, 0) * var(--work-row-height)))
        scale(.45);
    }
    18% { opacity: 1; }
    72% { opacity: 1; }
    100% {
      opacity: 0;
      transform:
        translateY(calc(var(--pulse-to, 0) * var(--work-row-height)))
        scale(1.5);
    }
  }

  /* Selected row gets a quick gold energy sweep. */
  body.home-page .work-editorial--live .work-system__item.is-activating {
    z-index: 4;
    animation: zifpimRowKick .62s cubic-bezier(.2,.85,.2,1);
  }

  body.home-page .work-editorial--live .work-system__item.is-activating::before {
    animation: zifpimRowSweep .58s cubic-bezier(.18,.9,.25,1);
  }

  @keyframes zifpimRowSweep {
    0% {
      inset: 0 100% 0 0;
      background: rgba(226,168,20,.05);
    }
    45% {
      inset: 0 0 0 0;
      background: rgba(226,168,20,.17);
    }
    100% {
      inset: 0 0 0 100%;
      background: rgba(226,168,20,.02);
    }
  }

  @keyframes zifpimRowKick {
    0%   { transform: translateX(0); }
    35%  { transform: translateX(9px); }
    62%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
  }

  /* Dot burst: a crisp double-ring explosion, then settles. */
  body.home-page .work-editorial--live .work-system__item.is-activating .work-system__dot {
    animation: zifpimDotBurst .68s cubic-bezier(.15,.85,.2,1);
  }

  @keyframes zifpimDotBurst {
    0% {
      transform: scale(.72);
      box-shadow: 0 0 0 0 rgba(226,168,20,.5);
    }
    35% {
      transform: scale(1.45);
      box-shadow:
        0 0 0 7px rgba(226,168,20,.20),
        0 0 0 15px rgba(226,168,20,.08);
    }
    68% {
      transform: scale(.94);
      box-shadow:
        0 0 0 12px rgba(226,168,20,0),
        0 0 0 24px rgba(226,168,20,0);
    }
    100% {
      transform: scale(1);
      box-shadow: none;
    }
  }

  body.home-page .work-editorial--live .work-system__item.is-activating .work-system__number {
    animation: zifpimNumberPop .54s cubic-bezier(.2,.95,.25,1);
  }

  @keyframes zifpimNumberPop {
    0%   { transform: translateY(0) scale(1); opacity: .55; }
    32%  { transform: translateY(-8px) scale(1.2); opacity: 1; color: var(--gold); }
    58%  { transform: translateY(3px) scale(.96); }
    100% { transform: translateY(0) scale(1); }
  }

  body.home-page .work-editorial--live .work-system__item.is-activating .work-system__title {
    animation: zifpimTitleLock .62s cubic-bezier(.18,.9,.2,1);
  }

  @keyframes zifpimTitleLock {
    0%   { transform: translateX(0); letter-spacing: -.035em; }
    38%  { transform: translateX(14px); letter-spacing: -.015em; }
    72%  { transform: translateX(-2px); }
    100% { transform: translateX(0); letter-spacing: -.035em; }
  }

  /* Detail reveal now feels like the selected area "lands" into the panel. */
  body.home-page .work-editorial--live .work-system__detail {
    isolation: isolate;
  }

  body.home-page .work-editorial--live .work-system__detail::after {
    content: attr(data-detail-index);
    right: 18px;
    bottom: -22px;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    color: rgba(255,255,255,.07);
    font-size: clamp(5.5rem, 9vw, 8rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.08em;
  }

  body.home-page .work-editorial--live .work-system__detail.is-refreshing {
    animation: zifpimDetailLand .56s cubic-bezier(.18,.9,.22,1);
  }

  body.home-page .work-editorial--live .work-system__detail.is-refreshing::before {
    animation: zifpimDetailBeam .56s cubic-bezier(.18,.9,.22,1);
  }

  body.home-page .work-editorial--live .work-system__detail.is-refreshing::after {
    animation: zifpimGhostNumber .65s cubic-bezier(.18,.9,.22,1);
  }

  @keyframes zifpimDetailLand {
    0% {
      opacity: .25;
      transform: translateY(16px) scale(.985);
    }
    48% {
      opacity: 1;
      transform: translateY(-3px) scale(1.006);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes zifpimDetailBeam {
    0%   { width: 0; }
    52%  { width: 100%; }
    100% { width: 44px; }
  }

  @keyframes zifpimGhostNumber {
    0%   { opacity: 0; transform: translateX(24px) scale(.88); }
    50%  { opacity: 1; transform: translateX(-5px) scale(1.04); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
  }

  /* Active row remains confident after the burst. */
  body.home-page .work-editorial--live .work-system__item.is-active .work-system__title {
    color: var(--gold);
    font-weight: 800;
  }

  body.home-page .work-editorial--live .work-system__item.is-active .work-system__number {
    color: var(--gold);
  }
}

/* Compact screens: preserve the editorial spacing relationship. */
@media (min-width: 861px) and (max-height: 720px) {
  body.home-page .work-editorial--live {
    width: min(100%, 920px);
    grid-template-columns: minmax(340px, .86fr) minmax(470px, 1.14fr);
    column-gap: 30px;
  }

  body.home-page .work-editorial__panel {
    padding-top: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .work-editorial--live .work-system__click-signal,
  body.home-page .work-editorial--live .work-system__item.is-activating,
  body.home-page .work-editorial--live .work-system__item.is-activating::before,
  body.home-page .work-editorial--live .work-system__item.is-activating .work-system__dot,
  body.home-page .work-editorial--live .work-system__item.is-activating .work-system__number,
  body.home-page .work-editorial--live .work-system__item.is-activating .work-system__title,
  body.home-page .work-editorial--live .work-system__detail.is-refreshing,
  body.home-page .work-editorial--live .work-system__detail.is-refreshing::before,
  body.home-page .work-editorial--live .work-system__detail.is-refreshing::after {
    animation: none !important;
  }
}


/* =========================================================
   V59 — What We Do: butter-smooth interaction pass
   - removes the continuous animated beam travelling 01 → 03
   - slows the click choreography slightly
   - replaces sharp kicks with softer, eased motion
   - preserves the interactive node-to-node response
   ========================================================= */

@media (min-width: 861px) {
  /* Remove the always-running animated beam on the connecting line. */
  body.home-page .work-editorial--live .work-system__line::after {
    display: none !important;
    animation: none !important;
  }

  /* Keep the static connector line calm and architectural. */
  body.home-page .work-editorial--live .work-system__line {
    background: rgba(255,255,255,.26);
  }

  /* Slower node travel on click. */
  body.home-page .work-editorial--live .work-system.is-switching .work-system__click-signal {
    animation: zifpimNodeTravelSmooth .86s cubic-bezier(.22,.82,.28,1) both;
  }

  @keyframes zifpimNodeTravelSmooth {
    0% {
      opacity: 0;
      transform:
        translateY(calc(var(--pulse-from, 0) * var(--work-row-height)))
        scale(.72);
    }
    16% {
      opacity: 1;
    }
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform:
        translateY(calc(var(--pulse-to, 0) * var(--work-row-height)))
        scale(1.18);
    }
  }

  /* Softer, longer row sweep. */
  body.home-page .work-editorial--live .work-system__item.is-activating {
    animation: zifpimRowFloat .92s cubic-bezier(.2,.78,.24,1);
  }

  body.home-page .work-editorial--live .work-system__item.is-activating::before {
    animation: zifpimRowSweepSmooth .9s cubic-bezier(.2,.78,.24,1);
  }

  @keyframes zifpimRowSweepSmooth {
    0% {
      inset: 0 100% 0 0;
      background: rgba(226,168,20,.03);
    }
    48% {
      inset: 0 0 0 0;
      background: rgba(226,168,20,.13);
    }
    100% {
      inset: 0 0 0 100%;
      background: rgba(226,168,20,.01);
    }
  }

  @keyframes zifpimRowFloat {
    0%   { transform: translateX(0); }
    42%  { transform: translateX(6px); }
    72%  { transform: translateX(1px); }
    100% { transform: translateX(0); }
  }

  /* Dot burst becomes more fluid and less punchy. */
  body.home-page .work-editorial--live .work-system__item.is-activating .work-system__dot {
    animation: zifpimDotBloom .94s cubic-bezier(.2,.8,.24,1);
  }

  @keyframes zifpimDotBloom {
    0% {
      transform: scale(.9);
      box-shadow: 0 0 0 0 rgba(226,168,20,.38);
    }
    38% {
      transform: scale(1.28);
      box-shadow:
        0 0 0 7px rgba(226,168,20,.16),
        0 0 0 14px rgba(226,168,20,.06);
    }
    72% {
      transform: scale(1.03);
      box-shadow:
        0 0 0 12px rgba(226,168,20,0),
        0 0 0 22px rgba(226,168,20,0);
    }
    100% {
      transform: scale(1);
      box-shadow: none;
    }
  }

  /* Number and label settle rather than snap. */
  body.home-page .work-editorial--live .work-system__item.is-activating .work-system__number {
    animation: zifpimNumberDrift .82s cubic-bezier(.2,.82,.28,1);
  }

  @keyframes zifpimNumberDrift {
    0%   { transform: translateY(0) scale(1); opacity: .6; }
    40%  { transform: translateY(-5px) scale(1.12); opacity: 1; color: var(--gold); }
    70%  { transform: translateY(-1px) scale(1.03); }
    100% { transform: translateY(0) scale(1); }
  }

  body.home-page .work-editorial--live .work-system__item.is-activating .work-system__title {
    animation: zifpimTitleGlide .9s cubic-bezier(.2,.78,.24,1);
  }

  @keyframes zifpimTitleGlide {
    0%   { transform: translateX(0); }
    44%  { transform: translateX(8px); }
    72%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
  }

  /* Detail panel: slower, smoother landing. */
  body.home-page .work-editorial--live .work-system__detail.is-refreshing {
    animation: zifpimDetailFloatIn .9s cubic-bezier(.2,.78,.24,1);
  }

  body.home-page .work-editorial--live .work-system__detail.is-refreshing::before {
    animation: zifpimDetailBeamSmooth .86s cubic-bezier(.2,.78,.24,1);
  }

  body.home-page .work-editorial--live .work-system__detail.is-refreshing::after {
    animation: zifpimGhostNumberSmooth .96s cubic-bezier(.2,.78,.24,1);
  }

  @keyframes zifpimDetailFloatIn {
    0% {
      opacity: .3;
      transform: translateY(12px) scale(.99);
    }
    55% {
      opacity: 1;
      transform: translateY(-1px) scale(1.002);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes zifpimDetailBeamSmooth {
    0%   { width: 0; opacity: .4; }
    58%  { width: 82%; opacity: 1; }
    100% { width: 44px; opacity: 1; }
  }

  @keyframes zifpimGhostNumberSmooth {
    0%   { opacity: 0; transform: translateX(18px) scale(.94); }
    56%  { opacity: .85; transform: translateX(-2px) scale(1.015); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .work-editorial--live .work-system__line::after {
    display: none !important;
  }
}


/* =========================================================
   V60 — hover preview + selected halo flicker + ghost number fix
   ========================================================= */

@media (min-width: 861px) {
  /* Hover/focus previews the description panel without changing
     the persistent clicked selection. */
  body.home-page .work-editorial--live .work-system__detail.is-previewing {
    animation: zifpimHoverPreview .54s cubic-bezier(.2,.78,.24,1);
  }

  @keyframes zifpimHoverPreview {
    0% {
      opacity: .38;
      transform: translateY(9px) scale(.995);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  body.home-page .work-editorial--live .work-system__item:hover:not(.is-active) {
    background: rgba(255,255,255,.035);
  }

  body.home-page .work-editorial--live .work-system__item:hover:not(.is-active) .work-system__title {
    color: rgba(255,255,255,.98);
    transform: translateX(4px);
  }

  body.home-page .work-editorial--live .work-system__item:hover:not(.is-active) .work-system__number {
    color: rgba(226,168,20,.86);
  }

  body.home-page .work-editorial--live .work-system__item:hover:not(.is-active) .work-system__dot {
    border-color: rgba(226,168,20,.78);
    box-shadow: 0 0 0 5px rgba(226,168,20,.07);
  }

  /* Subtle irregular flicker around the selected node.
     This is intentionally not a smooth loading-style pulse. */
  body.home-page .work-editorial--live .work-system__item.is-active .work-system__dot {
    position: relative;
    isolation: visible;
  }

  body.home-page .work-editorial--live .work-system__item.is-active .work-system__dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    border: 1px solid rgba(226,168,20,.35);
    background: rgba(226,168,20,.055);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: zifpimSelectedFlicker 2.9s steps(1, end) infinite;
  }

  @keyframes zifpimSelectedFlicker {
    0%, 100% { opacity: .42; box-shadow: 0 0 0 rgba(226,168,20,0); }
    7%       { opacity: .16; }
    11%      { opacity: .58; box-shadow: 0 0 14px rgba(226,168,20,.12); }
    16%      { opacity: .29; }
    34%      { opacity: .48; }
    38%      { opacity: .18; }
    41%      { opacity: .62; box-shadow: 0 0 17px rgba(226,168,20,.11); }
    46%      { opacity: .35; }
    69%      { opacity: .47; }
    73%      { opacity: .20; }
    77%      { opacity: .55; }
  }

  /* The large faint 01/02/03 is now fully contained instead of
     being cropped at the bottom/right edge. */
  body.home-page .work-editorial--live .work-system__detail::after {
    right: 18px;
    bottom: 7px;
    font-size: clamp(4.8rem, 7.5vw, 6.8rem);
    line-height: .82;
    letter-spacing: -.06em;
    color: rgba(255,255,255,.065);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .work-editorial--live .work-system__detail.is-previewing,
  body.home-page .work-editorial--live .work-system__item.is-active .work-system__dot::after {
    animation: none !important;
  }
}


/* =========================================================
   V61 — selected-node beacon refinement
   - replaces the harsh stepped flicker with a smooth "living beacon"
   - adds a soft outer echo ring
   - removes the vertical gold bar before row numbers
   ========================================================= */

@media (min-width: 861px) {
  /* Remove the vertical gold bar that appeared on hover/active rows. */
  body.home-page .work-editorial--live .work-system__item::after,
  body.home-page .work-editorial--live .work-system__item:hover::after,
  body.home-page .work-editorial--live .work-system__item.is-active::after {
    display: none !important;
    height: 0 !important;
  }

  /* The selected dot becomes a calm, living signal rather than a harsh flicker. */
  body.home-page .work-editorial--live .work-system__item.is-active .work-system__dot {
    position: relative;
    overflow: visible;
  }

  /* Inner breathing halo. */
  body.home-page .work-editorial--live .work-system__item.is-active .work-system__dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(226,168,20,.42);
    background: rgba(226,168,20,.055);
    transform: translate(-50%, -50%) scale(.94);
    opacity: .46;
    pointer-events: none;
    will-change: transform, opacity;
    animation: zifpimBeaconBreath 3.4s cubic-bezier(.42,0,.58,1) infinite;
  }

  /* A second, faint echo ring blooms occasionally around the active node. */
  body.home-page .work-editorial--live .work-system__item.is-active .work-system__dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(226,168,20,.24);
    transform: translate(-50%, -50%) scale(.72);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    animation: zifpimBeaconEcho 4.6s cubic-bezier(.2,.72,.28,1) infinite;
  }

  @keyframes zifpimBeaconBreath {
    0% {
      opacity: .34;
      transform: translate(-50%, -50%) scale(.90);
      box-shadow: 0 0 0 rgba(226,168,20,0);
    }
    28% {
      opacity: .56;
      transform: translate(-50%, -50%) scale(1.03);
      box-shadow: 0 0 12px rgba(226,168,20,.10);
    }
    52% {
      opacity: .42;
      transform: translate(-50%, -50%) scale(.97);
      box-shadow: 0 0 5px rgba(226,168,20,.05);
    }
    76% {
      opacity: .62;
      transform: translate(-50%, -50%) scale(1.07);
      box-shadow: 0 0 16px rgba(226,168,20,.12);
    }
    100% {
      opacity: .34;
      transform: translate(-50%, -50%) scale(.90);
      box-shadow: 0 0 0 rgba(226,168,20,0);
    }
  }

  @keyframes zifpimBeaconEcho {
    0%, 48% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.72);
    }
    58% {
      opacity: .28;
      transform: translate(-50%, -50%) scale(.84);
    }
    75% {
      opacity: .16;
      transform: translate(-50%, -50%) scale(1.12);
    }
    92%, 100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.32);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .work-editorial--live .work-system__item.is-active .work-system__dot::before,
  body.home-page .work-editorial--live .work-system__item.is-active .work-system__dot::after {
    animation: none !important;
  }

  body.home-page .work-editorial--live .work-system__item.is-active .work-system__dot::after {
    opacity: .45;
    transform: translate(-50%, -50%) scale(1);
  }

  body.home-page .work-editorial--live .work-system__item.is-active .work-system__dot::before {
    display: none;
  }
}


/* =========================================================
   V62 — What We Do centred composition
   - chapter kicker moves to the left edge directly below 02 WHAT WE DO
   - main interactive composition is visually centred in the viewport
   - title / description relationship remains tight and balanced
   ========================================================= */

@media (min-width: 861px) {
  body.home-page .work-chapter-kicker {
    width: min(100%, 1178px);
    margin: clamp(18px, 2.8vh, 28px) auto 0;
    color: var(--gold);
    font-size: .69rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  /* Centre the visible composition, not merely the grid container. */
  body.home-page .work-editorial--live {
    width: min(100%, 900px);
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: minmax(310px, 350px) minmax(455px, 500px);
    column-gap: clamp(30px, 3vw, 38px);
    justify-content: center;
    transform: translateX(clamp(-52px, -3.5vw, -28px));
  }

  body.home-page .work-editorial--live .work-editorial__intro {
    width: 100%;
    max-width: 350px;
    justify-self: end;
    text-align: right;
  }

  body.home-page .work-editorial--live .work-editorial__intro h2 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: right !important;
  }

  body.home-page .work-editorial__panel {
    width: 100%;
    max-width: 500px;
    justify-self: start;
  }

  body.home-page .work-editorial--live .work-editorial__lead {
    max-width: 500px;
  }

  /* Old in-column eyebrow is no longer part of the composition. */
  body.home-page .work-editorial--live .work-editorial__intro .eyebrow {
    display: none !important;
  }
}

@media (min-width: 861px) and (max-width: 1100px) {
  body.home-page .work-chapter-kicker {
    width: calc(100% - 10vw);
  }

  body.home-page .work-editorial--live {
    width: min(100%, 820px);
    grid-template-columns: minmax(280px, 320px) minmax(420px, 465px);
    column-gap: 28px;
    transform: translateX(-18px);
  }

  body.home-page .work-editorial--live .work-editorial__intro {
    max-width: 320px;
  }

  body.home-page .work-editorial__panel {
    max-width: 465px;
  }
}

@media (max-width: 860px) {
  body.home-page .work-chapter-kicker {
    margin: 18px 0 0;
    color: var(--gold);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  body.home-page .work-editorial--live {
    transform: none;
  }
}


/* =========================================================
   V63 — ruler alignment pass
   Align the first line of "Finance." with the first line of
   "The Zimbabwe Fund..." on desktop.
   ========================================================= */

@media (min-width: 861px) {
  body.home-page .work-editorial--live .work-editorial__intro {
    padding-top: 31px;
  }
}

/* Compact-height desktops retain the same optical alignment
   as the right-hand panel's compact top offset. */
@media (min-width: 861px) and (max-height: 720px) {
  body.home-page .work-editorial--live .work-editorial__intro {
    padding-top: 26px;
  }
}

/* Stacked layouts should not inherit the desktop ruler offset. */
@media (max-width: 860px) {
  body.home-page .work-editorial--live .work-editorial__intro {
    padding-top: 0;
  }
}


/* =========================================================
   V64 — About section motion backdrop
   Lightweight giant background type + faint vector accents.
   Transform-only motion for performance.
   ========================================================= */

body.home-page .section--about .about-morph-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.home-page .section--about .section-label,
body.home-page .section--about .about-editorial {
  position: relative;
  z-index: 2;
}

body.home-page .section--about .about-motion {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body.home-page .section--about .about-motion__row {
  position: absolute;
  left: -8%;
  width: 116%;
  white-space: nowrap;
}

body.home-page .section--about .about-motion__row--top {
  top: 25%;
}

body.home-page .section--about .about-motion__row--bottom {
  top: 56%;
  opacity: .95;
}

body.home-page .section--about .about-motion__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(2.2rem, 4vw, 4.25rem);
  width: max-content;
  will-change: transform;
}

body.home-page .section--about .about-motion__row--top .about-motion__track {
  animation: zifpimAboutDrift 30s linear infinite;
}

body.home-page .section--about .about-motion__row--bottom .about-motion__track {
  animation: zifpimAboutDrift 36s linear infinite reverse;
}

body.home-page .section--about .about-motion__row span {
  display: inline-block;
  font-size: clamp(3.9rem, 10.8vw, 9.2rem);
  line-height: .88;
  letter-spacing: -.06em;
  font-weight: 800;
  text-transform: uppercase;
  user-select: none;
}

body.home-page .section--about .about-motion__row--top span {
  color: rgba(38, 37, 37, .035);
}

body.home-page .section--about .about-motion__row--bottom span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(38, 37, 37, .06);
  text-stroke: 1px rgba(38, 37, 37, .06);
}

body.home-page .section--about .about-motion__vector {
  position: absolute;
  pointer-events: none;
}

body.home-page .section--about .about-motion__vector--line {
  right: 11%;
  top: 31%;
  width: 18vw;
  max-width: 250px;
  min-width: 140px;
  height: 1px;
  background: linear-gradient(90deg, rgba(226,168,20,0) 0%, rgba(226,168,20,.22) 35%, rgba(226,168,20,0) 100%);
  transform-origin: left center;
  animation: zifpimAboutPulse 9s ease-in-out infinite;
}

body.home-page .section--about .about-motion__vector--ring {
  right: 13%;
  top: 22%;
  width: clamp(84px, 10vw, 132px);
  height: clamp(84px, 10vw, 132px);
  border-radius: 50%;
  border: 1px solid rgba(226,168,20,.09);
  animation: zifpimAboutFloat 14s ease-in-out infinite;
}

body.home-page .section--about .about-motion__vector--dot {
  right: calc(13% + clamp(38px, 5vw, 58px));
  top: calc(22% + clamp(38px, 5vw, 58px));
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(226,168,20,.28);
  box-shadow: 0 0 0 8px rgba(226,168,20,.035);
  animation: zifpimAboutGlow 6.4s ease-in-out infinite;
}

@keyframes zifpimAboutDrift {
  0% {
    transform: translate3d(-8%, 0, 0);
  }
  100% {
    transform: translate3d(8%, 0, 0);
  }
}

@keyframes zifpimAboutFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: .6;
  }
  50% {
    transform: translate3d(0, 10px, 0);
    opacity: 1;
  }
}

@keyframes zifpimAboutGlow {
  0%, 100% {
    opacity: .45;
    transform: scale(1);
  }
  50% {
    opacity: .95;
    transform: scale(1.18);
  }
}

@keyframes zifpimAboutPulse {
  0%, 100% {
    opacity: .4;
    transform: scaleX(.94);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.04);
  }
}

@media (max-width: 860px) {
  body.home-page .section--about .about-motion__row--top {
    top: 31%;
  }

  body.home-page .section--about .about-motion__row--bottom {
    top: 62%;
  }

  body.home-page .section--about .about-motion__vector--line,
  body.home-page .section--about .about-motion__vector--ring,
  body.home-page .section--about .about-motion__vector--dot {
    right: 7%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .section--about .about-motion__row--top .about-motion__track,
  body.home-page .section--about .about-motion__row--bottom .about-motion__track,
  body.home-page .section--about .about-motion__vector--line,
  body.home-page .section--about .about-motion__vector--ring,
  body.home-page .section--about .about-motion__vector--dot {
    animation: none !important;
  }
}


/* =========================================================
   V65 — About motion refinement + morph restoration
   Keeps the motion subtle and restores the original dot transform.
   ========================================================= */

/* V64 accidentally overrode the morph stage's fixed positioning.
   Restore the exact active-state positioning the dot engine expects. */
@media (min-width: 861px) {
  body.home-page .section--about .about-morph-stage.is-morph-active {
    position: fixed !important;
    left: var(--about-source-left, 0px) !important;
    top: 0 !important;
    margin: 0 !important;
  }

  body.home-page .section--about .about-morph-stage.is-dot-face {
    overflow: visible !important;
    background: transparent !important;
    pointer-events: none;
  }

  body.home-page .section--about .about-morph-stage.is-dot-face > * {
    visibility: hidden !important;
  }

  body.home-page .section--about .about-morph-stage.is-dot-face::after {
    visibility: visible !important;
  }
}

/* Refine the ambient typography so it feels like atmosphere,
   not another content layer competing with the headline. */
body.home-page .section--about .about-motion {
  opacity: .72;
}

body.home-page .section--about .about-motion__row {
  left: -12%;
  width: 124%;
}

body.home-page .section--about .about-motion__row--top {
  top: 33%;
  opacity: .72;
}

body.home-page .section--about .about-motion__row--bottom {
  top: 64%;
  opacity: .42;
}

body.home-page .section--about .about-motion__row span {
  font-size: clamp(4.2rem, 9vw, 8.2rem);
  letter-spacing: -.055em;
}

body.home-page .section--about .about-motion__row--top span {
  color: rgba(38,37,37,.022);
}

body.home-page .section--about .about-motion__row--bottom span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(38,37,37,.035);
  text-stroke: 1px rgba(38,37,37,.035);
}

body.home-page .section--about .about-motion__row--top .about-motion__track {
  animation-duration: 42s;
}

body.home-page .section--about .about-motion__row--bottom .about-motion__track {
  animation-duration: 50s;
}

/* Keep vector details farther from the body copy and more architectural. */
body.home-page .section--about .about-motion__vector--ring {
  right: 5.5%;
  top: 19%;
  width: clamp(92px, 9vw, 126px);
  height: clamp(92px, 9vw, 126px);
  border-color: rgba(226,168,20,.055);
  animation-duration: 18s;
}

body.home-page .section--about .about-motion__vector--dot {
  right: calc(5.5% + clamp(41px, 4.5vw, 56px));
  top: calc(19% + clamp(41px, 4.5vw, 56px));
  width: 7px;
  height: 7px;
  background: rgba(226,168,20,.22);
  box-shadow: 0 0 0 7px rgba(226,168,20,.025);
  animation-duration: 8.5s;
}

body.home-page .section--about .about-motion__vector--line {
  right: 4%;
  top: 39%;
  width: min(16vw, 220px);
  opacity: .58;
  animation-duration: 12s;
}

/* Make sure the actual editorial content remains visually dominant. */
body.home-page .section--about .about-editorial {
  position: relative;
  z-index: 3;
}

body.home-page .section--about .section-label {
  position: relative;
  z-index: 3;
}

@media (max-width: 860px) {
  body.home-page .section--about .about-motion__row--top {
    top: 37%;
  }

  body.home-page .section--about .about-motion__row--bottom {
    top: 69%;
  }

  body.home-page .section--about .about-motion__vector--ring,
  body.home-page .section--about .about-motion__vector--dot,
  body.home-page .section--about .about-motion__vector--line {
    opacity: .45;
  }
}


/* =========================================================
   V66 — About motion backdrop bolder pass
   User request:
   - make the giant ABOUT ZiFPIM words more visible
   - make them bigger
   - allow them to pass over the main content
   ========================================================= */

/* Let the ambient moving type sit above the editorial content,
   while remaining soft enough to keep the copy readable. */
body.home-page .section--about .about-motion {
  z-index: 4;
  opacity: .98;
}

body.home-page .section--about .section-label,
body.home-page .section--about .about-editorial {
  z-index: 3;
}

/* Bigger, bolder drifting words. */
body.home-page .section--about .about-motion__row {
  left: -18%;
  width: 136%;
}

body.home-page .section--about .about-motion__row--top {
  top: 28%;
  opacity: .98;
}

body.home-page .section--about .about-motion__row--bottom {
  top: 66%;
  opacity: .82;
}

body.home-page .section--about .about-motion__row span {
  font-size: clamp(5.8rem, 15vw, 12.6rem);
  line-height: .84;
  letter-spacing: -.065em;
  font-weight: 800;
}

body.home-page .section--about .about-motion__row--top span {
  color: rgba(38,37,37,.052);
}

body.home-page .section--about .about-motion__row--bottom span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(38,37,37,.06);
  text-stroke: 1px rgba(38,37,37,.06);
}

/* Slightly quicker drift so the motion reads more clearly. */
body.home-page .section--about .about-motion__row--top .about-motion__track {
  animation-duration: 34s;
}

body.home-page .section--about .about-motion__row--bottom .about-motion__track {
  animation-duration: 40s;
}

/* Keep the vector accents visible enough to support the system. */
body.home-page .section--about .about-motion__vector--ring {
  right: 6.5%;
  top: 18%;
  border-color: rgba(226,168,20,.09);
  opacity: .95;
}

body.home-page .section--about .about-motion__vector--dot {
  right: calc(6.5% + clamp(41px, 4.5vw, 56px));
  top: calc(18% + clamp(41px, 4.5vw, 56px));
  background: rgba(226,168,20,.28);
  box-shadow: 0 0 0 8px rgba(226,168,20,.035);
  opacity: .95;
}

body.home-page .section--about .about-motion__vector--line {
  right: 4.5%;
  top: 40%;
  opacity: .74;
}

@media (max-width: 860px) {
  body.home-page .section--about .about-motion {
    opacity: .9;
  }

  body.home-page .section--about .about-motion__row {
    left: -20%;
    width: 142%;
  }

  body.home-page .section--about .about-motion__row--top {
    top: 34%;
  }

  body.home-page .section--about .about-motion__row--bottom {
    top: 72%;
  }

  body.home-page .section--about .about-motion__row span {
    font-size: clamp(4.6rem, 19vw, 8.8rem);
  }
}


/* =========================================================
   V67 — gigantic seamless About marquee
   - very large background words
   - truly continuous loop using duplicate equal-width groups
   - preserves ZiFPIM casing (small "i")
   ========================================================= */

/* Never force ZiFPIM to uppercase in this chapter. */
body.home-page .section--about .section-label span:last-child {
  text-transform: none !important;
}

/* The moving typography intentionally passes over the content. */
body.home-page .section--about .about-motion {
  z-index: 4;
  opacity: .98;
}

body.home-page .section--about .section-label,
body.home-page .section--about .about-editorial {
  z-index: 3;
}

body.home-page .section--about .about-motion__row {
  left: 0;
  width: 100%;
  overflow: hidden;
}

body.home-page .section--about .about-motion__row--top {
  top: 24%;
  opacity: .98;
}

body.home-page .section--about .about-motion__row--bottom {
  top: 62%;
  opacity: .82;
}

/* Two identical groups make the end frame visually identical to
   the start frame. There is no reset jump at the viewport edge. */
body.home-page .section--about .about-motion__track {
  display: flex;
  width: max-content;
  gap: 0;
  will-change: transform;
}

body.home-page .section--about .about-motion__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(4rem, 7vw, 8rem);
  padding-right: clamp(4rem, 7vw, 8rem);
  white-space: nowrap;
}

body.home-page .section--about .about-motion__row span {
  flex: 0 0 auto;
  font-size: clamp(9rem, 22vw, 20rem);
  line-height: .76;
  letter-spacing: -.075em;
  font-weight: 800;
  text-transform: none !important;
  white-space: nowrap;
}

/* Keep the opacity character from the approved bolder version. */
body.home-page .section--about .about-motion__row--top span {
  color: rgba(38,37,37,.052);
}

body.home-page .section--about .about-motion__row--bottom span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(38,37,37,.06);
  text-stroke: 1px rgba(38,37,37,.06);
}

/* Seamless snake-style circulation: the second group replaces the
   first pixel-for-pixel exactly when the cycle repeats. */
body.home-page .section--about .about-motion__row--top .about-motion__track {
  animation: zifpimAboutMarqueeForward 48s linear infinite !important;
}

body.home-page .section--about .about-motion__row--bottom .about-motion__track {
  animation: zifpimAboutMarqueeReverse 58s linear infinite !important;
}

@keyframes zifpimAboutMarqueeForward {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes zifpimAboutMarqueeReverse {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@media (max-width: 860px) {
  body.home-page .section--about .about-motion__row--top {
    top: 31%;
  }

  body.home-page .section--about .about-motion__row--bottom {
    top: 68%;
  }

  body.home-page .section--about .about-motion__row span {
    font-size: clamp(7rem, 30vw, 13rem);
  }

  body.home-page .section--about .about-motion__group {
    gap: 3rem;
    padding-right: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .section--about .about-motion__row--top .about-motion__track,
  body.home-page .section--about .about-motion__row--bottom .about-motion__track {
    animation: none !important;
    transform: translate3d(-10%, 0, 0);
  }
}


/* =========================================================
   V68 — About marquee slower pass
   User request: slow the giant ABOUT ZiFPIM motion down.
   ========================================================= */

body.home-page .section--about .about-motion__row--top .about-motion__track {
  animation-duration: 82s !important;
}

body.home-page .section--about .about-motion__row--bottom .about-motion__track {
  animation-duration: 96s !important;
}

@media (max-width: 860px) {
  body.home-page .section--about .about-motion__row--top .about-motion__track {
    animation-duration: 72s !important;
  }

  body.home-page .section--about .about-motion__row--bottom .about-motion__track {
    animation-duration: 84s !important;
  }
}


/* =========================================================
   V69 — ultra-slow About ZiFPIM marquee
   ========================================================= */

body.home-page .section--about .about-motion__row--top .about-motion__track {
  animation-duration: 160s !important;
}

body.home-page .section--about .about-motion__row--bottom .about-motion__track {
  animation-duration: 190s !important;
}

/* Preserve title case exactly as written in the HTML. */
body.home-page .section--about .about-motion__row span {
  text-transform: none !important;
}

@media (max-width: 860px) {
  body.home-page .section--about .about-motion__row--top .about-motion__track {
    animation-duration: 130s !important;
  }

  body.home-page .section--about .about-motion__row--bottom .about-motion__track {
    animation-duration: 150s !important;
  }
}


/* =========================================================
   V70 — clean About marquee
   - removes faint gold circle/line/dot vector accents
   - replaces outline marquee text with clean faint filled type
   ========================================================= */

/* Remove the decorative gold vector shapes entirely. */
body.home-page .section--about .about-motion__vector--ring,
body.home-page .section--about .about-motion__vector--line,
body.home-page .section--about .about-motion__vector--dot {
  display: none !important;
}

/* The lower marquee uses a clean filled treatment instead of text-stroke.
   This avoids the internal line/shapey artefacts visible at very large sizes. */
body.home-page .section--about .about-motion__row--bottom span {
  color: rgba(38,37,37,.028) !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  text-shadow: none !important;
}

/* Keep the upper row slightly stronger for depth. */
body.home-page .section--about .about-motion__row--top span {
  color: rgba(38,37,37,.052) !important;
}


/* =========================================================
   V71 — exact-centre desktop navigation + hero scroll cue
   ========================================================= */

/* Centre the PRIMARY NAV against the viewport itself — not merely
   the remaining space between the logo and Partner With Us. */
@media (min-width: 1101px) {
  .editorial-header {
    position: fixed;
  }

  .editorial-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    justify-self: auto;
    transform: translate(-50%, -50%);
    margin: 0;
    gap: clamp(24px, 2.55vw, 44px);
  }

  /* Keep the existing scrolled-state movement but preserve the
     true horizontal centre. */
  .editorial-header.is-scrolled .editorial-nav {
    transform: translate(-50%, calc(-50% - 5px));
  }
}

/* Dedicated centre-bottom scroll direction cue. */
.hero-scroll-cue {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.78);
  pointer-events: none;
}

.hero-scroll-cue__label {
  font-size: .52rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero-scroll-cue__arrow {
  position: relative;
  display: block;
  width: 20px;
  height: 35px;
  overflow: visible;
}

.hero-scroll-cue__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,.56);
  transform: translateX(-50%);
  transform-origin: top center;
}

.hero-scroll-cue__arrow i {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: translateX(-50%) rotate(45deg);
}

.hero-scroll-cue__arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(226,168,20,.08);
  animation: zifpimScrollDrop 2.6s cubic-bezier(.35,0,.2,1) infinite;
}

@keyframes zifpimScrollDrop {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0) scale(.75);
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 1;
    transform: translate3d(-50%, 21px, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, 27px, 0) scale(.8);
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  .hero-scroll-cue {
    bottom: 11px;
  }
}

@media (min-width: 901px) and (max-height: 700px) {
  .hero-scroll-cue {
    bottom: 7px;
  }

  .hero-scroll-cue__label {
    display: none;
  }
}

/* Keep the cue useful on tablets/phones even though the original
   bottom-right tagline is hidden there. */
@media (max-width: 860px) {
  .hero-scroll-cue {
    bottom: 12px;
  }

  .hero-scroll-cue__label {
    font-size: .48rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue__arrow::after {
    animation: none;
    top: 16px;
    opacity: .8;
  }
}


/* =========================================================
   V72 — hero chevron only + header action position fix
   ========================================================= */

/* V71 made the primary nav absolute so it could be mathematically
   centred in the viewport. Explicitly keep Partner With Us in the
   fourth grid column so it stays locked to the far-right edge. */
@media (min-width: 1101px) {
  .editorial-header__actions {
    grid-column: 4;
    justify-self: end;
    margin: 0;
  }

  .editorial-partner--v37 {
    margin: 0;
  }
}

/* Scroll cue: ONLY the V/chevron remains. */
.hero-scroll-cue {
  bottom: 18px;
  gap: 0;
}

.hero-scroll-cue__label {
  display: none !important;
}

.hero-scroll-cue__arrow {
  width: 24px;
  height: 22px;
  overflow: visible;
}

/* Remove the stem and travelling dot from V71. */
.hero-scroll-cue__arrow::before,
.hero-scroll-cue__arrow::after {
  display: none !important;
  content: none !important;
}

/* Animate only the V-shaped arrow head. */
.hero-scroll-cue__arrow i {
  left: 50%;
  top: 1px;
  bottom: auto;
  width: 13px;
  height: 13px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translate3d(-50%, 0, 0) rotate(45deg);
  transform-origin: center;
  will-change: transform, opacity;
  animation: zifpimChevronDown 2.35s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes zifpimChevronDown {
  0% {
    opacity: .38;
    transform: translate3d(-50%, -3px, 0) rotate(45deg) scale(.92);
  }
  45% {
    opacity: 1;
    transform: translate3d(-50%, 5px, 0) rotate(45deg) scale(1);
  }
  72% {
    opacity: .92;
    transform: translate3d(-50%, 7px, 0) rotate(45deg) scale(1);
  }
  100% {
    opacity: .38;
    transform: translate3d(-50%, -3px, 0) rotate(45deg) scale(.92);
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  .hero-scroll-cue {
    bottom: 12px;
  }
}

@media (min-width: 901px) and (max-height: 700px) {
  .hero-scroll-cue {
    bottom: 8px;
  }
}

@media (max-width: 860px) {
  .hero-scroll-cue {
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue__arrow i {
    animation: none !important;
    opacity: .85;
    transform: translate3d(-50%, 3px, 0) rotate(45deg);
  }
}


/* =========================================================
   V73 — tappable hero scroll cue
   ========================================================= */

.hero-scroll-cue {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.hero-scroll-cue:focus-visible {
  outline: 1px solid rgba(226,168,20,.78);
  outline-offset: 8px;
  border-radius: 999px;
}

.hero-scroll-cue:hover .hero-scroll-cue__arrow i {
  border-right-color: #ffd15b;
  border-bottom-color: #ffd15b;
}


/* =========================================================
   V74 — header motion + matrix nav hover
   1) Menu bars glide left as the brand collapses
   2) Header nav text gets a gold matrix/scramble state
   ========================================================= */

@media (min-width: 1101px) {
  /* Keep the grid stable; the menu trigger now has its own motion path.
     This prevents the button from "jumping" when the logo collapses. */
  .editorial-header,
  .editorial-header.is-scrolled {
    grid-template-columns: 190px 38px 1fr auto;
  }

  .editorial-brand {
    grid-column: 1;
  }

  .editorial-menu-button {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: calc(max(3.2vw, calc((100vw - 1480px) / 2)) + 212px);
    transform: translateY(-50%);
    transition:
      left .64s cubic-bezier(.22,.78,.24,1),
      transform .32s var(--ease);
    will-change: left;
  }

  /* As the full logo resolves into the compact icon, the bars travel
     gently from right to left instead of snapping into the new grid cell. */
  .editorial-header.is-scrolled .editorial-menu-button {
    left: calc(max(3.2vw, calc((100vw - 1480px) / 2)) + 82px);
    transform: translateY(-50%);
  }

  .editorial-menu-button:hover {
    transform: translateY(-50%);
  }

  /* Partner action stays anchored at the far right. */
  .editorial-header__actions {
    grid-column: 4;
    justify-self: end;
  }
}

/* Matrix hover state: JS handles the character scramble,
   CSS supplies the branded gold signal and subtle digital glow. */
.editorial-nav a > span {
  position: relative;
  display: inline-block;
  transition:
    color .18s ease,
    text-shadow .18s ease,
    transform .22s var(--ease);
  min-width: max-content;
}

.editorial-nav a.is-matrix > span {
  color: var(--gold) !important;
  text-shadow:
    0 0 8px rgba(226,168,20,.16),
    0 0 18px rgba(226,168,20,.08);
  transform: translateY(-1px);
}

.editorial-nav a.is-matrix > sup {
  color: var(--gold) !important;
}

/* A tiny scan pulse underneath the scrambling word. */
.editorial-nav a > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: var(--gold);
  opacity: 0;
}

.editorial-nav a.is-matrix > span::after {
  animation: zifpimMatrixScan .68s cubic-bezier(.2,.8,.25,1) both;
}

@keyframes zifpimMatrixScan {
  0% {
    right: 100%;
    opacity: 0;
  }
  18% {
    opacity: .85;
  }
  70% {
    right: 0;
    opacity: .75;
  }
  100% {
    right: 0;
    opacity: .32;
  }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-menu-button,
  .editorial-header.is-scrolled .editorial-menu-button {
    transition: none !important;
  }

  .editorial-nav a.is-matrix > span::after {
    animation: none !important;
    right: 0;
    opacity: .3;
  }
}


/* =========================================================
   V75 — smoother Matrix hover, no underline
   ========================================================= */

/* Remove both the legacy nav underline and the V74 scan underline. */
.editorial-nav a::after,
.editorial-nav a:hover::after,
.editorial-nav a > span::after,
.editorial-nav a.is-matrix > span::after {
  display: none !important;
  content: none !important;
}

/* Keep each label's measured width stable while characters scramble,
   so neighbouring navigation items do not jitter horizontally. */
.editorial-nav a > span {
  display: inline-block;
  white-space: nowrap;
  overflow: visible;
  transition:
    color .34s ease,
    text-shadow .34s ease;
}

/* Softer gold state — less flash, more premium digital shimmer. */
.editorial-nav a.is-matrix > span {
  color: var(--gold) !important;
  text-shadow:
    0 0 6px rgba(226,168,20,.10),
    0 0 14px rgba(226,168,20,.045);
  transform: none !important;
}

.editorial-nav a.is-matrix > sup {
  color: var(--gold) !important;
  transition: color .34s ease;
}


/* =========================================================
   V76 — stable Matrix hover + one canonical header everywhere
   ========================================================= */

/* ---------- Stable matrix hover ----------
   The original word remains in normal document flow.
   The scrambled gold copy is absolutely overlaid, so no neighbouring
   nav item can shift when one link is hovered. */
.editorial-nav a > span {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: inherit;
  transform: none !important;
  text-shadow: none !important;
}

.editorial-nav .nav-matrix-layer {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  white-space: pre;
  color: var(--gold) !important;
  opacity: 0;
  pointer-events: none;
  text-shadow:
    0 0 5px rgba(226,168,20,.08),
    0 0 11px rgba(226,168,20,.035);
}

.editorial-nav a.is-matrix > span {
  color: transparent !important;
  transform: none !important;
}

.editorial-nav a.is-matrix .nav-matrix-layer {
  opacity: 1;
}

/* Only the selected word and its own number react. */
.editorial-nav a.is-matrix > sup {
  color: var(--gold) !important;
}

/* Absolutely no underline/scan treatment. */
.editorial-nav a::after,
.editorial-nav a:hover::after,
.editorial-nav a > span::after,
.editorial-nav a.is-matrix > span::after {
  display: none !important;
  content: none !important;
}

/* ---------- One header treatment on every page ----------
   Page colour/theme must never swap the header to white/dark branding.
   Scroll behaviour (logo collapse + menu-bar glide) remains the same. */
.editorial-header,
.home-page .editorial-header,
.page-dark .editorial-header:not(.is-scrolled),
.page-blue .editorial-header:not(.is-scrolled) {
  background: var(--paper) !important;
  color: var(--charcoal) !important;
  border-bottom-color: rgba(38,37,37,.16) !important;
}

.page-dark .editorial-header:not(.is-scrolled) .editorial-brand__full--colour,
.page-blue .editorial-header:not(.is-scrolled) .editorial-brand__full--colour,
.page-dark .editorial-header:not(.is-scrolled) .editorial-brand__icon--colour,
.page-blue .editorial-header:not(.is-scrolled) .editorial-brand__icon--colour {
  display: block !important;
}

.page-dark .editorial-header:not(.is-scrolled) .editorial-brand__full--white,
.page-blue .editorial-header:not(.is-scrolled) .editorial-brand__full--white,
.page-dark .editorial-header:not(.is-scrolled) .editorial-brand__icon--white,
.page-blue .editorial-header:not(.is-scrolled) .editorial-brand__icon--white {
  display: none !important;
}

.page-dark .editorial-header:not(.is-scrolled) .editorial-nav,
.page-blue .editorial-header:not(.is-scrolled) .editorial-nav,
.page-dark .editorial-header:not(.is-scrolled) .editorial-nav a,
.page-blue .editorial-header:not(.is-scrolled) .editorial-nav a {
  color: var(--charcoal) !important;
}

.page-dark .editorial-header:not(.is-scrolled) .editorial-nav sup,
.page-blue .editorial-header:not(.is-scrolled) .editorial-nav sup {
  color: var(--gold) !important;
}

.page-dark .editorial-header:not(.is-scrolled) .editorial-partner__label,
.page-blue .editorial-header:not(.is-scrolled) .editorial-partner__label {
  color: var(--blue) !important;
}

/* Preserve the exact same centred desktop layout on every page. */
@media (min-width: 1101px) {
  .editorial-nav {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    justify-self: auto !important;
  }

  .editorial-header.is-scrolled .editorial-nav {
    transform: translate(-50%, calc(-50% - 5px)) !important;
  }

  .editorial-header__actions {
    grid-column: 4 !important;
    justify-self: end !important;
    margin: 0 !important;
  }
}


/* =========================================================
   V79 — Matrix hover exits gold → charcoal, no flash
   ========================================================= */

/* Keep the animated copy on screen during mouse-leave.
   It changes colour instead of disappearing abruptly. */
.editorial-nav .nav-matrix-layer {
  transition: color .22s ease;
}

.editorial-nav a.is-matrix-returning > span {
  color: transparent !important;
}

.editorial-nav a.is-matrix-returning .nav-matrix-layer {
  opacity: 1 !important;
  color: var(--charcoal) !important;
  text-shadow: none !important;
}

/* The normal word underneath is already charcoal, so the final
   overlay handoff is visually invisible. */
.editorial-nav a:not(.is-matrix):not(.is-matrix-returning) > span {
  color: var(--charcoal);
}


/* =========================================================
   V80 — single-pass Matrix exit, no double flash
   ========================================================= */

/* The real label does not animate during the exit. Only the overlay
   changes from gold to charcoal, preventing two overlapping fades. */
.editorial-nav a > span {
  transition: none !important;
}

.editorial-nav .nav-matrix-layer {
  transition:
    color .18s ease,
    text-shadow .18s ease !important;
}

.editorial-nav a.is-matrix-returning > span {
  color: transparent !important;
}

.editorial-nav a.is-matrix-returning .nav-matrix-layer {
  opacity: 1 !important;
  color: var(--charcoal) !important;
  text-shadow: none !important;
}

/* Atomic final handoff: the underlying word is already charcoal at the
   exact moment the identical overlay disappears, so there is no flash. */
.editorial-nav a.is-matrix-handoff > span {
  color: var(--charcoal) !important;
  transition: none !important;
}

.editorial-nav a.is-matrix-handoff .nav-matrix-layer {
  opacity: 0 !important;
  transition: none !important;
}


/* =========================================================
   V81 — smoother 02 WHAT WE DO → 01 ABOUT ZiFPIM return
   ---------------------------------------------------------
   The About chapter has two huge continuously moving marquee
   layers. While the entire About stage is simultaneously scaling
   back out of its memory dot, those nested transforms can create
   a compositor hitch on older GPUs.

   Freeze only the ambient marquee while the chapter itself is
   morphing. Its current position is preserved, so there is no
   visual reset or fade; the parent transformation remains the
   only motion. The marquee resumes from the same point once the
   About chapter has fully settled.
   ========================================================= */

@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  body.home-page .section--about
  .about-morph-stage.is-morph-active
  .about-motion__track {
    animation-play-state: paused !important;
    will-change: auto !important;
  }

  /* Keep the ambient layer on one stable compositor surface while
     the parent stage grows/shrinks. */
  body.home-page .section--about
  .about-morph-stage.is-morph-active
  .about-motion {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}


/* =========================================================
   V82 — OUR INVESTMENT CASE / investment thesis chapter
   ========================================================= */

body.home-page .memory-morph-stage--investment {
  position: relative;
  isolation: isolate;
}

body.home-page .investment-value-ghost {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 46%;
  width: max-content;
  transform: translate3d(-50%, -50%, 0);
  font-family: "Manrope", sans-serif;
  font-size: clamp(11rem, 26vw, 25rem);
  line-height: .72;
  font-weight: 800;
  letter-spacing: -.085em;
  color: rgba(255,255,255,.026);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  animation: investmentValueDrift 20s ease-in-out infinite alternate;
}

@keyframes investmentValueDrift {
  from { transform: translate3d(calc(-50% - 18px), -50%, 0); }
  to   { transform: translate3d(calc(-50% + 18px), -50%, 0); }
}

body.home-page .investment-thesis {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .44fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(42px, 7vw, 112px);
  margin-top: 0;
  padding-top: clamp(22px, 4.5vh, 50px);
}

body.home-page .investment-thesis__statement {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  max-width: 940px;
}

body.home-page .investment-thesis__eyebrow {
  display: block;
  margin-bottom: clamp(10px, 1.7vh, 18px);
  color: rgba(255,255,255,.54);
  font-size: clamp(.65rem, .72vw, .78rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .17em;
}

body.home-page .investment-title {
  margin: 0 !important;
  max-width: none !important;
  font-family: "Manrope", sans-serif;
  font-size: clamp(4.6rem, min(10vw, 13.3vh), 10.4rem) !important;
  line-height: .76 !important;
  font-weight: 500 !important;
  letter-spacing: -.072em !important;
  color: rgba(255,255,255,.92);
}

body.home-page .investment-title span,
body.home-page .investment-title strong {
  display: block;
}

body.home-page .investment-title strong {
  margin-left: clamp(48px, 9vw, 150px);
  color: var(--gold);
  font-weight: 800;
}

body.home-page .investment-friction {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  max-width: 18ch;
  margin: 0 0 clamp(8px, 1.7vh, 18px);
  color: rgba(255,255,255,.72);
  font-size: clamp(1.05rem, 1.7vw, 1.6rem);
  line-height: 1.22;
  letter-spacing: -.035em;
}

body.home-page .investment-path {
  --investment-progress: 0%;
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 0;
  margin-top: clamp(28px, 5.2vh, 56px);
  padding-top: 17px;
}

body.home-page .investment-path__rail {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 2px;
  height: 1px;
  background: rgba(255,255,255,.17);
  overflow: visible;
}

body.home-page .investment-path__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--investment-progress);
  height: 1px;
  background: var(--gold);
  transition: width .52s cubic-bezier(.22,.78,.24,1);
}

body.home-page .investment-path__fill::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-50%);
  box-shadow: 0 0 0 5px rgba(226,168,20,.07);
}

body.home-page .investment-path__step {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1vw, 15px);
  width: max-content;
  max-width: 100%;
  padding: 5px 0 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.42);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

body.home-page .investment-path__step:nth-of-type(2) {
  justify-self: center;
}

body.home-page .investment-path__step:nth-of-type(3) {
  justify-self: end;
}

body.home-page .investment-path__step small {
  color: rgba(226,168,20,.62);
  font-size: .6rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .08em;
}

body.home-page .investment-path__step span {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.8rem, 3.55vw, 4.25rem);
  line-height: .95;
  font-weight: 700;
  letter-spacing: -.055em;
  transition:
    color .32s ease,
    transform .46s cubic-bezier(.22,.78,.24,1);
}

body.home-page .investment-path__step:hover span,
body.home-page .investment-path__step:focus-visible span,
body.home-page .investment-path__step.is-active span {
  color: var(--gold);
  transform: translate3d(0, -4px, 0);
}

body.home-page .investment-path__step:focus-visible {
  outline: none;
}

body.home-page .investment-path__step:focus-visible::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: rgba(226,168,20,.45);
}

body.home-page .investment-bottom--v82 {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: end;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) auto;
  align-items: end;
  gap: clamp(40px, 8vw, 132px);
  width: 100%;
  margin-top: auto !important;
  padding: clamp(18px, 3.1vh, 30px) 0 0 !important;
  border-top: 1px solid rgba(255,255,255,.17);
}

body.home-page .investment-bottom--v82 p {
  max-width: 78ch;
  color: rgba(255,255,255,.68);
  font-size: clamp(.84rem, 1.52vh, .98rem) !important;
  line-height: 1.55 !important;
}

body.home-page .investment-explore {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0 0 12px;
  color: var(--white);
  font-size: .72rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .055em;
  text-decoration: none;
  white-space: nowrap;
}

body.home-page .investment-explore::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background: var(--gold);
  transition: width .46s cubic-bezier(.22,.78,.24,1);
}

body.home-page .investment-explore b {
  display: inline-block;
  color: var(--gold);
  font-size: 1rem;
  font-weight: 500;
  transition: transform .38s cubic-bezier(.22,.78,.24,1);
}

body.home-page .investment-explore:hover::after,
body.home-page .investment-explore:focus-visible::after {
  width: 100%;
}

body.home-page .investment-explore:hover b,
body.home-page .investment-explore:focus-visible b {
  transform: translate3d(6px,0,0);
}

@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  body.home-page .memory-morph-stage--investment.is-morph-active .investment-value-ghost {
    animation-play-state: paused !important;
    will-change: auto !important;
  }
}

@media (min-width: 861px) and (max-height: 760px) {
  body.home-page .investment-thesis {
    padding-top: 16px;
  }

  body.home-page .investment-title {
    font-size: clamp(3.75rem, 10.5vh, 6.5rem) !important;
  }

  body.home-page .investment-path {
    margin-top: 22px;
  }

  body.home-page .investment-path__step span {
    font-size: clamp(1.55rem, 4.5vh, 2.65rem);
  }

  body.home-page .investment-bottom--v82 {
    padding-top: 13px !important;
  }
}

@media (max-width: 860px) {
  body.home-page .memory-morph-stage--investment {
    position: relative;
    overflow: hidden;
  }

  body.home-page .investment-value-ghost {
    top: 37%;
    font-size: clamp(8rem, 41vw, 15rem);
    animation-duration: 26s;
  }

  body.home-page .investment-thesis {
    display: block;
    padding-top: clamp(32px, 8vw, 58px);
  }

  body.home-page .investment-thesis__eyebrow {
    margin-bottom: 14px;
  }

  body.home-page .investment-title {
    font-size: clamp(4rem, 18vw, 7rem) !important;
    line-height: .79 !important;
  }

  body.home-page .investment-title strong {
    margin-left: clamp(30px, 12vw, 84px);
  }

  body.home-page .investment-friction {
    max-width: 22ch;
    margin: 28px 0 0 auto;
    font-size: clamp(1rem, 4.2vw, 1.32rem);
  }

  body.home-page .investment-path {
    margin-top: 42px;
    padding-top: 15px;
  }

  body.home-page .investment-path__step {
    display: block;
    width: auto;
  }

  body.home-page .investment-path__step small {
    display: block;
    margin-bottom: 6px;
  }

  body.home-page .investment-path__step span {
    font-size: clamp(1.05rem, 5vw, 1.75rem);
  }

  body.home-page .investment-bottom--v82 {
    display: block !important;
    margin-top: clamp(52px, 13vw, 90px) !important;
  }

  body.home-page .investment-explore {
    margin-top: 28px;
  }
}

@media (max-width: 540px) {
  body.home-page .investment-path__step span {
    font-size: clamp(.92rem, 4.6vw, 1.3rem);
  }

  body.home-page .investment-path__step small {
    font-size: .52rem;
  }

  body.home-page .investment-bottom--v82 p {
    font-size: .9rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .investment-value-ghost {
    animation: none !important;
  }

  body.home-page .investment-path__fill,
  body.home-page .investment-path__step span,
  body.home-page .investment-explore::after,
  body.home-page .investment-explore b {
    transition: none !important;
  }
}


/* =========================================================
   V83 — Investment Case auto-flow + narrative above divider
   ========================================================= */

/* The words are now state-driven by the automatic moving marker.
   Hover no longer changes the active stage. */
body.home-page .investment-path__step:hover span {
  color: inherit;
  transform: none;
}

body.home-page .investment-path__step.is-active span,
body.home-page .investment-path__step:focus-visible span {
  color: var(--gold);
  transform: translate3d(0, -4px, 0);
}

/* Make the moving marker feel like one continuous object. */
body.home-page .investment-path__fill {
  transition: width 1.18s cubic-bezier(.42,0,.18,1) !important;
}

body.home-page .investment-path__fill::after {
  width: 9px;
  height: 9px;
  right: -4.5px;
  box-shadow:
    0 0 0 5px rgba(226,168,20,.075),
    0 0 18px rgba(226,168,20,.12);
}

/* Recompose the lower chapter:
   copy first, divider under it, CTA beneath/right. */
body.home-page .investment-bottom--v83 {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: end;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "copy copy"
    "rule rule"
    ". cta";
  align-items: end;
  gap: 0;
  width: 100%;
  margin-top: auto !important;
  padding: 0 !important;
  border-top: 0 !important;
}

body.home-page .investment-bottom--v83 .investment-bottom__copy {
  grid-area: copy;
  max-width: 78ch;
  margin: 0 0 clamp(14px, 2.2vh, 22px);
  color: rgba(255,255,255,.68);
  font-size: clamp(.84rem, 1.52vh, .98rem) !important;
  line-height: 1.55 !important;
}

body.home-page .investment-bottom--v83 .investment-bottom__rule {
  grid-area: rule;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.17);
}

body.home-page .investment-bottom--v83 .investment-explore {
  grid-area: cta;
  justify-self: end;
  margin-top: clamp(18px, 2.8vh, 28px);
}

@media (min-width: 861px) and (max-height: 760px) {
  body.home-page .investment-bottom--v83 .investment-bottom__copy {
    margin-bottom: 11px;
  }

  body.home-page .investment-bottom--v83 .investment-explore {
    margin-top: 13px;
  }
}

@media (max-width: 860px) {
  body.home-page .investment-bottom--v83 {
    display: block !important;
    margin-top: clamp(52px, 13vw, 90px) !important;
  }

  body.home-page .investment-bottom--v83 .investment-bottom__copy {
    margin-bottom: 20px;
  }

  body.home-page .investment-bottom--v83 .investment-bottom__rule {
    display: block;
  }

  body.home-page .investment-bottom--v83 .investment-explore {
    margin-top: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .investment-path__fill {
    transition: none !important;
  }
}


/* =========================================================
   V84 — restore Investment Case dot morph + slower auto-flow
   ========================================================= */

@media (min-width: 861px) {
  /* V82's chapter styling made the investment stage position:relative
     with higher cascade priority. During morphing it must return to the
     exact fixed positioning expected by the original memory-dot engine. */
  body.home-page .memory-morph-stage--investment.is-morph-active {
    position: fixed !important;
    left: var(--memory-source-left, 0px) !important;
    top: 0 !important;
    margin: 0 !important;
  }

  body.home-page .memory-morph-stage--investment.is-dot-face {
    position: fixed !important;
  }
}

/* Slow the travelling gold marker down substantially. */
body.home-page .investment-path__fill {
  transition: width 2s cubic-bezier(.42,0,.18,1) !important;
}


/* =========================================================
   V85 — whole chapter morph surface
   ---------------------------------------------------------
   V55 deliberately separated each chapter background from the
   transforming stage. That made only the words/content shrink,
   while the chapter colour simply scrolled away underneath.

   Restore the visual skin to the SAME object that morphs so the
   background + content now travel together toward the gold dot.

   The outer scene keeps the same colour underneath, so there is
   no blank flash as the transforming object leaves the viewport.
   ========================================================= */

@media (min-width: 861px) {

  /* 01 — ABOUT ZiFPIM */
  body.home-page .section--about .about-morph-stage {
    background: var(--paper) !important;
  }

  /* 02 — WHAT WE DO */
  body.home-page .section--work .work-morph-stage {
    background: var(--blue) !important;
    color: var(--white);
  }

  /* 03 — OUR INVESTMENT CASE */
  body.home-page .section--investment .memory-morph-stage--investment {
    background: var(--charcoal) !important;
    color: var(--white);
  }

  /* 04 — FEATURED RESOURCE */
  body.home-page .section--resource .memory-morph-stage--resource {
    background: var(--paper) !important;
    color: var(--charcoal);
  }

  /* 05 — LATEST NEWS */
  body.home-page .section--news .memory-morph-stage--news {
    background: var(--paper) !important;
    color: var(--charcoal);
  }

  /* 06 — PARTNER WITH ZiFPIM */
  body.home-page .partner-section .memory-morph-stage--partner {
    background: var(--blue) !important;
    color: var(--white);
  }

  /* At the final 14px state, hand off cleanly to the existing
     pure-gold circular dot face. */
  body.home-page .about-morph-stage.is-dot-face,
  body.home-page .work-morph-stage.is-dot-face,
  body.home-page .memory-morph-stage.is-dot-face {
    background: transparent !important;
  }
}


/* =========================================================
   V86 — restore the proven V55/V56 morph architecture
   ---------------------------------------------------------
   Compared against the user's working backup.

   IMPORTANT:
   The page background must NOT be part of the shrinking object.
   The OUTER scene owns the full-page colour.
   The INNER stage is the information/object that transforms.
   This prevents the ugly "miniature webpage rectangle" seen in V85.

   Current section designs and Investment Case auto-flow are preserved.
   Only the visual ownership of chapter backgrounds is restored.
   ========================================================= */

@media (min-width: 861px) {

  /* -------------------------------------------------------
     OUTER SCENES — full viewport skin stays in normal flow
     ------------------------------------------------------- */

  body.home-page .section--about[data-about-morph-scene] {
    background: var(--paper) !important;
  }

  body.home-page .section--work[data-work-morph-scene] {
    background: var(--blue) !important;
    color: var(--white);
  }

  body.home-page .section--investment[data-memory-morph-scene] {
    background: var(--charcoal) !important;
    color: var(--white);
  }

  body.home-page .section--resource[data-memory-morph-scene],
  body.home-page .section--news[data-memory-morph-scene] {
    background: var(--paper) !important;
    color: var(--charcoal);
  }

  body.home-page .partner-section[data-memory-morph-scene] {
    background: var(--blue) !important;
    color: var(--white);
  }

  /* -------------------------------------------------------
     INNER MORPH OBJECTS — content only
     ------------------------------------------------------- */

  body.home-page .section--about .about-morph-stage,
  body.home-page .section--work .work-morph-stage,
  body.home-page .section--investment .memory-morph-stage--investment,
  body.home-page .section--resource .memory-morph-stage--resource,
  body.home-page .section--news .memory-morph-stage--news,
  body.home-page .partner-section .memory-morph-stage--partner {
    background: transparent !important;
  }

  /* Final 14px memory marker remains a pure gold circular face. */
  body.home-page .signature-hero__stage.is-dot-face,
  body.home-page .about-morph-stage.is-dot-face,
  body.home-page .work-morph-stage.is-dot-face,
  body.home-page .memory-morph-stage.is-dot-face {
    z-index: 280 !important;
    background: transparent !important;
  }
}


/* =========================================================
   V87 — About morph smoothing + Featured Resource editorial chapter
   - keeps ABOUT motion layer outside the shrinking dot logic
   - leaves the section surface stable while only chapter content morphs
   - upgrades Featured Resource into a more editorial object-led layout
   ========================================================= */

/* ABOUT — keep the paper surface in place and let only the chapter
   content participate in the dot morph. This matches the approved
   backup behaviour more closely and smooths the 01 reverse transition. */
body.home-page .section--about {
  position: relative;
  background: var(--paper);
  overflow: hidden;
}

body.home-page .section--about .about-motion {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

body.home-page .section--about .about-morph-stage {
  position: relative;
  z-index: 3;
  background: transparent !important;
  will-change: transform;
}

body.home-page .section--about .section-label,
body.home-page .section--about .about-editorial {
  position: relative;
  z-index: 3;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

body.home-page .section--about .about-motion__vector--line,
body.home-page .section--about .about-motion__vector--ring,
body.home-page .section--about .about-motion__vector--dot {
  display: none !important;
}

body.home-page .section--about .about-morph-stage.is-morph-active {
  transform-origin: 0 0;
  will-change: transform;
}

body.home-page .section--about .about-morph-stage.is-dot-face::after {
  box-shadow: 0 0 0 0 rgba(227,172,18,0.18);
}

/* FEATURED RESOURCE — editorial rebuild */
body.home-page .section--resource {
  position: relative;
  overflow: hidden;
}

body.home-page .section--resource .memory-morph-stage--resource {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper);
}

body.home-page .section--resource .resource-backdrop {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 54%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body.home-page .section--resource .resource-backdrop span {
  display: block;
  font-size: clamp(8rem, 19vw, 16rem);
  line-height: .78;
  letter-spacing: -.08em;
  font-weight: 800;
  color: rgba(38,37,37,.045);
  white-space: nowrap;
  animation: zifpimResourceDrift 16s ease-in-out infinite alternate;
}

@keyframes zifpimResourceDrift {
  from { transform: translate3d(-1.8%, 0, 0); }
  to   { transform: translate3d(1.8%, 0, 0); }
}

body.home-page .section--resource .section-label,
body.home-page .section--resource .resource-grid {
  position: relative;
  z-index: 2;
}

body.home-page .section--resource .resource-grid {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(290px, 430px) minmax(420px, 1fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
  padding-top: clamp(1.3rem, 2vh, 2rem);
  padding-bottom: clamp(1.8rem, 4vh, 3.2rem);
}

body.home-page .section--resource .resource-cover {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.home-page .section--resource .resource-cover__object {
  position: relative;
  width: min(420px, 43vh, 100%);
  animation: zifpimResourceFloat 7s ease-in-out infinite;
}

@keyframes zifpimResourceFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

body.home-page .section--resource .resource-cover__shadow {
  position: absolute;
  left: 10%;
  right: 8%;
  bottom: -30px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(22,22,22,.25) 0%, rgba(22,22,22,0) 74%);
  filter: blur(10px);
  opacity: .34;
  transition: transform .45s ease, opacity .45s ease;
}

body.home-page .section--resource .publication-cover {
  position: relative;
  width: 100%;
  margin: 0;
  box-shadow: 0 24px 52px rgba(38,37,37,.14);
  transform: perspective(1400px) rotateY(-8deg) rotateZ(-1.5deg);
  transition: transform .48s var(--ease), box-shadow .48s ease;
}

body.home-page .section--resource .publication-cover::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: var(--gold);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}

body.home-page .section--resource .resource-cover:hover .publication-cover,
body.home-page .section--resource .resource-cover:focus-within .publication-cover {
  transform: perspective(1400px) rotateY(-2deg) rotateZ(-.35deg) translate3d(0, -10px, 0);
  box-shadow: 0 34px 68px rgba(38,37,37,.19);
}

body.home-page .section--resource .resource-cover:hover .publication-cover::before,
body.home-page .section--resource .resource-cover:focus-within .publication-cover::before {
  transform: scaleX(1.03);
}

body.home-page .section--resource .resource-cover:hover .resource-cover__shadow,
body.home-page .section--resource .resource-cover:focus-within .resource-cover__shadow {
  transform: scale(.92) translateY(8px);
  opacity: .24;
}

body.home-page .section--resource .resource-copy {
  max-width: 52rem;
  align-self: center;
}

body.home-page .section--resource .resource-copy__eyebrow {
  margin: 0 0 1rem;
  font-size: .84rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--charcoal);
}

body.home-page .section--resource .resource-copy h2 {
  max-width: 9.8ch;
  margin-bottom: .85rem;
}

body.home-page .section--resource .resource-copy h3 {
  margin: 0 0 1.45rem;
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  line-height: 1.35;
  font-weight: 700;
  color: var(--gold);
}

body.home-page .section--resource .resource-copy__body,
body.home-page .section--resource .resource-copy > p:not(.resource-copy__eyebrow) {
  max-width: 39ch;
  margin-bottom: 0;
  font-size: clamp(1rem, 1.08vw, 1.1rem);
  line-height: 1.65;
  color: rgba(38,37,37,.78);
}

body.home-page .section--resource .resource-copy__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2rem;
  padding-bottom: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

body.home-page .section--resource .resource-copy__cta::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 74px;
  height: 2px;
  background: var(--gold);
  transition: width .32s var(--ease);
}

body.home-page .section--resource .resource-copy__cta:hover::before,
body.home-page .section--resource .resource-copy__cta:focus-visible::before {
  width: 110px;
}

body.home-page .section--resource .resource-copy__cta span {
  transition: transform .3s var(--ease);
}

body.home-page .section--resource .resource-copy__cta:hover span,
body.home-page .section--resource .resource-copy__cta:focus-visible span {
  transform: translateX(4px);
}

@media (max-width: 1100px) {
  body.home-page .section--resource .resource-grid {
    grid-template-columns: minmax(240px, 350px) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

@media (max-width: 860px) {
  body.home-page .section--resource .resource-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    padding-top: 2rem;
    padding-bottom: 2.2rem;
  }

  body.home-page .section--resource .resource-cover {
    justify-content: flex-start;
  }

  body.home-page .section--resource .resource-cover__object {
    width: min(330px, 84vw);
  }

  body.home-page .section--resource .resource-backdrop {
    top: 45%;
  }

  body.home-page .section--resource .resource-backdrop span {
    font-size: clamp(5.2rem, 16vw, 8rem);
  }

  body.home-page .section--resource .resource-copy h2 {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .section--resource .resource-backdrop span,
  body.home-page .section--resource .resource-cover__object {
    animation: none;
  }
}


/* =========================================================
   V88 — Featured Resource fixes
   1) remove stray gold hover shape on publication cover
   2) make EVIDENCE BRIEF backdrop movement deliberate + slower
   3) restore resource chapter -> gold dot morph
   ========================================================= */

/* The cover already has its own gold top strip.
   Remove the extra V87 pseudo strip that was extending past the book. */
body.home-page .section--resource .publication-cover::before {
  display: none !important;
  content: none !important;
}

body.home-page .section--resource .resource-cover:hover .publication-cover::before,
body.home-page .section--resource .resource-cover:focus-within .publication-cover::before {
  display: none !important;
  content: none !important;
  transform: none !important;
}

/* The large EVIDENCE BRIEF backdrop IS intentional.
   Make it a much slower, calmer horizontal drift. */
body.home-page .section--resource .resource-backdrop span {
  animation: zifpimResourceDriftV88 34s ease-in-out infinite alternate !important;
  will-change: transform;
}

@keyframes zifpimResourceDriftV88 {
  from { transform: translate3d(-2.5%, 0, 0); }
  to   { transform: translate3d(2.5%, 0, 0); }
}

/* Keep the approved V55/V56 architecture:
   the cream section surface stays full-page;
   only the RESOURCE CONTENT STAGE transforms toward the memory dot. */
body.home-page .section--resource .memory-morph-stage--resource {
  background: transparent !important;
}

@media (min-width: 861px) {
  body.home-page .section--resource
  .memory-morph-stage--resource.is-morph-active {
    position: fixed !important;
    left: var(--memory-source-left, 0px) !important;
    top: 0 !important;
    margin: 0 !important;
    transform-origin: 0 0 !important;
    will-change: transform;
  }

  body.home-page .section--resource
  .memory-morph-stage--resource.is-dot-face {
    position: fixed !important;
    background: transparent !important;
    pointer-events: none;
  }

  /* Ambient motion pauses only while the whole chapter is shrinking,
     keeping the morph compositor-light and smooth. */
  body.home-page .section--resource
  .memory-morph-stage--resource.is-morph-active
  .resource-backdrop span,
  body.home-page .section--resource
  .memory-morph-stage--resource.is-morph-active
  .resource-cover__object {
    animation-play-state: paused !important;
    will-change: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .section--resource .resource-backdrop span {
    animation: none !important;
  }
}


/* =========================================================
   V89 — Featured Resource cover warp hover
   Resting state stays calm; hover becomes visibly tactile/3D.
   ========================================================= */

/* Calm resting state */
body.home-page .section--resource .publication-cover {
  transform:
    perspective(1400px)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(-.45deg)
    skewY(0deg) !important;
  transform-origin: 18% 52%;
  transition:
    transform .62s cubic-bezier(.22,.78,.24,1),
    box-shadow .62s ease !important;
}

/* Hover/focus = deliberate 3D warp rather than flattening out */
body.home-page .section--resource .resource-cover:hover .publication-cover,
body.home-page .section--resource .resource-cover:focus-within .publication-cover {
  transform:
    perspective(1100px)
    rotateX(2.8deg)
    rotateY(-13deg)
    rotateZ(-1.3deg)
    skewY(-.7deg)
    translate3d(8px,-10px,0)
    scale(1.025) !important;
  box-shadow:
    30px 38px 72px rgba(38,37,37,.20),
    -7px 7px 18px rgba(38,37,37,.06) !important;
}

/* Shadow reacts in the opposite direction so the book feels physical. */
body.home-page .section--resource .resource-cover:hover .resource-cover__shadow,
body.home-page .section--resource .resource-cover:focus-within .resource-cover__shadow {
  transform: translate3d(14px,8px,0) scale(.88,.80) !important;
  opacity: .22 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .section--resource .publication-cover {
    transition: none !important;
  }
}


/* =========================================================
   V90 — Featured Resource CTA: yellow underline only
   ========================================================= */

body.home-page .section--resource .resource-copy__cta::after,
body.home-page .section--resource .resource-copy__cta:hover::after,
body.home-page .section--resource .resource-copy__cta:focus-visible::after {
  display: none !important;
  content: none !important;
}

/* Preserve the short ZiFPIM gold underline only. */
body.home-page .section--resource .resource-copy__cta::before {
  display: block !important;
}


/* =========================================================
   V91 — animate the giant EVIDENCE BRIEF background letters
   Keeps the movement slow, subtle and compositor-friendly.
   ========================================================= */

body.home-page .section--resource .resource-backdrop span {
  transform-origin: center center;
  animation: zifpimEvidenceBackdropMotion 24s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
}

@keyframes zifpimEvidenceBackdropMotion {
  0% {
    transform: translate3d(-3.2%, 0, 0) scale(1);
    opacity: .72;
  }

  50% {
    transform: translate3d(.8%, -5px, 0) scale(1.012);
    opacity: 1;
  }

  100% {
    transform: translate3d(3.2%, 4px, 0) scale(1.024);
    opacity: .8;
  }
}

/* Preserve the smooth morph: ambient backdrop stops moving
   while the Featured Resource chapter is shrinking into its dot. */
@media (min-width: 861px) {
  body.home-page .section--resource
  .memory-morph-stage--resource.is-morph-active
  .resource-backdrop span {
    animation-play-state: paused !important;
    will-change: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .section--resource .resource-backdrop span {
    animation: none !important;
    opacity: .82;
    transform: translate3d(0,0,0);
  }
}


/* =========================================================
   V92 — About moving words rejoin the morph + CTA line fix
   ========================================================= */

/* ---------- 04 Featured Resource CTA ----------
   Remove every possible inherited black underline/border from
   the generic .text-link styling. Keep ONLY our short gold rule. */
body.home-page .section--resource a.resource-copy__cta,
body.home-page .section--resource a.resource-copy__cta:link,
body.home-page .section--resource a.resource-copy__cta:visited,
body.home-page .section--resource a.resource-copy__cta:hover,
body.home-page .section--resource a.resource-copy__cta:focus,
body.home-page .section--resource a.resource-copy__cta:focus-visible {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  background-image: none !important;
}

body.home-page .section--resource a.resource-copy__cta::after,
body.home-page .section--resource a.resource-copy__cta:hover::after,
body.home-page .section--resource a.resource-copy__cta:focus::after,
body.home-page .section--resource a.resource-copy__cta:focus-visible::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.home-page .section--resource a.resource-copy__cta::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 74px !important;
  height: 2px !important;
  background: var(--gold) !important;
  border: 0 !important;
}

/* ---------- 01 ABOUT ZiFPIM ----------
   The large moving typography is again part of the SAME morph object
   as the heading/copy. The paper section background itself remains
   outside the morph, preserving the locked V55/V56 architecture. */
body.home-page .section--about .about-morph-stage {
  position: relative;
  overflow: hidden;
  background: transparent !important;
  isolation: isolate;
}

body.home-page .section--about .about-morph-stage > .about-motion {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none;
  overflow: hidden;
}

body.home-page .section--about .about-morph-stage > .section-label,
body.home-page .section--about .about-morph-stage > .about-editorial {
  position: relative;
  z-index: 3;
}

/* During the actual dot morph, freeze the huge internal marquee at
   its current frame. It still shrinks WITH the rest of the chapter,
   but it no longer runs a second animation at the same time. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  body.home-page .section--about
  .about-morph-stage.is-morph-active
  .about-motion__track {
    animation-play-state: paused !important;
    will-change: auto !important;
  }

  body.home-page .section--about
  .about-morph-stage.is-morph-active
  .about-motion {
    will-change: auto !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

/* Decorative vectors remain removed. */
body.home-page .section--about .about-motion__vector--line,
body.home-page .section--about .about-motion__vector--ring,
body.home-page .section--about .about-motion__vector--dot {
  display: none !important;
}


/* =========================================================
   V93 — 05 LATEST NEWS / editorial newsroom chapter
   ---------------------------------------------------------
   Keeps the locked V55/V56 morph architecture:
   paper surface stays full-page; newsroom content becomes the dot.
   ========================================================= */

body.home-page .section--news {
  position: relative;
  overflow: hidden;
  background: var(--paper) !important;
}

/* The morph object remains transparent: never shrink the cream page surface. */
body.home-page .section--news .memory-morph-stage--news {
  background: transparent !important;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* One large newsroom word, with its own motion language:
   slow vertical drift instead of About/Resource horizontal motion. */
body.home-page .section--news .news-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

body.home-page .section--news .news-backdrop span {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: clamp(14rem, 38vw, 36rem);
  line-height: .72;
  font-weight: 800;
  letter-spacing: -.095em;
  color: rgba(38,37,37,.034);
  white-space: nowrap;
  transform: translate3d(0, 22px, 0);
  animation: zifpimNewsDrift 32s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes zifpimNewsDrift {
  from {
    transform: translate3d(0, 34px, 0) scale(.985);
    opacity: .72;
  }
  to {
    transform: translate3d(0, -28px, 0) scale(1.018);
    opacity: 1;
  }
}

body.home-page .section--news .section-label,
body.home-page .section--news .news-heading,
body.home-page .section--news .news-editorial {
  position: relative;
  z-index: 2;
}

/* Header row */
body.home-page .section--news .news-heading--editorial {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
  margin: clamp(18px, 3.2vh, 36px) 0 0;
  padding-bottom: clamp(15px, 2vh, 22px);
  border-bottom: 1px solid rgba(38,37,37,.15);
}

body.home-page .section--news .news-heading--editorial .display-heading {
  margin: 0 !important;
  max-width: none !important;
  font-size: clamp(3.4rem, min(6vw, 8.4vh), 6.4rem) !important;
  line-height: .92 !important;
}

/* Generic newsroom CTA — only the ZiFPIM gold line. */
body.home-page .section--news .news-editorial-link,
body.home-page .section--news .news-editorial-link:link,
body.home-page .section--news .news-editorial-link:visited,
body.home-page .section--news .news-editorial-link:hover,
body.home-page .section--news .news-editorial-link:focus,
body.home-page .section--news .news-editorial-link:focus-visible {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  padding: 0 0 12px;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--charcoal);
  text-decoration: none !important;
  font-size: .72rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .055em;
}

body.home-page .section--news .news-editorial-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 55px;
  height: 2px;
  background: var(--gold);
  transition: width .42s cubic-bezier(.22,.78,.24,1);
}

body.home-page .section--news .news-editorial-link::after {
  display: none !important;
  content: none !important;
}

body.home-page .section--news .news-editorial-link b {
  color: var(--gold);
  font-size: .96rem;
  font-weight: 500;
  transition: transform .34s cubic-bezier(.22,.78,.24,1);
}

body.home-page .section--news .news-editorial-link:hover::before,
body.home-page .section--news .news-editorial-link:focus-visible::before {
  width: 100%;
}

body.home-page .section--news .news-editorial-link:hover b,
body.home-page .section--news .news-editorial-link:focus-visible b {
  transform: translate3d(5px,0,0);
}

/* Main story consumes the chapter rather than sitting at the bottom. */
body.home-page .section--news .news-editorial {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: clamp(22px, 4vh, 44px) 0 clamp(20px, 3vh, 34px);
}

body.home-page .section--news .news-editorial__story {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr);
  gap: clamp(36px, 6vw, 92px);
  align-items: center;
}

/* Editorial image object */
body.home-page .section--news .news-editorial__image {
  position: relative;
  min-width: 0;
  overflow: visible;
}

body.home-page .section--news .news-editorial__image-inner {
  position: relative;
  width: 100%;
  min-height: clamp(250px, 42vh, 470px);
  margin: 0;
  overflow: hidden;
  transform: scale(1.01);
  transform-origin: center;
  transition: transform .72s cubic-bezier(.22,.78,.24,1);
}

body.home-page .section--news .news-editorial__image-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(53,88,167,.025), rgba(226,168,20,.035));
  pointer-events: none;
}

body.home-page .section--news .news-editorial__image-index {
  position: absolute;
  right: -12px;
  bottom: -15px;
  z-index: 2;
  color: var(--gold);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.075em;
  opacity: .18;
  pointer-events: none;
  transition: transform .62s cubic-bezier(.22,.78,.24,1), opacity .4s ease;
}

body.home-page .section--news .news-editorial__story:hover .news-editorial__image-inner {
  transform: scale(1.038);
}

body.home-page .section--news .news-editorial__story:hover .news-editorial__image-index {
  transform: translate3d(-8px,-6px,0);
  opacity: .32;
}

/* Story typography */
body.home-page .section--news .news-editorial__content {
  align-self: center;
  min-width: 0;
}

body.home-page .section--news .news-editorial__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(18px, 2.7vh, 28px);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(38,37,37,.15);
  color: rgba(38,37,37,.58);
  font-size: .64rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .105em;
  text-transform: uppercase;
}

body.home-page .section--news .news-editorial__headline {
  margin: 0;
  max-width: 17ch;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, min(3.4vw, 5vh), 3.75rem);
  line-height: .98;
  font-weight: 750;
  letter-spacing: -.052em;
  color: var(--charcoal);
}

body.home-page .section--news .news-editorial__headline span {
  display: block;
  transform: translate3d(0,0,0);
  transition: transform .55s cubic-bezier(.22,.78,.24,1), color .35s ease;
}

body.home-page .section--news .news-editorial__headline span:nth-child(1) {
  transition-delay: 0ms;
}

body.home-page .section--news .news-editorial__headline span:nth-child(2) {
  transition-delay: 35ms;
}

body.home-page .section--news .news-editorial__headline span:nth-child(3) {
  transition-delay: 70ms;
}

body.home-page .section--news .news-editorial__headline span:nth-child(4) {
  transition-delay: 105ms;
}



body.home-page .section--news .news-editorial-link--story {
  margin-top: clamp(24px, 3.7vh, 38px);
}

/* Keep the ambient newsroom motion from competing with the chapter morph. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  body.home-page .section--news
  .memory-morph-stage--news.is-morph-active
  .news-backdrop span {
    animation-play-state: paused !important;
    will-change: auto !important;
  }
}

/* Fit shorter desktop screens without reintroducing bottom-heavy whitespace. */
@media (min-width: 861px) and (max-height: 740px) {
  body.home-page .section--news .news-heading--editorial {
    margin-top: 14px;
    padding-bottom: 11px;
  }

  body.home-page .section--news .news-heading--editorial .display-heading {
    font-size: clamp(3rem, 7.1vh, 4.6rem) !important;
  }

  body.home-page .section--news .news-editorial {
    padding: 15px 0 18px;
  }

  body.home-page .section--news .news-editorial__image-inner {
    min-height: clamp(210px, 35vh, 330px);
  }

  body.home-page .section--news .news-editorial__headline {
    font-size: clamp(1.7rem, 4.1vh, 2.6rem);
  }
}

/* Responsive behaviour keeps the single story intentional now and leaves
   the DOM structure suitable for additional story articles later. */
@media (max-width: 860px) {
  body.home-page .section--news .news-heading--editorial {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.home-page .section--news .news-editorial {
    display: block;
    padding: 34px 0 42px;
  }

  body.home-page .section--news .news-editorial__story {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  body.home-page .section--news .news-editorial__image-inner {
    min-height: clamp(230px, 58vw, 430px);
  }

  body.home-page .section--news .news-editorial__image-index {
    right: 4px;
  }

  body.home-page .section--news .news-editorial__headline {
    max-width: 100%;
    font-size: clamp(2rem, 8.8vw, 3.5rem);
  }

  body.home-page .section--news .news-backdrop span {
    font-size: clamp(11rem, 68vw, 24rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .section--news .news-backdrop span {
    animation: none !important;
    transform: translate3d(0,0,0);
  }

  body.home-page .section--news .news-editorial__image-inner,
  body.home-page .section--news .news-editorial__image-index,
  body.home-page .section--news .news-editorial__headline span,
  body.home-page .section--news .news-editorial-link::before,
  body.home-page .section--news .news-editorial-link b {
    transition: none !important;
  }
}


/* =========================================================
   V94 — Newsroom sample image + remaining editorial details
   ========================================================= */

body.home-page .section--news .news-editorial__image-inner img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  transform: scale(1.018);
  transition: transform .78s cubic-bezier(.22,.78,.24,1);
}

body.home-page .section--news .news-editorial__story:hover
.news-editorial__image-inner img {
  transform: scale(1.065);
}

body.home-page .section--news .news-editorial__image-caption {
  position: relative;
  margin: 18px 0 0;
  padding-top: 15px;
  max-width: 48rem;
  color: rgba(38,37,37,.60);
  font-size: clamp(.82rem, 1vw, .98rem);
  line-height: 1.45;
  font-style: italic;
}

body.home-page .section--news .news-editorial__image-caption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 2px;
  background: var(--gold);
}

body.home-page .section--news .news-editorial__date {
  display: grid;
  gap: 5px;
  justify-items: end;
  text-align: right;
}

body.home-page .section--news .news-editorial__date time,
body.home-page .section--news .news-editorial__date span {
  display: block;
}

body.home-page .section--news .news-editorial__date span {
  color: rgba(38,37,37,.48);
}

/* A slim gold editorial separator adds a newsroom-column feeling
   without turning the layout into a card. */
body.home-page .section--news .news-editorial__content {
  position: relative;
  padding-left: clamp(18px, 2.2vw, 30px);
}

body.home-page .section--news .news-editorial__content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 42%;
  width: 1px;
  height: 84px;
  background: var(--gold);
  opacity: .72;
  transform: translateY(-50%);
}

/* Keep sample image/details out of the dot-face visual. */
@media (min-width: 861px) {
  body.home-page .section--news
  .memory-morph-stage--news.is-morph-active
  .news-editorial__image-inner img {
    transition: none !important;
  }
}

@media (max-width: 860px) {
  body.home-page .section--news .news-editorial__content {
    padding-left: 0;
  }

  body.home-page .section--news .news-editorial__content::before {
    display: none;
  }

  body.home-page .section--news .news-editorial__date {
    justify-items: start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .section--news .news-editorial__image-inner img {
    transition: none !important;
    transform: none !important;
  }
}



/* V95 — newsroom polish
   - swaps in a cleaner sample editorial image without the extra word overlay
   - removes the faint gold 01 on the image
   - replaces the old lateral headline hover with a softer editorial highlight reveal */

body.home-page .section--news .news-editorial__image-index {
  display: none !important;
}

body.home-page .section--news .news-editorial__image-inner {
  border-radius: 0;
}

body.home-page .section--news .news-editorial__image-inner img {
  transform: scale(1.01);
  transition: transform .85s cubic-bezier(.22,.78,.24,1), filter .45s ease;
}

body.home-page .section--news .news-editorial__story:hover .news-editorial__image-inner img,
body.home-page .section--news .news-editorial__image:hover .news-editorial__image-inner img {
  transform: scale(1.045);
  filter: saturate(1.03) contrast(1.01);
}

body.home-page .section--news .news-editorial__headline {
  position: relative;
}

body.home-page .section--news .news-editorial__headline span {
  display: block;
  width: max-content;
  max-width: 100%;
  background-image: linear-gradient(transparent 0, transparent 62%, rgba(226,168,20,.22) 62%, rgba(226,168,20,.22) 100%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 100%;
  transition:
    transform .42s cubic-bezier(.22,.78,.24,1),
    background-size .46s cubic-bezier(.22,.78,.24,1),
    color .24s ease;
}

body.home-page .section--news .news-editorial__headline:hover span,
body.home-page .section--news .news-editorial__story:hover .news-editorial__headline:hover span {
  transform: translate3d(0,-4px,0);
  background-size: 100% 100%;
}

body.home-page .section--news .news-editorial__headline:hover span:nth-child(1) {
  transition-delay: 0ms;
}
body.home-page .section--news .news-editorial__headline:hover span:nth-child(2) {
  transition-delay: 35ms;
}
body.home-page .section--news .news-editorial__headline:hover span:nth-child(3) {
  transition-delay: 70ms;
}
body.home-page .section--news .news-editorial__headline:hover span:nth-child(4) {
  transition-delay: 105ms;
}

body.home-page .section--news .news-editorial__headline:hover + .news-editorial-link--story,
body.home-page .section--news .news-editorial__story:hover .news-editorial-link--story {
  color: var(--charcoal);
}



/* =========================================================
   V96 — 06 PARTNER WITH US / interactive partnership network
   ---------------------------------------------------------
   Locked morph architecture preserved:
   the OUTER scene owns the blue background; this INNER content
   stage remains transparent and is what transforms into dot 7.
   ========================================================= */

body.home-page .partner-section[data-memory-morph-scene] {
  position: relative;
  overflow: hidden;
  background: var(--blue) !important;
  color: var(--white);
}

body.home-page .partner-section .memory-morph-stage--partner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  min-height: 100vh;
  background: transparent !important;
  isolation: isolate;
}

/* Calm final-chapter typography. Unlike About/Resource/News, the two
   words move diagonally and extremely slowly. */
body.home-page .partner-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

body.home-page .partner-backdrop__word {
  position: absolute;
  display: block;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  line-height: .76;
  letter-spacing: -.085em;
  color: rgba(255,255,255,.048);
  white-space: nowrap;
  will-change: transform;
}

body.home-page .partner-backdrop__word--one {
  top: 12%;
  left: -3%;
  font-size: clamp(11rem, 26vw, 27rem);
  animation: zifpimPartnerBackdropOne 42s ease-in-out infinite alternate;
}

body.home-page .partner-backdrop__word--two {
  right: -2%;
  bottom: -3%;
  font-size: clamp(10rem, 23vw, 24rem);
  animation: zifpimPartnerBackdropTwo 48s ease-in-out infinite alternate;
}

@keyframes zifpimPartnerBackdropOne {
  from { transform: translate3d(-2.5%, 10px, 0); }
  to   { transform: translate3d(2.5%, -16px, 0); }
}

@keyframes zifpimPartnerBackdropTwo {
  from { transform: translate3d(2%, 8px, 0); }
  to   { transform: translate3d(-3%, -14px, 0); }
}

body.home-page .partner-section__label,
body.home-page .partner-editorial {
  position: relative;
  z-index: 2;
}

body.home-page .partner-section__label {
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.20);
}

body.home-page .partner-section__label > span:first-child {
  color: var(--gold);
}

body.home-page .partner-editorial {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(420px, .93fr) minmax(480px, 1.07fr);
  gap: clamp(50px, 7vw, 112px);
  align-items: center;
  padding: clamp(24px, 4vh, 44px) 0 clamp(16px, 3vh, 30px);
}

body.home-page .partner-editorial__copy {
  width: 100%;
  max-width: 690px;
}

body.home-page .partner-editorial__copy .eyebrow {
  margin: 0 0 20px;
  color: rgba(255,255,255,.90);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

body.home-page .partner-editorial__copy h2 {
  margin: 0;
  max-width: 8.4ch;
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: clamp(4rem, min(7.2vw, 10.4vh), 7.7rem) !important;
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 760;
}

body.home-page .partner-editorial__lead {
  max-width: 660px;
  margin: clamp(24px, 4vh, 42px) 0 0;
  color: rgba(255,255,255,.82);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.5;
}

/* Editorial CTA — no pill. */
body.home-page .partner-editorial__cta,
body.home-page .partner-editorial__cta:link,
body.home-page .partner-editorial__cta:visited,
body.home-page .partner-editorial__cta:hover,
body.home-page .partner-editorial__cta:focus,
body.home-page .partner-editorial__cta:focus-visible {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  width: max-content;
  margin-top: clamp(26px, 4.6vh, 48px);
  padding: 0 0 14px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--white) !important;
  text-decoration: none !important;
  font-size: clamp(.82rem, 1vw, .96rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .17em;
}

body.home-page .partner-editorial__cta::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 78px;
  height: 2px;
  background: var(--gold);
  transition: width .48s cubic-bezier(.22,.78,.24,1);
}

body.home-page .partner-editorial__cta::after {
  display: none !important;
  content: none !important;
}

body.home-page .partner-editorial__cta b {
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: 500;
  transition: transform .42s cubic-bezier(.22,.78,.24,1);
}

body.home-page .partner-editorial__cta:hover::before,
body.home-page .partner-editorial__cta:focus-visible::before {
  width: 100%;
}

body.home-page .partner-editorial__cta:hover b,
body.home-page .partner-editorial__cta:focus-visible b {
  transform: translate3d(7px,0,0);
}

/* ---------------- Partnership network ---------------- */
body.home-page .partner-network {
  --network-size: clamp(430px, 42vw, 610px);
  position: relative;
  justify-self: end;
  width: var(--network-size);
  aspect-ratio: 1;
  border-radius: 50%;
}

body.home-page .partner-network__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

body.home-page .partner-network__orbit--outer {
  width: 86%;
  height: 86%;
  border: 1px solid rgba(255,255,255,.14);
}

body.home-page .partner-network__orbit--inner {
  width: 58%;
  height: 58%;
  border: 1px dashed rgba(226,168,20,.35);
  animation: zifpimPartnerOrbit 34s linear infinite;
}

@keyframes zifpimPartnerOrbit {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

body.home-page .partner-network__core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 29%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--blue);
  background: var(--paper);
  border: 3px solid rgba(226,168,20,.92);
  box-shadow:
    0 0 0 14px rgba(255,255,255,.08),
    0 0 0 28px rgba(255,255,255,.035);
  transition: transform .52s cubic-bezier(.22,.78,.24,1), box-shadow .52s ease;
}

body.home-page .partner-network__core-mark {
  display: block;
  font-size: clamp(1.35rem, 2.4vw, 2.25rem);
  line-height: .95;
  font-weight: 800;
  letter-spacing: -.055em;
}

body.home-page .partner-network__core small {
  margin-top: 7px;
  color: rgba(53,88,167,.68);
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .18em;
}

body.home-page .partner-network__line {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 26%;
  height: 2px;
  background: rgba(255,255,255,.20);
  transform-origin: 0 50%;
  transition: background .32s ease, box-shadow .32s ease, height .32s ease;
  pointer-events: none;
}

body.home-page .partner-network__line::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(226,168,20,.12);
}

body.home-page .partner-network__line--media {
  transform: rotate(-90deg);
}

body.home-page .partner-network__line--finance {
  transform: rotate(145deg);
}

body.home-page .partner-network__line--sector {
  transform: rotate(35deg);
}

body.home-page .partner-network__node {
  position: absolute;
  z-index: 4;
  width: 31%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  color: var(--white);
  background: rgba(53,88,167,.76);
  border: 2px solid rgba(226,168,20,.92);
  outline: none;
  cursor: default;
  backdrop-filter: none;
  transform: translate3d(0,0,0) scale(1);
  transition:
    transform .5s cubic-bezier(.22,.78,.24,1),
    background .4s ease,
    border-color .4s ease,
    box-shadow .45s ease;
}

body.home-page .partner-network__node--media {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

body.home-page .partner-network__node--finance {
  left: 1%;
  bottom: 4%;
}

body.home-page .partner-network__node--sector {
  right: 1%;
  bottom: 4%;
}

body.home-page .partner-network__node-icon {
  color: var(--gold);
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  line-height: 1;
}

body.home-page .partner-network__node strong {
  font-size: clamp(.72rem, 1.05vw, 1rem);
  line-height: 1.18;
  font-weight: 720;
}

body.home-page .partner-network__node:hover,
body.home-page .partner-network__node:focus-visible {
  background: rgba(38,37,37,.22);
  border-color: var(--gold);
  box-shadow: 0 18px 44px rgba(23,37,75,.22);
}

body.home-page .partner-network__node--media:hover,
body.home-page .partner-network__node--media:focus-visible {
  transform: translateX(-50%) scale(1.065);
}

body.home-page .partner-network__node--finance:hover,
body.home-page .partner-network__node--finance:focus-visible,
body.home-page .partner-network__node--sector:hover,
body.home-page .partner-network__node--sector:focus-visible {
  transform: scale(1.065);
}

/* Let the selected connection answer the node. :has() is supported by the
   modern browsers this project is being tested in and needs no JS loop. */
body.home-page .partner-network:has(.partner-network__node:hover) .partner-network__core,
body.home-page .partner-network:has(.partner-network__node:focus-visible) .partner-network__core {
  transform: translate(-50%,-50%) scale(1.035);
  box-shadow:
    0 0 0 16px rgba(255,255,255,.10),
    0 0 0 33px rgba(226,168,20,.055);
}

body.home-page .partner-network:has(.partner-network__node--media:hover) .partner-network__line--media,
body.home-page .partner-network:has(.partner-network__node--media:focus-visible) .partner-network__line--media,
body.home-page .partner-network:has(.partner-network__node--finance:hover) .partner-network__line--finance,
body.home-page .partner-network:has(.partner-network__node--finance:focus-visible) .partner-network__line--finance,
body.home-page .partner-network:has(.partner-network__node--sector:hover) .partner-network__line--sector,
body.home-page .partner-network:has(.partner-network__node--sector:focus-visible) .partner-network__line--sector {
  height: 3px;
  background: var(--gold);
  box-shadow: 0 0 16px rgba(226,168,20,.42);
}

/* Keep ambient motion from fighting the final morph into dot 7. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-backdrop__word,
  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-network__orbit--inner {
    animation-play-state: paused !important;
    will-change: auto !important;
  }
}

@media (min-width: 861px) and (max-height: 740px) {
  body.home-page .partner-editorial {
    padding-top: 14px;
    padding-bottom: 12px;
    gap: clamp(38px, 5vw, 76px);
  }

  body.home-page .partner-editorial__copy h2 {
    font-size: clamp(3.4rem, 9vh, 5.6rem) !important;
  }

  body.home-page .partner-editorial__lead {
    margin-top: 18px;
    font-size: .95rem;
  }

  body.home-page .partner-editorial__cta {
    margin-top: 24px;
  }

  body.home-page .partner-network {
    --network-size: min(58vh, 520px);
  }
}

@media (max-width: 1050px) and (min-width: 861px) {
  body.home-page .partner-editorial {
    grid-template-columns: .95fr 1.05fr;
    gap: 34px;
  }

  body.home-page .partner-network {
    --network-size: min(47vw, 500px);
  }
}

@media (max-width: 860px) {
  body.home-page .partner-section .memory-morph-stage--partner {
    min-height: auto;
    padding-top: 96px;
    padding-bottom: 60px;
  }

  body.home-page .partner-editorial {
    grid-template-columns: 1fr;
    gap: 52px;
    padding-top: 40px;
  }

  body.home-page .partner-editorial__copy h2 {
    max-width: 9ch;
    font-size: clamp(3.2rem, 14vw, 5.6rem) !important;
  }

  body.home-page .partner-network {
    --network-size: min(90vw, 560px);
    justify-self: center;
  }

  body.home-page .partner-backdrop__word--one {
    top: 20%;
  }
}

@media (max-width: 560px) {
  body.home-page .partner-network {
    --network-size: min(92vw, 470px);
  }

  body.home-page .partner-network__node {
    width: 34%;
    padding: 10px;
  }

  body.home-page .partner-network__node strong {
    font-size: .65rem;
  }

  body.home-page .partner-network__core {
    width: 31%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .partner-backdrop__word,
  body.home-page .partner-network__orbit--inner {
    animation: none !important;
  }

  body.home-page .partner-network__node,
  body.home-page .partner-network__core,
  body.home-page .partner-network__line,
  body.home-page .partner-editorial__cta::before,
  body.home-page .partner-editorial__cta b {
    transition: none !important;
  }
}


/* =========================================================
   V97 — Partner network geometry + final morph architecture fix
   ---------------------------------------------------------
   1. Repositions the three nodes on one deliberate radial system.
   2. Recalculates the connector angles/lengths so they actually
      meet the node centres.
   3. Forces the blue surface to remain on the OUTER scene while
      only the inner information object transforms into dot 7.
   ========================================================= */

/* ---------- Locked V55/V56 morph architecture ---------- */
@media (min-width: 861px) {
  body.home-page .partner-section[data-memory-morph-scene] {
    position: relative !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important;
    background: var(--blue) !important;
    color: var(--white);
  }

  body.home-page .partner-section .memory-morph-stage--partner {
    position: relative;
    min-height: 100vh !important;
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--white);
    transform-origin: 0 0 !important;
  }

  /* When the morph begins the CONTENT stage becomes fixed.
     The parent scene still owns a real 100vh blue surface, so the
     page itself never becomes the shrinking rectangle. */
  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active {
    position: fixed !important;
    left: var(--memory-source-left, 0px) !important;
    top: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    transform-origin: 0 0 !important;
  }

  body.home-page .partner-section
  .memory-morph-stage--partner.is-dot-face {
    position: fixed !important;
    background: transparent !important;
    overflow: visible !important;
    z-index: 280 !important;
  }
}

/* ---------- Network: one deliberate geometry system ---------- */
body.home-page .partner-network {
  --network-size: clamp(430px, 39vw, 565px);
  position: relative;
  justify-self: end;
  width: var(--network-size);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate3d(0,0,0);
}

/* Outer ring now passes through the three node centres. */
body.home-page .partner-network__orbit--outer {
  width: 76%;
  height: 76%;
  border-color: rgba(255,255,255,.18);
}

body.home-page .partner-network__orbit--inner {
  width: 49%;
  height: 49%;
}

/* Core is visually subordinate to the three partner groups. */
body.home-page .partner-network__core {
  width: 25%;
  box-sizing: border-box;
}

/* All nodes use centre-point positioning.
   This makes the network symmetric and keeps hover scale centred. */
body.home-page .partner-network__node {
  width: 27%;
  box-sizing: border-box;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 50%;
}

/* top / lower-left / lower-right */
body.home-page .partner-network__node--media {
  left: 50%;
  top: 12%;
}

body.home-page .partner-network__node--finance {
  left: 22.5%;
  top: 76%;
}

body.home-page .partner-network__node--sector {
  left: 77.5%;
  top: 76%;
}

/* Connectors are calculated from the same centre point.
   They run beneath the core and beneath each node, so there is no
   visible "almost connected" gap. */
body.home-page .partner-network__line {
  left: 50%;
  top: 50%;
  width: 38%;
  height: 2px;
  transform-origin: 0 50%;
  background: rgba(255,255,255,.24);
}

body.home-page .partner-network__line--media {
  width: 38%;
  transform: rotate(-90deg);
}

body.home-page .partner-network__line--finance {
  width: 37.85%;
  transform: rotate(136.62deg);
}

body.home-page .partner-network__line--sector {
  width: 37.85%;
  transform: rotate(43.38deg);
}

/* The old line-end bead sat in visually inconsistent places because
   each line had a different apparent stopping point. Hide it; the
   gold node borders now provide the clean endpoint. */
body.home-page .partner-network__line::after {
  display: none !important;
}

/* Add a tiny common origin point just outside the core instead. */
body.home-page .partner-network__line::before {
  content: "";
  position: absolute;
  left: 30%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  transform: translate(-50%,-50%);
  opacity: .9;
  box-shadow: 0 0 0 3px rgba(226,168,20,.10);
}

/* Keep every node hover locked around its own centre. */
body.home-page .partner-network__node--media:hover,
body.home-page .partner-network__node--media:focus-visible,
body.home-page .partner-network__node--finance:hover,
body.home-page .partner-network__node--finance:focus-visible,
body.home-page .partner-network__node--sector:hover,
body.home-page .partner-network__node--sector:focus-visible {
  transform: translate(-50%, -50%) scale(1.055) !important;
}

/* Slightly calmer rings so the hierarchy is:
   three partners → ZiFPIM → orbit system. */
body.home-page .partner-network__orbit--outer {
  opacity: .92;
}

body.home-page .partner-network__orbit--inner {
  opacity: .72;
}

/* Keep the diagram balanced on the user's current shorter desktop viewport. */
@media (min-width: 861px) and (max-height: 820px) {
  body.home-page .partner-network {
    --network-size: min(61vh, 500px);
  }

  body.home-page .partner-editorial {
    gap: clamp(42px, 5vw, 78px);
  }
}

/* Existing mobile stack stays intact, but use the same corrected geometry. */
@media (max-width: 860px) {
  body.home-page .partner-network__node--media {
    left: 50%;
    top: 12%;
  }

  body.home-page .partner-network__node--finance {
    left: 22.5%;
    top: 76%;
  }

  body.home-page .partner-network__node--sector {
    left: 77.5%;
    top: 76%;
  }

  body.home-page .partner-network__node--media:hover,
  body.home-page .partner-network__node--media:focus-visible,
  body.home-page .partner-network__node--finance:hover,
  body.home-page .partner-network__node--finance:focus-visible,
  body.home-page .partner-network__node--sector:hover,
  body.home-page .partner-network__node--sector:focus-visible {
    transform: translate(-50%, -50%) scale(1.035) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .partner-network__node {
    transition: none !important;
  }
}


/* =========================================================
   V98 — Partner node precision pass
   ---------------------------------------------------------
   Graphic-design pass:
   - true circles: explicit equal inline/block dimensions
   - no content-driven oval distortion
   - dedicated inner wrapper for optical centering
   - controlled line breaks, line-height and text measure
   ========================================================= */

body.home-page .partner-network__node {
  --partner-node-diameter: 29%;
  width: var(--partner-node-diameter) !important;
  height: var(--partner-node-diameter) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;

  padding: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;

  /* centre-point positioning from V97 remains the geometry source */
  transform: translate(-50%, -50%) scale(1) !important;
  transform-origin: 50% 50% !important;
}

/* One optical-centering object inside every circle. */
body.home-page .partner-network__node-inner {
  display: grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  gap: clamp(5px, .75vh, 8px);

  width: 82%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  text-align: center;

  /* Optical rather than merely mathematical centering. */
  transform: translateY(-1px);
  pointer-events: none;
}

/* The icon is part of the centred composition, not an independent top item. */
body.home-page .partner-network__node .partner-network__node-icon {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--gold);
  font-size: clamp(1.1rem, 1.5vw, 1.42rem);
  line-height: 1;
}

/* Tight editorial typography built to fit the circle, not stretch it. */
body.home-page .partner-network__node strong {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;

  font-family: "Manrope", sans-serif;
  font-size: clamp(.68rem, .88vw, .84rem);
  line-height: 1.08;
  font-weight: 720;
  letter-spacing: -.018em;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: normal;
}

/* Finance has less copy, so nudge the two-line composition down a hair. */
body.home-page .partner-network__node--finance .partner-network__node-inner {
  transform: translateY(1px);
}

/* Long-copy nodes get a slightly narrower text measure for clean negative space. */
body.home-page .partner-network__node--media .partner-network__node-inner,
body.home-page .partner-network__node--sector .partner-network__node-inner {
  width: 78%;
}

/* Prevent any older content/layout rule from changing the circle on hover. */
body.home-page .partner-network__node:hover,
body.home-page .partner-network__node:focus-visible {
  width: var(--partner-node-diameter) !important;
  height: var(--partner-node-diameter) !important;
  border-radius: 50% !important;
}

body.home-page .partner-network__node--media:hover,
body.home-page .partner-network__node--media:focus-visible,
body.home-page .partner-network__node--finance:hover,
body.home-page .partner-network__node--finance:focus-visible,
body.home-page .partner-network__node--sector:hover,
body.home-page .partner-network__node--sector:focus-visible {
  transform: translate(-50%, -50%) scale(1.045) !important;
}

/* At the user's current shorter desktop viewport, keep the typography
   comfortably inside the mathematically circular node. */
@media (min-width: 861px) and (max-height: 820px) {
  body.home-page .partner-network__node {
    --partner-node-diameter: 29%;
  }

  body.home-page .partner-network__node strong {
    font-size: clamp(.67rem, 1.55vh, .78rem);
    line-height: 1.07;
  }

  body.home-page .partner-network__node .partner-network__node-icon {
    font-size: clamp(1.05rem, 2.2vh, 1.28rem);
  }

  body.home-page .partner-network__node-inner {
    gap: 5px;
  }
}

/* Mobile: still hard-lock equal width + height. */
@media (max-width: 860px) {
  body.home-page .partner-network__node {
    --partner-node-diameter: 29%;
  }

  body.home-page .partner-network__node strong {
    font-size: clamp(.62rem, 2.55vw, .82rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .partner-network__node,
  body.home-page .partner-network__node-inner {
    transition: none !important;
  }
}


/* =========================================================
   V99 — Partner iconography + orbit motion polish
   ---------------------------------------------------------
   - replaces abstract glyphs with purpose-built inline SVG icons
   - reduces ZiFPIM core wordmark slightly for better breathing room
   - animates the circular vector system with transform-only motion
   ========================================================= */

/* ---------- Purpose-built SVG icon system ---------- */
body.home-page .partner-network__node .partner-network__node-icon {
  width: clamp(24px, 2.35vw, 34px);
  height: clamp(24px, 2.35vw, 34px);
  display: grid;
  place-items: center;
  color: var(--gold);
  line-height: 0;
}

body.home-page .partner-network__node .partner-network__node-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ---------- Centre wordmark breathing room ---------- */
body.home-page .partner-network__core-mark {
  font-size: clamp(1.15rem, 2vw, 1.82rem) !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
}

body.home-page .partner-network__core small {
  margin-top: 6px;
}

/* ---------- Animated rounded vector system ---------- */
body.home-page .partner-network__orbit {
  will-change: transform;
}

/* The solid outer ring carries a travelling gold satellite. */
body.home-page .partner-network__orbit--outer {
  animation: zifpimPartnerOuterOrbit 26s linear infinite;
}

body.home-page .partner-network__orbit--outer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
  box-shadow:
    0 0 0 4px rgba(226,168,20,.08),
    0 0 14px rgba(226,168,20,.28);
}

/* A restrained moving gold arc keeps the outer vector visibly alive. */
body.home-page .partner-network__orbit--outer::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(226,168,20,.62);
  border-right-color: rgba(226,168,20,.16);
  transform: rotate(18deg);
}

@keyframes zifpimPartnerOuterOrbit {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Inner dashed ring travels in the opposite direction, with a second
   smaller satellite to create a gentle parallax between the circles. */
body.home-page .partner-network__orbit--inner {
  animation: zifpimPartnerInnerOrbit 18s linear infinite;
}

body.home-page .partner-network__orbit--inner::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(226,168,20,.94);
  transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(226,168,20,.28);
}

@keyframes zifpimPartnerInnerOrbit {
  from { transform: translate(-50%,-50%) rotate(360deg); }
  to   { transform: translate(-50%,-50%) rotate(0deg); }
}

/* The central halo breathes very slightly; the circle itself never moves. */
body.home-page .partner-network__core {
  animation: zifpimPartnerCoreBreath 5.6s ease-in-out infinite;
}

@keyframes zifpimPartnerCoreBreath {
  0%, 100% {
    box-shadow:
      0 0 0 14px rgba(255,255,255,.08),
      0 0 0 28px rgba(255,255,255,.035);
  }
  50% {
    box-shadow:
      0 0 0 17px rgba(255,255,255,.095),
      0 0 0 34px rgba(226,168,20,.035);
  }
}

/* During the final content -> dot morph, freeze every ambient network
   animation so the morph remains the only motion being computed. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-network__orbit--outer,
  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-network__orbit--inner,
  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-network__core {
    animation-play-state: paused !important;
    will-change: auto !important;
  }
}

@media (min-width: 861px) and (max-height: 820px) {
  body.home-page .partner-network__node .partner-network__node-icon {
    width: clamp(22px, 3.3vh, 30px);
    height: clamp(22px, 3.3vh, 30px);
  }

  body.home-page .partner-network__core-mark {
    font-size: clamp(1.08rem, 2.8vh, 1.55rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .partner-network__orbit--outer,
  body.home-page .partner-network__orbit--inner,
  body.home-page .partner-network__core {
    animation: none !important;
  }
}


/* =========================================================
   V100 — Bigger partner icons + animated partner circles
   ---------------------------------------------------------
   - increases all 3 SVG icons without disturbing typography
   - gives each partner circle a slow independent float
   - adds a restrained breathing perimeter ring
   - preserves exact circular geometry from V98
   - pauses ambient motion during hover and final morph
   ========================================================= */

/* ---------- Larger SVG icons ---------- */
body.home-page .partner-network__node .partner-network__node-icon {
  width: clamp(34px, 3.05vw, 46px) !important;
  height: clamp(34px, 3.05vw, 46px) !important;
}

body.home-page .partner-network__node-inner {
  gap: clamp(3px, .55vh, 6px) !important;
}

/* ---------- Animated circle bodies ----------
   `translate` is intentionally used instead of `transform`.
   V98 owns the precision transform required to centre the circles;
   this adds only a tiny ambient offset on top of that geometry. */
body.home-page .partner-network__node {
  will-change: translate;
}

body.home-page .partner-network__node--media {
  animation: zifpimPartnerNodeMedia 6.8s ease-in-out infinite;
}

body.home-page .partner-network__node--finance {
  animation: zifpimPartnerNodeFinance 7.6s ease-in-out -1.7s infinite;
}

body.home-page .partner-network__node--sector {
  animation: zifpimPartnerNodeSector 7.1s ease-in-out -3.2s infinite;
}

@keyframes zifpimPartnerNodeMedia {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}

@keyframes zifpimPartnerNodeFinance {
  0%, 100% { translate: 0 0; }
  48%      { translate: -4px 3px; }
}

@keyframes zifpimPartnerNodeSector {
  0%, 100% { translate: 0 0; }
  52%      { translate: 4px 3px; }
}

/* ---------- Breathing perimeter ----------
   The actual circle dimensions never change. This independent ring
   gives the node a living pulse without making it look oval. */
body.home-page .partner-network__node::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border: 1px solid rgba(226,168,20,.46);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(.96);
  animation: zifpimPartnerNodeHalo 5.4s cubic-bezier(.4,0,.2,1) infinite;
}

body.home-page .partner-network__node--finance::before {
  animation-delay: -1.8s;
}

body.home-page .partner-network__node--sector::before {
  animation-delay: -3.6s;
}

@keyframes zifpimPartnerNodeHalo {
  0%, 100% {
    opacity: 0;
    transform: scale(.97);
  }
  35% {
    opacity: .34;
  }
  68% {
    opacity: 0;
    transform: scale(1.10);
  }
}

/* Hover/focus becomes a deliberate stable state rather than fighting
   the ambient movement. */
body.home-page .partner-network__node:hover,
body.home-page .partner-network__node:focus-visible {
  animation-play-state: paused !important;
  translate: 0 0 !important;
}

body.home-page .partner-network__node:hover::before,
body.home-page .partner-network__node:focus-visible::before {
  animation-play-state: paused !important;
  opacity: .45;
  transform: scale(1.055);
}

/* Shorter desktop viewport: still visibly larger than V99, but leaves
   enough breathing room for the 3-line labels. */
@media (min-width: 861px) and (max-height: 820px) {
  body.home-page .partner-network__node .partner-network__node-icon {
    width: clamp(30px, 4.5vh, 39px) !important;
    height: clamp(30px, 4.5vh, 39px) !important;
  }

  body.home-page .partner-network__node-inner {
    gap: 3px !important;
  }
}

/* Freeze partner-node motion while the complete content object morphs
   into dot 7. The blue outer scene still remains stationary. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-network__node,
  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-network__node::before {
    animation-play-state: paused !important;
    will-change: auto !important;
  }

  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-network__node {
    translate: 0 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .partner-network__node,
  body.home-page .partner-network__node::before {
    animation: none !important;
    translate: 0 0 !important;
  }
}


/* =========================================================
   V101 — XL partner icons
   ---------------------------------------------------------
   Bigger again, while preserving the V98 circle geometry
   and V100 node animation.
   ========================================================= */

body.home-page .partner-network__node .partner-network__node-icon {
  width: clamp(44px, 4.1vw, 58px) !important;
  height: clamp(44px, 4.1vw, 58px) !important;
}

body.home-page .partner-network__node-inner {
  gap: clamp(2px, .4vh, 5px) !important;
}

/* Keep the icon visually dominant without pushing the copy out. */
body.home-page .partner-network__node strong {
  line-height: 1.045 !important;
}

/* Slightly tighter copy box on long-label nodes to protect edge breathing room. */
body.home-page .partner-network__node--media .partner-network__node-inner,
body.home-page .partner-network__node--sector .partner-network__node-inner {
  width: 76% !important;
}

/* User's shorter desktop viewport */
@media (min-width: 861px) and (max-height: 820px) {
  body.home-page .partner-network__node .partner-network__node-icon {
    width: clamp(39px, 5.4vh, 48px) !important;
    height: clamp(39px, 5.4vh, 48px) !important;
  }

  body.home-page .partner-network__node-inner {
    gap: 2px !important;
  }
}

@media (max-width: 860px) {
  body.home-page .partner-network__node .partner-network__node-icon {
    width: clamp(34px, 8.5vw, 48px) !important;
    height: clamp(34px, 8.5vw, 48px) !important;
  }
}


/* =========================================================
   V102 — Butter-smooth homepage morph performance pass
   ---------------------------------------------------------
   Visual design and morph geometry are unchanged.

   Main gains:
   1. Offscreen looping CSS animations are paused.
   2. During a chapter -> dot transformation, ambient animations
      across the page pause so the GPU can focus on ONE transform.
   3. Full-viewport morph stages are no longer permanently promoted
      to GPU layers. Only nearby/active stages get will-change.
   4. No easing or delayed catch-up is added: native scroll stays 1:1.
   ========================================================= */

@media (min-width: 861px) {

  /* Too many permanently-promoted full-screen layers can become slower,
     especially on older integrated/discrete GPUs. Start cheap. */
  body.home-page .signature-hero__stage,
  body.home-page .about-morph-stage,
  body.home-page .work-morph-stage,
  body.home-page .memory-morph-stage {
    will-change: auto !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  /* Promote only scenes close enough to be used next. */
  body.home-page .morph-performance-scene.is-morph-performance-near
  .signature-hero__stage,

  body.home-page .morph-performance-scene.is-morph-performance-near
  .about-morph-stage,

  body.home-page .morph-performance-scene.is-morph-performance-near
  .work-morph-stage,

  body.home-page .morph-performance-scene.is-morph-performance-near
  .memory-morph-stage,

  /* An actively moving object always stays compositor-promoted. */
  body.home-page .signature-hero__stage.is-morph-active,
  body.home-page .about-morph-stage.is-morph-active,
  body.home-page .work-morph-stage.is-morph-active,
  body.home-page .memory-morph-stage.is-morph-active {
    will-change: transform !important;
  }

  /* Offscreen continuous animation is pure wasted work. The content stays
     fully laid out/measurable; only CSS animation clocks are paused. */
  body.home-page
  .morph-performance-scene:not(.is-morph-performance-near) * {
    animation-play-state: paused !important;
  }

  /* While any chapter is actually shrinking/growing, pause all decorative
     looping animation. This includes About marquee, Investment path motion,
     Evidence/NEWS drift, Partner orbits/nodes, etc. The single morph remains
     the only continuous compositor movement. */
  body.home-page.is-morphing .morph-performance-scene * {
    animation-play-state: paused !important;
  }

  /* Avoid expensive image filtering if the pointer happens to remain over the
     News story while the user starts scrolling. */
  body.home-page.is-morphing
  .section--news .news-editorial__image-inner img {
    filter: none !important;
  }

  /* Fixed transformed stages get their own clean compositing surface. */
  body.home-page .signature-hero__stage.is-morph-active,
  body.home-page .about-morph-stage.is-morph-active,
  body.home-page .work-morph-stage.is-morph-active,
  body.home-page .memory-morph-stage.is-morph-active {
    isolation: isolate;
  }
}

/* Do not alter the accessibility reduced-motion path. */
@media (prefers-reduced-motion: reduce) {
  body.home-page .morph-performance-scene * {
    animation-play-state: paused !important;
  }
}


/* =========================================================
   V103 — HOMEPAGE MASTER POLISH
   ---------------------------------------------------------
   This is a restraint / consistency pass, not a redesign.

   Preserved:
   - all approved layouts
   - V55/V56 background-separated morph architecture
   - V102 native 1:1 morph engine
   - section content / client wording
   - dot positions and snap geometry

   Refined:
   - chapter rhythm
   - section-label system
   - motion hierarchy
   - CTA consistency
   - optical typography
   - footer finale
   - focus/accessibility states
   - mobile art direction
   ========================================================= */


/* ---------------------------------------------------------
   01. GLOBAL RENDERING / TYPOGRAPHIC FINISH
   --------------------------------------------------------- */

body.home-page {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

body.home-page a,
body.home-page button {
  -webkit-tap-highlight-color: transparent;
}

body.home-page a:focus-visible,
body.home-page button:focus-visible,
body.home-page [tabindex="0"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}


/* ---------------------------------------------------------
   02. CHAPTER RHYTHM
   Same vertical grammar from 01 through 06.
   Snap/morph height remains exactly 100vh.
   --------------------------------------------------------- */

@media (min-width: 861px) {
  body.home-page {
    --chapter-top: clamp(122px, 15.5vh, 148px);
    --chapter-bottom: clamp(28px, 4.5vh, 48px);
  }

  body.home-page .about-morph-stage,
  body.home-page .work-morph-stage,
  body.home-page .memory-morph-stage--investment,
  body.home-page .memory-morph-stage--resource,
  body.home-page .memory-morph-stage--news,
  body.home-page .memory-morph-stage--partner {
    padding-top: var(--chapter-top);
    padding-bottom: var(--chapter-bottom);
  }
}


/* ---------------------------------------------------------
   03. ONE SECTION-LABEL SYSTEM
   The content differs; the editorial grammar does not.
   --------------------------------------------------------- */

body.home-page .section-label {
  min-height: 30px;
  padding-bottom: 12px;
  border-bottom-width: 1px;
  font-size: .68rem;
  line-height: 1;
  font-weight: 760;
  letter-spacing: .115em;
}

body.home-page .section-label > span:first-child {
  min-width: 24px;
  color: var(--gold) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

body.home-page .section-label > span:last-child {
  text-transform: uppercase;
}

/* Brand casing remains sacred. */
body.home-page .section--about .section-label > span:last-child {
  text-transform: none !important;
}

/* Dark chapters share the same hairline strength. */
body.home-page .section--work .section-label,
body.home-page .section--investment .section-label,
body.home-page .partner-section .section-label {
  border-color: rgba(255,255,255,.19) !important;
  color: rgba(255,255,255,.92);
}

/* Light chapters share the same hairline strength. */
body.home-page .section--about .section-label,
body.home-page .section--resource .section-label,
body.home-page .section--news .section-label {
  border-color: rgba(38,37,37,.14) !important;
}


/* ---------------------------------------------------------
   04. MOTION HIERARCHY
   Keep the page alive, but let the morph remain the star.
   No approved ambient motion is removed.
   --------------------------------------------------------- */

/* Investment: the giant VALUE becomes atmosphere, not another actor. */
body.home-page .investment-value-ghost {
  color: rgba(255,255,255,.022) !important;
  animation-name: investmentValueDriftV103 !important;
  animation-duration: 28s !important;
}

@keyframes investmentValueDriftV103 {
  from { transform: translate3d(calc(-50% - 10px), -50%, 0); }
  to   { transform: translate3d(calc(-50% + 10px), -50%, 0); }
}

/* Resource: keep the book alive, but remove the feeling of floating furniture. */
body.home-page .section--resource .resource-backdrop span {
  color: rgba(38,37,37,.039) !important;
  animation-name: zifpimResourceDriftV103 !important;
  animation-duration: 26s !important;
}

@keyframes zifpimResourceDriftV103 {
  from { transform: translate3d(-1.15%, 0, 0); }
  to   { transform: translate3d(1.15%, 0, 0); }
}

body.home-page .section--resource .resource-cover__object {
  animation-name: zifpimResourceFloatV103 !important;
  animation-duration: 9s !important;
}

@keyframes zifpimResourceFloatV103 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -5px, 0); }
}

/* News: reduce the pumping scale; retain the very slow newsroom drift. */
body.home-page .section--news .news-backdrop span {
  color: rgba(38,37,37,.030) !important;
  animation-name: zifpimNewsDriftV103 !important;
  animation-duration: 38s !important;
}

@keyframes zifpimNewsDriftV103 {
  from {
    transform: translate3d(0, 18px, 0) scale(.994);
    opacity: .76;
  }
  to {
    transform: translate3d(0, -18px, 0) scale(1.008);
    opacity: 1;
  }
}

/* Partner: conclusion should feel composed rather than restless. */
body.home-page .partner-backdrop__word {
  color: rgba(255,255,255,.040) !important;
}

body.home-page .partner-backdrop__word--one {
  animation-name: zifpimPartnerBackdropOneV103 !important;
  animation-duration: 52s !important;
}

body.home-page .partner-backdrop__word--two {
  animation-name: zifpimPartnerBackdropTwoV103 !important;
  animation-duration: 58s !important;
}

@keyframes zifpimPartnerBackdropOneV103 {
  from { transform: translate3d(-1.3%, 7px, 0); }
  to   { transform: translate3d(1.3%, -8px, 0); }
}

@keyframes zifpimPartnerBackdropTwoV103 {
  from { transform: translate3d(1.2%, 6px, 0); }
  to   { transform: translate3d(-1.4%, -8px, 0); }
}

/* Keep the three partner nodes alive, but make movement feel intentional. */
body.home-page .partner-network__node--media {
  animation-name: zifpimPartnerNodeMediaV103 !important;
  animation-duration: 8.4s !important;
}

body.home-page .partner-network__node--finance {
  animation-name: zifpimPartnerNodeFinanceV103 !important;
  animation-duration: 9.2s !important;
}

body.home-page .partner-network__node--sector {
  animation-name: zifpimPartnerNodeSectorV103 !important;
  animation-duration: 8.8s !important;
}

@keyframes zifpimPartnerNodeMediaV103 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -3px; }
}

@keyframes zifpimPartnerNodeFinanceV103 {
  0%, 100% { translate: 0 0; }
  50%      { translate: -2px 2px; }
}

@keyframes zifpimPartnerNodeSectorV103 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 2px 2px; }
}

body.home-page .partner-network__node::before {
  border-color: rgba(226,168,20,.34) !important;
  animation-name: zifpimPartnerNodeHaloV103 !important;
  animation-duration: 7s !important;
}

@keyframes zifpimPartnerNodeHaloV103 {
  0%, 100% {
    opacity: 0;
    transform: scale(.985);
  }
  42% {
    opacity: .22;
  }
  72% {
    opacity: 0;
    transform: scale(1.075);
  }
}


/* ---------------------------------------------------------
   05. CTA LANGUAGE
   Same weight, same confidence, less "buttony" movement.
   Existing gold-rule implementations are preserved.
   --------------------------------------------------------- */

body.home-page .about-editorial__copy .text-link,
body.home-page .work-editorial__footer .text-link,
body.home-page .investment-explore,
body.home-page .resource-copy__cta,
body.home-page .news-editorial-link,
body.home-page .partner-editorial__cta {
  font-weight: 780;
}

/* Arrows now glide horizontally only. Avoid diagonal jumpiness. */
body.home-page .about-editorial__copy .text-link span,
body.home-page .work-editorial__footer .text-link span,
body.home-page .resource-copy__cta span {
  transition: transform .34s cubic-bezier(.22,.78,.24,1) !important;
}

body.home-page .about-editorial__copy .text-link:hover span,
body.home-page .about-editorial__copy .text-link:focus-visible span,
body.home-page .work-editorial__footer .text-link:hover span,
body.home-page .work-editorial__footer .text-link:focus-visible span,
body.home-page .resource-copy__cta:hover span,
body.home-page .resource-copy__cta:focus-visible span {
  transform: translate3d(5px,0,0) !important;
}

body.home-page .investment-explore b,
body.home-page .news-editorial-link b,
body.home-page .partner-editorial__cta b {
  transition-duration: .34s !important;
}

body.home-page .investment-explore:hover b,
body.home-page .investment-explore:focus-visible b,
body.home-page .news-editorial-link:hover b,
body.home-page .news-editorial-link:focus-visible b,
body.home-page .partner-editorial__cta:hover b,
body.home-page .partner-editorial__cta:focus-visible b {
  transform: translate3d(5px,0,0) !important;
}


/* ---------------------------------------------------------
   06. SECTION-SPECIFIC OPTICAL FINISH
   --------------------------------------------------------- */

/* About: copy measure stays comfortably editorial. */
body.home-page .about-editorial__copy p {
  max-width: 40rem;
}

/* What We Do: rows read as one system rather than three isolated buttons. */
body.home-page .work-editorial--live .work-system__item {
  border-color: rgba(255,255,255,.16);
}

body.home-page .work-editorial--live .work-system__detail {
  border-color: rgba(255,255,255,.18);
}

/* Investment: slightly calmer body copy and cleaner rule. */
body.home-page .investment-bottom__copy {
  color: rgba(255,255,255,.80);
}

body.home-page .investment-bottom__rule {
  opacity: .78;
}

/* Resource: create a little more breathing room between object and copy. */
@media (min-width: 861px) {
  body.home-page .section--resource .resource-grid {
    gap: clamp(3.8rem, 6.6vw, 7.6rem);
  }
}

/* News: image feels editorial rather than like a hover card. */
body.home-page .section--news .news-editorial__image-inner img {
  transition-duration: .72s !important;
}

body.home-page .section--news .news-editorial__story:hover
.news-editorial__image-inner img {
  transform: scale(1.035) !important;
}

body.home-page .section--news .news-editorial__image-caption {
  color: rgba(38,37,37,.54);
}

/* Partner: tune the core hierarchy. */
body.home-page .partner-network__core-mark {
  font-size: clamp(1.18rem, 2vw, 1.88rem) !important;
  letter-spacing: -.045em;
}

body.home-page .partner-network__core small {
  opacity: .78;
}


/* ---------------------------------------------------------
   07. HEADER FINISH
   --------------------------------------------------------- */

body.home-page .editorial-header.is-scrolled::before {
  background: rgba(247,246,242,.965);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body.home-page .editorial-header.is-scrolled {
  box-shadow: 0 8px 28px rgba(38,37,37,.035);
}


/* ---------------------------------------------------------
   08. FINAL FOOTER / CLOSING FRAME
   The final viewport now reads as an intentional ending after dot 7.
   No new copy is introduced.
   --------------------------------------------------------- */

body.home-page .site-footer.final-morph-runway {
  position: relative;
  overflow: hidden;
}

body.home-page .site-footer.final-morph-runway::before {
  content: "";
  position: absolute;
  left: max(3.2vw, calc((100vw - 1480px)/2));
  top: clamp(118px, 14.5vh, 154px);
  width: 72px;
  height: 2px;
  background: var(--gold);
}

body.home-page .footer-brand__name {
  max-width: 32rem;
  line-height: 1.12;
  letter-spacing: -.018em;
}

body.home-page .footer-column > span:first-child,
body.home-page .footer-column__subheading {
  color: var(--gold);
  letter-spacing: .11em;
  text-transform: uppercase;
}

body.home-page .footer-column a {
  transition: color .24s ease, transform .24s ease;
}

body.home-page .footer-column a:hover,
body.home-page .footer-column a:focus-visible {
  color: var(--gold);
  transform: translate3d(3px,0,0);
}

body.home-page .site-footer.final-morph-runway .footer-bottom {
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.54);
}


/* ---------------------------------------------------------
   09. MOBILE ART DIRECTION
   Mobile should feel composed, not like desktop squeezed down.
   --------------------------------------------------------- */

@media (max-width: 860px) {

  body.home-page .section-label {
    padding-bottom: 11px;
    font-size: .64rem;
  }

  /* Ambient typography stays present but sits farther behind content. */
  body.home-page .section--about .about-motion {
    opacity: .76 !important;
  }

  body.home-page .section--resource .resource-backdrop span {
    color: rgba(38,37,37,.026) !important;
  }

  body.home-page .section--news .news-backdrop span {
    color: rgba(38,37,37,.022) !important;
  }

  body.home-page .partner-backdrop__word {
    color: rgba(255,255,255,.026) !important;
  }

  /* Smaller touch devices benefit from quieter continuous motion. */
  body.home-page .section--resource .resource-cover__object,
  body.home-page .partner-network__node,
  body.home-page .partner-network__node::before {
    animation-duration: 12s !important;
  }

  body.home-page .section--news .news-editorial__image-inner img {
    transform: scale(1.005);
  }

  body.home-page .section--news .news-editorial__story:hover
  .news-editorial__image-inner img {
    transform: scale(1.02) !important;
  }

  body.home-page .site-footer.final-morph-runway::before {
    left: 24px;
    top: 90px;
    width: 54px;
  }
}


/* ---------------------------------------------------------
   10. REDUCED MOTION
   Preserve layout/identity, remove ornamental movement.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.home-page .investment-value-ghost,
  body.home-page .section--resource .resource-backdrop span,
  body.home-page .section--resource .resource-cover__object,
  body.home-page .section--news .news-backdrop span,
  body.home-page .partner-backdrop__word,
  body.home-page .partner-network__node,
  body.home-page .partner-network__node::before {
    animation: none !important;
  }
}


/* =========================================================
   V104 — Restore the stronger background-word motion
   ---------------------------------------------------------
   User preference:
   - keep the animated background typography alive
   - pause it ONLY while transitioning between chapters/dots
     or while leaving for another page
   - retain the V102 performance system
   ========================================================= */

/* 03 OUR INVESTMENT CASE — restore the fuller VALUE drift. */
body.home-page .investment-value-ghost {
  animation-name: investmentValueDrift !important;
  animation-duration: 20s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
}

/* 04 FEATURED RESOURCE — restore the more expressive V91 motion:
   horizontal travel + tiny Y movement + breathing scale/opacity. */
body.home-page .section--resource .resource-backdrop span {
  animation-name: zifpimEvidenceBackdropMotion !important;
  animation-duration: 24s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  will-change: transform, opacity;
}

/* 05 LATEST NEWS — restore the original larger vertical NEWS drift. */
body.home-page .section--news .news-backdrop span {
  animation-name: zifpimNewsDrift !important;
  animation-duration: 32s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  will-change: transform, opacity;
}

/* 06 PARTNER WITH US — restore the stronger opposing word movement. */
body.home-page .partner-backdrop__word--one {
  animation-name: zifpimPartnerBackdropOne !important;
  animation-duration: 42s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
}

body.home-page .partner-backdrop__word--two {
  animation-name: zifpimPartnerBackdropTwo !important;
  animation-duration: 48s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
}

/* IMPORTANT:
   Do not weaken the animation itself while the chapter is settled.
   Instead, pause all ambient motion precisely while:
   1) a homepage chapter is morphing to/from its memory dot
   2) a real navigation to another site page has started.

   These selectors intentionally control ONLY play-state, so the
   original animation frame is preserved and resumes from the same
   position after the transition. */
@media (min-width: 861px) {
  body.home-page.is-morphing .morph-performance-scene *,
  body.home-page.is-leaving .morph-performance-scene * {
    animation-play-state: paused !important;
  }
}

/* Actual page navigation can also begin from the header/footer, outside a
   morph scene. Freeze any remaining homepage ambient animation as well. */
body.home-page.is-leaving .investment-value-ghost,
body.home-page.is-leaving .about-motion__track,
body.home-page.is-leaving .resource-backdrop span,
body.home-page.is-leaving .news-backdrop span,
body.home-page.is-leaving .partner-backdrop__word,
body.home-page.is-leaving .partner-network__orbit,
body.home-page.is-leaving .partner-network__node,
body.home-page.is-leaving .partner-network__node::before {
  animation-play-state: paused !important;
}

/* Keep accessibility behaviour intact. */
@media (prefers-reduced-motion: reduce) {
  body.home-page .investment-value-ghost,
  body.home-page .section--resource .resource-backdrop span,
  body.home-page .section--news .news-backdrop span,
  body.home-page .partner-backdrop__word {
    animation: none !important;
  }
}


/* =========================================================
   V105 — HERO TYPOGRAPHY / DESCENDER PRECISION FIX
   ---------------------------------------------------------
   Manrope's lower descenders (g, y, p, q, j) were being optically
   shaved by the very tight hero line-height + reveal clipping.

   Keep:
   - exact headline size
   - exact 4-line composition
   - compact editorial leading
   - existing reveal animation
   - hero/morph geometry

   Fix:
   - add real clipping room below each line
   - cancel that extra box-space with an equal negative margin so
     the visible baseline rhythm does not loosen
   ========================================================= */

body.home-page .signature-hero__fullscreen .signature-line {
  /* Preserve the reveal mask, but give glyph descenders room inside it. */
  overflow: hidden !important;
  padding-bottom: .115em;
  margin-bottom: -.115em;
  box-sizing: content-box;
}

/* A tiny top allowance protects the very tight uppercase/ascender edge too,
   while the negative top margin keeps the original line position unchanged. */
body.home-page .signature-hero__fullscreen .signature-line {
  padding-top: .025em;
  margin-top: -.025em;
}

/* Keep the moving inner text itself clean and unscaled. */
body.home-page .signature-hero__fullscreen .signature-line > span {
  line-height: inherit;
  padding: 0;
  overflow: visible;
}

/* The blue italic final line has slightly wider ink overhang.
   Give it a touch more horizontal breathing room without moving its baseline. */
body.home-page .signature-hero__fullscreen .signature-line--blue {
  padding-right: .08em;
}

/* Mobile uses the same optical protection. */
@media (max-width: 760px) {
  body.home-page .signature-hero__fullscreen .signature-line {
    padding-bottom: .13em;
    margin-bottom: -.13em;
  }
}


/* =========================================================
   V106 — RESTORE PROVEN BUTTER-SMOOTH MORPH PIPELINE
   ---------------------------------------------------------
   The V102 performance experiment used:
   - IntersectionObserver scene states
   - just-in-time GPU layer promotion
   - a global body.is-morphing state
   - global animation play-state changes

   On this project those optimisations created visible drag/hitching when
   a chapter was re-entered and when the compositor had to promote a large
   stage at the exact moment scrolling began.

   V106 returns to the proven V30/V55/V56 approach:
   - native scroll is still 1:1
   - one requestAnimationFrame render loop
   - measurements cached outside scroll
   - each morph stage remains compositor-ready
   - only local decorative motion pauses inside the stage being transformed
   ========================================================= */

@media (min-width: 861px) {

  /* Keep all seven morph objects ready BEFORE the gesture begins.
     This avoids first-frame layer promotion and the "draggy" catch-up feel. */
  body.home-page .signature-hero__stage,
  body.home-page .about-morph-stage,
  body.home-page .work-morph-stage,
  body.home-page .memory-morph-stage {
    will-change: transform !important;
    transition: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform-style: flat;
  }

  /* A CSS transition on the transform container would interpolate between
     scroll frames and feel like resistance. Explicitly forbid it in every
     morph state. */
  body.home-page .signature-hero__stage.is-morph-active,
  body.home-page .about-morph-stage.is-morph-active,
  body.home-page .work-morph-stage.is-morph-active,
  body.home-page .memory-morph-stage.is-morph-active,
  body.home-page .signature-hero__stage.is-dot-face,
  body.home-page .about-morph-stage.is-dot-face,
  body.home-page .work-morph-stage.is-dot-face,
  body.home-page .memory-morph-stage.is-dot-face {
    transition: none !important;
    will-change: transform !important;
    isolation: auto !important;
  }

  /* V102 selectors become inert because its JS state is removed.
     These overrides also protect against stale classes after browser
     back/forward cache restoration. */
  body.home-page .morph-performance-scene,
  body.home-page .morph-performance-scene.is-morph-performance-near {
    contain: none !important;
  }

  body.home-page .morph-performance-scene *,
  body.home-page .morph-performance-scene.is-morph-performance-near * {
    animation-play-state: running;
  }

  /* Re-apply the intentional LOCAL pauses while a section itself morphs.
     These do not trigger a whole-page restyle. */
  body.home-page .section--about
  .about-morph-stage.is-morph-active .about-motion__track,

  body.home-page .section--investment
  .memory-morph-stage--investment.is-morph-active .investment-value-ghost,

  body.home-page .section--resource
  .memory-morph-stage--resource.is-morph-active .resource-backdrop span,

  body.home-page .section--resource
  .memory-morph-stage--resource.is-morph-active .resource-cover__object,

  body.home-page .section--news
  .memory-morph-stage--news.is-morph-active .news-backdrop span,

  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-backdrop__word,

  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-network__orbit--outer,

  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-network__orbit--inner,

  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-network__core,

  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-network__node,

  body.home-page .partner-section
  .memory-morph-stage--partner.is-morph-active .partner-network__node::before {
    animation-play-state: paused !important;
  }
}

/* Real navigation away from the homepage may still freeze ambience via
   body.is-leaving from the existing page-transition code. */


/* =========================================================
   V107 — REFERENCE-MATCHED SMOOTHNESS PASS
   ---------------------------------------------------------
   Direct comparison with the user's smoother uploaded build showed:

   - the core V30/V55/V56 morph engine is essentially the SAME
   - the regression arrived later in the visual/compositor layer
   - later builds added global geometricPrecision text rendering,
     a fixed-header backdrop blur, more nested animated compositor
     layers, a blurred publication shadow and long secondary
     transitions inside chapters

   This pass keeps the current design, but removes those costs from
   the morph path.
   ========================================================= */


/* ---------------------------------------------------------
   1. Return text rendering to the browser's normal cached path.
   geometricPrecision was NOT present in the smoother reference and
   is unnecessary while entire text-heavy chapters are being scaled.
   --------------------------------------------------------- */
body.home-page {
  text-rendering: auto !important;
}


/* ---------------------------------------------------------
   2. The fixed header sits over every single morph frame.
   A live backdrop-filter forces the browser to continually sample
   the transformed page beneath it. Use the same almost-opaque paper
   appearance without the live blur.
   --------------------------------------------------------- */
body.home-page .editorial-header.is-scrolled::before {
  background: rgba(247,246,242,.992) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* ---------------------------------------------------------
   3. Pre-isolate the big morph surfaces as paint/compositor regions.
   overflow:hidden already existed in the proven build; paint
   containment simply stops descendant paint invalidation escaping.
   --------------------------------------------------------- */
@media (min-width: 861px) {
  body.home-page .signature-hero__stage,
  body.home-page .about-morph-stage,
  body.home-page .work-morph-stage,
  body.home-page .memory-morph-stage {
    contain: paint !important;
    will-change: transform !important;
    transition: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
}


/* ---------------------------------------------------------
   4. CRITICAL: while a chapter is physically transforming,
   freeze only the INNER ornamental/interactive compositor work.
   The parent stage remains the single moving layer.

   This is deliberately scoped to .is-morph-active; all approved
   background-word/orbit/node animations continue normally whenever
   the chapter is settled.
   --------------------------------------------------------- */
@media (min-width: 861px) {

  body.home-page .signature-hero__stage.is-morph-active *,
  body.home-page .about-morph-stage.is-morph-active *,
  body.home-page .work-morph-stage.is-morph-active *,
  body.home-page .memory-morph-stage.is-morph-active * {
    animation-play-state: paused !important;
  }

  /* Nested will-change layers made the newer, much richer chapters
     significantly heavier than the uploaded reference. The parent
     already owns the GPU transform, so nested promotion is redundant. */
  body.home-page .signature-hero__stage.is-morph-active *,
  body.home-page .about-morph-stage.is-morph-active *,
  body.home-page .work-morph-stage.is-morph-active *,
  body.home-page .memory-morph-stage.is-morph-active * {
    will-change: auto !important;
  }

  /* A CSS transition inside a scaling parent can keep producing frames
     even though scroll itself has stopped. Freeze transitions during
     the chapter morph and let them resume at rest. */
  body.home-page .signature-hero__stage.is-morph-active *,
  body.home-page .about-morph-stage.is-morph-active *,
  body.home-page .work-morph-stage.is-morph-active *,
  body.home-page .memory-morph-stage.is-morph-active * {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }

  /* Filters are expensive when their containing surface is scaling.
     The current visual treatment returns immediately after the morph. */
  body.home-page .memory-morph-stage.is-morph-active
  .resource-cover__shadow,
  body.home-page .memory-morph-stage.is-morph-active
  .news-editorial__image-inner img {
    filter: none !important;
  }
}


/* ---------------------------------------------------------
   5. Remove two unnecessary always-on filter costs.
   The publication shadow is already a soft radial-gradient, so blur()
   is visually redundant; News does not need a live colour filter.
   --------------------------------------------------------- */
body.home-page .section--resource .resource-cover__shadow {
  filter: none !important;
}

body.home-page .section--news .news-editorial__story:hover
.news-editorial__image-inner img,
body.home-page .section--news .news-editorial__image:hover
.news-editorial__image-inner img {
  filter: none !important;
}


/* ---------------------------------------------------------
   6. Flatten nested 3D composition while the Resource chapter itself
   is shrinking. At rest the approved book warp is untouched.
   --------------------------------------------------------- */
@media (min-width: 861px) {
  body.home-page .memory-morph-stage--resource.is-morph-active
  .publication-cover {
    transform-style: flat !important;
    perspective: none !important;
  }
}


/* ---------------------------------------------------------
   7. Keep a clean high-priority transform path on the actual moving
   containers. No visual easing; no synthetic inertia.
   --------------------------------------------------------- */
@media (min-width: 861px) {
  body.home-page .signature-hero__stage.is-morph-active,
  body.home-page .about-morph-stage.is-morph-active,
  body.home-page .work-morph-stage.is-morph-active,
  body.home-page .memory-morph-stage.is-morph-active {
    will-change: transform !important;
    transition: none !important;
  }
}


/* =========================================================
   V108 — RESTORE FULL CIRCLES
   ---------------------------------------------------------
   V107's `contain: paint` optimisation was too aggressive for
   transformed/rounded elements and could clip circular paint into
   partial / semicircle shapes.

   Keep the V107 smoothness work, but remove that clipping boundary.
   ========================================================= */

@media (min-width: 861px) {
  body.home-page .signature-hero__stage,
  body.home-page .about-morph-stage,
  body.home-page .work-morph-stage,
  body.home-page .memory-morph-stage {
    contain: none !important;
  }
}

/* Ensure completed memory dots retain a mathematically complete round face. */
@media (min-width: 861px) {
  body.home-page .signature-hero__stage.is-dot-face,
  body.home-page .about-morph-stage.is-dot-face,
  body.home-page .work-morph-stage.is-dot-face,
  body.home-page .memory-morph-stage.is-dot-face {
    overflow: visible !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
}

/* Partner nodes: preserve the true-circle geometry while allowing the
   animated perimeter to render completely around the edge. */
body.home-page .partner-network__node {
  border-radius: 50% !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

body.home-page .partner-network__node::before {
  border-radius: 50% !important;
}

/* =========================================================
   ZiFPIM Stage 5.6.8 — Numberless editorial system
   Removes the decorative 01 / 02 / 03... visual grammar while
   preserving navigation, CMS hooks and homepage morph behaviour.
   ========================================================= */

/* Main navigation */
.editorial-nav a > sup {
  display: none !important;
}
.editorial-nav a {
  gap: 0 !important;
}

/* Full-screen menu: retain labels/arrows, remove sequence column. */
.mega-menu__primary > a {
  grid-template-columns: minmax(0, 1fr) 42px !important;
}
.mega-menu__primary > a > span:first-child {
  display: none !important;
}

/* Homepage chapter / CTA numbering. Keep DOM hooks for morph logic. */
body.home-page .section-label > span:first-child,
.signature-cta-v37__count,
.work-system__number,
body.home-page .investment-path__step > small {
  display: none !important;
}
body.home-page .section-label {
  gap: 0 !important;
}
.signature-cta-v37--about {
  grid-template-columns: auto 44px !important;
}
.signature-cta-v37--about .signature-cta-v37__text {
  padding-left: 18px !important;
}

/* What We Do interactive system: remove the old number lane cleanly. */
.work-system__item {
  grid-template-columns: 48px minmax(0, 1fr) !important;
}
.work-system__line {
  left: 24px !important;
}
.work-system__detail {
  margin-left: 48px !important;
}

/* About landing route list. */
.route-row {
  grid-template-columns: minmax(240px, .85fr) 1fr 30px !important;
}
.route-row > span:first-child {
  display: none !important;
}

/* Interior editorial chapter numbering. */
.what-chapter {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}
.what-chapter > span:first-child,
.engage-pathway > span:first-child {
  display: none !important;
}
.engage-pathway h2 {
  margin-top: 0 !important;
}

@media (max-width: 980px) {
  .route-row {
    grid-template-columns: minmax(0, 1fr) 30px !important;
  }
}

@media (max-width: 760px) {
  .work-system__item {
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }
  .work-system__line {
    left: 16px !important;
  }
  .work-system__detail {
    margin-left: 36px !important;
  }
  .what-chapter {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* =========================================================
   ZiFPIM Stage 5.6.9 — Numberless What We Do selector repair
   The number lane was removed in 5.6.8, but the interaction system
   still used the old numbered dot centre. Re-align every selector
   layer to the new compact dot lane without restoring visible numbers.
   ========================================================= */
body.home-page .work-editorial--live .work-system {
  --work-dot-center-x: 24px !important;
}

body.home-page .work-editorial--live .work-system__item {
  grid-template-columns: 48px minmax(0, 1fr) !important;
}

body.home-page .work-editorial--live .work-system__dot {
  justify-self: center !important;
  margin-left: 0 !important;
}

body.home-page .work-editorial--live .work-system__line {
  left: var(--work-dot-center-x) !important;
}

body.home-page .work-editorial--live .work-system__click-signal {
  left: calc(var(--work-dot-center-x) - 5px) !important;
}

body.home-page .work-editorial--live .work-system__detail {
  margin-left: 48px !important;
}

body.home-page .work-editorial--live .work-system__detail::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 760px) {
  body.home-page .work-editorial--live .work-system {
    --work-dot-center-x: 18px !important;
  }

  body.home-page .work-editorial--live .work-system__item {
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }

  body.home-page .work-editorial--live .work-system__line {
    left: var(--work-dot-center-x) !important;
  }

  body.home-page .work-editorial--live .work-system__detail {
    margin-left: 36px !important;
  }
}

/* =========================================================
   V112 — Latest News viewport-fit repair
   ---------------------------------------------------------
   Keep the approved 100vh morph scene and editorial design,
   but size its INTERNAL composition against the actual laptop
   viewport so nothing falls below the visible frame.
   ========================================================= */
@media (min-width: 861px) {
  body.home-page .section--news .memory-morph-stage--news {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(92px, 12.5vh, 118px);
    padding-bottom: clamp(16px, 2.8vh, 30px);
  }

  body.home-page .section--news .section-label {
    flex: 0 0 auto;
  }

  body.home-page .section--news .news-heading--editorial {
    margin-top: clamp(12px, 2.2vh, 24px);
    padding-bottom: clamp(10px, 1.6vh, 17px);
  }

  body.home-page .section--news .news-heading--editorial .display-heading {
    font-size: clamp(2.9rem, min(5.5vw, 6.8vh), 5.35rem) !important;
    line-height: .9 !important;
  }

  body.home-page .section--news .news-editorial {
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(12px, 2.2vh, 24px) 0 clamp(10px, 1.8vh, 20px);
    align-items: center;
  }

  body.home-page .section--news .news-editorial__story {
    gap: clamp(28px, 4.5vw, 66px);
    align-items: center;
    min-height: 0;
  }

  /* Explicit height is the important fix: previously min-height allowed the
     intrinsic landscape ratio to push the chapter below the viewport. */
  body.home-page .section--news .news-editorial__image-inner {
    height: clamp(250px, 42vh, 420px);
    min-height: 0;
  }

  body.home-page .section--news .news-editorial__image-inner img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
  }

  body.home-page .section--news .news-editorial__image-caption {
    margin-top: clamp(10px, 1.4vh, 15px);
    padding-top: 10px;
    font-size: clamp(.76rem, .88vw, .9rem);
  }

  body.home-page .section--news .news-editorial__meta {
    margin-bottom: clamp(12px, 1.9vh, 20px);
    padding-bottom: 9px;
  }

  body.home-page .section--news .news-editorial__headline {
    font-size: clamp(1.8rem, min(3.15vw, 4.15vh), 3.25rem);
    line-height: .97;
  }

  body.home-page .section--news .news-editorial-link--story {
    margin-top: clamp(16px, 2.4vh, 26px);
  }
}

/* Common 13-inch / 14-inch laptop heights: make the chapter decisively fit
   without changing any scroll/morph scene geometry. */
@media (min-width: 861px) and (max-height: 820px) {
  body.home-page .section--news .memory-morph-stage--news {
    padding-top: clamp(82px, 11.3vh, 96px);
    padding-bottom: 14px;
  }

  body.home-page .section--news .news-heading--editorial {
    margin-top: 10px;
    padding-bottom: 10px;
  }

  body.home-page .section--news .news-heading--editorial .display-heading {
    font-size: clamp(2.7rem, 6.3vh, 4rem) !important;
  }

  body.home-page .section--news .news-editorial {
    padding: 10px 0 12px;
  }

  body.home-page .section--news .news-editorial__image-inner {
    height: clamp(245px, 39vh, 320px);
  }

  body.home-page .section--news .news-editorial__headline {
    font-size: clamp(1.7rem, 3.75vh, 2.35rem);
  }

  body.home-page .section--news .news-editorial__meta {
    margin-bottom: 11px;
  }

  body.home-page .section--news .news-editorial-link--story {
    margin-top: 14px;
  }
}

/* =========================================================
   V113 — Latest News vertical breathing room
   ---------------------------------------------------------
   Keep the completed morph-dot row exactly where it is.
   Move only the chapter CONTENT lower so the section label,
   title and editorial story never collide with the dots.
   ========================================================= */
@media (min-width: 861px) {
  body.home-page .section--news .section-label {
    margin-top: clamp(22px, 3.2vh, 34px) !important;
  }
}

/* Laptop-height screens: reclaim the same vertical space from the image,
   keeping the full Latest News composition inside one viewport. */
@media (min-width: 861px) and (max-height: 820px) {
  body.home-page .section--news .section-label {
    margin-top: clamp(24px, 3.4vh, 28px) !important;
  }

  body.home-page .section--news .news-editorial__image-inner {
    height: clamp(235px, 36vh, 292px);
  }
}


/* =========================================================
   V114 — active page in primary header navigation
   ========================================================= */
.editorial-nav a.is-current-page > span,
.editorial-nav a[aria-current="page"] > span {
  color: var(--gold) !important;
}

/* Preserve the gold selected state after the Matrix hover resolves. */
.editorial-nav a.is-current-page:not(.is-matrix) > span,
.editorial-nav a[aria-current="page"]:not(.is-matrix) > span {
  text-shadow: none !important;
}

/* =========================================================
   V115 — ZIFPIM PUBLIC REFINEMENT FOUNDATION
   ---------------------------------------------------------
   Phase 1 visual-system pass for the PUBLIC INTERNAL SITE.

   Goals:
   - establish one horizontal grid / gutter rhythm
   - calm the display typography without losing confidence
   - create a clearer editorial type hierarchy
   - replace generic pill-like action behaviour on internal pages
   - align header + footer with the same content grid
   - improve keyboard focus and responsive rhythm

   Deliberately NOT touched:
   - homepage morph geometry / memory-dot engine
   - homepage section sizing or scroll choreography
   - CMS / Supabase bindings
   - News template logic and sentence balancing
   - Admin styles
   ========================================================= */

/* ---------- Internal-site design tokens ---------- */
body.internal {
  --zifpim-gutter: clamp(24px, 4.25vw, 72px);
  --zifpim-content-max: 1440px;
  --zifpim-reading-max: 760px;
  --zifpim-section-space: clamp(76px, 8vw, 128px);
  --zifpim-section-space-compact: clamp(54px, 5.8vw, 92px);
  --zifpim-grid-gap: clamp(38px, 6vw, 96px);
  --zifpim-rule: rgba(38,37,37,.16);
  --zifpim-rule-dark: rgba(255,255,255,.18);
  --zifpim-deck: clamp(1.02rem, 1.12vw, 1.18rem);
  --zifpim-body: clamp(.98rem, .3vw + .91rem, 1.06rem);
  --page: min(
    calc(100vw - (var(--zifpim-gutter) + var(--zifpim-gutter))),
    var(--zifpim-content-max)
  );

  font-kerning: normal;
  font-synthesis: none;
}

/* ---------- One alignment system: header / page / footer ---------- */
body.internal .editorial-header {
  padding-inline: max(
    var(--zifpim-gutter),
    calc((100vw - var(--zifpim-content-max)) / 2)
  );
}

body.internal .editorial-nav {
  gap: clamp(19px, 2.25vw, 38px);
}

body.internal .editorial-nav a,
body.internal .editorial-partner {
  font-size: .74rem;
  letter-spacing: .035em;
}

body.internal .site-footer {
  padding:
    clamp(72px, 7.5vw, 112px)
    max(var(--zifpim-gutter), calc((100vw - var(--zifpim-content-max)) / 2))
    30px;
  grid-template-columns: minmax(280px, 1.5fr) minmax(150px, .55fr) minmax(190px, .65fr);
  gap: clamp(42px, 6vw, 92px);
}

body.internal .footer-brand {
  gap: 10px;
}

body.internal .footer-brand__lockup--white {
  margin-bottom: 12px;
}

body.internal .footer-brand__white-logo {
  width: min(288px, 100%);
}

body.internal .footer-brand em {
  max-width: 30ch;
  font-size: .9rem;
  line-height: 1.55;
}

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

body.internal .footer-column > span {
  margin-bottom: 11px;
  color: var(--gold);
  font-size: .66rem;
  letter-spacing: .15em;
}

body.internal .footer-column a,
body.internal .footer-column p {
  font-size: .9rem;
  line-height: 1.5;
}

body.internal .footer-column a {
  width: fit-content;
  transition: color .2s ease, transform .25s var(--ease);
}

body.internal .footer-column a:hover {
  transform: translateX(3px);
}

body.internal .footer-bottom {
  margin-top: clamp(48px, 5vw, 74px);
  padding-top: 22px;
  line-height: 1.55;
}

/* ---------- Editorial type hierarchy ---------- */
body.internal .page-hero,
body.internal .narrative-hero {
  padding-top: clamp(72px, 6.6vw, 104px);
  padding-bottom: clamp(82px, 7.6vw, 120px);
}

body.internal .page-hero__eyebrow {
  position: relative;
  padding-left: 24px;
  color: var(--blue);
  font-size: .68rem;
  letter-spacing: .15em;
}

body.internal .page-hero__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--gold);
  transform: translateY(-50%);
}

body.internal .page-index {
  font-size: .68rem;
  letter-spacing: .14em;
}

body.internal .page-hero__grid {
  grid-template-columns: minmax(0, 1.48fr) minmax(280px, .52fr);
  gap: clamp(50px, 8vw, 132px);
  margin-top: clamp(30px, 3.4vw, 50px);
}

body.internal .page-title {
  max-width: 1120px;
  font-size: clamp(3.45rem, 6.25vw, 7.15rem);
  line-height: .925;
  letter-spacing: -.061em;
  font-weight: 700;
  text-wrap: balance;
}

body.internal .page-hero__side {
  max-width: 500px;
  padding-top: 18px;
  border-top: 1px solid var(--zifpim-rule);
  font-size: var(--zifpim-deck);
  line-height: 1.68;
}

body.internal .page-hero__side p {
  margin-top: 0;
}

body.internal .narrative-hero .page-title {
  margin-top: clamp(26px, 3vw, 42px);
}

/* Special page openings keep their identities, but now share scale discipline. */
body.internal .investment-hero-page,
body.internal .engage-hero,
body.internal .what-hero {
  padding-top: clamp(76px, 7vw, 112px);
  padding-bottom: clamp(84px, 8vw, 124px);
}

body.internal .engage-hero {
  padding-left: max(var(--zifpim-gutter), calc((100vw - var(--zifpim-content-max)) / 2));
  padding-right: max(var(--zifpim-gutter), calc((100vw - var(--zifpim-content-max)) / 2));
}

body.internal .investment-hero-page h1,
body.internal .engage-hero h1 {
  max-width: 1200px;
  margin-top: clamp(28px, 3vw, 42px);
  margin-bottom: clamp(30px, 3.6vw, 50px);
  font-size: clamp(3.8rem, 7.1vw, 8.15rem);
  line-height: .91;
  letter-spacing: -.064em;
  text-wrap: balance;
}

body.internal .what-hero h1 {
  margin-top: clamp(30px, 3vw, 44px);
  margin-bottom: clamp(34px, 3.8vw, 54px);
  font-size: clamp(4rem, 8vw, 9rem);
  line-height: .845;
  letter-spacing: -.069em;
  text-wrap: balance;
}

body.internal .investment-hero-page p,
body.internal .engage-hero p,
body.internal .what-hero p,
body.internal .mission-panel p {
  font-size: var(--zifpim-deck);
  line-height: 1.68;
}

body.internal .mission-panel {
  padding-left: max(var(--zifpim-gutter), calc((100vw - var(--zifpim-content-max)) / 2));
  padding-right: max(var(--zifpim-gutter), calc((100vw - var(--zifpim-content-max)) / 2));
}

body.internal .mission-panel h1,
body.internal .mission-panel h2 {
  font-size: clamp(2.875rem, 4.7vw, 5.5rem);
  line-height: .94;
  letter-spacing: -.061em;
  text-wrap: balance;
}

/* ---------- Long-form reading rhythm ---------- */
body.internal .narrative-layout,
body.internal .investment-story {
  gap: clamp(54px, 8vw, 126px);
  padding-top: var(--zifpim-section-space-compact);
  padding-bottom: var(--zifpim-section-space);
}

body.internal .narrative-copy,
body.internal .investment-story article {
  max-width: 820px;
}

body.internal .narrative-copy p,
body.internal .investment-story p,
body.internal .full-article p,
body.internal .partner-feature p,
body.internal .resource-feature-page__copy p,
body.internal .engage-pathway p,
body.internal .contact-section p {
  font-size: var(--zifpim-body);
  line-height: 1.78;
}

body.internal .narrative-copy .lead {
  max-width: 30ch;
  font-size: clamp(1.4rem, 2vw, 1.95rem);
  line-height: 1.48;
}

/* ---------- Actions: more editorial, less SaaS ---------- */
body.internal .button {
  position: relative;
  min-height: 50px;
  padding: 0 21px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition:
    color .24s ease,
    background .24s ease,
    border-color .24s ease,
    transform .24s var(--ease),
    box-shadow .24s ease;
}

body.internal .button::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 3px;
  background: var(--gold);
  transition: right .3s var(--ease);
}

body.internal .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(38,37,37,.1);
}

body.internal .button:hover::after,
body.internal .button:focus-visible::after {
  right: 0;
}

body.internal .text-link {
  position: relative;
  width: fit-content;
  padding-bottom: 7px;
  border-bottom: 0;
  font-size: .8rem;
  font-weight: 800;
}

body.internal .text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 72%;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transition: right .3s var(--ease);
}

body.internal .text-link:hover::after,
body.internal .text-link:focus-visible::after {
  right: 0;
}

/* ---------- Accessible focus: visible without looking default ---------- */
body.internal a:focus-visible,
body.internal button:focus-visible,
body.internal input:focus-visible,
body.internal textarea:focus-visible,
body.internal select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  body.internal {
    --zifpim-gutter: clamp(24px, 5vw, 44px);
    --zifpim-section-space: clamp(68px, 10vw, 102px);
    --zifpim-section-space-compact: clamp(50px, 7vw, 76px);
  }

  body.internal .page-hero__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  body.internal .page-hero__side {
    max-width: 690px;
  }

  body.internal .site-footer {
    grid-template-columns: minmax(260px, 1.35fr) minmax(140px, .65fr) minmax(180px, .8fr);
    gap: 34px;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  body.internal {
    --zifpim-gutter: 22px;
    --zifpim-section-space: 78px;
    --zifpim-section-space-compact: 54px;
  }

  body.internal .page,
  body.internal .what-page,
  body.internal .investment-page,
  body.internal .engage-page,
  body.internal .mission-page {
    padding-top: 82px;
  }

  body.internal .page-hero,
  body.internal .narrative-hero,
  body.internal .investment-hero-page,
  body.internal .engage-hero,
  body.internal .what-hero {
    padding-top: 54px;
    padding-bottom: 70px;
  }

  body.internal .page-title {
    font-size: clamp(2.9rem, 12.6vw, 4.5rem);
    line-height: .95;
    letter-spacing: -.058em;
  }

  body.internal .page-hero__grid {
    margin-top: 28px;
    gap: 30px;
  }

  body.internal .page-hero__side {
    padding-top: 15px;
    font-size: 1rem;
    line-height: 1.65;
  }

  body.internal .investment-hero-page h1,
  body.internal .engage-hero h1 {
    font-size: clamp(3.15rem, 14.4vw, 5.25rem);
    line-height: .92;
  }

  body.internal .what-hero h1 {
    font-size: clamp(3.45rem, 16vw, 5.8rem);
    line-height: .86;
  }

  body.internal .mission-panel {
    min-height: auto;
    padding-top: 88px;
    padding-bottom: 88px;
  }

  /* Match both headings at the approved mobile text scale. */
  body.internal .mission-panel--vision h1,
  body.internal .mission-panel--mission h2 {
    font-size: clamp(1.9rem, 8.4vw, 3.35rem);
    line-height: 1.09;
    letter-spacing: -.045em;
  }

  body.internal .narrative-layout,
  body.internal .investment-story {
    gap: 34px;
  }

  body.internal .button {
    min-height: 48px;
    padding-inline: 18px;
  }

  body.internal .site-footer {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-top: 68px;
  }

  body.internal .footer-brand__white-logo {
    width: min(258px, 82vw);
  }

  body.internal .footer-bottom {
    margin-top: 18px;
    gap: 12px;
  }
}

/* Touch devices: do not manufacture hover movement. */
@media (hover: none) {
  body.internal .footer-column a:hover,
  body.internal .button:hover {
    transform: none;
  }
}

/* =========================================================
   Homepage double-chevron chapter cues — v4
   Home page only. Narrow approved chevrons restored.
   From chapter 2 onward: UP at the top, DOWN at the bottom.
   Cues live on the OUTER scroll scenes so they do not morph away
   with the transforming content stage.
   ========================================================= */

body.home-page .hero-scroll-cue,
body.home-page .home-section-scroll-cue {
  --zifpim-cue-colour: var(--gold);
}

/* The outer scene is the stable positioning surface. */
body.home-page [data-about-morph-scene],
body.home-page [data-work-morph-scene],
body.home-page [data-memory-morph-scene] {
  position: relative;
}

body.home-page .home-section-scroll-cue {
  position: absolute;
  z-index: 520;
  left: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  color: var(--zifpim-cue-colour);
  cursor: pointer;
  transform: translateX(-50%);
  -webkit-tap-highlight-color: transparent;
}

/* Keep the UP control below the fixed header so it is actually visible. */
body.home-page .home-section-scroll-cue--up {
  top: clamp(84px, 6.5vw, 102px);
}

body.home-page .home-section-scroll-cue--down {
  bottom: clamp(10px, 1.35vw, 20px);
}

/* Restore the original narrow double-chevron proportions. */
body.home-page .hero-scroll-cue__arrow,
body.home-page .home-section-scroll-cue__arrow {
  position: relative;
  display: block;
  width: 30px;
  height: 34px;
  overflow: visible;
}

body.home-page .hero-scroll-cue__arrow i,
body.home-page .home-section-scroll-cue__arrow i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 16px;
  height: 16px;
  border: 0;
  opacity: .42;
  transform-origin: center;
  will-change: transform, opacity;
}

/* DOWN */
body.home-page .hero-scroll-cue__arrow i,
body.home-page .home-section-scroll-cue__arrow--down i {
  border-right: 3px solid var(--zifpim-cue-colour);
  border-bottom: 3px solid var(--zifpim-cue-colour);
  transform: translate3d(-50%, -2px, 0) rotate(45deg);
  animation: zifpimHomeDoubleChevronDown 2.05s cubic-bezier(.4,0,.2,1) infinite;
}

/* UP */
body.home-page .home-section-scroll-cue__arrow--up i {
  border-left: 3px solid var(--zifpim-cue-colour);
  border-top: 3px solid var(--zifpim-cue-colour);
  transform: translate3d(-50%, 2px, 0) rotate(45deg);
  animation: zifpimHomeDoubleChevronUp 2.05s cubic-bezier(.4,0,.2,1) infinite;
}

body.home-page .hero-scroll-cue__arrow i:nth-child(2),
body.home-page .home-section-scroll-cue__arrow--down i:nth-child(2) {
  top: 13px;
  animation-delay: .16s;
}

/* For UP, the lower mark leads the upward motion. */
body.home-page .home-section-scroll-cue__arrow--up i:first-child {
  top: 13px;
  animation-delay: 0s;
}

body.home-page .home-section-scroll-cue__arrow--up i:nth-child(2) {
  top: 0;
  animation-delay: .16s;
}

@keyframes zifpimHomeDoubleChevronDown {
  0%, 100% {
    opacity: .32;
    transform: translate3d(-50%, -2px, 0) rotate(45deg) scale(.94);
  }
  42% {
    opacity: 1;
    transform: translate3d(-50%, 3px, 0) rotate(45deg) scale(1);
  }
  70% {
    opacity: .82;
    transform: translate3d(-50%, 5px, 0) rotate(45deg) scale(1);
  }
}

@keyframes zifpimHomeDoubleChevronUp {
  0%, 100% {
    opacity: .32;
    transform: translate3d(-50%, 2px, 0) rotate(45deg) scale(.94);
  }
  42% {
    opacity: 1;
    transform: translate3d(-50%, -3px, 0) rotate(45deg) scale(1);
  }
  70% {
    opacity: .82;
    transform: translate3d(-50%, -5px, 0) rotate(45deg) scale(1);
  }
}

/* Hero remains down-only, using the same narrow marks. */
body.home-page .hero-scroll-cue {
  width: 48px;
  height: 48px;
  bottom: 10px;
  display: grid;
  place-items: center;
}

body.home-page .hero-scroll-cue:hover .hero-scroll-cue__arrow i,
body.home-page .home-section-scroll-cue:hover .home-section-scroll-cue__arrow i {
  --zifpim-cue-colour: #ffd15b;
}

body.home-page .hero-scroll-cue:focus-visible,
body.home-page .home-section-scroll-cue:focus-visible {
  outline: 2px solid rgba(226,168,20,.82);
  outline-offset: 5px;
  border-radius: 50%;
}

@media (max-width: 860px) {
  body.home-page .home-section-scroll-cue,
  body.home-page .hero-scroll-cue {
    width: 44px;
    height: 44px;
  }

  body.home-page .home-section-scroll-cue--up {
    top: 72px;
  }

  body.home-page .home-section-scroll-cue--down {
    bottom: 8px;
  }

  body.home-page .hero-scroll-cue__arrow,
  body.home-page .home-section-scroll-cue__arrow {
    width: 27px;
    height: 31px;
  }

  body.home-page .hero-scroll-cue__arrow i,
  body.home-page .home-section-scroll-cue__arrow i {
    width: 14px;
    height: 14px;
  }

  body.home-page .hero-scroll-cue__arrow i,
  body.home-page .home-section-scroll-cue__arrow--down i {
    border-right-width: 2.5px;
    border-bottom-width: 2.5px;
  }

  body.home-page .home-section-scroll-cue__arrow--up i {
    border-left-width: 2.5px;
    border-top-width: 2.5px;
  }

  body.home-page .hero-scroll-cue__arrow i:nth-child(2),
  body.home-page .home-section-scroll-cue__arrow--down i:nth-child(2),
  body.home-page .home-section-scroll-cue__arrow--up i:first-child {
    top: 12px;
  }

  body.home-page .home-section-scroll-cue__arrow--up i:nth-child(2) {
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .hero-scroll-cue__arrow i,
  body.home-page .home-section-scroll-cue__arrow--down i {
    animation: none !important;
    opacity: .9;
    transform: translate3d(-50%, 1px, 0) rotate(45deg);
  }

  body.home-page .home-section-scroll-cue__arrow--up i {
    animation: none !important;
    opacity: .9;
    transform: translate3d(-50%, 0, 0) rotate(45deg);
  }
}


/* =========================================================
   ZiFPIM — Internal page opening rhythm
   Keep the first page identifier/title line consistently
   1cm below the full 92px editorial header on desktop.
   Homepage is deliberately excluded.
   ========================================================= */
body.internal {
  --zifpim-open-header-height: 92px;
  --zifpim-page-title-gap: 1cm;
  --zifpim-page-opening-top: calc(var(--zifpim-open-header-height) + var(--zifpim-page-title-gap));
}

/* Remove legacy parent offsets so the opening position is measured
   from the viewport/page top rather than being double-counted. */
body.internal main.page,
body.internal main.what-page,
body.internal main.mission-page,
body.internal main.investment-page {
  padding-top: 0 !important;
}

/* Shared opening position for public landing pages. */
body.internal .page-hero,
body.internal .narrative-hero,
body.internal .mission-panel--vision,
body.internal .what-hero,
body.internal .investment-hero-page,
body.internal .resources-hero,
body.internal .newsprint-masthead,
body.internal .partner-hero-v2 {
  padding-top: var(--zifpim-page-opening-top) !important;
}

/* Dynamic detail pages use a different shell, but their opening edge
   follows the same rhythm as the landing pages. */
body.internal .person-profile-page,
body.internal .zf-news-article {
  padding-top: var(--zifpim-page-opening-top) !important;
}

body.internal .person-profile-shell {
  padding-top: 0 !important;
}

/* Mission/Vision previously vertically centred its first panel; the
   page identifier now anchors to the same opening rhythm as other pages. */
body.internal .mission-panel--vision {
  justify-content: flex-start;
}

@media (max-width: 860px) {
  body.internal {
    --zifpim-open-header-height: 76px;
  }
}


/* =========================================================
   V116 — homepage morph memory markers: dots -> checkmarks
   ---------------------------------------------------------
   Presentation only. The seven morph stages, geometry, timing,
   docking positions and reverse-scroll behaviour are untouched.
   ========================================================= */
body.home-page .signature-hero__stage.is-dot-face::after,
body.home-page .about-morph-stage.is-dot-face::after,
body.home-page .work-morph-stage.is-dot-face::after,
body.home-page .memory-morph-stage.is-dot-face::after {
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: 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;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 92% 92% !important;
  box-shadow: none !important;
}

/* =========================================================
   V116 — Global public-site search
   ---------------------------------------------------------
   Search is injected by main.js after NEWS in the primary
   navigation. The data layer is lazy: no search requests are
   made until the user opens/types into search.
   ========================================================= */
.editorial-search-trigger {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--charcoal);
  cursor: pointer;
}

.editorial-search-trigger svg {
  width: 17px;
  height: 17px;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  transition: color .2s ease, transform .25s var(--ease);
}

.editorial-search-trigger::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 2px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .24s var(--ease);
}

.editorial-search-trigger:hover,
.editorial-search-trigger:focus-visible {
  color: var(--blue);
}

.editorial-search-trigger:hover svg,
.editorial-search-trigger:focus-visible svg {
  transform: scale(1.08);
}

.editorial-search-trigger:hover::after,
.editorial-search-trigger:focus-visible::after {
  transform: scaleX(1);
}

.editorial-search-trigger:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 3px;
}

/* Search layer */
body.is-site-search-open {
  overflow: hidden;
}

.site-search {
  position: fixed;
  z-index: 15000;
  inset: 0;
  display: grid;
  align-items: start;
  background: rgba(38,37,37,.34);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}

.site-search.is-open {
  opacity: 1;
  visibility: visible;
}

.site-search[hidden] {
  display: none !important;
}

.site-search__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.site-search__panel {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100vw - 64px));
  max-height: calc(100vh - 72px);
  margin: 36px auto;
  padding: clamp(30px, 4.3vw, 64px);
  overflow: auto;
  background: var(--paper, #f7f5ef);
  color: var(--charcoal);
  border-top: 3px solid var(--gold);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  transform: translateY(-12px);
  transition: transform .28s var(--ease);
}

.site-search.is-open .site-search__panel {
  transform: translateY(0);
}

.site-search__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.site-search__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--blue);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.site-search__label::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--gold);
}

.site-search__close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(38,37,37,.22);
  border-radius: 50%;
  background: transparent;
  color: var(--charcoal);
  font: inherit;
  font-size: 1.35rem;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, color .22s ease;
}

.site-search__close:hover,
.site-search__close:focus-visible {
  color: var(--blue);
  border-color: var(--blue);
  transform: rotate(90deg);
}

.site-search__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(38,37,37,.35);
}

.site-search__input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--charcoal);
  font: inherit;
  font-size: clamp(2rem, 4.4vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 600;
}

.site-search__input::placeholder {
  color: rgba(38,37,37,.28);
}

.site-search__form-icon {
  width: clamp(28px, 3vw, 42px);
  height: clamp(28px, 3vw, 42px);
  color: var(--gold);
}

.site-search__form-icon circle,
.site-search__form-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.site-search__meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0 10px;
  min-height: 48px;
  color: rgba(38,37,37,.58);
  font-size: .78rem;
  line-height: 1.5;
}

.site-search__shortcut {
  white-space: nowrap;
}

.site-search__results {
  margin-top: 18px;
  border-top: 1px solid rgba(38,37,37,.16);
}

.site-search-result {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 34px;
  gap: clamp(18px, 3vw, 46px);
  align-items: center;
  min-height: 112px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(38,37,37,.16);
  color: inherit;
  text-decoration: none;
}

.site-search-result::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width .32s var(--ease);
}

.site-search-result:hover::after,
.site-search-result:focus-visible::after {
  width: 100%;
}

.site-search-result__type {
  align-self: start;
  padding-top: 7px;
  color: var(--blue);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-search-result__content {
  min-width: 0;
}

.site-search-result__content strong {
  display: block;
  margin-bottom: 7px;
  font-size: clamp(1.15rem, 1.65vw, 1.65rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 700;
  transition: color .2s ease;
}

.site-search-result:hover .site-search-result__content strong,
.site-search-result:focus-visible .site-search-result__content strong {
  color: var(--blue);
}

.site-search-result__content p {
  max-width: 760px;
  margin: 0;
  color: rgba(38,37,37,.62);
  font-size: .88rem;
  line-height: 1.55;
}

.site-search-result__arrow {
  justify-self: end;
  font-size: 1.15rem;
  transition: transform .22s var(--ease), color .22s ease;
}

.site-search-result:hover .site-search-result__arrow,
.site-search-result:focus-visible .site-search-result__arrow {
  color: var(--blue);
  transform: translate(3px,-3px);
}

.site-search__empty {
  padding: clamp(34px, 5vw, 64px) 0;
  color: rgba(38,37,37,.62);
  font-size: 1rem;
  line-height: 1.6;
}

/* Mobile access: injected into the existing full-screen menu. */
.mega-menu-search-trigger {
  display: none;
}

@media (max-width: 1100px) {
  .mega-menu-search-trigger {
    display: grid;
    grid-template-columns: 54px 1fr 42px;
    gap: 18px;
    align-items: center;
    width: 100%;
    min-height: 11vh;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.16);
    background: transparent;
    color: rgba(255,255,255,.94);
    text-align: left;
    font: inherit;
    cursor: pointer;
  }

  .mega-menu-search-trigger > span {
    color: var(--gold);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
  }

  .mega-menu-search-trigger strong {
    font-size: clamp(2.1rem, 6vw, 4rem);
    line-height: .9;
    letter-spacing: -.055em;
    font-weight: 600;
  }

  .mega-menu-search-trigger em {
    justify-self: end;
    font-style: normal;
    font-size: 1.45rem;
    opacity: .55;
  }
}

@media (max-width: 700px) {
  .site-search__panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    margin: 12px auto;
    padding: 26px 20px 32px;
  }

  .site-search__topline {
    margin-bottom: 32px;
  }

  .site-search__form {
    grid-template-columns: minmax(0, 1fr) 28px;
  }

  .site-search__input {
    font-size: clamp(2rem, 11vw, 3.2rem);
  }

  .site-search__meta {
    display: block;
  }

  .site-search__shortcut {
    display: none;
  }

  .site-search-result {
    grid-template-columns: 1fr 28px;
    gap: 10px 16px;
    min-height: 0;
    padding: 20px 0;
  }

  .site-search-result__type {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  .site-search-result__content {
    grid-column: 1;
  }

  .site-search-result__arrow {
    grid-column: 2;
    grid-row: 2;
  }
}


/* =========================================================
   V117 — Search refinement
   ---------------------------------------------------------
   Remove the helper/meta strip and make the header search
   trigger a stronger ZiFPIM editorial action.
   ========================================================= */
.editorial-search-trigger {
  isolation: isolate;
  width: 42px;
  height: 38px;
  margin-left: 2px;
  overflow: hidden;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--charcoal);
  transition:
    transform .24s var(--ease),
    border-color .24s ease,
    box-shadow .24s ease,
    color .2s ease;
}

.editorial-search-trigger::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .34s var(--ease);
}

.editorial-search-trigger::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: auto;
  bottom: 0;
  width: 12px;
  height: 2px;
  background: var(--charcoal);
  transform: none;
  transition: width .28s var(--ease), background .2s ease;
}

.editorial-search-trigger svg {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
  transition: transform .28s var(--ease), color .2s ease;
}

.editorial-search-trigger:hover,
.editorial-search-trigger:focus-visible,
.editorial-search-trigger[aria-expanded="true"] {
  color: #fff;
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(38,37,37,.14);
}

.editorial-search-trigger:hover::before,
.editorial-search-trigger:focus-visible::before,
.editorial-search-trigger[aria-expanded="true"]::before {
  transform: scaleX(1);
}

.editorial-search-trigger:hover::after,
.editorial-search-trigger:focus-visible::after,
.editorial-search-trigger[aria-expanded="true"]::after {
  width: 100%;
  background: var(--gold);
}

.editorial-search-trigger:hover svg,
.editorial-search-trigger:focus-visible svg,
.editorial-search-trigger[aria-expanded="true"] svg {
  transform: scale(1.10) rotate(-4deg);
}

.editorial-search-trigger:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 4px;
}

/* The helper/instruction strip has been intentionally removed from the
   search panel. Results now begin directly beneath the search field. */
.site-search__meta,
.site-search__shortcut {
  display: none !important;
}

.site-search__results {
  margin-top: clamp(26px, 3vw, 42px);
}

@media (max-width: 980px) {
  .editorial-search-trigger {
    width: 38px;
    height: 36px;
  }
}

/* =========================================================
   V118 — Editorial search motion
   ---------------------------------------------------------
   Restore the original quiet header trigger. Put the visual
   theatre inside the search layer: an unfolding panel, drawn
   rule, staged controls and staggered results.
   ========================================================= */

/* Restore the original plain trigger from V116. */
.editorial-search-trigger {
  isolation: auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -5px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--charcoal);
  box-shadow: none;
  transform: none;
  transition: color .2s ease;
}

.editorial-search-trigger::before {
  content: none;
  display: none;
}

.editorial-search-trigger::after {
  content: "";
  position: absolute;
  z-index: auto;
  left: 7px;
  right: 7px;
  bottom: 2px;
  width: auto;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .24s var(--ease);
}

.editorial-search-trigger svg {
  position: static;
  z-index: auto;
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
  transition: color .2s ease, transform .25s var(--ease);
}

.editorial-search-trigger:hover,
.editorial-search-trigger:focus-visible,
.editorial-search-trigger[aria-expanded="true"] {
  color: var(--blue);
  border-color: transparent;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.editorial-search-trigger:hover::after,
.editorial-search-trigger:focus-visible::after,
.editorial-search-trigger[aria-expanded="true"]::after {
  width: auto;
  background: var(--gold);
  transform: scaleX(1);
}

.editorial-search-trigger:hover svg,
.editorial-search-trigger:focus-visible svg,
.editorial-search-trigger[aria-expanded="true"] svg {
  transform: scale(1.08);
}

.editorial-search-trigger:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 3px;
}

/* Search layer: richer but still institutional. */
.site-search {
  background: rgba(38,37,37,.42);
  transition: opacity .34s ease, visibility .34s ease;
}

@supports (backdrop-filter: blur(8px)) {
  .site-search {
    backdrop-filter: blur(7px);
  }
}

.site-search__panel {
  isolation: isolate;
  overflow-x: hidden;
  border-top: 0;
  opacity: 0;
  transform: translateY(-34px) scale(.985);
  clip-path: inset(0 0 100% 0);
  transform-origin: top center;
  transition:
    clip-path .62s cubic-bezier(.77,0,.18,1),
    transform .62s cubic-bezier(.22,.8,.22,1),
    opacity .26s ease;
}

.site-search__panel::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .72s cubic-bezier(.65,0,.35,1) .12s;
}

/* A very faint institutional field — only visible while searching. */
.site-search__panel::after {
  content: "Zf";
  position: absolute;
  z-index: -1;
  right: -0.08em;
  top: .05em;
  color: rgba(53,88,167,.032);
  font-size: clamp(15rem, 36vw, 34rem);
  line-height: .78;
  letter-spacing: -.12em;
  font-weight: 800;
  pointer-events: none;
  transform: translate3d(36px,-16px,0) rotate(-4deg);
  opacity: 0;
  transition: transform 1s cubic-bezier(.22,.8,.22,1) .1s, opacity .55s ease .16s;
}

.site-search.is-open .site-search__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  clip-path: inset(0 0 0 0);
}

.site-search.is-open .site-search__panel::before {
  transform: scaleX(1);
}

.site-search.is-open .site-search__panel::after {
  opacity: 1;
  transform: translate3d(0,0,0) rotate(-4deg);
}

.site-search__topline,
.site-search__form,
.site-search__results {
  position: relative;
  z-index: 2;
}

.site-search__topline {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .34s ease, transform .42s cubic-bezier(.22,.8,.22,1);
}

.site-search.is-open .site-search__topline {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .22s;
}

.site-search__label::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.65,0,.35,1);
}

.site-search.is-open .site-search__label::before {
  transform: scaleX(1);
  transition-delay: .42s;
}

.site-search__form {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .38s ease, transform .52s cubic-bezier(.22,.8,.22,1);
}

.site-search.is-open .site-search__form {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .30s;
}

.site-search__form::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0 22%, var(--blue) 22% 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .72s cubic-bezier(.65,0,.35,1);
}

.site-search.is-open .site-search__form::after {
  transform: scaleX(1);
  transition-delay: .42s;
}

.site-search__form-icon {
  opacity: 0;
  transform: translateY(8px) rotate(-18deg) scale(.75);
  transition: opacity .3s ease, transform .58s cubic-bezier(.22,.8,.22,1);
}

.site-search.is-open .site-search__form-icon {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
  transition-delay: .48s;
}

/* Helper strip remains intentionally removed. */
.site-search__meta,
.site-search__shortcut {
  display: none !important;
}

.site-search__results {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .32s ease, transform .42s cubic-bezier(.22,.8,.22,1);
}

.site-search.is-open .site-search__results {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .52s;
}

/* Every newly rendered result gets a small editorial cascade. */
.site-search-result {
  animation: zifpimSearchResultIn .48s cubic-bezier(.22,.8,.22,1) both;
}

.site-search-result:nth-child(2) { animation-delay: 35ms; }
.site-search-result:nth-child(3) { animation-delay: 70ms; }
.site-search-result:nth-child(4) { animation-delay: 105ms; }
.site-search-result:nth-child(5) { animation-delay: 140ms; }
.site-search-result:nth-child(6) { animation-delay: 175ms; }
.site-search-result:nth-child(7) { animation-delay: 210ms; }
.site-search-result:nth-child(8) { animation-delay: 245ms; }
.site-search-result:nth-child(9) { animation-delay: 280ms; }
.site-search-result:nth-child(10) { animation-delay: 315ms; }
.site-search-result:nth-child(11) { animation-delay: 350ms; }
.site-search-result:nth-child(12) { animation-delay: 385ms; }

@keyframes zifpimSearchResultIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-search__empty {
  animation: zifpimSearchResultIn .42s cubic-bezier(.22,.8,.22,1) both;
}

@media (max-width: 980px) {
  .editorial-search-trigger {
    width: 32px;
    height: 32px;
  }

  .site-search__panel {
    transform: translateY(-22px) scale(.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-search,
  .site-search__panel,
  .site-search__panel::before,
  .site-search__panel::after,
  .site-search__topline,
  .site-search__label::before,
  .site-search__form,
  .site-search__form::after,
  .site-search__form-icon,
  .site-search__results,
  .site-search-result,
  .site-search__empty {
    animation: none !important;
    transition: none !important;
  }

  .site-search__panel,
  .site-search__topline,
  .site-search__form,
  .site-search__form-icon,
  .site-search__results {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* V119 — remove the redundant second divider below the animated search field. */
.site-search__results {
  border-top: 0;
}


/* =========================================================
   V117 — Homepage Latest News / publication-system parity
   ---------------------------------------------------------
   Bring the homepage lead story into the visual language of
   the refined News index + article experience without touching
   the 100vh morph scene or CMS loading architecture.
   ========================================================= */
body.home-page .section--news .news-backdrop {
  display: none !important;
}

body.home-page .section--news .news-editorial--publication {
  align-items: center;
}

body.home-page .section--news .news-editorial--publication .news-editorial__story {
  grid-template-columns: minmax(0, 1.72fr) minmax(270px, .88fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}

body.home-page .section--news .news-editorial__image-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

body.home-page .section--news .news-editorial--publication .news-editorial__image-inner {
  overflow: hidden;
  border-radius: 12px;
  background: #dedbd3;
  border: 0;
}

body.home-page .section--news .news-editorial--publication .news-editorial__image-inner::after,
body.home-page .section--news .news-editorial--publication .news-editorial__image-index {
  display: none !important;
}

body.home-page .section--news .news-editorial--publication .news-editorial__image-inner img {
  transform: scale(1.001);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

body.home-page .section--news .news-editorial--publication .news-editorial__image-link:hover img,
body.home-page .section--news .news-editorial--publication .news-editorial__image-link:focus-visible img {
  transform: scale(1.025);
}

body.home-page .section--news .news-editorial__publication-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .48rem 0;
  margin-top: 12px;
  color: #74736f;
  font-size: .68rem;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 800;
}

body.home-page .section--news .news-editorial__publication-meta > * {
  display: inline-flex;
  align-items: center;
  color: #74736f;
}

body.home-page .section--news .news-editorial__publication-meta > *:not(:last-child)::after {
  content: "·";
  margin: 0 .68rem;
  color: #b5b2aa;
}

body.home-page .section--news .news-editorial__publication-meta time {
  color: var(--blue);
}

body.home-page .section--news .news-editorial--publication .news-editorial__content {
  align-self: center;
  padding: 0;
  border: 0;
}

body.home-page .section--news .news-editorial--publication .news-editorial__content::before,
body.home-page .section--news .news-editorial--publication .news-editorial__meta {
  display: none !important;
}

body.home-page .section--news .news-editorial--publication .news-editorial__headline {
  margin: 0;
  max-width: 520px;
  font-size: clamp(2rem, min(3.15vw, 4.15vh), 3.2rem);
  line-height: .98;
  letter-spacing: -.052em;
  font-weight: 800;
}

body.home-page .section--news .news-editorial--publication .news-editorial__headline > a {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color .22s ease;
}

body.home-page .section--news .news-editorial--publication .news-editorial__headline > a:hover,
body.home-page .section--news .news-editorial--publication .news-editorial__headline > a:focus-visible {
  color: var(--blue);
}

body.home-page .section--news .news-editorial--publication .news-editorial__headline span {
  display: inline;
  opacity: 1;
  transform: none;
  transition: none;
}

body.home-page .section--news .news-editorial--publication .news-editorial__deck {
  max-width: 510px;
  margin: clamp(14px, 2vh, 20px) 0 0;
  color: #65645f;
  font-size: clamp(.9rem, 1vw, 1.02rem);
  line-height: 1.62;
}

body.home-page .section--news .news-editorial--publication .news-editorial-link--story {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 42px;
  margin-top: clamp(17px, 2.4vh, 25px);
  padding: .72rem .95rem .72rem 1.05rem;
  border: 1px solid #2d2c29;
  color: #2d2c29 !important;
  background: transparent !important;
  font-size: .7rem;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: none;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

body.home-page .section--news .news-editorial--publication .news-editorial-link--story::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  height: auto;
  background: var(--gold);
  transform: none;
}

body.home-page .section--news .news-editorial--publication .news-editorial-link--story::after {
  display: none;
}

body.home-page .section--news .news-editorial--publication .news-editorial-link--story:hover,
body.home-page .section--news .news-editorial--publication .news-editorial-link--story:focus-visible {
  color: #fff !important;
  background: #262525 !important;
  border-color: #262525;
}

body.home-page .section--news .news-editorial--publication .news-editorial-link--story b {
  font-size: .92rem;
  font-weight: 500;
}

/* Preserve the approved one-viewport chapter on laptop-height screens. */
@media (min-width: 861px) and (max-height: 820px) {
  body.home-page .section--news .news-editorial--publication .news-editorial__story {
    gap: clamp(28px, 4vw, 54px);
  }

  body.home-page .section--news .news-editorial--publication .news-editorial__publication-meta {
    margin-top: 9px;
    font-size: .63rem;
  }

  body.home-page .section--news .news-editorial--publication .news-editorial__headline {
    font-size: clamp(1.75rem, 3.55vh, 2.3rem);
  }

  body.home-page .section--news .news-editorial--publication .news-editorial__deck {
    margin-top: 11px;
    font-size: .88rem;
    line-height: 1.48;
  }

  body.home-page .section--news .news-editorial--publication .news-editorial-link--story {
    margin-top: 12px;
    min-height: 39px;
    padding-top: .62rem;
    padding-bottom: .62rem;
  }
}

@media (max-width: 860px) {
  body.home-page .section--news .news-editorial--publication .news-editorial__story {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.home-page .section--news .news-editorial--publication .news-editorial__content {
    padding-bottom: 8px;
  }
}

@media (max-width: 600px) {
  body.home-page .section--news .news-editorial__publication-meta {
    font-size: .62rem;
    line-height: 1.35;
  }

  body.home-page .section--news .news-editorial__publication-meta > *:not(:last-child)::after {
    margin: 0 .5rem;
  }

  body.home-page .section--news .news-editorial--publication .news-editorial__headline {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
  }

  body.home-page .section--news .news-editorial--publication .news-editorial-link--story {
    justify-content: space-between;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .section--news .news-editorial--publication .news-editorial__image-inner img,
  body.home-page .section--news .news-editorial--publication .news-editorial__headline > a,
  body.home-page .section--news .news-editorial--publication .news-editorial-link--story {
    transition: none !important;
  }
}


/* =========================================================
   V120 — Homepage News resilient image frame
   ---------------------------------------------------------
   Keep the lead story editorial and predictable regardless of
   whether the CMS receives landscape or portrait photography.
   Desktop/tablet: controlled 4:3 frame.
   Mobile: 1:1 frame for safer portrait crops.
   ========================================================= */
body.home-page .section--news .news-editorial--publication .news-editorial__image {
  min-width: 0;
}

body.home-page .section--news .news-editorial--publication .news-editorial__image-inner {
  width: min(100%, 620px);
  aspect-ratio: 4 / 3;
  height: auto !important;
  max-height: none !important;
}

body.home-page .section--news .news-editorial--publication .news-editorial__image-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Portrait source files get a slightly higher crop so faces/heads are
   protected without changing the frame geometry. */
body.home-page .section--news .news-editorial--publication .news-editorial__image-inner img.is-portrait-source {
  object-position: 50% 28%;
}

/* Keep the one-viewport homepage chapter on common laptop heights by
   constraining the 4:3 frame from height rather than distorting its ratio. */
@media (min-width: 861px) and (max-height: 820px) {
  body.home-page .section--news .news-editorial--publication .news-editorial__image-inner {
    width: min(100%, 430px);
  }

  body.home-page .section--news .news-editorial--publication .news-editorial__story {
    grid-template-columns: minmax(390px, .98fr) minmax(300px, .78fr);
    gap: clamp(36px, 5vw, 68px);
  }
}

@media (min-width: 821px) and (min-height: 821px) {
  body.home-page .section--news .news-editorial--publication .news-editorial__image-inner {
    width: min(100%, 560px);
  }
}

@media (max-width: 860px) {
  body.home-page .section--news .news-editorial--publication .news-editorial__image-inner {
    width: min(100%, 620px);
  }
}

@media (max-width: 600px) {
  body.home-page .section--news .news-editorial--publication .news-editorial__image-inner {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  body.home-page .section--news .news-editorial--publication .news-editorial__image-inner img.is-portrait-source {
    object-position: 50% 24%;
  }
}


/* =========================================================
   V121 — Homepage News proportion + metadata parity
   ---------------------------------------------------------
   Bring the feature image closer to the story copy and match
   the News index/article metadata breathing room exactly.
   ========================================================= */
@media (min-width: 861px) {
  body.home-page .section--news .news-editorial--publication .news-editorial__story {
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    gap: clamp(36px, 3.4vw, 50px);
  }

  body.home-page .section--news .news-editorial--publication .news-editorial__image-inner {
    width: 100%;
  }

  body.home-page .section--news .news-editorial__publication-meta {
    margin-top: 1.05rem;
    font-size: .68rem;
    line-height: 1;
    gap: .55rem 0;
  }

  body.home-page .section--news .news-editorial__publication-meta > *:not(:last-child)::after {
    margin: 0 .72rem;
  }
}

@media (min-width: 861px) and (max-height: 820px) {
  body.home-page .section--news .news-editorial {
    align-items: flex-start;
    padding-top: clamp(18px, 2.5vh, 22px);
  }

  body.home-page .section--news .news-editorial--publication .news-editorial__story {
    grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
    gap: clamp(30px, 2.8vw, 40px);
  }

  body.home-page .section--news .news-editorial--publication .news-editorial__image-inner {
    width: 100%;
  }

  body.home-page .section--news .news-editorial__publication-meta {
    margin-top: 1.05rem;
    font-size: .68rem;
  }
}


/* =========================================================
   V122 — Homepage News image corner + meta breathing room
   ---------------------------------------------------------
   Match the editorial frame more closely by rounding the top-left
   corner to join the existing right-side treatment, and increase
   the space between the image and the publication metadata.
   ========================================================= */
body.home-page .section--news .news-editorial--publication .news-editorial__image-inner {
  border-radius: 18px 18px 18px 0;
}

body.home-page .section--news .news-editorial--publication .news-editorial__image-inner img {
  border-radius: inherit;
}

body.home-page .section--news .news-editorial__publication-meta {
  margin-top: 1.45rem;
}

@media (min-width: 861px) and (max-height: 820px) {
  body.home-page .section--news .news-editorial__publication-meta {
    margin-top: 1.35rem;
  }
}

@media (max-width: 860px) {
  body.home-page .section--news .news-editorial__publication-meta {
    margin-top: 1.2rem;
  }
}


/* =========================================================
   V123 — Homepage News frame stability + left inset
   ---------------------------------------------------------
   Keep the editorial frame stationary like the News index page,
   let only the photograph zoom on hover, inset the image/meta
   group from the scene edge, and restore the News-page radius.
   ========================================================= */
body.home-page .section--news .news-editorial--publication .news-editorial__image {
  box-sizing: border-box;
  padding-left: 18px;
}

body.home-page .section--news .news-editorial--publication .news-editorial__image-inner {
  border-radius: 12px;
  transform: none !important;
}

body.home-page .section--news .news-editorial--publication .news-editorial__story:hover .news-editorial__image-inner,
body.home-page .section--news .news-editorial--publication .news-editorial__image:hover .news-editorial__image-inner {
  transform: none !important;
}

body.home-page .section--news .news-editorial--publication .news-editorial__image-inner img {
  border-radius: 0;
  transform: scale(1.001);
}

body.home-page .section--news .news-editorial--publication .news-editorial__image-link:hover img,
body.home-page .section--news .news-editorial--publication .news-editorial__image-link:focus-visible img {
  transform: scale(1.025);
}

body.home-page .section--news .news-editorial__publication-meta {
  margin-top: 1.75rem;
}

@media (min-width: 861px) and (max-height: 820px) {
  body.home-page .section--news .news-editorial__publication-meta {
    margin-top: 1.65rem;
  }
}

@media (max-width: 860px) {
  body.home-page .section--news .news-editorial--publication .news-editorial__image {
    padding-left: 0;
  }

  body.home-page .section--news .news-editorial__publication-meta {
    margin-top: 1.35rem;
  }
}

/* =========================================================
   CLIENT MOBILE POLISH — header identity stability
   ---------------------------------------------------------
   Mobile uses one deterministic cream header treatment across
   internal pages. This prevents desktop colour/white logo swap
   rules from fighting the compact mobile icon state.
   Desktop/tablet-wide presentation is unchanged.
   ========================================================= */
@media (max-width: 900px) {
  body.internal .editorial-header,
  body.internal.page-blue .editorial-header:not(.is-scrolled),
  body.internal.page-dark .editorial-header:not(.is-scrolled) {
    min-height: 68px !important;
    height: 68px !important;
    grid-template-columns: 38px 42px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 0 14px !important;
    color: var(--charcoal) !important;
    background: rgba(247,246,242,.98) !important;
    border-bottom-color: rgba(38,37,37,.12) !important;
  }

  body.internal .editorial-header::before,
  body.internal.page-blue .editorial-header:not(.is-scrolled)::before,
  body.internal.page-dark .editorial-header:not(.is-scrolled)::before {
    opacity: 0 !important;
  }

  body.internal .editorial-brand {
    grid-column: 1 !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 42px !important;
    overflow: visible !important;
  }

  body.internal .editorial-brand__full,
  body.internal .editorial-brand__full--colour,
  body.internal .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;
    opacity: 0 !important;
  }

  body.internal .editorial-brand__icon,
  body.internal .editorial-brand__icon--colour,
  body.internal .editorial-header.is-scrolled .editorial-brand__icon--colour,
  body.internal.page-blue .editorial-header:not(.is-scrolled) .editorial-brand__icon--colour,
  body.internal.page-dark .editorial-header:not(.is-scrolled) .editorial-brand__icon--colour {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 38px !important;
    height: 38px !important;
    transform: translateY(-50%) scale(1) !important;
  }

  body.internal .editorial-brand__icon--white,
  body.internal.page-blue .editorial-header:not(.is-scrolled) .editorial-brand__icon--white,
  body.internal.page-dark .editorial-header:not(.is-scrolled) .editorial-brand__icon--white {
    display: none !important;
    opacity: 0 !important;
  }

  body.internal .editorial-menu-button {
    grid-column: 2 !important;
    position: static !important;
    justify-self: start !important;
    align-self: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.internal .editorial-nav {
    display: none !important;
  }

  body.internal .editorial-header__actions {
    grid-column: 4 !important;
    justify-self: end !important;
    align-self: center !important;
    display: block !important;
    margin: 0 !important;
  }

  body.internal .editorial-partner,
  body.internal.page-blue .editorial-header:not(.is-scrolled) .editorial-partner,
  body.internal.page-dark .editorial-header:not(.is-scrolled) .editorial-partner {
    display: inline-flex !important;
    color: var(--blue) !important;
  }

  body.internal.page-blue .editorial-header:not(.is-scrolled) .editorial-partner span,
  body.internal.page-dark .editorial-header:not(.is-scrolled) .editorial-partner span {
    color: var(--blue) !important;
  }
}

@media (max-width: 390px) {
  body.internal .editorial-header,
  body.internal.page-blue .editorial-header:not(.is-scrolled),
  body.internal.page-dark .editorial-header:not(.is-scrolled) {
    grid-template-columns: 36px 38px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding-inline: 10px !important;
  }

  body.internal .editorial-brand,
  body.internal .editorial-brand__icon,
  body.internal .editorial-brand__icon--colour {
    width: 36px !important;
    min-width: 36px !important;
  }
}

/* =========================================================
   MOBILE MENU SEARCH PARITY — match Home exactly
   ---------------------------------------------------------
   Internal-page Search uses the same row geometry as the
   approved Home menu: full-width row, left-aligned label,
   matching divider/height, and right-side search icon.
   ========================================================= */
@media (max-width: 1100px) {
  .mega-menu__primary > .mega-menu-search-trigger {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 18px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 10vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.94) !important;
    font: inherit !important;
    text-align: left !important;
    transform: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
    transition: color .22s ease, padding .25s var(--ease) !important;
  }

  .mega-menu__primary > .mega-menu-search-trigger > span,
  .mega-menu__primary > .mega-menu-search-trigger > span:first-child {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mega-menu__primary > .mega-menu-search-trigger strong {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(2.1rem, 7vw, 4.4rem) !important;
    line-height: .88 !important;
    letter-spacing: -.065em !important;
    font-weight: 600 !important;
    text-align: left !important;
  }

  .mega-menu__primary > .mega-menu-search-trigger em {
    justify-self: end !important;
    margin: 0 !important;
    font-style: normal !important;
    font-size: 1.5rem !important;
    opacity: .45 !important;
    transition: opacity .2s ease, transform .2s ease !important;
  }

  .mega-menu__primary > .mega-menu-search-trigger::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -20px;
    right: 100%;
    top: 8px;
    bottom: 8px;
    background: rgba(226,168,20,.08);
    transition: right .3s var(--ease);
  }

  .mega-menu__primary > .mega-menu-search-trigger:hover,
  .mega-menu__primary > .mega-menu-search-trigger:focus-visible {
    color: var(--gold) !important;
    padding-left: 18px !important;
  }

  .mega-menu__primary > .mega-menu-search-trigger:hover::before,
  .mega-menu__primary > .mega-menu-search-trigger:focus-visible::before {
    right: -20px;
  }

  .mega-menu__primary > .mega-menu-search-trigger:hover em,
  .mega-menu__primary > .mega-menu-search-trigger:focus-visible em {
    opacity: 1 !important;
    transform: translate(4px,-4px) !important;
  }
}

@media (max-width: 600px) {
  .mega-menu__primary > .mega-menu-search-trigger {
    grid-template-columns: minmax(0, 1fr) 25px !important;
    min-height: 11vh !important;
  }

  .mega-menu__primary > .mega-menu-search-trigger strong {
    font-size: clamp(2rem, 9.2vw, 3.6rem) !important;
  }
}