/* Split A refinement, 12 October 2026. Keep this after the fluid layout. */
/* Lighter blue tint across desktop, stacked tablet and phone crops. */
body[data-page="investors"][data-split="a"] .pv-photo::before {
  opacity:.18;
}
@media (min-width:1280px) {
  /* Extra room on wider screens; keep the wall lettering clear at laptop widths. */
  body[data-page="investors"][data-split="a"] .pv-photo {
    left:calc(50% - 130px - clamp(20px, calc(25vw - 300px), 260px));
  }
  /* Keep the homepage's gradient directions, with lighter photo shading. */
  body[data-page="investors"][data-split="a"] .pv-photo::after {
    background:
      linear-gradient(90deg,#0A1730 0%,rgba(10,23,48,.6) 4%,rgba(10,23,48,.22) 8%,rgba(10,23,48,0) 12%),
      linear-gradient(90deg,rgba(0,22,58,.42),rgba(0,22,58,.03)),
      linear-gradient(0deg,rgba(0,16,42,.6),transparent 85%);
  }
}
@media (width < 1280px) {
  /* Preserve the opaque navy join below the image and clear words above the title. */
  body[data-page="investors"][data-split="a"] .pv-photo::after {
    background:linear-gradient(0deg,#0A1730 0%,rgba(10,23,48,.42) 30%,rgba(10,23,48,.04) 70%,rgba(10,23,48,.24) 100%)!important;
  }
}
@media (760px < width < 1280px) {
  /* Shade only the navigation area over the lighter ceiling. */
  body[data-page="investors"][data-split="a"] .pv-photo::after {
    background:
      linear-gradient(180deg,rgba(0,16,42,.28) 0,rgba(0,16,42,.16) 76px,transparent 136px),
      linear-gradient(0deg,#0A1730 0%,rgba(10,23,48,.42) 30%,rgba(10,23,48,.04) 70%,rgba(10,23,48,.24) 100%)!important;
  }
}

/* Preserve the current dark header fallback when scripts are unavailable. */
html:not(.js) body[data-page="investors"] .hdr{background:#0A1730!important}

/* October 12: match the homepage hero's type scale and lower-left text placement. */
@media screen {
  body[data-page="investors"][data-split="a"] .investor-main .hero-inv {
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  body[data-page="investors"][data-split="a"] .investor-main .inv-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: inherit !important;
    padding: 84px 0 0 !important;
  }
  body[data-page="investors"][data-split="a"] .investor-main .inv-content {
    align-self: stretch;
    flex: none;
    width: auto;
    max-width: 1120px;
    margin: 0 calc(clamp(24px, 5.4vw, 92px) + clamp(8px, .9vw, 14px));
    padding: 48px 0 calc(clamp(112px, 15vh, 156px) + clamp(8px, .9vw, 14px)) !important;
    transform: none;
  }
  body[data-page="investors"][data-split="a"] .investor-main .hero-inv .h1 {
    max-width: none;
    margin: 0;
    font-size: clamp(3.1rem, 7.2vw, 7.4rem) !important;
    line-height: .98 !important;
    letter-spacing: -.022em;
  }
  body[data-page="investors"][data-split="a"] .hero-title .ln {
    padding-bottom: .14em;
    margin-bottom: -.14em;
  }
  body[data-page="investors"][data-split="a"] .investor-main .hero-sub {
    max-width: 31em !important;
    margin-top: 28px;
  }
  body[data-page="investors"][data-split="a"] .investor-main .inv-actions {
    margin-top: 38px;
  }
}
@media screen and (min-width: 1280px) {
  /* Retain chapter navigation in the space beneath the main hero content. */
  body[data-page="investors"][data-split="a"] .investor-main .pv-foot {
    position: absolute;
    inset: auto auto 28px 50%;
    transform: translateX(-50%);
    width: min(1120px, calc(100% - 2 * (clamp(24px, 5.4vw, 92px) + clamp(8px, .9vw, 14px))));
    margin: 0 !important;
  }
}
@media screen and (max-width: 1000px) {
  body[data-page="investors"][data-split="a"] .investor-main .inv-card {
    padding-top: 76px !important;
  }
}
@media screen and (max-width: 640px) {
  body[data-page="investors"][data-split="a"] .investor-main .inv-content {
    padding-bottom: calc(104px + clamp(8px, .9vw, 14px)) !important;
  }
}

/* October 12: align the investor title with the homepage, including its eyebrow.
   A layout-only template mirrors the homepage's text and button wrapping. */
@media screen {
  body[data-page="investors"][data-split="a"] .investor-main .inv-content {
    min-height: var(--home-hero-content-height, 0px);
  }
  body[data-page="investors"][data-split="a"] #intro .eyebrow {
    margin: 0 0 28px;
    font: 700 11.5px/1.3 var(--sans);
    letter-spacing: .2em;
    color: #fff;
  }
  body[data-page="investors"][data-split="a"] #intro .eyebrow::before { content: none; }
  body[data-page="investors"][data-split="a"] #intro .hero-layout-reference {
    position: absolute;
    inset: 0 auto auto 0;
    min-height: 0;
    height: auto;
    margin: 0;
    visibility: hidden;
    pointer-events: none;
  }
  #intro .hero-layout-reference *,
  #intro .hero-layout-reference *::before,
  #intro .hero-layout-reference *::after { transition: none !important; animation: none !important; }
  #intro .hero-layout-reference .inv-actions { display:flex; flex-wrap:wrap; gap:12px; }
  #intro .hero-layout-reference .inv-actions .btn { min-width:225px; }
}
@media screen and (max-width:860px) {
  #intro .hero-layout-reference .inv-actions .btn { min-width:210px; }
}
@media screen and (max-width:600px) {
  #intro .hero-layout-reference .inv-actions .btn { width:min(100%,285px); min-width:0; }
}

/* Phone eyebrow contrast without changing the approved image or text geometry. */
@media screen and (max-width:760px) {
  body[data-page="investors"][data-split="a"] #intro .eyebrow {
    text-shadow: 0 1px 3px rgba(4,13,29,.95), 0 0 12px rgba(4,13,29,.8);
  }
}

/* Center the chapter links within their centered desktop rule. */
@media screen and (min-width:1280px) {
  body[data-page="investors"][data-split="a"] .investor-main .pv-foot .chapters {
    justify-content:center !important;
  }
}

/* October 18: keep the phone opening stable as browser controls expand/collapse.
   The photo already uses svh. Use that same stable viewport for the hero and
   reserve room for the wall lettering before the copy. Let short screens scroll
   naturally; desktop/tablet baseline alignment above remains unchanged. */
@media screen and (max-width: 760px) {
  body[data-page="investors"][data-split="a"] .investor-main .hero-inv {
    min-height: 100svh !important;
  }
  body[data-page="investors"][data-split="a"] .investor-main .inv-card {
    justify-content: flex-start;
    padding-top: max(320px, 46svh) !important;
  }
  body[data-page="investors"][data-split="a"] .investor-main .inv-content {
    min-height: 0;
    padding-top: 0 !important;
  }
}