/* ══════════════════════════════════════════════════════════════════════════
   fix-0917b-investors.css — client feedback batch 3 (2026-09-17 evening),
   investors.html only. Brief: .claude/CLIENT-FEEDBACK-0917b.md items I1–I15 + G1/G2/G4.
   Loaded after css/style.css and css/cq-orb.css. Every selector is scoped to a
   section id of this page; colours come only from the accent tokens.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════ G1 · golden tone on this page's photography ══════════ */
#top .hero__bg img{ filter: var(--gold-photo); }
#familiar .sqz__panel .sqz__img{ filter: var(--gold-photo-mono) brightness(.6); }
#familiar .sqz__panel.is-open .sqz__img{ filter: var(--gold-photo) brightness(.92); }
#who-we-serve .fx-investors-slide__media img{ filter: var(--gold-photo) contrast(1.03) brightness(.9); }
#who-we-serve .fx-investors-thumb img{ filter: var(--gold-photo-mono) brightness(.5); }
#who-we-serve .fx-investors-thumb:hover img{ filter: var(--gold-photo-mono) brightness(.75); }
#who-we-serve .fx-investors-thumb.is-on img{ filter: var(--gold-photo); }


/* ══════════ I2 · I3 · I4 · #familiar ══════════ */
#familiar.inv-fam.fx-investors-fam.ifam{ padding-bottom: clamp(40px, 5vw, 70px); }
#familiar.ifam .ifam__head{ margin-bottom: clamp(30px, 3.6vw, 52px); max-width: 1200px; }
#familiar.ifam .ifam__h{
  background: none; -webkit-text-fill-color: currentColor; color: #FFFFFF;
  font-size: clamp(2.3rem, 5.6vw, 5.2rem); line-height: 1.02; letter-spacing: -.034em;
  padding-bottom: 0; margin-bottom: 0;
}
#familiar.ifam .ifam__sub{
  margin: clamp(14px, 1.6vw, 22px) 0 0; max-width: 44ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.8rem); line-height: 1.24; letter-spacing: -.018em;
  color: var(--accent);
}
#familiar.ifam .ifam__w{ color: #FFFFFF; }

/* the carousel: previous LEFT, next RIGHT, outside the panels */
#familiar .ifam__stage{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(12px, 1.6vw, 22px);
}
#familiar .ifam__arrow{ width: 52px; height: 52px; color: var(--accent-on); }
#familiar .ifam__arrow svg{ width: 18px; height: 18px; }
#familiar .ifam__arrow:disabled{
  background: rgba(244,248,251,.07); background-image: none;
  color: rgba(244,248,251,.34); opacity: 1; cursor: default;
}
@media (max-width: 880px){
  #familiar .ifam__stage{ grid-template-columns: minmax(0, 1fr); position: relative; }
  #familiar .ifam__arrow{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; }
  #familiar .ifam__arrow--prev{ left: 8px; }
  #familiar .ifam__arrow--next{ right: 8px; }
  #familiar .ifam__arrow:disabled{ background: rgba(10,10,11,.55); }
}

/* the descent: one gold rail, a node per beat */
#familiar .ifam__flow{
  --padl: clamp(30px, 5vw, 86px);
  position: relative; display: grid; gap: clamp(64px, 8vw, 124px);
  margin-top: clamp(76px, 9vw, 140px); padding-left: var(--padl);
}
#familiar .ifam__rail{
  position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px;
  background: rgba(244,248,251,.12);
}
#familiar .ifam__rail i{
  position: absolute; inset: 0; display: block;
  background: linear-gradient(180deg, var(--accent-hov), var(--accent));
  transform-origin: top center; transform: scaleY(var(--p, 0));
  box-shadow: 0 0 14px var(--accent-glow);
}
#familiar .ifam__beat{ position: relative; }
#familiar .ifam__node{
  position: absolute; top: .55em; left: calc(0px - var(--padl));
  width: 11px; height: 11px; background: var(--bg);
  border: 1px solid rgba(244,248,251,.34);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
#familiar .ifam__beat--cost .ifam__node{ top: 36px; }
#familiar .ifam__beat.is-on .ifam__node{
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 18px var(--accent-glow);
}
#familiar .ifam__big{
  margin: 0; max-width: 30ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.55rem, 3.3vw, 3rem); line-height: 1.12; letter-spacing: -.028em;
  color: #FFFFFF;
}
#familiar .ifam__big--gold{ color: var(--accent); margin-top: clamp(14px, 1.6vw, 22px); }
#familiar .ifam__pair{
  display: grid; grid-template-columns: 1fr 1fr;
  border-block: 1px solid var(--line);
}
#familiar .ifam__pl{
  margin: 0; padding: clamp(24px, 3vw, 40px) clamp(0px, 2.6vw, 40px) clamp(24px, 3vw, 40px) 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 1.18; letter-spacing: -.022em;
  color: var(--txt-hi);
}
#familiar .ifam__pl + .ifam__pl{ border-left: 1px solid var(--line); padding-left: clamp(20px, 2.6vw, 40px); padding-right: 0; }
#familiar .ifam__rows{ margin: 0; }
#familiar .ifam__turn{
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.1rem, 5.4vw, 4.9rem); line-height: 1.04; letter-spacing: -.036em;
  color: #FFFFFF;
}
#familiar .ifam__turn--gold{ color: var(--accent); }
@media (max-width: 700px){
  #familiar .ifam__pair{ grid-template-columns: 1fr; }
  #familiar .ifam__pl{ padding: 20px 0; }
  #familiar .ifam__pl + .ifam__pl{ border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}


/* ══════════ I9 · I10 · G4 · #capitalq — the techy hub ══════════ */
#capitalq.sec.inv-cq.iq{
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(84px, 10vw, 160px);
  background: var(--bg);
}
#capitalq .iq__in{ position: relative; }

#capitalq .iq__head{ text-align: center; max-width: 1100px; margin: 0 auto; }
#capitalq .iq__h{ font-size: clamp(2.4rem, 6.4vw, 6rem); line-height: 1.02; letter-spacing: -.036em; }
#capitalq .iq__sub{ margin-top: clamp(12px, 1.4vw, 20px); color: var(--accent); }

/* console */
#capitalq .iq__console{
  position: relative; max-width: 1180px; margin: clamp(40px, 5vw, 70px) auto 0;
  padding: clamp(26px, 3.4vw, 50px);
  background: rgba(10,11,14,.66);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#capitalq .iq__corner{ position: absolute; width: 16px; height: 16px; border: 0 solid var(--accent); }
#capitalq .iq__corner:nth-of-type(1){ left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
#capitalq .iq__corner:nth-of-type(2){ right: -1px; top: -1px; border-right-width: 2px; border-top-width: 2px; }
#capitalq .iq__corner:nth-of-type(3){ left: -1px; bottom: -1px; border-left-width: 2px; border-bottom-width: 2px; }
#capitalq .iq__corner:nth-of-type(4){ right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
#capitalq .iq__bar{
  display: flex; align-items: center; gap: 7px;
  padding-bottom: clamp(14px, 1.6vw, 20px); margin-bottom: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid rgba(244,248,251,.1);
}
#capitalq .iq__bar i{ width: 7px; height: 7px; background: rgba(244,248,251,.2); }
#capitalq .iq__bar i:first-child{ background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
#capitalq .iq__caret{
  margin-left: auto; width: 9px; height: 16px; background: var(--accent);
  animation: iqBlink 1.1s steps(1) infinite;
}
@keyframes iqBlink{ 50%{ opacity: 0; } }
#capitalq .iq__cols{ display: grid; gap: clamp(16px, 2vw, 24px) clamp(30px, 4vw, 64px); }
@media (min-width: 1024px){ #capitalq .iq__cols{ grid-template-columns: 1fr 1fr; } }
#capitalq .iq__p{ margin: 0; font-size: 1rem; line-height: 1.75; color: var(--txt); }
#capitalq .iq__p + .iq__p{ margin-top: clamp(13px, 1.5vw, 19px); }
#capitalq .iq__p--lead{
  font-family: var(--font-display); font-weight: 600; color: #FFFFFF;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.4; letter-spacing: -.012em;
}

#capitalq .iq__lead{
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: clamp(64px, 8vw, 110px) 0 clamp(30px, 4vw, 56px);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem); letter-spacing: -.012em; color: #FFFFFF;
}
#capitalq .iq__lead::before, #capitalq .iq__lead::after{
  content: ""; width: clamp(28px, 6vw, 90px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
#capitalq .iq__lead::after{ background: linear-gradient(90deg, var(--accent), transparent); }

/* hub */
#capitalq .iq__hub{ position: relative; display: grid; gap: clamp(26px, 5vw, 40px); }
#capitalq .iq__wires{ display: none; }
#capitalq .iq__side{ display: grid; gap: 14px; position: relative; z-index: 1; }
#capitalq .iq__core{ position: relative; order: -1; width: min(78vw, 400px); margin: 0 auto; aspect-ratio: 1 / 1; }
#capitalq .iq__rings{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#capitalq .iq__ring{ fill: none; stroke: var(--accent); vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 200px 200px; transition: stroke-opacity .4s ease; }
#capitalq .iq__ring--a{ stroke-opacity: .5; stroke-dasharray: 1.5 7; animation: iqSpin 60s linear infinite; }
#capitalq .iq__ring--b{ stroke-opacity: .14; }
#capitalq .iq__ring--c{ stroke-opacity: .42; stroke-dasharray: 60 22 8 22; animation: iqSpin 36s linear infinite reverse; }
#capitalq .iq__core.is-hot .iq__ring--b{ stroke-opacity: .5; }
@keyframes iqSpin{ to{ transform: rotate(360deg); } }
#capitalq .iq__orb{ position: absolute; inset: 14%; }

#capitalq .iq__mod{
  position: relative; margin: 0;
  padding: clamp(18px, 1.8vw, 24px) clamp(18px, 2vw, 26px);
  background: rgba(244,248,251,.035);
  border: 1px solid rgba(244,248,251,.12);
  border-left: 2px solid var(--accent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: border-color .35s ease, background .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
#capitalq .iq__mod::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
  transform: translateX(-100%);
}
#capitalq .iq__mod:hover::before{ transform: translateX(100%); transition: transform .9s cubic-bezier(.65,0,.35,1); }
#capitalq .iq__mod:hover, #capitalq .iq__mod.is-hot{
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
#capitalq .iq__code{
  display: block; margin-bottom: 10px;
  font-family: var(--font-mono); font-weight: 500; font-size: .7rem; letter-spacing: .22em; color: var(--accent);
}
#capitalq .iq__t{
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.2vw, 1.16rem); line-height: 1.28; letter-spacing: -.012em; color: #FFFFFF;
}
#capitalq .iq__d{ margin: 8px 0 0; font-size: .93rem; line-height: 1.6; color: var(--txt-dim); }
#capitalq .iq__port{ display: none; }

@media (min-width: 1024px){
  #capitalq .iq__hub{
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) minmax(0, 1fr);
    align-items: center; gap: clamp(40px, 4.6vw, 80px);
  }
  #capitalq .iq__wires{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
  #capitalq .iq__core{ order: 0; width: 100%; }
  #capitalq .iq__side{ gap: clamp(16px, 1.8vw, 24px); }
  #capitalq .iq__side--l .iq__mod{ text-align: right; border-left-width: 1px; border-left-color: rgba(244,248,251,.12); border-right: 2px solid var(--accent); }
  #capitalq .iq__side--l .iq__mod:hover, #capitalq .iq__side--l .iq__mod.is-hot{ border-left-color: color-mix(in srgb, var(--accent) 55%, transparent); }
  #capitalq .iq__side--l .iq__mod:hover{ transform: translateX(-6px); }
  #capitalq .iq__side--r .iq__mod:hover{ transform: translateX(6px); }
  #capitalq .iq__port{
    display: block; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
    background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
  }
  #capitalq .iq__side--l .iq__port{ right: 8px; }
  #capitalq .iq__side--r .iq__port{ left: 8px; }
}
#capitalq .iq__wire{ fill: none; stroke: var(--accent); stroke-opacity: .26; stroke-width: 1; transition: stroke-opacity .35s ease; }
#capitalq .iq__pulse{
  fill: none; stroke: var(--accent-hov); stroke-width: 2; stroke-linecap: square;
  stroke-dasharray: 7 93; animation: iqPulse 3.2s linear infinite; animation-delay: var(--d, 0s);
  filter: drop-shadow(0 0 4px var(--accent));
}
#capitalq .iq__wire.is-hot{ stroke-opacity: .9; }
@keyframes iqPulse{ from{ stroke-dashoffset: 100; } to{ stroke-dashoffset: 0; } }

#capitalq .iq__one{
  margin: clamp(64px, 8vw, 120px) auto 0; text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.1rem, 5.6vw, 5.4rem); line-height: 1.04; letter-spacing: -.036em;
  /* 2026-09-19 fix round: this line was still painting itself with
     var(--accent-grad) through background-clip:text — a TEXT GRADIENT, which
     batch 6 removed site-wide. Solid gold, no clip, no transparent fill. */
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--accent); color: var(--accent);
  padding-bottom: .08em;
}
@media (prefers-reduced-motion: reduce){
  #capitalq .iq__caret, #capitalq .iq__ring, #capitalq .iq__pulse{ animation: none; }
  #capitalq .iq__pulse{ display: none; }
  #capitalq .iq__mod, #capitalq .iq__mod::before{ transition: none; }
}


/* ══════════ I13 · #smarter — the sci-fi field lives here now ══════════ */
#smarter.ismart{ padding-block: clamp(100px, 13vw, 200px); background: #FFFFFF; }
#smarter .ismart__net{
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; opacity: .95;
}
#smarter .ismart__glow{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(46% 42% at 50% 50%, #FFFFFF 26%, rgba(255,255,255,.7) 60%, rgba(255,255,255,0) 100%);
}
#smarter .container{ position: relative; z-index: 1; }
#smarter .fx-investors-white__l{ text-shadow: none; }
#smarter .fx-investors-white__l--blue{ color: var(--accent); }
#smarter .ismart__cta{ justify-content: center; margin-top: clamp(28px, 3.4vw, 46px); }
#smarter .ismart__cta .btn, #smarter .ismart__cta .btn *{ color: var(--accent-on); -webkit-text-fill-color: currentColor; }


/* ══════════ I11 · #who-we-serve — arrows LEFT and RIGHT, outside the image ══════════ */
#who-we-serve .iserve__row{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(12px, 1.6vw, 22px);
}
#who-we-serve .iserve__arrow{
  position: static; transform: none; width: 52px; height: 52px;
  background: var(--accent); background-image: var(--accent-grad);
  color: var(--accent-on); box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#who-we-serve .iserve__arrow svg{ width: 18px; height: 18px; }
#who-we-serve .iserve__arrow:hover{ background-image: var(--accent-grad); opacity: .88; }
#who-we-serve .iserve__arrow:disabled,
#who-we-serve .iserve__arrow:disabled:hover{
  background: rgba(244,248,251,.07); background-image: none;
  color: rgba(244,248,251,.34); opacity: 1;
}
@media (max-width: 880px){
  #who-we-serve .iserve__row{ grid-template-columns: minmax(0, 1fr); position: relative; }
  #who-we-serve .iserve__arrow{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; }
  #who-we-serve .iserve__arrow.fx-investors-slider__nav--prev{ left: 8px; }
  #who-we-serve .iserve__arrow.fx-investors-slider__nav--next{ right: 8px; }
  #who-we-serve .iserve__arrow:disabled{ background: rgba(10,10,11,.55); }
}
#who-we-serve .inv-serve__tail .h-mid .tblue{ color: var(--accent); }


/* ══════════ I14 · I15 · #investor-network — the Inner Circle, redesigned ══════════ */
#investor-network.icirc{ position: relative; overflow: hidden; isolation: isolate; background: #FFFFFF; }
#investor-network .icirc__rings{
  position: absolute; left: 50%; top: 46%; z-index: -1; pointer-events: none;
  width: max(1500px, 125vw); height: max(1500px, 125vw); transform: translate(-50%, -50%);
  fill: none; stroke: color-mix(in srgb, var(--accent-deep) 24%, transparent); stroke-width: 1;
}
#investor-network .icirc__rings circle{ vector-effect: non-scaling-stroke; }
#investor-network .icirc__pulse{
  stroke: var(--accent); stroke-width: 1.5; opacity: 0;
  transform-box: view-box; transform-origin: 500px 500px;
  animation: icircPulse 8s cubic-bezier(.2,.6,.3,1) infinite;
}
#investor-network .icirc__pulse--2{ animation-delay: 4s; }
@keyframes icircPulse{ 0%{ transform: scale(1); opacity: .7; } 100%{ transform: scale(5.4); opacity: 0; } }

/* the membership card */
#investor-network .icirc__ring{ max-width: 1180px; margin-inline: auto; }
#investor-network .cqx-ring__in.icirc__card{
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr; padding: 0;
  background: #08090B; border-color: rgba(255,255,255,.14); box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#investor-network .icirc__photo{ position: relative; min-height: 260px; overflow: hidden; }
#investor-network .icirc__photo img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  display: block; filter: var(--gold-photo-mono) contrast(1.06) brightness(.82);
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
#investor-network .icirc__card:hover .icirc__photo img{ transform: scale(1.04); }
#investor-network .icirc__fade{
  position: absolute; inset: 0; display: block;
  background: linear-gradient(180deg, rgba(8,9,11,.1) 0%, rgba(8,9,11,.35) 55%, #08090B 100%);
}
#investor-network .icirc__mark{ position: absolute; left: clamp(22px, 2.6vw, 36px); bottom: clamp(20px, 2.4vw, 32px); z-index: 1; }
#investor-network .icirc__word{
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1; color: #FFFFFF;
}
#investor-network .icirc__word b{ color: var(--accent); font-weight: 700; }
#investor-network .icirc__body{ position: relative; z-index: 2; padding: clamp(24px, 3.6vw, 56px); }
#investor-network .icirc__kick{
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem); letter-spacing: -.014em; color: #FFFFFF;
}
#investor-network .icirc__list{ list-style: none; margin: 0; padding: 0; }
#investor-network .icirc__item{
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: baseline;
  padding: clamp(12px, 1.3vw, 16px) 0 clamp(12px, 1.3vw, 16px) 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease calc(var(--k, 0) * 80ms), transform .5s cubic-bezier(.22,.61,.36,1) calc(var(--k, 0) * 80ms), background .3s ease;
}
#investor-network .icirc__item:last-child{ border-bottom: 1px solid rgba(255,255,255,.1); }
#investor-network .icirc__list.is-in .icirc__item{ opacity: 1; transform: none; }
#investor-network .icirc__item::before{
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--accent); box-shadow: 0 0 12px var(--accent-glow);
  transform: scaleY(0); transform-origin: center; transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
#investor-network .icirc__item:hover{ background: color-mix(in srgb, var(--accent) 8%, transparent); }
#investor-network .icirc__item:hover::before{ transform: scaleY(1); }
#investor-network .icirc__n{
  font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .16em;
  color: color-mix(in srgb, var(--accent) 70%, transparent); transition: color .3s ease;
}
#investor-network .icirc__item:hover .icirc__n{ color: var(--accent); }
#investor-network .icirc__t{
  font-size: clamp(.98rem, 1.12vw, 1.08rem); line-height: 1.5; font-weight: 500; color: rgba(255,255,255,.88);
  transition: color .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
#investor-network .icirc__item:hover .icirc__t{ color: #FFFFFF; transform: translateX(4px); }
#investor-network .icirc__spot{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 72%) var(--my, 20%), color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
}
@media (min-width: 900px){
  #investor-network .cqx-ring__in.icirc__card{ grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  #investor-network .icirc__photo{ min-height: 100%; }
  #investor-network .icirc__fade{ background: linear-gradient(90deg, rgba(8,9,11,.05) 0%, rgba(8,9,11,.3) 55%, #08090B 100%), linear-gradient(0deg, rgba(8,9,11,.7) 0%, transparent 40%); }
}

/* the close: "Because" removed; the gold line on its own line */
#investor-network .icirc__close{ margin: clamp(56px, 7vw, 100px) auto 0; text-align: center; max-width: 1360px; }
#investor-network .icirc__h{
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.75rem); line-height: 1.1; letter-spacing: -.03em;
  color: #0B0C0E; background: none; -webkit-text-fill-color: currentColor;
}
#investor-network .icirc__gold{ display: block; margin-top: .18em; color: var(--accent); -webkit-text-fill-color: currentColor; }
#investor-network .inv-circle__cta{ justify-content: center; margin-top: clamp(26px, 3vw, 38px); }
@media (prefers-reduced-motion: reduce){
  #investor-network .icirc__pulse{ animation: none; }
  #investor-network .icirc__item{ opacity: 1; transform: none; transition: none; }
  #investor-network .icirc__item::before, #investor-network .icirc__t, #investor-network .icirc__photo img{ transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   CLIENT FEEDBACK BATCH 5 — 2026-09-18 — investors.html (items I1–I7)
   Appended after the batch-3 blocks so these win on order where they overlap.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── I1 · #familiar — "It's finding the right ones, faster." on a NEW line ── */
#familiar .ifam__ln{ display: block; }
#familiar .ifam__ln--2{ margin-top: .12em; }


/* ══════════ I2 · I3 · #there-is — the scroll-up story, restored ══════════
   The pinned two-up lives in style.css (.inv-story) and js/main.js
   ([data-inv-story]); these rules only carry the batch-3 decisions the client
   kept: the two-line heading, the gold ink on the split punch band, and the
   closing STRIP. */
#there-is.sec.inv-there.istory2{ padding-bottom: 0; overflow: clip; }
#there-is .istory2__head{ margin-bottom: clamp(10px, 1.6vw, 22px); max-width: none; }
#there-is .istory2__h{
  margin: 0; font-family: var(--font-display); font-weight: 600;
  line-height: 1.0; letter-spacing: -.042em;
  background-image: none; -webkit-text-fill-color: currentColor; color: var(--txt-hi);
}
/* "There Is" on one line, "A better way to invest in Africa." on the next */
#there-is .istory2__h1{
  display: block; font-size: clamp(3.2rem, 9.2vw, 8.6rem);
  line-height: .96; color: var(--txt-hi);
}
#there-is .istory2__h2{
  display: block; margin-top: .1em; font-size: clamp(1.5rem, 4.4vw, 4rem);
  line-height: 1.02; color: var(--accent);
}
/* G1 · the restored story's photographs carry the golden tone like the rest of the page */
#there-is .inv-story__strip img{ filter: var(--gold-photo) contrast(1.03) brightness(.86); }
/* the story block sits closer to the line it answers */
#there-is .istory2__story{ margin-top: clamp(16px, 2.4vw, 34px); }

/* the split punch band: the gold half takes INK, never white (accent rule) */
#there-is-punch .fx-investors-punch:first-child{
  background-color: var(--accent); background-image: var(--accent-sheen), var(--accent-grad);
  color: var(--accent-on);
}
#there-is-punch .fx-investors-punch.fx-investors-punch--blue{
  background-color: #FFFFFF; color: var(--accent-deep);
}
/* I3 · the closing STRIP — full-bleed, photographic, the end of the section */
/* the punch strip runs straight into the closing strip — one uninterrupted run */
#there-is #there-is-close.fx-investors-band{ margin: 0; border-bottom: 0; }
#there-is #there-is-close .close-band__bg img{ filter: var(--gold-photo-mono) brightness(.42); }

@media (max-width: 900px){
  #there-is .istory2__h1{ font-size: clamp(2.8rem, 15vw, 5rem); }
  #there-is .istory2__h2{ font-size: clamp(1.28rem, 6.6vw, 2.4rem); }
}


/* ══════════ I5 · the "Meet CapitalQ" card — dots out, photograph in ══════════ */
#capitalq .iq__console{ overflow: hidden; isolation: isolate; }
#capitalq .iq__shot{ position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#capitalq .iq__shot img{
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block;
  filter: var(--gold-photo-mono) contrast(1.06) brightness(.6);
}
#capitalq .iq__shotveil{
  position: absolute; inset: 0; display: block;
  background:
    linear-gradient(90deg, rgba(8,9,12,.9) 0%, rgba(8,9,12,.78) 46%, rgba(8,9,12,.5) 100%),
    linear-gradient(180deg, rgba(8,9,12,.42), rgba(8,9,12,.86));
}
#capitalq .iq__bar{ min-height: 16px; }


/* ══════════ I6 · #smarter — less top and bottom padding ══════════ */
#smarter.ismart{ padding-block: clamp(58px, 6.6vw, 104px); }
#smarter .ismart__cta{ margin-top: clamp(22px, 2.4vw, 32px); }


/* ══════════════════════════════════════════════════════════════════════════
   I7 · #start "Start Here" — redesigned (the client asked twice)
   Before: a heading block on the left and a bordered checklist floating right,
   with a dead half-screen of photograph under it and the CTAs stranded at the
   bottom-left. Now: the ask on the left, the call's agenda as a GOLD
   appointment plate on the right (numbered 01–05, ink on gold, carrying THE
   PATTERN), and the pledge + both CTAs closing the page full width, in the
   document's order (pledge → primary CTA → secondary CTA).
   ══════════════════════════════════════════════════════════════════════════ */
#start.inv-start{ position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(78px, 9vw, 150px); }
#start .fx-investors-start__bg img{ filter: var(--gold-photo-mono) brightness(.52) contrast(1.1); object-position: 62% 42%; }
#start .fx-investors-start__scrim{
  position: absolute; inset: 0; display: block;
  background:
    linear-gradient(90deg, rgba(10,10,11,.95) 0%, rgba(10,10,11,.78) 44%, rgba(10,10,11,.5) 100%),
    linear-gradient(180deg, rgba(10,10,11,.9), rgba(10,10,11,.34) 46%, rgba(10,10,11,.9));
}
#start .container{ position: relative; z-index: 1; }

#start .inv-start__grid{ display: grid; gap: clamp(34px, 4.4vw, 68px); align-items: start; }
@media (min-width: 981px){
  #start .inv-start__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
  #start .inv-start__foot{ grid-column: 1 / -1; }
}

/* ── left: the ask ── */
#start .inv-start__head{ max-width: 34ch; }
#start .inv-start__head .h-major{ margin: 0; line-height: .98; }
#start .istart2__sub{
  margin: clamp(12px, 1.4vw, 20px) 0 0; color: var(--accent);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.18rem, 2vw, 1.85rem); line-height: 1.14; letter-spacing: -.024em;
}
#start .istart2__body{ margin-top: clamp(20px, 2.4vw, 32px); max-width: 46ch; }
#start .istart2__body p{
  margin: 0; font-size: clamp(.98rem, 1.08vw, 1.06rem); line-height: 1.7; color: var(--txt);
}
#start .istart2__body p + p{ margin-top: .85em; }
#start .istart2__body p:first-child{
  font-family: var(--font-display); font-weight: 500; color: var(--txt-hi);
  font-size: clamp(1.06rem, 1.3vw, 1.22rem); line-height: 1.5; letter-spacing: -.014em;
}
/* a hairline mark that ties the ask to the plate */
#start .istart2__mark{
  display: block; width: 74px; height: 2px; margin-top: clamp(26px, 3vw, 40px);
  background: var(--accent); box-shadow: 0 0 18px var(--accent-glow);
}

/* ── right: the gold appointment plate ── */
#start .istart2__plate{
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--accent); background-image: var(--accent-sheen), var(--accent-grad);
  padding: clamp(26px, 3vw, 46px) clamp(22px, 2.8vw, 44px) clamp(20px, 2.4vw, 34px);
  box-shadow: 0 34px 90px rgba(0,0,0,.5);
}
#start .istart2__platein{ position: relative; z-index: 1; }
#start .istart2__tag{
  margin: 0 0 clamp(14px, 1.6vw, 20px); display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--accent-on) 66%, transparent);
}
#start .istart2__tag::after{ content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent-on) 26%, transparent); }
#start .istart2__kick{
  margin: 0 0 clamp(6px, .9vw, 12px); color: var(--accent-on);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.14rem, 1.7vw, 1.6rem); line-height: 1.16; letter-spacing: -.022em;
  background-image: none; -webkit-text-fill-color: currentColor;
}
#start .istart2__agenda{ list-style: none; margin: 0; padding: 0; }
#start .istart2__row{
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline;
  gap: 0 6px; padding: clamp(13px, 1.5vw, 18px) 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-on) 20%, transparent);
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s ease calc(var(--k, 0) * 90ms), transform .55s cubic-bezier(.22,.61,.36,1) calc(var(--k, 0) * 90ms);
}
#start .istart2__agenda.is-in .istart2__row{ opacity: 1; transform: none; }
/* Numerals stay quieter than the row text by WEIGHT + tracking, not by fading the
   ink out: at 58% the mix landed on 3.90:1 over the plate (below AA). 80% of
   --accent-on on #E2B24C computes ~6.9:1, with headroom for --accent-sheen. */
#start .istart2__n{
  font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .18em;
  color: color-mix(in srgb, var(--accent-on) 80%, transparent);
  transition: color .3s ease;
}
#start .istart2__t{
  font-family: var(--font-display); font-weight: 500; color: var(--accent-on);
  font-size: clamp(.98rem, 1.14vw, 1.1rem); line-height: 1.45; letter-spacing: -.012em;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
#start .istart2__row:hover .istart2__t{ transform: translateX(4px); }
#start .istart2__row:hover .istart2__n{ color: var(--accent-on); }

/* ── the close: pledge, then both CTAs (document order) ── */
#start .inv-start__foot{
  margin-top: clamp(44px, 5.4vw, 86px); padding-top: clamp(30px, 3.4vw, 48px);
  border-top: 1px solid rgba(244,248,251,.14); text-align: center;
}
#start .inv-start__pledge{
  margin: 0 auto; max-width: 30ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em;
  color: var(--txt-hi); background-image: none; -webkit-text-fill-color: currentColor;
}
#start .inv-start__cta{ justify-content: center; margin-top: clamp(24px, 2.8vw, 38px); }

@media (max-width: 980px){
  #start .inv-start__head{ max-width: none; }
  #start .istart2__body{ max-width: none; }
}
@media (prefers-reduced-motion: reduce){
  #start .istart2__row{ opacity: 1; transform: none; transition: none; }
  #start .istart2__t{ transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   CLIENT FEEDBACK BATCH 6 — 2026-09-18b — investors.html (items I1, I2)
   Appended last so these win on order. Nothing here re-implements the story:
   the pin, the crossfade, the strip slide and the pagination bars are all
   style.css `.inv-story` + the [data-inv-story] IIFE in js/main.js, untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════ I1 · THE MASTHEAD MOVES INSIDE THE PIN ══════════
   "Instead of that being on top, let it be inside this scrolling effect with the
   others. But when I scroll to number two, it should still be at the top."

   The <header> is now the first child of `.inv-story__pin`. The pin was a two
   column grid; it becomes two ROWS — a full-width masthead band, then the
   argument / photograph two-up underneath. Because the band is inside the
   sticky pin it travels with the story and is on screen at 01, 02 and 03.
   Reference read for the pattern: 21st.dev 1368 "Feature Section" — one title
   held at the top of the frame while the steps below it advance against a
   fixed media panel.

   The band carries the 01/02/03 progress bars at its right edge, so the thing
   that tells you WHERE you are now sits with the thing that tells you WHAT you
   are reading. `[data-inv-active]` lives on the pin, i.e. ABOVE the header in
   the tree, so style.css's `[data-inv-active="1"] .inv-story__bars i:nth-child(2)`
   rules keep matching with no JS change at all. */

/* the section no longer opens with a full-height header block, so it opens
   almost straight onto the pinned unit */
#there-is.sec.inv-there.istory2{ padding-top: 0; }
#there-is .istory2__story{ margin-top: 0; }
/* with no padding left, the pin's own top hairline becomes the section edge, and
   "There has to be a better way." above runs straight into "There Is" below it */

/* ── the pinned masthead: ONLY where the pin actually pins. style.css unwinds
      the pin into one column at ≤900px and under reduced motion, and these rules
      out-specify it, so every layout rule below is fenced into the pinned case. ── */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference){

  /* the pin: masthead row + story row */
  body #there-is .inv-story__pin{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  body #there-is .istory2__head{
    grid-column: 1 / -1; grid-row: 1;
    position: relative; z-index: 3;
    margin: 0; max-width: none; text-align: left;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: clamp(20px, 4vw, 64px);
    /* the top pad clears the floating .hdr2 capsule, which is fixed over the pin */
    padding: clamp(80px, 11.5vh, 112px) var(--inv-gut) clamp(16px, 2.4vh, 26px);
    border-bottom: 1px solid var(--line);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 5.5%, transparent) 0%,
                              color-mix(in srgb, var(--accent) 0%, transparent) 76%),
      linear-gradient(90deg, var(--bg) 0%, var(--bg-soft) 100%);
  }
  /* a gold stitch under the masthead, on the left where the argument begins */
  body #there-is .istory2__head::after{
    content: ""; position: absolute; left: var(--inv-gut); bottom: -1px;
    width: clamp(56px, 7vw, 104px); height: 1px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 0%, transparent));
  }
  /* masthead scale: a chapter title, not a second page hero */
  body #there-is .istory2__h{ margin: 0; }
  body #there-is .istory2__h1{ font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: .94; }
  body #there-is .istory2__h2{ font-size: clamp(1.1rem, 2vw, 1.9rem); margin-top: .08em; }

  /* the bars come up into the band; kill the spine that used to drop into the copy */
  body #there-is .istory2__nav{
    position: static; flex: none; padding-bottom: clamp(6px, 1.1vh, 12px);
  }
  body #there-is .istory2__nav::after{ display: none; }
  body #there-is .istory2__nav .inv-story__bars{ gap: 10px; }
  body #there-is .istory2__nav .inv-story__bars i{ width: 30px; }
  /* the resting width above out-specifies style.css's active rule, so the active
     bar's 24→48 expansion is restated here at matching weight (the [data-inv-active]
     attribute sits on the pin, which is now the header's parent) */
  body #there-is .inv-story__pin[data-inv-active="0"] .istory2__nav .inv-story__bars i:nth-child(1),
  body #there-is .inv-story__pin[data-inv-active="1"] .istory2__nav .inv-story__bars i:nth-child(2),
  body #there-is .inv-story__pin[data-inv-active="2"] .istory2__nav .inv-story__bars i:nth-child(3){
    width: 58px;
  }

  /* the two-up now sits in row 2; the left column loses the padding that used to
     reserve room for the bars it no longer holds */
  body #there-is .inv-story__left{ grid-column: 1; grid-row: 2; padding-top: clamp(18px, 3.2vh, 38px); }
  body #there-is .inv-story__right{ grid-column: 2; grid-row: 2; }
}

/* ≤900px and reduced motion: the pin unwinds into a single column (style.css),
   so the masthead is just an ordinary block at the head of it, full size again.
   It is still the first child of the pin, so it still leads the story. */
@media (max-width: 900px), (prefers-reduced-motion: reduce){
  body #there-is .istory2__head{
    order: -1; display: block; text-align: left;
    margin: 0; max-width: none;
    padding: 0 var(--inv-gut) clamp(2px, 1.2vw, 10px);
  }
  body #there-is .istory2__nav{ display: none; }
}


/* ══════════ I2 · THE CLOSING BAND — HALF THE TOP AND BOTTOM PADDING ══════════
   "The top and bottom padding of this, 'the future of investing doesn't belong
   to those who wait for opportunity…' Please let's reduce the top and bottom
   padding." Photograph and both lines stay exactly as they are; only the air
   above and below them is cut, to a little under half. */
#there-is #there-is-close.fx-investors-band{
  padding-block: clamp(40px, 5.3vw, 80px);
}

/* ══════════ 2026-09-18c · CLIENT: the new Investors hero photograph ══════════
   "This image should be for the investor hero. We might probably move the text
   to the right-hand side of the image, but it should still be aligned to the
   left, so that the subject of the image is going to show well."
   The seated subject sits in the left half of the frame, so the copy column
   moves to the RIGHT half and keeps its left-aligned (ragged-right) setting,
   and the scrim flips: dark under the copy on the right, clear over him. */
#top.inv-hero .hero__bg img{ object-position: 62% 32%; }
#top.inv-hero .bizhero{
  max-width: min(47%, 660px);
  margin-inline-start: auto;      /* the block moves right … */
  text-align: left;               /* … the text stays left-aligned */
}
#top.inv-hero .inv-hero__p{ max-width: 46ch; }
#top.inv-hero .bizhero .inv-hero__q{ max-width: 38ch; }
#top.inv-hero .hero__scrim{
  background:
    linear-gradient(270deg, rgba(8,9,12,.96) 0%, rgba(8,9,12,.9) 36%, rgba(8,9,12,.58) 56%, rgba(8,9,12,.18) 82%, rgba(8,9,12,0) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(8,9,12,.58) 15%, rgba(8,9,12,.1) 52%, rgba(8,9,12,.38) 100%);
}
@media (max-width: 1080px){
  #top.inv-hero .bizhero{ max-width: min(56%, 620px); }
}
@media (max-width: 880px){
  #top.inv-hero .bizhero{ max-width: 100%; margin-inline-start: 0; }
  #top.inv-hero .inv-hero__p, #top.inv-hero .bizhero .inv-hero__q{ max-width: 60ch; }
  #top.inv-hero .hero__bg img{ object-position: 46% 26%; }
  #top.inv-hero .hero__scrim{
    background: linear-gradient(0deg, var(--bg) 0%, rgba(8,9,12,.92) 26%, rgba(8,9,12,.6) 58%, rgba(8,9,12,.34) 100%);
  }
}

/* The old hero carried a masked "exposure lift" layer (style.css .fx-inv-hero
   .hero__bg::after) that re-painted inv-hero2.jpg brightened over THAT subject's
   face. With the new photograph it showed the old subject as a ghost on the right.
   Retarget it: same machinery, new plate, mask moved onto the new subject's face
   (left of centre) and softened — his face is already well lit. */
#top.fx-inv-hero{
  --fx-inv-face-x: 34%;
  --fx-inv-face-y: 34%;
  --fx-inv-face-rx: 20%;
  --fx-inv-face-ry: 24%;
}
#top.fx-inv-hero .hero__bg::after{
  background-image: url("../assets/img/inv-hero-exec.webp");
  background-position: 62% 32%;
  filter: brightness(1.42) contrast(.95) saturate(1.06);
}
@media (max-width: 880px){
  #top.fx-inv-hero{ --fx-inv-face-x: 44%; --fx-inv-face-y: 30%; --fx-inv-face-rx: 34%; --fx-inv-face-ry: 22%; }
  #top.fx-inv-hero .hero__bg::after{ background-position: 46% 26%; }
}


/* ══════════ 2026-09-19 · BATCH 7 ══════════════════════════════════════════
   I1 · THE HERO GRADE.
   Client: "for the hero image there's one colour grading on it that I don't
   like… I want the subjects in the hero image to pop up well and the other one
   starts dark."

   What was wrong: the lift over the subject was a SECOND COPY of the same
   photograph, exposed up and masked to an ellipse over him (style.css
   .fx-inv-hero .hero__bg::after, retargeted here on 09-18c). The plate under it
   carries var(--gold-photo); the plate on top did not — so the two never matched
   and the mask edge read as a bright wash across his hair, face and shoulder.
   That is the flare he is pointing at.

   What replaces it, in three layers and no second plate:
     1 · the base plate is graded down — more contrast, less lift, gold kept, so
         the room falls away on its own instead of sitting in a grey haze;
     2 · .fx-inv19-pop — a soft ellipse over HIM carrying a backdrop-filter. It
         lifts and crisps the pixels already there, so there is nothing to seam;
     3 · .hero__bg::after stops being a photograph and becomes the BURN: clear
         over the subject, deepening to near-black at the edges of the frame.
   All three ride inside .hero__bg, so they track the parallax translate exactly.
   ════════════════════════════════════════════════════════════════════════════ */

/* the ellipse over the subject, in .hero__bg space (the box is 120vh tall and
   starts at -10vh, so a viewport-26% reads as box-30%) */
#top.fx-inv-hero{
  --fx-inv-face-x: 32%;
  --fx-inv-face-y: 32%;
  --fx-inv-face-rx: 20%;
  --fx-inv-face-ry: 25%;
  /* the clear centre of the burn — generous, so it never crops his shoulders */
  --fx-inv-keep-x: 33%;
  --fx-inv-keep-y: 35%;
  --fx-inv-keep-rx: 36%;
  --fx-inv-keep-ry: 42%;
}

/* 1 · the base plate: graded, not washed */
#top.fx-inv-hero .hero__bg img{
  filter: var(--gold-photo) contrast(1.20) brightness(.80) saturate(1.04);
}

/* 2 · the local lift, masked to the subject — no second photograph */
#top.fx-inv-hero .fx-inv19-pop{
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: brightness(1.52) contrast(1.14) saturate(1.08);
          backdrop-filter: brightness(1.52) contrast(1.14) saturate(1.08);
  -webkit-mask-image: radial-gradient(
    var(--fx-inv-face-rx) var(--fx-inv-face-ry)
    at var(--fx-inv-face-x) var(--fx-inv-face-y),
    #000 0%, #000 26%, rgba(0,0,0,.74) 54%, rgba(0,0,0,.34) 78%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(
    var(--fx-inv-face-rx) var(--fx-inv-face-ry)
    at var(--fx-inv-face-x) var(--fx-inv-face-y),
    #000 0%, #000 26%, rgba(0,0,0,.74) 54%, rgba(0,0,0,.34) 78%, rgba(0,0,0,0) 100%);
}

/* 3 · the burn: the rest of the frame starts dark */
#top.fx-inv-hero .hero__bg::after{
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(
    var(--fx-inv-keep-rx) var(--fx-inv-keep-ry)
    at var(--fx-inv-keep-x) var(--fx-inv-keep-y),
    rgba(5,6,9,0) 0%, rgba(5,6,9,0) 44%,
    rgba(5,6,9,.30) 66%, rgba(5,6,9,.60) 85%, rgba(5,6,9,.82) 100%);
  background-position: 50% 50%;
  background-size: auto;
  background-repeat: no-repeat;
  filter: none;
  -webkit-mask-image: none;
          mask-image: none;
}

/* short desktop frames pull him up inside the cover crop */
@media (min-width: 901px) and (max-height: 820px){
  #top.fx-inv-hero{ --fx-inv-face-y: 29%; --fx-inv-face-ry: 24%; --fx-inv-keep-y: 33%; }
}
@media (min-width: 1700px){
  #top.fx-inv-hero{ --fx-inv-face-x: 31%; --fx-inv-face-rx: 15%; --fx-inv-keep-rx: 32%; }
}

/* MOBILE — measured at a real 390x844 viewport (CDP device-metrics override;
   --window-size floors Chrome at 500 and hides this entirely).

   CORRECTION to the note that stood here on 09-19a: it claimed the <=900px crop
   "leaves only his shoulder in frame". The render says otherwise. At 390 the
   .hero__bg box is 390x1080, the plate is 2000x1116, so object-fit:cover is
   HEIGHT-driven: the whole photo is shown vertically at 0.97x and only 403 of
   its 2000 columns survive. That 5x magnification put his forehead, eye, nose
   and mouth across the top third — half-cropped by the left edge, with
   "Discover Ambitious / Businesses in Africa" running straight over the face.
   Killing the pop and dropping the plate to .88 made the client's own note
   ("I want the subjects in the hero image to pop up well") false on his phone.

   The root cause is the magnification, not the exposure, so the fix is a
   reframe: below 900px the plate stops filling the box and becomes a BAND
   across the top at 54% of it. Cover is then height-driven on a 583px box,
   the scale falls to ~0.52, and the room comes back around him — his whole
   head lands at ~120px wide in the strip ABOVE the headline, the headline
   gets his shoulder and the dark study behind it, and everything below the
   band is ground. The three layers still apply, re-tuned to where he now is:
   the plate keeps its grade (brightness .95, not .88 — the pop needs signal to
   lift), .fx-inv19-pop comes back on a phone-tuned ellipse over his face, and
   the burn drops the band's edges and its foot into the ground so there is no
   cut line. */
@media (max-width: 900px){
  #top.fx-inv-hero{
    /* the pop ellipse, in .hero__bg space (390 x 1080 at a 390x844 viewport) */
    --fx-inv-face-x: 72%;
    --fx-inv-face-y: 10.5%;
    --fx-inv-face-rx: 22%;
    --fx-inv-face-ry: 10.5%;
  }
  /* the ground the band sits on, so the foot of the photo has somewhere to go */
  #top.fx-inv-hero .hero__bg{ background: #08090C; }
  #top.fx-inv-hero .hero__bg img{
    height: 54%;
    object-position: 19% 0%;
    filter: var(--gold-photo) contrast(1.16) brightness(.95) saturate(1.04);
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 62%, rgba(0,0,0,.62) 84%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(180deg,
      #000 0%, #000 62%, rgba(0,0,0,.62) 84%, rgba(0,0,0,0) 100%);
  }
  #top.fx-inv-hero .fx-inv19-pop{ display: block; }
  #top.fx-inv-hero .hero__bg::after{
    display: block;
    background-image: radial-gradient(
      52% 17% at 70% 11%,
      rgba(5,6,9,0) 0%, rgba(5,6,9,0) 46%,
      rgba(5,6,9,.34) 74%, rgba(5,6,9,.62) 100%);
  }
}

/* I4 · "The Inner Circle of African Investing." — client: "make it black."
   The .tblue class is off the line in the markup; .sec--light .h-sub already
   paints #0B0C0E, this only guards it against the display-line gradient rules
   and gives the line its own weight now that it is no longer the gold accent. */
#investor-network .fx-inv19-ink{
  color: #0B0C0E;
  -webkit-text-fill-color: #0B0C0E;
  background: none;
}

/* I3 · the masthead is now the single word "There Is". With the second line
   gone the band was carrying a lot of air under one short word — pull the head
   in so the line sits on the stitch instead of floating above it. */
#there-is .istory2__h1{ margin-bottom: 0; }
body #there-is .istory2__head{ padding-bottom: clamp(8px, 1.1vh, 14px); }


/* ══════════════════════════════════════════════════════════════════════════
   CLIENT FEEDBACK BATCH 12 — 2026-09-22 · investors.html (track "inv")
   I-1 #familiar · the squeeze carousel becomes the for-businesses scroll story
   I-2 #there-is · the dead band before the split punch is removed
   I-3 #capitalq · "Introducing CapitalQ" LEFT, the orb RIGHT
   I-4 #who-we-serve · item 06 is Talent Capital (photograph from the TC page)
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── I-1 · #familiar — the pinned scroll story ─────────────────────────
   Ported from #be-honest on for-businesses (css/fix-0917b-business.css B2):
   track → sticky pin → frame → absolutely-stacked scenes → progress segments.
   DEFAULT (no JS / reduced motion): the four beats read as a stacked list in the
   document's order, so the copy is never hidden behind a scroll driver.
   .is-live (JS + motion allowed): the pinned story. */
#familiar .ifam2{ --pad: 20px; }
@media (min-width:640px){ #familiar .ifam2{ --pad: 32px; } }
@media (min-width:768px){ #familiar .ifam2{ --pad: 40px; } }

#familiar .ifam2__frame{ position: relative; z-index: 1; }
#familiar .ifam2__glow{
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(42% 38% at var(--gx, 76%) var(--gy, 28%), color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent) 0%, transparent) 70%),
    radial-gradient(36% 30% at 8% 96%, color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 0%, transparent) 72%);
}
#familiar .ifam2__hin{ display: inline-block; transform-origin: 0 0; will-change: transform; }

/* the stacked (fallback) reading */
#familiar .ifam2__stage{ margin-top: clamp(30px, 3.6vw, 52px); display: grid; gap: clamp(14px, 1.8vw, 26px); }
#familiar .ifam2__scene{
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 16 / 9; background: #0B0C0E;
}
#familiar .ifam2__media,
#familiar .ifam2__media img{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#familiar .ifam2__media img{ object-fit: cover; filter: var(--gold-photo) brightness(.92); }
#familiar .ifam2__scrim{
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(8,9,12,.92) 0%, rgba(8,9,12,.62) 28%, rgba(8,9,12,.14) 62%, rgba(8,9,12,.30) 100%),
    linear-gradient(90deg, rgba(8,9,12,.62) 0%, rgba(8,9,12,0) 58%);
}
#familiar .ifam2__cap{
  position: absolute; left: clamp(18px, 3vw, 44px); right: clamp(18px, 3vw, 44px);
  bottom: clamp(18px, 3vw, 42px); z-index: 2;
}
#familiar .ifam2__ix{
  display: block; margin-bottom: .5em;
  font-size: .78rem; font-weight: 600; letter-spacing: .22em; color: var(--accent);
}
#familiar .ifam2__line{
  margin: 0; max-width: 22ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2.9rem); line-height: 1.1; letter-spacing: -.028em;
  color: #FFFFFF;
  background-image: none; -webkit-text-fill-color: #FFFFFF;   /* never a text gradient */
}
#familiar .ifam2__prog{ display: none; }

/* ── live (pinned) ── */
#familiar.ifam.is-live{ padding-top: 0; }
#familiar.is-live .ifam2__track{ position: relative; height: 470vh; }
#familiar.is-live .ifam2__pin{ position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#familiar.is-live .ifam2__frame{ height: 100%; padding-block: 0; }
#familiar.is-live .ifam2__head{
  position: absolute; left: var(--pad); right: var(--pad); z-index: 3;
  top: clamp(92px, 12.5vh, 126px); margin: 0; max-width: none;
}
#familiar.is-live .ifam2__h{ white-space: nowrap; }
#familiar.is-live .ifam2__stage{
  position: absolute; left: var(--pad); right: var(--pad); margin: 0; display: block;
  /* --stagetop is measured in JS from the masthead's LAYOUT box (offsetTop +
     offsetHeight), which the opening scale transform does not touch, so the
     picture always clears the sub-line at every viewport. */
  top: var(--stagetop, 300px); bottom: clamp(52px, 8vh, 88px);
}
#familiar.is-live .ifam2__scene{
  position: absolute; inset: 0; aspect-ratio: auto; z-index: var(--z, 1);
  opacity: 0; will-change: opacity;
}
#familiar.is-live .ifam2__scene:first-child{ opacity: 1; }
#familiar.is-live .ifam2__cap{ will-change: transform, opacity; }
#familiar.is-live .ifam2__prog{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(22px, 3.6vh, 38px); z-index: 4;
}
#familiar .ifam2__pseg{ position: relative; height: 2px; background: rgba(244,248,251,.12); overflow: hidden; }
#familiar .ifam2__pseg i{ position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--f, 0)); transform-origin: left; }

/* the descent below the pin keeps its own air */
#familiar.is-live .ifam__flow{ margin-top: clamp(56px, 7vw, 110px); }

@media (max-width: 880px){
  #familiar.is-live .ifam2__track{ height: 420vh; }
  #familiar.is-live .ifam2__head{ top: 84px; }
  #familiar.is-live .ifam2__h{ white-space: normal; }
  #familiar.is-live .ifam2__stage{ bottom: clamp(44px, 7vh, 64px); }
  #familiar .ifam2__line{ font-size: clamp(1.25rem, 5.6vw, 1.7rem); }
  #familiar .ifam2__cap{ left: 16px; right: 16px; bottom: 16px; }
}


/* ───────────────────────── I-2 · #there-is → the split covers the gap ─────────────────────────
   Client: "close the gap between the lede and the eyebrow and the split screen…
   that space is meant to be removed totally and let the split section just cover it."
   The 85px band of empty ground between the bottom of the pinned story and the top
   of the gold/white split is gone; the split now butts straight onto the story. */
#there-is #there-is-punch.fx-investors-punchwrap{
  margin-top: 0;
  border-top: 0;              /* a butt-join, not a seam */
}


/* ───────────────────────── I-3 · #capitalq — copy LEFT, orb RIGHT ───────────────────────── */
#capitalq .iq__head.iq__head--split{
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center; gap: clamp(20px, 4vw, 72px);
  text-align: left; max-width: 1240px; margin: 0 auto;
}
#capitalq .iq__head--split .iq__h{ margin: 0; }
#capitalq .iq__head--split .iq__sub{ margin-top: clamp(10px, 1.2vw, 18px); }
#capitalq .iq__headorb{
  position: relative; justify-self: end; width: 100%;
  max-width: clamp(190px, 26vw, 360px);
}
#capitalq .iq__headorb .cq-orb{ width: 100%; }
@media (max-width: 900px){
  #capitalq .iq__head.iq__head--split{
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 5vw, 30px); justify-items: start;
  }
  #capitalq .iq__headorb{ justify-self: center; max-width: min(56vw, 240px); }
}


/* ───────────────────────── I-4 · item 06 is Talent Capital ─────────────────────────
   The photograph comes from the Talent Capital site, so it arrives without this
   page's gold grade baked in — the page-wide #who-we-serve filters above already
   catch it (they select .fx-investors-slide__media img and .fx-investors-thumb img),
   and this only holds the title on one line at the sizes where it would break. */
#who-we-serve .fx-investors-slide__t{ text-wrap: balance; }

/* ── I-4 follow-up (review 2026-09-22) · the Talent Capital slide read COLD ──
   Nine of the ten #who-we-serve frames are graded by --gold-photo (sepia .28 /
   sat 1.14 / hue -6deg). The Talent Capital stage photograph arrives from the
   TC site carrying a blue stage wash and a dusk sky, so the page-wide grade was
   not enough to pull it into the family — it sat cold beside its neighbours.
   The picture is the client's own choice (I-4), so it is NOT swapped: it gets a
   deeper, warmer grade of its own on the slide AND on its thumbnail, so the
   amber stage lights carry the frame instead of the blue wash (sepia .58 / hue -16deg,
   measured against slide 01 in a 1440 capture). Gold tokens only,
   no new colour is introduced — this only re-weights the existing filter. */
#who-we-serve .fx-investors-slide--tc .fx-investors-slide__media img{
  filter: sepia(.58) hue-rotate(-16deg) saturate(1.16) contrast(1.05) brightness(.92);
}
#who-we-serve .fx-investors-thumb--tc img{
  filter: sepia(.58) hue-rotate(-16deg) saturate(1.16) brightness(.5);
}
#who-we-serve .fx-investors-thumb--tc:hover img{
  filter: sepia(.58) hue-rotate(-16deg) saturate(1.16) brightness(.75);
}
#who-we-serve .fx-investors-thumb--tc.is-on img{
  filter: sepia(.58) hue-rotate(-16deg) saturate(1.2) brightness(1);
}

/* ══ 2026-09-23 · batch 14 · B-12 ═════════════════════════════════════════
   Client: "there's a lot of glare on the man's face that I don't like…
   remove the golden overlay and let the picture look normal."
   The glare was layer 2 of the three-layer grade — a masked backdrop-filter
   at brightness 1.52 sitting exactly on his face — and the gold came from
   var(--gold-photo) on the plate. Both go. The burn stays, softened, so the
   right-hand copy still has a dark field to sit on. */
#top.fx-inv-hero .hero__bg img{
  filter: contrast(1.06) brightness(.92) saturate(1.02);
}
#top.fx-inv-hero .fx-inv19-pop{
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  display: none;
}
#top.fx-inv-hero .hero__bg::after{
  background-image: radial-gradient(
    var(--fx-inv-keep-rx) var(--fx-inv-keep-ry)
    at var(--fx-inv-keep-x) var(--fx-inv-keep-y),
    rgba(5,6,9,0) 0%, rgba(5,6,9,0) 50%,
    rgba(5,6,9,.22) 70%, rgba(5,6,9,.48) 88%, rgba(5,6,9,.68) 100%);
}