/* Component styles are currently included in styles.css. */

.about-framework-link .framework-link-arrow {
  display: block;
  flex: 0 0 14px;
  align-self: center;
  width: 14px;
  height: 14px;
}

/* Reveal the first section below the banner without requiring a scroll. */
html body #root .post-banner-ready .load-reveal {
  opacity: 1;
  transform: none;
  animation: post-banner-fade .7s ease-out both;
}
@keyframes post-banner-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html body #root .post-banner-ready .load-reveal { animation: none; }
}

/* Compensate only header content; the hero and header backgrounds stay full width. */
@media (min-width: 1025px) {
  html body.home-single-screen #root .home > .header {
    box-sizing: border-box;
    padding-right: var(--home-header-scrollbar-space, 0px) !important;
  }
}


/* Use classic media queries for older iPad Safari as well as current tablets. */
@media (max-width: 1180px) {
  html body div#root main.about-page > section.philosophy-section > .container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    align-items: stretch !important;
  }
  html body #root .philosophy-section .philosophy-heading {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    margin-bottom: 40px;
  }
  html body #root .philosophy-section .philosophy-heading > * {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  html body #root .philosophy-section .philosophy-heading h2 {
    font-size: 36px !important;
    word-break: normal;
    overflow-wrap: normal;
  }
  html body #root .philosophy-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  html body #root .philosophy-grid .philosophy-card {
    height: auto !important;
    max-height: none !important;
    padding: 28px;
  }
  html body #root .philosophy-grid .philosophy-card h3 {
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 640px) {
  html body div#root main.about-page > section.philosophy-section > .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  html body #root .philosophy-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body #root .philosophy-section .philosophy-heading h2 {
    font-size: 32px !important;
  }
}





html body #root .home .hero .hero-banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html body #root .home .hero-copy p {
  font-weight: 300 !important;
  color: #fff !important;
  opacity: 1 !important;
}

.framework-ecosystem-visual > div > span,
.framework-ecosystem-visual > div > span::before {
  color: #ffffffc7;
}

html body #root .framework-mandate .philosophy-card {
  height: auto !important;
  min-height: 280px !important;
  max-height: none !important;
}

html body #root .framework-mandate .philosophy-card > * {
  flex-shrink: 0;
}

html body #root .framework-mandate .philosophy-card h3 {
  overflow-wrap: anywhere;
}

.framework-ecosystem ol > li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
}

.framework-ecosystem ol > li::before {
  display: block;
  width: auto;
}

/* Keep wrapped content inside its cards and sections at every viewport size. */
html body div#root main.about-page > section.about-story:not(.about-story-followup),
html body div#root main.about-page > section.philosophy-section {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-block: 96px !important;
  overflow: visible !important;
}

html body div#root main.about-page > section.about-story:not(.about-story-followup) > .about-story-grid,
html body div#root main.about-page > section.philosophy-section > .container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
  justify-content: flex-start !important;
  flex: none !important;
}

html body div#root main.about-page .philosophy-section .philosophy-card {
  height: auto !important;
  min-height: 280px !important;
  max-height: none !important;
}

html body div#root main.about-page .philosophy-section .philosophy-card > * {
  flex-shrink: 0;
}

html body div#root main.about-page .philosophy-section .philosophy-card h3 {
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  html body div#root main.about-page > section.about-story:not(.about-story-followup),
  html body div#root main.about-page > section.philosophy-section {
    padding-block: 80px !important;
  }
}

.framework-ecosystem-visual .ecosystem-card-description {
  margin: 0;
  color: #ffffffc7;
  font: 300 15px/1.7 Poppins, sans-serif;
  letter-spacing: 0;
}

.about-story.about-story-followup {
  background-image: url(../images/common/community-platform.webp?v=cac4f2d18ede) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

html body div#root main.about-page > section.about-story.about-story-followup {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-block: 120px !important;
  overflow: visible !important;
}

html body div#root main.about-page > section.about-story.about-story-followup > .about-story-grid {
  height: auto !important;
  min-height: 0 !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
  flex: none !important;
  width: min(80%, 1540px) !important;
  max-width: 1540px !important;
  padding-inline: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 48px clamp(48px, 8vw, 128px) !important;
}

@media (max-width: 1024px) {
  html body div#root main.about-page > section.about-story.about-story-followup > .about-story-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    padding-inline: 50px !important;
  }
  html body div#root main.about-page > section.about-story.about-story-followup {
    padding-block: 80px !important;
  }
}

@media (max-width: 767px) {
  html body div#root main.about-page > section.about-story.about-story-followup > .about-story-grid {
    padding-inline: 24px !important;
  }
}

/* Local navigation fonts prevent a late remote-font swap on each page. */
@font-face {
  font-family: "Censuria Navigation";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../fonts/poppins-400.ttf) format("truetype");
}

@font-face {
  font-family: "Censuria Navigation";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(../fonts/poppins-500.ttf) format("truetype");
}

html body #root .header nav .drawer-links > a {
  font-family: "Censuria Navigation", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: .08em !important;
}

.about-story-copy.reveal .about-framework-link {
  opacity: 0;
  transform: translateY(18px);
}

.about-story-copy.reveal.shown .about-framework-link {
  animation: framework-link-enter .6s ease-out .8s both;
}

@keyframes framework-link-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .about-story-copy.reveal .about-framework-link {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.community-platform-list {
  counter-reset: community;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  color: #ffffffd1;
  font: 200 15px/1.7 Poppins, sans-serif;
}

.community-platform-list li {
  counter-increment: community;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 18px 0;
  border-bottom: 1px solid #ffffff26;
}

.community-platform-list li::before {
  content: counter(community, decimal-leading-zero);
  opacity: .65;
  font-size: 13px;
}

.about-story-followup .about-story-copy.reveal .community-platform-list li {
  opacity: 0;
  transform: translateY(24px);
}

.about-story-followup .about-story-copy.reveal .community-platform-list.community-entered li {
  animation: community-row-enter .65s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: .15s;
}

.about-story-followup .about-story-copy.reveal .community-platform-list.community-entered li:nth-child(2) {
  animation-delay: .4s;
}

.about-story-followup .about-story-copy.reveal .community-platform-list.community-entered li:nth-child(3) {
  animation-delay: .65s;
}

@keyframes community-row-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .about-story-followup .about-story-copy.reveal .community-platform-list li {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.capital-foundation-section {
  background-image: url(../images/common/capital-foundation-bg.webp);
}

html body #root .capital-foundation-section > .container {
  width: min(80%, 1540px) !important;
  max-width: 1540px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  html body #root .capital-foundation-section > .container {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 50px !important;
  }
}

@media (max-width: 767px) {
  html body #root .capital-foundation-section > .container {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 24px !important;
  }
}

/* Match Framework section spacing instead of Family Office's full-screen minimum. */
html body #root .about-page > .capital-foundation-section {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-block: 96px !important;
}

@media (min-width: 1025px) and (max-width: 1599px) and (orientation: landscape) {
  html body #root .about-page > .capital-foundation-section {
    padding-block: 120px !important;
  }
}

@media (max-width: 1024px) {
  html body #root .about-page > .capital-foundation-section {
    padding-block: 80px !important;
  }
}

.capital-foundation-visual::before {
  background-image: url(../images/common/capital-foundation.webp);
}

.capital-foundation-copy > p {
  color: #173a69b8;
  font: 300 15px/1.7 Poppins, sans-serif;
  letter-spacing: 0;
}

@media (max-width: 1024px) {
  .capital-foundation {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .capital-foundation-visual {
    order: -1;
  }
}

/* Position the tower label and line away from the building on both homepages. */
.home .building-callout {
  top: calc(26% - 86px);
  left: calc(100% + 34px);
}

body.home-single-screen .home .building-callout {
  top: calc(26% - 70px);
}

/* The static hero source has a white first pixel row. Crop it inside the hero. */
.home .hero-static-image,
.home .hero-mobile-static-image {
  top: calc(-1 * max(2px, .1vw));
  height: calc(100% + max(4px, .2vw));
}

/* Tablet content must not inherit desktop minimum-width columns. */
@media (max-width: 1180px) {
  html body div#root main.about-page > section.about-story > .about-story-grid {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    gap: 40px !important;
  }
  html body div#root .about-story .about-story-copy,
  html body div#root .about-story .about-story-copy p {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  html body div#root .about-story .about-story-copy h2 {
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: 36px !important;
  }
  html body div#root .about-story .vision-card {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body div#root main > section.framework-mandate > .container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  html body div#root .philosophy-grid {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
  html body div#root .philosophy-grid .philosophy-card h3 {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}
@media (max-width: 640px) {
  html body div#root main.about-page > section.about-story > .about-story-grid,
  html body div#root main > section.framework-mandate > .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  html body div#root .philosophy-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body div#root .about-story .about-story-copy h2 {
    font-size: 32px !important;
  }
}
/* Keep the compact header usable on small tablets and older iPad Safari. */
@media (max-width: 1024px) {
  html body #root .header .header-in {
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  html body #root .header .brand { flex: 0 0 auto; }
  html body #root .header .brand .logo {
    width: 180px !important;
    height: auto !important;
  }
  html body #root .header .menu {
    display: grid !important;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-left: auto;
  }

  html.nav-open body #root .header.menu-open,
  html.nav-open body #root .header.menu-open nav.open {
    height: 100vh !important;
    min-height: 100vh !important;
  }
}
@media (max-width: 640px) {
  html body #root .header .header-in {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  html body #root .header .brand .logo { width: 144px !important; }
}
/* Expanded navigation background. */
html.nav-open body #root .header.menu-open nav.open {
  background: #eeeeee !important;
}
/* Full partner names keep equal-height cards and aligned profile links. */
html body #root .partners-people-grid { align-items: stretch; }
html body #root .partners-people-grid .partner-profile-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
html body #root .partners-people-grid .partner-profile-body { flex: 1; min-width: 0; }
html body #root .partners-people-grid .partner-profile-body h4 {
  min-height: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
html body #root .partners-people-grid .partner-profile-body > a { margin-top: auto; }
@media (min-width: 641px) and (max-width: 1180px) {
  html body #root .partners-people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px;
  }
  html body #root .partners-people-grid .partner-profile-body h4 { font-size: 18px !important; }
}
@media (max-width: 640px) {
  html body #root .partners-people-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Keep the drawer mounted so its slide transition can run in both directions. */
@media (max-width: 1024px) {
  html body #root .header nav {
    display: flex !important;
    background: #eeeeee !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1), visibility 0s .45s !important;
  }
  html body #root .header nav.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }
  html body #root .header .header-in,
  html.nav-open body #root .header.menu-open .header-in {
    height: 76px !important;
    min-height: 76px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  html body #root .header .brand .logo,
  html.nav-open body #root .header.menu-open .brand .logo {
    width: 180px !important;
    height: auto !important;
  }
}
@media (max-width: 640px) {
  html body #root .header .header-in,
  html.nav-open body #root .header.menu-open .header-in {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  html body #root .header .brand .logo,
  html.nav-open body #root .header.menu-open .brand .logo {
    width: 144px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #root .header nav { transition: none !important; }
}
/* The mobile drawer owns its top bar, which travels with the panel. */
.drawer-close { display: none; }
@media (max-width: 1024px) {
  html body #root .header nav,
  html.nav-open body #root .header.menu-open nav {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    z-index: 3004 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }
  html.nav-open body #root .header.menu-open .header-in > .brand,
  html.nav-open body #root .header.menu-open .header-in > .menu {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html body #root .header nav .drawer-logo,
  html.nav-open body #root .header.menu-open nav .drawer-logo {
    display: flex !important;
    align-items: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 32px !important;
    width: 180px !important;
    height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  html body #root .header nav .drawer-logo img {
    display: block;
    width: 100%;
    height: auto;
  }
  html body #root .header nav .drawer-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 16px;
    right: 32px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #173a69;
    cursor: pointer;
  }
  .drawer-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
}
@media (max-width: 640px) {
  html body #root .header nav .drawer-logo,
  html.nav-open body #root .header.menu-open nav .drawer-logo { left: 24px !important; width: 144px !important; }
  html body #root .header nav .drawer-close { right: 24px; }
}

/* Independent viewport overlay: never changes the underlying header. */
.censuria-mobile-drawer { display: none; }
@media (max-width: 1024px) {
  .censuria-mobile-drawer {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 20000;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    background: #eeeeee;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .45s cubic-bezier(.4,0,.2,1), visibility 0s .45s;
  }
  .censuria-mobile-drawer.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .censuria-drawer-brand {
    position: absolute;
    left: var(--drawer-logo-left,32px);
    top: var(--drawer-logo-top,16px);
    width: var(--drawer-logo-width,180px);
    height: var(--drawer-logo-height,43px);
    padding: 0;
    margin: 0;
  }
  .censuria-drawer-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .censuria-drawer-close {
    position: absolute;
    top: var(--drawer-close-top,16px);
    right: var(--drawer-close-right,32px);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #173a69;
    cursor: pointer;
  }
  .censuria-drawer-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .censuria-drawer-links { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  .censuria-drawer-links > a { padding: .45rem .5rem; color: #173a69; font: 400 13px/1.4 Poppins,sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: center; text-decoration: none; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .censuria-mobile-drawer { transition: none; }
}

/* Restore the original About Censuria tablet composition. */
@media (min-width: 768px) and (max-width: 1180px) {
  html body div#root main.about-page > section.about-story:not(.about-story-followup) > .about-story-grid {
    padding-left: 50px !important;
    padding-right: 50px !important;
    gap: 72px !important;
  }
  html body div#root main.about-page > section.about-story:not(.about-story-followup) .vision-card {
    width: 480px !important;
    max-width: 100% !important;
    justify-self: end !important;
  }
}

/* Darken the lower Secretariat photo behind the title and breadcrumb. */
html body #root .banner-stack > .secretariat-banner {
  background-image: linear-gradient(to top, rgba(7, 20, 37, .76) 0%, rgba(7, 20, 37, .48) 24%, rgba(7, 20, 37, .12) 52%, transparent 64%), url(../images/common/secretariat-banner.webp) !important;
}

/* Phone landscape notice; keep the mounted page and its scroll position. */
.phone-orientation-notice { display: none; }
@media screen and (max-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  html, body { overflow: hidden !important; }
  body > #root,
  body > .censuria-mobile-drawer { visibility: hidden !important; pointer-events: none !important; }
  .phone-orientation-notice {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 20px;
    background: #eeeeee;
    color: #173a69;
    text-align: center;
  }
  .phone-orientation-notice img {
    display: block;
    width: auto;
    height: min(31.5vh, 129.6px);
    max-width: 45vw;
    object-fit: contain;
  }
  .phone-orientation-notice p {
    margin: 0;
    font: 400 16px/1.5 Poppins, Arial, sans-serif;
  }
}

/* Clickable navigation for the investment criteria carousel. */
.framework-values-controls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
.framework-values-controls[hidden] { display: none; }
.framework-values-controls button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #173a69;
  border-radius: 50%;
  background: #173a69;
  color: #fff;
  cursor: pointer;
  transition: opacity .2s, background-color .2s;
}
.framework-values-controls button:hover:not(:disabled) { background: #285182; }
.framework-values-controls button:focus-visible { outline: 2px solid #ed8623; outline-offset: 4px; }
.framework-values-controls button:disabled { opacity: .3; cursor: default; }
.framework-values-controls svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Desktop links do not become a second drawer when the viewport changes. */
@media (max-width: 1024px) {
  html body #root .header .header-in > nav {
    display: none !important;
    transition: none !important;
  }
}
/* Keep the closed overlay off-screen even before its mobile styles apply. */
.censuria-mobile-drawer:not(.is-open) { transform: translateX(100%); }
html.is-resizing .censuria-mobile-drawer { transition: none !important; }

/* Improve homepage video text contrast on phones and tablets only. */
@media (max-width: 1024px) {
  html body.home-single-screen #root .home .hero::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 1 !important;
    background: linear-gradient(to top, rgba(7, 20, 37, .28) 0%, rgba(7, 20, 37, .24) 38%, rgba(7, 20, 37, .08) 68%, rgba(7, 20, 37, 0) 85%) !important;
  }
  html body.home-single-screen #root .home .hero .hero-copy {
    position: relative;
    z-index: 2;
  }
}

/* Extend the tower hit area without moving its label or guide line. */
@media (hover: hover) and (pointer: fine) {
  .home .building-hotspot::before {
    content: "";
    position: absolute;
    top: -70%;
    right: -100%;
    bottom: -55%;
    left: -60%;
    background: transparent;
    clip-path: polygon(53% 10%, 66% 15%, 70% 38%, 73% 80%, 18% 85%, 22% 24%, 27% 12%);
  }
}

/* Center the carousel arrows on the same row as its heading. */
.framework-values-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.framework-values-heading .framework-values-controls {
  flex: 0 0 auto;
  margin: 0;
}

/* Match the heading-to-content gap to the avoid list (28px + 18px). */
.framework-values-heading {
  margin-bottom: 10.6px;
}

/* Allow the chess background to extend above the section boundary. */
.framework-avoid {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: none;
}
.framework-avoid::before {
  content: "";
  position: absolute;
  inset: calc(-1 * clamp(80px, 8vw, 160px)) 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #fffffffa, #fff3), url(../images/common/what-we-avoid.webp) center top / cover no-repeat;
}
.framework-values-section { position: relative; z-index: 1; }

/* The single-screen homepage must not use the scrolling hero animation. */
html body.home-single-screen #root .home > .hero-scroll > .hero > .hero-copy {
  transform: none !important;
  opacity: 1 !important;
  will-change: auto;
}
@media (hover: none) and (pointer: coarse) {
  body.home-single-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  html body.home-single-screen #root .home .hero-scroll,
  html body.home-single-screen #root .home .hero-scroll > .hero {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
  }
}

/* Start section two's entrance on its first viewport entry, not off-screen. */
html body #root .post-banner-ready:not(.section-entered) .load-reveal {
  opacity: 0 !important;
  animation: none !important;
}
html body #root .post-banner-ready.section-entered .load-reveal {
  animation: post-banner-fade .7s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  html body #root .post-banner-ready .load-reveal {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* Keep the completed entrance stable through clicks, taps and breakpoint changes. */
html body #root .post-banner-ready.section-entrance-complete .load-reveal {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html body #root .post-banner-ready,
html body #root .post-banner-ready * {
  -webkit-tap-highlight-color: transparent;
}

/* A completed Community Platform row never replays on scroll or resize. */
.about-story-followup .about-story-copy.reveal .community-platform-list li.community-row-complete {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Retain profile entrance effects, then stabilize every animated child. */
html body #root .partner-detail-section.profile-entrance-complete .partner-detail-back,
html body #root .partner-detail-section.profile-entrance-complete .partner-detail-content h2,
html body #root .partner-detail-section.profile-entrance-complete .partner-detail-content > p,
html body #root .partner-detail-section.profile-entrance-complete .partner-detail-image img {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
html body #root .partner-detail-section,
html body #root .partner-detail-section * {
  -webkit-tap-highlight-color: transparent;
}

/* Profile entrance is handled once by its own observer, not shared reveal CSS. */
html body #root .partner-detail-layout {
  opacity: 1;
  transform: none;
  animation: none;
  transition: none;
}
html body #root .partner-detail-layout.profile-entry-pending { opacity: 0; }
html body #root .partner-detail-layout .partner-detail-image img {
  transform: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  html body #root .partner-detail-layout.profile-entry-pending { opacity: 1; }
}

/* Improve partner introduction contrast on mobile and tablet. */
@media (max-width: 1024px) {
  html body #root .partners-intro-section {
    background-image: linear-gradient(to top, rgba(7, 20, 37, .38) 0%, rgba(7, 20, 37, .32) 45%, rgba(7, 20, 37, .16) 75%, rgba(7, 20, 37, 0) 100%), url(../images/common/our-partners.webp);
  }
}

/* Gray canvas revealed by touch overscroll beyond the footer. */
html,
body {
  background-color: #eeeeee;
}
/* Preserve the existing white page canvas inside the site. */
body > #root {
  background-color: #ffffff;
}

/* Keep the address on the same three lines at every screen size. */
.contact-address-mobile-break { display: inline; }
.contact-address-desktop-space { display: none; }

/* Softer blue tint over the footer photograph on all screen sizes. */
.site-footer .footer-brand-banner {
  background: rgba(20, 59, 103, .20);
}

/* Keep the main navigation in one viewport layer throughout scrolling. */
html body #root .header.persistent-header {
  position: fixed !important;
  inset: 0 0 auto !important;
  width: 100% !important;
  z-index: 2000 !important;
  animation: none !important;
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease !important;
  transform: none !important;
}
html body #root .header.persistent-header.scroll-fixed {
  background: #173a69db !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
  backdrop-filter: blur(10px) saturate(115%) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #root .header.persistent-header { transition: none !important; }
}

/* Keep the same fixed layer and interpolate back to the top appearance. */
html body #root .header.persistent-header:not(.scroll-fixed) {
  box-shadow: 0 8px 24px rgba(7, 28, 53, 0) !important;
}
html body #root .home > .header.persistent-header:not(.scroll-fixed) {
  position: fixed !important;
  background-color: rgba(23, 58, 105, 0) !important;
  -webkit-backdrop-filter: blur(0px) saturate(100%) !important;
  backdrop-filter: blur(0px) saturate(100%) !important;
}

/* Fade progressively over the first 120px, in either scroll direction. */
html body #root .header.persistent-header.persistent-header.persistent-header {
  background: var(--scroll-header-bg, #173a6980) !important;
  box-shadow: var(--scroll-header-shadow, 0 8px 24px transparent) !important;
  -webkit-backdrop-filter: var(--scroll-header-blur, blur(10px) saturate(115%)) !important;
  backdrop-filter: var(--scroll-header-blur, blur(10px) saturate(115%)) !important;
}

/* Localized desktop contrast behind the homepage copy. */
@media (min-width: 1025px) {
  html body.home-single-screen #root .home .hero::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 1 !important;
    background: radial-gradient(ellipse 68% 110% at 0% 100%, rgba(20, 59, 103, .38) 0%, rgba(20, 59, 103, .26) 40%, rgba(20, 59, 103, .12) 65%, rgba(20, 59, 103, 0) 100%) !important;
  }
  html body.home-single-screen #root .home .hero .hero-copy {
    position: relative;
    z-index: 2;
  }
}

/* The main homepage navigation stays transparent in every scroll state. */
html body.home-single-screen #root .home > .header.persistent-header.persistent-header.persistent-header {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
}

/* Give laptop and landscape-tablet section entrances a gentle upward motion. */
@media (min-width: 1025px), (min-width: 768px) and (orientation: landscape) {
  @keyframes post-banner-fade {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Match profile biographies to the Capital Foundation description. */
html body #root .partner-detail-content p {
  color: #173a69b8;
  font-weight: 300 !important;
}