/* ══════════════════════════════════════════════════════════════
   FDN CAPITAL PARTNERS — 2026 redesign ("Capital Editorial 2")
   New copy (FDN NEW WEBSITE.docx + pages doc), new build, same standing
   client language: dark canvas, Space Grotesk display at medium weight,
   IBM Plex Mono label layer, Manrope body, blue accent pair, glass +
   .glow halo signature, hairline editorial rows, SQUARE EVERYTHING.
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:        #0A0A0B;
  --bg-soft:   #101114;
  --bg-lift:   #14161A;
  --txt:       #C9D4DC;
  --txt-dim:   #8b949e;
  --txt-hi:    #F4F8FB;
  --txt-blue:  #E2B24C;
  --line:      rgba(215,226,234,.13);
  --line-soft: rgba(215,226,234,.08);

  --blue:      #E2B24C;
  --blue-lt:   #F2CF7C;
  --blue-glow: rgba(226,178,76,.32);
  --grad-cta:  #E2B24C;   /* was a navy-to-blue gradient; Talent Capital buttons are a flat accent fill */

  /* Talent Capital accent system, adopted 2026-09-15 (client: "change the colour of the FDN website to tally
     with Talent Capital"). The --blue / --blue-lt / --blue-glow / --txt-blue / --grad-cta names and the .tblue
     class are LEGACY aliases, kept so nothing that references them breaks; they now carry the yellow.
     New code should use --accent-*. */
  --accent:      #E2B24C;   /* on ink; also plain LARGE sub-heads on white (client-accepted on Talent Capital) */
  --accent-hov:  #F2CF7C;   /* hover, and the lighter tint that replaced --blue-lt */
  --accent-deep: #7A5714;   /* SMALL text and small UI marks on white only (6.2:1) */
  --accent-on:   #0A0A0B;   /* any text sitting ON a yellow fill, never white */
  --accent-glow: rgba(226,178,76,.32);

  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono:    'Inter', system-ui, sans-serif;
  --font-base:    'Inter', system-ui, sans-serif;
}

html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body{ background: var(--bg); }
body{
  font-family: var(--font-base);
  color: var(--txt);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap{ background: var(--bg); overflow-x: clip; position: relative; }

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
button{ font-family: inherit; }

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

/* ── GRAIN ── */
.grain{
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── LAYOUT ── */
.container{ width:100%; max-width:1440px; margin-inline:auto; padding-inline:20px; position:relative; z-index:1; }
@media (min-width:640px){ .container{ padding-inline:32px; } }
@media (min-width:768px){ .container{ padding-inline:40px; } }

.sec{ position:relative; padding-block: clamp(72px, 9.5vw, 150px); }
.sec--tight{ padding-block: clamp(48px, 6vw, 96px); }

/* ══════════ TYPE ══════════ */
/* Display runs at weight 500 — the elegance is size + tight leading +
   negative tracking at a MEDIUM weight. Never bold these up. */
.h-hero{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 5.1rem);
  line-height: 1.02; letter-spacing: -.025em; color: var(--txt-hi);
}
.h-major{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.06; letter-spacing: -.022em; color: var(--txt-hi);
}
.h-mid{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  line-height: 1.16; letter-spacing: -.018em; color: var(--txt-hi);
}
.h-sub{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.3; letter-spacing: -.01em; color: var(--txt-hi);
}
.tblue{ color: var(--txt-blue); }
.lede{
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.65; color: var(--txt);
  max-width: 62ch;
}
.dim{ color: var(--txt-dim); }

/* Mono label layer — the site's signature device. */
.kick{
  display:flex; align-items:center; gap:14px;
  font-family: var(--font-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color: var(--txt-blue);
}
.kick__ix{ color: var(--txt-dim); letter-spacing:.08em; }
.sechead{ margin-bottom: clamp(36px, 4.6vw, 64px); max-width: 900px; }
.sechead .h-major{ margin-top: 18px; }
.sechead .lede{ margin-top: 18px; }
.sechead--center{ margin-inline:auto; text-align:center; }
.sechead--center .kick{ justify-content:center; }
.sechead--center .lede{ margin-inline:auto; }

/* ══════════ BUTTONS ══════════ */
.btn{
  position: relative; display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(.92rem, 1.05vw, 1rem); letter-spacing: -.01em;
  padding: 14px 26px; cursor: pointer; border: 0;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.btn--solid{ background: var(--grad-cta); color: #fff; }
.btn--solid:hover{ transform: translateY(-2px); }
.btn--glass{
  background: rgba(244,248,251,.05); color: var(--txt-hi);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn--glass:hover{ border-color: var(--blue-lt); color: var(--blue-lt); }
.btn__arr{ transition: transform .25s ease; }
.btn:hover .btn__arr{ transform: translateX(4px); }
.cta-set{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ── .glow — the signature blue halo. Apply to every card + button family. ── */
.glow{ position: relative; isolation: isolate; }
.glow::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:0; transition: opacity .35s ease;
  box-shadow: 0 0 24px 2px var(--blue-glow), 0 0 64px 8px rgba(226,178,76,.22);
}
.glow:hover::after{ opacity:1; }

/* ══════════ HEADER — npill nav (icon pills that widen to reveal labels) ══════════ */
.hdr{
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  padding-block: 14px;
  transition: background .3s ease, box-shadow .3s ease;
}
.hdr.is-solid{
  background: rgba(10,10,11,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-soft);
}
.hdr__inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand__word{
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
  letter-spacing: -.02em; color: var(--txt-hi);
}
.brand__word b{ font-weight:600; color: var(--txt-blue); }
.brand__sub{
  margin-top: 4px; font-family: var(--font-mono); font-size:.56rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color: var(--txt-dim);
}

.npills{ display:none; align-items:center; gap:8px; }
@media (min-width: 1060px){ .npills{ display:flex; } }
.npill{
  position:relative; display:flex; align-items:center; gap:0;
  height: 46px; padding: 0 13px; overflow:hidden;
  background: rgba(244,248,251,.045);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--txt); white-space:nowrap;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.npill svg{ width:18px; height:18px; flex:0 0 auto; }
.npill__t{
  max-width: 0; opacity: 0; margin-left: 0;
  font-family: var(--font-display); font-weight:500; font-size:.88rem; letter-spacing:-.01em;
  transition: max-width .38s cubic-bezier(.22,.61,.36,1), opacity .3s ease, margin-left .38s cubic-bezier(.22,.61,.36,1);
}
.npill:hover, .npill.is-here{
  background: linear-gradient(123deg, rgba(201,154,54,.55), rgba(226,178,76,.4));
  border-color: rgba(242,207,124,.5); color: #fff;
}
.npill:hover .npill__t, .npill.is-here .npill__t{
  max-width: 170px; opacity: 1; margin-left: 9px;
}
.hdr__cta{ display:none; }
@media (min-width: 1060px){ .hdr__cta{ display:inline-flex; padding:12px 22px; font-size:.9rem; } }

.burger{
  display:grid; place-items:center; width:46px; height:46px; gap:0;
  background: rgba(244,248,251,.05); border:1px solid var(--line-soft); cursor:pointer;
}
.burger span{ display:block; width:20px; height:2px; background: var(--txt-hi); margin-block:2.5px; }
@media (min-width: 1060px){ .burger{ display:none; } }

.mobmenu{
  position: fixed; inset: 0; z-index: 60; padding: 90px 28px 40px;
  background: rgba(10,10,11,.97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display:none;
}
.mobmenu.is-open{ display:block; }
.mobmenu__close{
  position:absolute; top:22px; right:22px; width:46px; height:46px;
  display:grid; place-items:center; background:none; border:1px solid var(--line);
  color: var(--txt-hi); font-size:1.1rem; cursor:pointer;
}
.mobmenu__link{
  display:block; padding: 17px 4px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display); font-weight:500;
  font-size: 1.35rem; letter-spacing:-.015em; color: var(--txt-hi);
}
.mobmenu__link:hover{ color: var(--blue-lt); }

/* ══════════ HERO PATTERNS ══════════ */
.hero{
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(130px, 16vh, 190px) clamp(64px, 9vh, 120px);
}
.hero__bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.hero__bg video{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(10,10,11,.94) 0%, rgba(10,10,11,.72) 34%, rgba(10,10,11,.3) 62%, rgba(10,10,11,.12) 80%),
    linear-gradient(180deg, rgba(10,10,11,.5) 0%, rgba(10,10,11,.12) 34%, rgba(10,10,11,.3) 70%, var(--bg) 100%);
}
.hero__inner{ position:relative; z-index:2; }
.hero .kick{ margin-bottom: clamp(18px, 2.4vw, 28px); }
.hero__lede{ margin-top: clamp(18px, 2.4vw, 28px); }
.hero .cta-set{ margin-top: clamp(26px, 3.4vw, 42px); }

/* sub-page hero: shorter, still photographic */
.hero--sub{ min-height: 78vh; min-height: 78svh; }

/* ══════════ EDITORIAL ROW LISTS — no card grids, hairlines only ══════════ */
.rows{ border-top: 1px solid var(--line); }
.row{
  display:grid; gap: 14px clamp(24px, 3.5vw, 64px);
  padding-block: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px){
  .row{ grid-template-columns: 92px minmax(0,.85fr) minmax(0,1.3fr); align-items:start; }
}
.row__ix{
  font-family: var(--font-mono); font-size:.82rem; font-weight:500;
  letter-spacing:.1em; color: var(--txt-dim); padding-top: 6px;
}
.row__t{ font-family: var(--font-display); font-weight:500; font-size: clamp(1.2rem, 1.8vw, 1.6rem); letter-spacing:-.015em; color: var(--txt-hi); }
.row__t small{
  display:block; margin-top:6px;
  font-family: var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color: var(--txt-blue);
}
.row__b p + p{ margin-top: 12px; }
.row__b .punch{ margin-top: 14px; font-family: var(--font-display); font-weight:500; color: var(--txt-hi); }
.row__cta{ margin-top: 16px; }

/* ══════════ GLASS CARD ══════════ */
.gcard{
  position:relative;
  background: rgba(244,248,251,.035);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: clamp(24px, 3vw, 40px);
}
.gcard--blue{ border-color: rgba(242,207,124,.35); background: rgba(226,178,76,.07); }

/* ══════════ STATEMENT BAND (photo background + big display line) ══════════ */
.band{ position:relative; overflow:hidden; }
.band__img{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; filter: saturate(.9); }
.band__scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(10,10,11,.72) 30%, rgba(10,10,11,.72) 70%, var(--bg) 100%);
}
.band .container{ z-index:2; }
.band__state{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.7rem, 3.6vw, 3rem); line-height:1.12; letter-spacing:-.02em;
  color: var(--txt-hi); max-width: 24ch;
}

/* ══════════ STACKED STATEMENT LINES (The Capital Is There…) ══════════ */
.stack-state p{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height:1.08; letter-spacing:-.022em;
  color: var(--txt-dim);
}
.stack-state p.on{ color: var(--txt-hi); }
.stack-state p.blue{ color: var(--txt-blue); }

/* ══════════ PERSONA TABS (Does This Sound Familiar?) ══════════ */
.ptabs{ display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); }
.ptabs::-webkit-scrollbar{ display:none; }
.ptab{
  appearance:none; background:none; border:0; cursor:pointer;
  padding: 14px 18px; white-space:nowrap;
  font-family: var(--font-display); font-weight:500; font-size: clamp(.95rem, 1.2vw, 1.1rem);
  letter-spacing:-.01em; color: var(--txt-dim);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s ease, border-color .2s ease;
}
.ptab:hover{ color: var(--txt-hi); }
.ptab[aria-selected="true"]{ color: var(--txt-hi); border-bottom-color: var(--blue-lt); }
.ppane{ padding-top: clamp(28px, 3.6vw, 48px); display:grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 960px){ .ppane{ grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); align-items:start; } }
.ppane[hidden]{ display:none; }
.ppane__body p + p{ margin-top: 13px; }
.ppane__aside{ border-left: 2px solid var(--blue); padding-left: clamp(18px, 2.4vw, 30px); }
.ppane__aside p{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height:1.3; letter-spacing:-.015em; color: var(--txt-hi);
}
.ppane__aside p + p{ margin-top: 14px; }
.ppane__aside .blue{ color: var(--txt-blue); }

/* ══════════ TM FEATURE ROWS (CapitalQ intelligence layer) ══════════ */
.tmgrid{ border-top: 1px solid var(--line); }
.tmrow{
  display:grid; gap: 8px clamp(24px, 3.5vw, 64px);
  padding-block: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px){ .tmrow{ grid-template-columns: minmax(0,.85fr) minmax(0,1.4fr); align-items:baseline; } }
.tmrow__t{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing:-.012em; color: var(--txt-hi);
}
.tmrow__t sup{ font-size:.55em; color: var(--txt-blue); }
.tmrow__b{ color: var(--txt); }

/* ══════════ CHECK LIST ══════════ */
.ticks{ display:grid; gap: 13px; }
.tick{ position:relative; padding-left: 30px; }
.tick::before{
  content:'✓'; position:absolute; left:0; top:.1em;
  width:19px; height:19px; display:grid; place-items:center;
  background: rgba(226,178,76,.18); border:1px solid rgba(242,207,124,.4);
  font-size:.68rem; color: var(--blue-lt);
}

/* ══════════ FORMS ══════════ */
.fld{ display:block; }
.fld + .fld{ margin-top: 18px; }
.frow{ display:grid; gap:18px; align-items:end; }
@media (min-width: 620px){ .frow{ grid-template-columns: 1fr 1fr; } }
.frow .fld + .fld{ margin-top: 0; }
.frow + .fld, .frow + .frow, .fld + .frow{ margin-top: 18px; }
.fld__lbl{
  display:block; margin-bottom: 9px;
  font-family: var(--font-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color: var(--txt-dim);
}
.fld__lbl i{ color: var(--blue-lt); font-style:normal; }
.fld__in{
  width:100%; padding: 14px 16px;
  background: rgba(244,248,251,.045); border: 1px solid var(--line);
  font-family: var(--font-base); font-size:.95rem; color: var(--txt-hi);
  transition: border-color .2s ease;
}
.fld__in::placeholder{ color: rgba(139,148,158,.65); }
.fld__in:focus{ outline:none; border-color: var(--blue-lt); }
.fld__area{ resize: vertical; min-height: 120px; }
.fld__selwrap{ position:relative; }
.fld__sel{ appearance:none; padding-right: 40px; cursor:pointer; }
.fld__caret{ position:absolute; right:16px; top:50%; transform:translateY(-50%); pointer-events:none; color: var(--txt-dim); font-size:.8rem; }
.fld--check{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:.88rem; color: var(--txt); }
.fld--check input{ margin-top:4px; accent-color: var(--blue); }
.is-bad .fld__in, .fld__in.is-bad{ border-color: rgba(248,113,113,.6); }

/* choice chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; display:inline-flex; cursor:pointer; }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip span{
  padding: 10px 15px; border: 1px solid var(--line);
  font-size:.85rem; color: var(--txt);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.chip:hover span{ border-color: rgba(242,207,124,.5); }
.chip input:checked + span{ border-color: var(--blue-lt); color: var(--blue-lt); background: rgba(226,178,76,.12); }

/* ══════════ FAQ ══════════ */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-block: clamp(18px, 2.2vw, 26px);
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing:-.012em; color: var(--txt-hi);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-family: var(--font-mono); color: var(--txt-blue); font-size:1.2rem; }
.faq details[open] summary::after{ content:'—'; }
.faq details > p{ padding-bottom: clamp(18px, 2.2vw, 26px); max-width: 72ch; }

/* ══════════ FOOTER ══════════ */
.ftr{ position:relative; overflow:hidden; border-top:1px solid var(--line-soft); padding-block: clamp(56px, 7vw, 96px) 0; }
.ftr__glow{
  position:absolute; z-index:0; top:0; left:50%; transform:translateX(-50%);
  width:min(1500px,150%); height: clamp(180px, 28vw, 380px); pointer-events:none;
  background: radial-gradient(56% 100% at 50% 0%, rgba(226,178,76,.16), transparent 74%);
}
.ftr__top{ position:relative; z-index:1; display:grid; gap: clamp(36px, 4.6vw, 64px); }
@media (min-width: 1000px){ .ftr__top{ grid-template-columns: minmax(0,1.1fr) minmax(0,2fr); align-items:start; } }
.ftr__word{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing:-.025em; color: var(--txt-hi);
}
.ftr__word b{ font-weight:600; color: var(--txt-blue); }
.ftr__tag{
  margin-top: 12px;
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1rem, 1.6vw, 1.24rem); color: var(--txt-blue);
}
.ftr__tag span{ display:block; }
.ftr__tag .w{ color: var(--txt-hi); }
.ftr__cols{ display:grid; gap: clamp(26px, 3vw, 40px) clamp(20px, 2.6vw, 40px); grid-template-columns: minmax(0,1fr); }
@media (min-width: 560px){ .ftr__cols{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ftr__h{
  font-family: var(--font-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color: var(--txt-dim);
  margin-bottom: 14px;
}
.ftr__list li + li{ margin-top: 9px; }
.ftr__link{ font-size:.92rem; color: var(--txt); opacity:.8; transition: color .2s ease, opacity .2s ease; }
.ftr__link:hover{ color: var(--blue-lt); opacity:1; }
.ftr__bot{
  position:relative; z-index:1;
  margin-top: clamp(44px, 5.5vw, 72px); padding-block: 22px;
  border-top: 1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap: 10px 28px; justify-content:space-between;
  font-size:.8rem; color: var(--txt-dim);
}

/* ══════════ FADES ══════════ */
[data-fade]{ opacity:0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
[data-fade].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-fade]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ══════════ 2026-08-27b — SINGLE-PAGE PIVOT: hero grid + pillars card,
   stats row, trusted-by marquee, CapitalQ velocity lanes.
   All ported from the approved V3 hero, weights capped at the site's 500 rule. */

/* hero: two columns from 980px — copy left, pillars card right */
.hero__grid{ display:grid; gap: clamp(28px, 4vw, 64px); align-items:center; }
@media (min-width: 980px){
  .hero__grid{ grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr); }
  .hero__card{ justify-self:end; }
}
.hero__main{ min-width:0; }

/* shared glass utility (the sub-page builds did glass per-component) */
.glass{
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  border: 1px solid rgba(255,255,255,.14);
}

.hero__card{
  width:100%; max-width:320px;
  padding: clamp(22px, 2vw, 28px);
  display:flex; flex-direction:column; gap:18px;
}
.pillar{ display:flex; align-items:center; gap:14px; }
.pillar__dot{
  width:9px; height:9px; flex-shrink:0;
  background: var(--blue-lt); box-shadow: 0 0 12px rgba(242,207,124,.7);
}
.pillar__label{
  font-family: var(--font-display); font-weight:500; color:#fff;
  font-size:.84rem; letter-spacing:.14em; text-transform:uppercase;
}
.pillar--d1{ opacity:.78; }
.pillar--d1 .pillar__dot{ background: rgba(255,255,255,.5); box-shadow:none; }
.pillar--d2{ opacity:.62; }
.pillar--d2 .pillar__dot{ background: rgba(255,255,255,.36); box-shadow:none; }
.pillar--d3{ opacity:.48; }
.pillar--d3 .pillar__dot{ background: rgba(255,255,255,.24); box-shadow:none; }

/* hero foot: stats + trusted-by, left-aligned to match this hero */
.hero__foot{ margin-top: clamp(34px, 4.6vw, 58px); }
.hstats{ display:flex; align-items:center; gap: clamp(20px, 3.4vw, 48px); }
.hstats__i{ display:flex; flex-direction:column; transition: transform .25s ease; }
.hstats__i:hover{ transform: translateY(-4px); }
.hstats__v{
  font-family: var(--font-display); font-weight:500; color:#fff;
  font-size: clamp(1.4rem, 2.6vw, 2.15rem); letter-spacing:-.02em; line-height:1;
}
.hstats__l{
  margin-top:7px; font-family: var(--font-mono); font-weight:500;
  font-size: clamp(.58rem, .8vw, .68rem);
  text-transform:uppercase; letter-spacing:.18em; color: var(--txt-dim);
}
.hstats__sep{ width:1px; height:34px; background: rgba(255,255,255,.14); }

.trusted{ margin-top: clamp(26px, 3.4vw, 42px); width:100%; max-width:760px; }
.trusted__h{
  font-family: var(--font-mono); font-weight:500; font-size:.68rem;
  color: var(--txt-dim); text-transform:uppercase; letter-spacing:.2em;
  margin-bottom:14px;
}
.tmq{
  position:relative; display:flex; overflow:hidden; min-width:0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.tmq__track{ display:flex; gap:44px; white-space:nowrap; padding-inline:16px; width:max-content; }
.tmq__track--rtl{ animation: tmqRtl 32s linear infinite; }
@keyframes tmqRtl{ from{ transform:translateX(0); } to{ transform:translateX(-33.333%); } }
.tmq:hover .tmq__track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .tmq__track--rtl{ animation:none; } }
.tmq__item{
  display:inline-flex; align-items:center; gap:9px; flex-shrink:0;
  opacity:.6; filter: grayscale(1);
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}
.tmq__item:hover{ opacity:1; filter:none; transform: scale(1.05); }
.tmq__item svg{ width:20px; height:20px; color: var(--blue-lt); }
.tmq__name{
  font-family: var(--font-display); font-weight:500; color:#fff;
  font-size:.98rem; letter-spacing:-.01em;
}

/* CapitalQ velocity lanes — full-bleed, opposite drifts, scroll-reactive.
   No padding on .vmq__track (it would sit outside the repeating unit and put a
   growing seam in the loop); the lane mask provides the edge breathing room. */
.conf__band{
  position:relative; z-index:1;
  margin-top: clamp(28px, 3.4vw, 46px);
  display:flex; flex-direction:column; gap: clamp(2px, .6vw, 10px);
}
.vmq{
  display:flex; overflow:hidden; white-space:nowrap; padding-block:4px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.vmq__track{
  display:flex; align-items:center; width:max-content; will-change:transform;
  gap: clamp(26px, 3.6vw, 60px);
}
.vmq__i{
  display:inline-flex; align-items:center; gap:.34em; flex-shrink:0;
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.3rem, 3.6vw, 2.9rem);
  letter-spacing:-.028em; line-height:1.22; color: var(--txt-hi);
}
.vmq__i--out{
  color: transparent;
  -webkit-text-stroke: 1px rgba(215,226,234,.44);
}
.vmq__tick{
  color: var(--blue-lt); font-size:.62em; -webkit-text-stroke:0;
  transform: translateY(-.04em);
}

/* ══════════ 2026-08-27d — PHOTO MARQUEE (ported from V3) ══════════
   Grayscale photography that blooms to colour on hover, two auto-drifting
   rows in opposite directions. The gap lives on the TILES (margin-right),
   never as track gap, so one copy is exactly trackWidth/3 and the -33.333%
   keyframe loops seamlessly. */
.marquee{
  background: var(--bg); overflow:hidden;
  padding: clamp(32px, 4.2vw, 58px) 0 clamp(28px, 3.4vw, 40px);
  display:flex; flex-direction:column; gap:12px;
}
.marquee__row{ overflow:hidden; }
.marquee__track{ display:flex; width:max-content; will-change: transform; }
.marquee__row:nth-child(1) .marquee__track{ animation: mqLTR 58s linear infinite; }
.marquee__row:nth-child(2) .marquee__track{ animation: mqRTL 64s linear infinite; }
.marquee__row:hover .marquee__track{ animation-play-state: paused; }
@keyframes mqLTR{ from{ transform: translateX(-33.333%); } to{ transform: translateX(0); } }
@keyframes mqRTL{ from{ transform: translateX(0); } to{ transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none !important; } }

.mq-tile{
  position:relative; flex:0 0 auto; width:420px; height:270px;
  margin-right:12px; overflow:hidden; background: var(--bg-soft);
  transition: transform .5s cubic-bezier(.25,.1,.25,1), box-shadow .5s ease;
}
@media (max-width:640px){ .mq-tile{ width:260px; height:170px; } }
.mq-tile img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(1) contrast(1.05) brightness(.82);
  transition: filter .55s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1);
}
.mq-tile::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(215,226,234,.08);
  transition: box-shadow .45s ease;
}
.mq-tile:hover{
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 46px rgba(0,0,0,.55), 0 0 40px 4px rgba(226,178,76,.3);
}
.mq-tile:hover img{ filter:none; transform: scale(1.07); }
.mq-tile:hover::after{ box-shadow: inset 0 0 0 1px rgba(242,207,124,.5); }

/* ══════════ 2026-08-30 — BRAND COLOURS + HEADER HIERARCHY (client) ══════════
   1. Wordmark: "FDN" in the DEEP blue, "Capital Partners" pure white.
   2. Section headers: the old blue kicker text is now the MAIN copy line
      (h-major), the old heading is the SUB copy line beneath it, and the
      [ NN ] index numbers are gone. This is the standing header pattern —
      apply it to any future section or page. */

.brand__word, .brand__word b{ color: var(--blue); }
.brand__sub{ color: #fff; }
.ftr__word, .ftr__word b{ color: var(--blue); }

.sechead .h-major{ margin-top: 0; }
.sechead__sub{
  margin-top: 14px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.08rem, 2.2vw, 1.55rem);
  line-height: 1.35; letter-spacing: -.012em;
  color: var(--txt-blue);
  max-width: 62ch;
}
.sechead__sub .tblue{ color: var(--txt-blue); }
.sechead--center .sechead__sub{ margin-inline: auto; }
.sechead .lede{ margin-top: 16px; }

/* ══════════ 2026-08-30b — SECTION 2: PERSONA CAROUSEL ══════════
   Built from the client's reference component. Left: springy vertical wheel
   of the three personas on the FDN-blue panel — auto-advances, click to jump,
   pauses while hovered, only while on screen. Right: the active persona's
   body copy over a dimmed B&W Lagos backdrop.
   STANDING RULE (client, 2026-08-30): 60/30/10 — 60% black grounds,
   30% white text, 10% FDN blue #E2B24C strictly for attention. */

.pcar{
  margin-top: clamp(28px, 3.6vw, 48px);
  display:grid; overflow:hidden; border:1px solid var(--line);
}
@media (min-width: 980px){
  .pcar{ grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr); }
}

/* the wheel — the section's 10% blue field */
.pcar__wheel{
  position:relative; background: var(--bg);   /* 2026-08-30c: client wants the wheel seen on black */
  overflow:hidden; min-height: 300px;
}
.pcar__wheel::before, .pcar__wheel::after{
  content:''; position:absolute; left:0; right:0; height:64px; z-index:3; pointer-events:none;
}
.pcar__wheel::before{ top:0; background: linear-gradient(180deg, var(--bg), rgba(10,10,11,0)); }
.pcar__wheel::after{ bottom:0; background: linear-gradient(0deg, var(--bg), rgba(10,10,11,0)); }
.pcar__list{ position:absolute; inset:0; }
.pcar__chip{
  position:absolute; top:50%; left:50%; height:52px; margin-top:-26px;
  display:inline-flex; align-items:center; white-space:nowrap;
  padding: 0 clamp(18px, 2.2vw, 30px);
  font-family: var(--font-mono); font-weight:500;
  font-size: clamp(.7rem, 1vw, .8rem);
  letter-spacing:.16em; text-transform:uppercase;
  background:transparent; color: rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.24); cursor:pointer;
  transition: transform .75s cubic-bezier(.3,1.25,.35,1), opacity .5s ease,
              background .45s ease, color .45s ease, border-color .45s ease;
  will-change: transform;
}
/* no-JS fallback spread; render() takes over immediately when JS runs */
.pcar__chip:nth-child(1){ transform: translate(-50%, 0); }
.pcar__chip:nth-child(2){ transform: translate(-50%, 76px); opacity:.7; }
.pcar__chip:nth-child(3){ transform: translate(-50%, -76px); opacity:.7; }
.pcar__chip:hover{ border-color: rgba(255,255,255,.55); color:#fff; }
.pcar__chip.is-on{ background:#fff; color: var(--blue); border-color:#fff; }

/* the stage — 60% black over the photograph, copy in white */
.pcar__stage{ position:relative; overflow:hidden; min-height: 340px; }
/* 2026-08-30c: shared backdrop removed — each persona's highlighted statement
   now lives inside its own image frame (.pframe); body copy sits on black */
.pcar__panes{ position:relative; z-index:1; display:grid; padding: clamp(26px, 3.6vw, 54px); }
.pcar__pane{
  grid-area: 1 / 1; grid-template-columns: 1fr; align-content:start; padding-top:0;
  opacity:0; transform: translateY(16px); visibility:hidden;
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1), visibility 0s linear .55s;
}
.pcar__pane.is-on{
  opacity:1; transform:none; visibility:visible;
  transition-delay: .12s, .12s, 0s;
}
.pcar__pane .ppane__aside{ margin-top: 26px; }
/* 10% rule: emphasis lines carry the FDN blue */
.pcar__pane .ppane__aside .blue{ color: var(--blue-lt); }
.fdnblue{ color: var(--blue); }

/* ══════════ 2026-08-30c — SECTION 2 SCROLL-SCRUB + FRAMES, SECTION 3 LYRA PANEL ══════════
   Client corrections: the persona wheel advances WITH SCROLL (not on a timer) —
   the section pins while the wrapper scrolls through three steps; each
   persona's highlighted statement sits inside its own image frame; wheel on
   black for review. Section 3 rebuilt on the Lyra reference: photograph under
   a blue glow carrying the section header, statement left / body right below. */

.pcar-scrub{ position:relative; }
@media (min-width: 980px){
  .pcar-scrub{ height: 280vh; }
  .pcar-scrub .pcar{ position:sticky; top: clamp(84px, 11vh, 120px); }
}

.pframe{
  position:relative; overflow:hidden; margin-top: 26px;
  border:1px solid var(--line);
  min-height: clamp(210px, 26vw, 300px);
  display:flex; align-items:flex-end;
}
.pframe__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pframe__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,11,.14), rgba(10,10,11,.6) 55%, rgba(10,10,11,.9) 100%);
}
.pframe .ppane__aside{ position:relative; z-index:1; margin: clamp(18px, 2.6vw, 30px); }

/* ── the Lyra panel (section 3) ── */
.lyra{
  position:relative; overflow:hidden; border:1px solid var(--line);
  min-height: clamp(300px, 44vw, 520px);
  display:flex; align-items:flex-end;
}
.lyra__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 55%; filter:saturate(.9); }
.lyra__glow{
  position:absolute; inset:0;
  background: radial-gradient(120% 100% at 50% -20%,
    rgba(242,207,124,.66), rgba(226,178,76,.34) 45%, rgba(226,178,76,.1) 66%, transparent 80%);
}
.lyra__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,11,.16), rgba(10,10,11,.4) 55%, rgba(10,10,11,.93) 100%);
}
.lyra__head{ position:relative; z-index:1; margin:0; padding: clamp(22px, 3.4vw, 48px); max-width: 940px; }

.lyra__below{ display:grid; gap: clamp(24px, 4vw, 64px); margin-top: clamp(28px, 3.6vw, 46px); }
@media (min-width: 900px){ .lyra__below{ grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.lyra__left p{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.35rem, 2.6vw, 2.05rem); line-height:1.28; letter-spacing:-.018em;
  color: var(--txt-hi);
}
.lyra__left p + p{ margin-top: 14px; }
.lyra__left .blue{ color: var(--blue-lt); }
.lyra__right{ align-self:center; }
.lyra__right p + p{ margin-top: 12px; }

/* ══════════ 2026-08-30d — SECTION 2 SCROLL-REVEAL LIST + SECTION 3 CINEMA ══════════
   Client replaced the wheel with a ScrollRevealContent reference: numbered
   steps 01 Mandate / 02 Business / 03 Investor down the left, each with a
   vertical progress rail that FILLS as its third of the scroll passes; persona
   titles FDN-blue bold, highlighted statements white bold beneath; the
   remaining body copy rides the right stage over its persona's photo in
   black and white. Section 3 panel: curved (explicit client exception),
   B&W cinematic, text punched up. */

.srev{ position:relative; margin-top: clamp(28px, 3.6vw, 48px); }
@media (min-width: 980px){ .srev{ height: 300vh; } }
.srev__pin{ display:flex; flex-direction:column; justify-content:center; }
@media (min-width: 980px){
  .srev__pin{ position:sticky; top:0; height:100vh; }
}
.srev__grid{ display:grid; gap: clamp(28px, 4vw, 72px); width:100%; }
@media (min-width: 980px){
  .srev__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items:center; }
}

/* left: the numbered steps */
.srev__list{ display:flex; flex-direction:column; gap: clamp(26px, 3.4vw, 44px); }
.srev__num{
  font-family: var(--font-mono); font-weight:500; font-size:.82rem;
  letter-spacing:.18em; color: var(--txt-dim); margin-bottom:10px; margin-left:2px;
}
.srev__row{ display:flex; gap: clamp(16px, 2vw, 26px); }
.srev__rail{ position:relative; width:2px; flex:0 0 2px; background: rgba(255,255,255,.12); }
.srev__fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:#fff; transition: height .18s linear;
}
.srev__txt{ min-width:0; transition: opacity .4s ease; opacity:.45; }
.srev__item.is-on .srev__txt{ opacity:1; }
.srev__title{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height:1.2; letter-spacing:-.015em;
  color: var(--blue);                    /* the header is blue (client) */
  margin-bottom: 10px;
}
.srev__desc p{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1rem, 1.6vw, 1.28rem); line-height:1.35; letter-spacing:-.01em;
  color: var(--txt-hi);                  /* highlighted statements: white, bold */
}
.srev__desc p + p{ margin-top: 8px; }

/* right: body copy over the persona's B&W photograph */
.srev__stage{ position:relative; }
@media (min-width: 980px){ .srev__stage{ height: min(72vh, 640px); } }
.srev__pane{
  position:relative; overflow:hidden; border:1px solid var(--line);
  opacity:0; visibility:hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
@media (min-width: 980px){
  .srev__pane{ position:absolute; inset:0; }
}
@media (max-width: 979px){
  .srev__pane{ opacity:1; visibility:visible; position:relative; }
  .srev__pane + .srev__pane{ margin-top:18px; }
  .srev__fill{ height:100% !important; }
  .srev__txt{ opacity:1; }
}
.srev__pane.is-on{ opacity:1; visibility:visible; transition-delay: .08s, 0s; }
.srev__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: grayscale(1) contrast(1.06) brightness(.44);   /* black and white in nature */
}
.srev__scrim{
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(10,10,11,.9) 0%, rgba(10,10,11,.72) 55%, rgba(10,10,11,.45) 100%);
}
.srev__body{
  position:relative; z-index:1;
  padding: clamp(22px, 3vw, 44px);
  display:flex; flex-direction:column; justify-content:center; height:100%;
}
.srev__body p{ color: var(--txt); max-width: 56ch; }
.srev__body p + p{ margin-top: 12px; }

/* ── section 3 refinements: cinematic B&W, text pops ── */
.lyra__img{ filter: grayscale(1) contrast(1.12) brightness(.72); }
.lyra__scrim{
  background: linear-gradient(180deg, rgba(10,10,11,.2), rgba(10,10,11,.5) 50%, rgba(10,10,11,.96) 100%);
}
.lyra__head .h-major{
  font-size: clamp(2.3rem, 5vw, 4rem);
  text-shadow: 0 2px 26px rgba(0,0,0,.6);
}
.lyra__head .sechead__sub, .lyra__head .h-sub{ text-shadow: 0 1px 18px rgba(0,0,0,.65); }

/* ══════════ 2026-08-30e — "HOW CAN WE HELP YOU?" WHITE SHOWCASE ══════════
   Client's FeatureShowcase reference: left = the section's voice; right = a
   tall image-card holder with NUMBERED tab controls (01/02/03) — each number
   brings up that side of capital (image + title + copy + its own CTA on the
   card). Whole section white-themed at his request ("let me first see how it
   will look"). 60/30/10 inverts here: white ground, near-black text, FDN blue
   still the attention colour. */

.sec--light{ background:#FFFFFF; }
.sec--light .h-major{ color:#0B0C0E; }
.sec--light .sechead__sub{ color: var(--blue); }
.sec--light .lede{ color:#3A4149; }
.sec--light .h-sub{ color:#0B0C0E; }

.fshow{ display:grid; gap: clamp(28px, 4vw, 72px); }
@media (min-width: 980px){
  .fshow{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items:center; }
}

.fshow__card{
  position:relative; overflow:hidden;
  border:1px solid rgba(11,12,14,.14);
  min-height: clamp(430px, 46vw, 640px);
  background: var(--bg);
}
.fshow__tab{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.fshow__tab.is-on{ opacity:1; visibility:visible; transition-delay: .06s, 0s; }
.fshow__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter: saturate(.95) brightness(.6);
}
.fshow__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,11,.16), rgba(10,10,11,.5) 52%, rgba(10,10,11,.93) 100%);
}
.fshow__content{
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(22px, 3vw, 42px);
  padding-bottom: clamp(84px, 9vw, 104px);   /* clears the number bar */
}
.fshow__t{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height:1.16; letter-spacing:-.015em;
  color:#fff; display:flex; flex-direction:column-reverse; gap:8px;
}
.fshow__t small{
  font-family: var(--font-mono); font-weight:500; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color: var(--blue-lt);
}
.fshow__content > p{ color: rgba(255,255,255,.9); max-width:54ch; margin-top:12px; }
.fshow__cta{ margin-top:18px; }

.fshow__nav{
  position:absolute; left:0; right:0; bottom:16px; z-index:2;
  display:flex; justify-content:center; pointer-events:none;
}
.fshow__navin{
  display:flex; gap:6px; padding:6px; pointer-events:auto;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border:1px solid rgba(11,12,14,.12);
}
.fshow__numbtn{
  font-family: var(--font-mono); font-weight:500; font-size:.8rem;
  letter-spacing:.14em; padding: 9px 16px;
  background:transparent; color:#3A4149; border:0; cursor:pointer;
  transition: background .3s ease, color .3s ease;
}
.fshow__numbtn:hover{ color:#0B0C0E; }
.fshow__numbtn.is-on{ background: var(--blue); color:#fff; }

/* ══════════ 2026-08-30f — GLOW RING (all cards) + SECTION 2 TIGHTENED ══════════
   Client's GlowingShadow reference, FDN-ified: a blue light travels around
   every card's outline; on hover the full outline lights solid and the halo
   blooms (the old .glow::after still does the halo — the ring rides ::before,
   drawn as a masked 2px frame INSIDE the card so overflow:hidden can't clip
   it). No rainbow hue-cycling — 60/30/10 keeps it FDN blue. */

@property --gring-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.gring::before{
  content:''; position:absolute; inset:0; z-index:6; pointer-events:none;
  padding:2px;
  background: conic-gradient(from var(--gring-a),
    transparent 0deg,
    transparent 236deg,
    rgba(242,207,124,.55) 282deg,
    #F2CF7C 306deg,
    #E2B24C 322deg,
    rgba(226,178,76,.4) 344deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: gringSpin 4.5s linear infinite;
  opacity:.85;
  transition: opacity .3s ease;
}
@keyframes gringSpin{ to{ --gring-a: 360deg; } }
.gring:hover::before{
  background:
    conic-gradient(from var(--gring-a),
      rgba(242,207,124,.75) 0deg, #E2B24C 90deg, rgba(242,207,124,.75) 180deg,
      #E2B24C 270deg, rgba(242,207,124,.75) 360deg);
  opacity:1;
}
@media (prefers-reduced-motion: reduce){
  .gring::before{ animation:none; }
}

/* section 2 sits tight under its header so header + steps read as ONE unit */
#familiar .sechead{ margin-bottom: clamp(16px, 2.2vw, 28px); }
.srev{ margin-top: 0; }

/* ══════════ 2026-08-30g — ADVANTAGE BENTO, NAME GLOBE, CQ CARDS, INTEL MAP ══════════
   One client brief, four builds:
   1) Section 2: header + closing now live INSIDE the sticky pin — one unit.
   2) The Advantage: intro as one paragraph; the six advantages as a bento
      (2 wide + 3 + 1 full-width), photo cards with blurred plates.
   3) The name reveal: copy left, animated connection globe right, GateQ-style
      blue glow; CapitalQ wordmark = Capital white / Q(tm) blue.
   4) CapitalQ: Q.1/Q.2 as colour-change hover cards; "One Standard" line blue;
      lanes now solid blue (no outlines) with dot markers; the intelligence
      layer rides a world map with pulsing nodes (ported from GateQ #rank). */

/* ── 1. section 2 in one pinned unit ── */
.srev__head{ margin-bottom: clamp(14px, 2vh, 24px); }
.srev__head .h-major{ font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.srev__tail{ margin: clamp(14px, 2.2vh, 26px) 0 0; }
.srev__tail .h-mid{ font-size: clamp(1.2rem, 2vw, 1.7rem); }
@media (min-width: 980px){
  .srev__stage{ height: min(48vh, 440px); }
  .srev__list{ gap: clamp(16px, 2.4vh, 30px); }
  .srev__title{ font-size: clamp(1.15rem, 1.9vw, 1.5rem); }
  .srev__desc p{ font-size: clamp(.95rem, 1.4vw, 1.15rem); }
}

/* ── 2. the advantage bento ── */
.adv-grid{
  display:grid; gap: clamp(14px, 1.8vw, 24px);
  grid-template-columns: 1fr;
  margin-top: clamp(10px, 1.6vw, 20px);
}
@media (min-width: 900px){
  .adv-grid{ grid-template-columns: repeat(6, 1fr); }
  .adv-card--3{ grid-column: span 3; }
  .adv-card--2{ grid-column: span 2; }
  .adv-card--6{ grid-column: span 6; }
}
.adv-card{
  position:relative; overflow:hidden;
  background: var(--bg); border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.adv-card__media{ position:relative; height: clamp(170px, 20vw, 250px); overflow:hidden; }
.adv-card__media img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(.9) brightness(.72);
  transition: transform .6s cubic-bezier(.25,.1,.25,1), filter .6s ease;
}
.adv-card:hover .adv-card__media img{ transform: scale(1.06); filter: saturate(1.05) brightness(.85); }
.adv-card__plate{
  position:relative; z-index:1; flex:1;
  margin-top: -56px; padding: clamp(18px, 2.2vw, 28px);
  background: rgba(10,10,11,.6);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
}
.adv-card__eyebrow{
  font-family: var(--font-mono); font-weight:500; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color: var(--txt-blue);
  margin-bottom: 10px;
}
.adv-card__t{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height:1.2; letter-spacing:-.014em;
  color: var(--txt-hi); margin-bottom: 10px;
}
.adv-card__d p{ font-size:.95rem; color: var(--txt); }
.adv-card__d p + p{ margin-top: 9px; }
.adv-card__d .punch{
  font-family: var(--font-display); font-weight:500; color: var(--txt-blue);
}
/* the wide closer: media becomes the full ground, plate rides the left */
@media (min-width: 900px){
  .adv-card--6{ min-height: 240px; display:block; }
  .adv-card--6 .adv-card__media{ position:absolute; inset:0; height:100%; }
  .adv-card--6 .adv-card__plate{
    position:relative; margin-top:0; max-width: 620px; height:100%;
    border-top:0; border-right:1px solid var(--line-soft);
    display:flex; flex-direction:column; justify-content:center;
  }
}

/* ── 3. the name reveal: glow + globe ── */
.nameglow{ position:relative; margin-top: clamp(48px, 6vw, 88px); }
.nameglow__halo{
  position:absolute; inset:-20% -30%; pointer-events:none;
  background: radial-gradient(58% 66% at 68% 50%, rgba(226,178,76,.26), rgba(226,178,76,.08) 55%, transparent 78%);
}
.nameglow__grid{ position:relative; display:grid; gap: clamp(28px, 4vw, 64px); align-items:center; }
@media (min-width: 940px){
  .nameglow__grid{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.cqname{
  margin-top: 10px;
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height:1; letter-spacing:-.025em;
  color:#fff;
}
.qblue{ color: var(--blue); }
.cqword .qblue, .cqname .qblue{ color: var(--blue); }
.nameglow__globe{ position:relative; max-width: 460px; margin-inline:auto; width:100%; }
.nameglow__globe svg{ width:100%; height:auto; display:block; }
.fdn-globe__spin{ animation: fdnGlobeSpin 14s linear infinite; }
@keyframes fdnGlobeSpin{ from{ transform: translateX(0); } to{ transform: translateX(-320px); } }
.fdn-globe__dot{ fill: var(--blue-lt); animation: fdnDotPulse 2.8s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes fdnDotPulse{
  0%{ opacity:.4; } 30%{ opacity:1; } 100%{ opacity:.4; }
}
.fdn-globe__arc{
  stroke-dasharray: 8 10;
  animation: fdnArcFlow 2.6s linear infinite;
  opacity:.8;
}
.fdn-globe__arc--2{ animation-duration: 3.4s; animation-direction: reverse; opacity:.6; }
@keyframes fdnArcFlow{ to{ stroke-dashoffset: -72; } }
@media (prefers-reduced-motion: reduce){
  .fdn-globe__spin, .fdn-globe__dot, .fdn-globe__arc{ animation:none; }
}

/* ── 4a. CapitalQ colour-change cards ── */
.cqcards{ display:grid; gap: clamp(16px, 2vw, 26px); grid-template-columns: 1fr; }
@media (min-width: 940px){ .cqcards{ grid-template-columns: 1fr 1fr; } }
.cqcard{ position:relative; overflow:hidden; border:1px solid var(--line); min-height: 460px; display:flex; }
.cqcard__bg{
  position:absolute; inset:0; background-size:cover;
  filter: grayscale(1) brightness(.6);
  transition: transform .6s cubic-bezier(.25,.1,.25,1), filter .6s ease;
}
.cqcard:hover .cqcard__bg{ transform: scale(1.08); filter: grayscale(0) brightness(.66); }
.cqcard__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,11,.3), rgba(10,10,11,.62) 45%, rgba(10,10,11,.94) 100%);
}
.cqcard__arrow{
  position:absolute; top: clamp(16px, 2vw, 26px); right: clamp(16px, 2vw, 26px); z-index:2;
  width:34px; height:34px; color:#fff; opacity:.75;
  transition: transform .5s cubic-bezier(.25,.1,.25,1), opacity .3s ease, color .3s ease;
}
.cqcard__arrow svg{ width:100%; height:100%; }
.cqcard:hover .cqcard__arrow{ transform: rotate(-45deg); opacity:1; color: var(--blue-lt); }
.cqcard__body{
  position:relative; z-index:1; align-self:flex-end; width:100%;
  padding: clamp(20px, 2.6vw, 36px);
}
.cqcard__ix{
  font-family: var(--font-mono); font-weight:500; font-size:.78rem;
  letter-spacing:.2em; color: var(--txt-blue); margin-bottom: 10px;
}
.cqcard__t{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.25rem, 2vw, 1.65rem); line-height:1.18; letter-spacing:-.015em;
  color:#fff; display:flex; flex-direction:column-reverse; gap:7px; margin-bottom: 12px;
}
.cqcard__t small{
  font-family: var(--font-mono); font-weight:500; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color: var(--blue-lt);
}
.cqcard__body > p{ color: rgba(255,255,255,.88); font-size:.95rem; }
.cqcard__body > p + p{ margin-top: 9px; }
.cqcard__body .punch{ font-family: var(--font-display); font-weight:500; color: var(--txt-blue); }
.cqcard__cta{ margin-top: 16px; }

/* ── 4b. lanes: solid blue instead of outlines; dots instead of ticks ── */
.vmq__i--out{
  -webkit-text-stroke: 0;
  color: var(--blue);
}
.vmq__tick{ font-size: .42em; transform: translateY(-.1em); }

/* ── 4c. the intelligence layer on the world map (from GateQ #rank) ── */
.intel{ position:relative; overflow:hidden; margin-top: clamp(48px, 6vw, 80px); padding-block: clamp(36px, 4.5vw, 64px); }
.intel__map{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image: radial-gradient(ellipse 82% 78% at 50% 46%, #000 24%, rgba(0,0,0,.6) 60%, rgba(0,0,0,0) 88%);
          mask-image: radial-gradient(ellipse 82% 78% at 50% 46%, #000 24%, rgba(0,0,0,.6) 60%, rgba(0,0,0,0) 88%);
}
.intel__mapimg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  opacity:.34; filter: grayscale(1) invert(1) contrast(.85) brightness(.7);
}
.intel__mapscrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(10,10,11,0) 22%, rgba(10,10,11,0) 78%, var(--bg) 100%),
    radial-gradient(ellipse 60% 90% at 18% 50%, rgba(10,10,11,.9) 0%, rgba(10,10,11,.5) 48%, rgba(10,10,11,0) 80%);
}
.intel__nodes{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.intel-node__core{ fill: var(--blue); opacity:.95; }
.intel-node__halo{
  fill: var(--blue-lt); opacity:0;
  transform-box: fill-box; transform-origin: center;
  animation: intelPulse 5.4s cubic-bezier(.25,.6,.3,1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes intelPulse{
  0%{ opacity:.55; transform: scale(.26); }
  70%{ opacity:0; transform: scale(1); }
  100%{ opacity:0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){ .intel-node__halo{ animation:none; } }
.intel__grid{ position:relative; z-index:1; display:grid; gap: clamp(24px, 3.5vw, 56px); align-items:start; }
@media (min-width: 980px){
  .intel__grid{ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .intel__grid .sechead{ position:sticky; top: clamp(90px, 12vh, 130px); }
}
.intel .tmgrid{ border-top: 1px solid var(--line); }
.intel .tmrow{
  background: rgba(10,10,11,.55);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  padding-inline: clamp(12px, 1.6vw, 20px);
}

/* ══════════ 2026-08-30h — UNIFORM HEADERS, BODY-COPY SCALE, ALIGNMENT PASS ══════════
   Client corrections: every section header matches the section-3 size; body
   copy everywhere matches the bento description size (.95rem); section 2's
   stage copy anchors to the RIGHT of its column; bento is 2-2-2; CQ cards
   lose their Q.x labels and align tops + CTA baselines; "One Standard" back
   to white, centered; intelligence layer restyled like GateQ's "Why GateQ?"
   (glow + minimal numbered rows); the earth is now a real dotted spinning
   globe on canvas (continents sampled from worldmap.jpg). */

/* one header size, sitewide (= the section-3 size) */
.h-major{ font-size: clamp(2.3rem, 5vw, 4rem); }
.srev__head .h-major{ font-size: clamp(2.3rem, 5vw, 4rem); }

/* section 2: stage copy rides the RIGHT side of its column */
.srev__body{ align-items: flex-end; text-align: right; }
.srev__body p{ max-width: 46ch; }

/* section 2 <-> 3 breathing + top padding check */
#familiar.sec{ padding-top: clamp(28px, 3.6vw, 56px); padding-bottom: clamp(10px, 1.4vw, 20px); }
#problem.sec{ padding-top: clamp(32px, 4vw, 56px); }

/* body copy matches the bento description size, sitewide */
.lede{ font-size: clamp(.92rem, 1vw, 1rem); }
.h-sub{ font-size: clamp(1.02rem, 1.4vw, 1.24rem); }
.ppane__body p, .lyra__right p, .cqcard__body > p,
.fshow__content > p, .srev__body p{ font-size: .95rem; }

/* bento 2-2-2: nothing extra — all six cards are span-3 now */

/* CQ cards: tops align, CTAs align */
.cqcard{ min-height: clamp(430px, 34vw, 520px); }
.cqcard__body{
  align-self: flex-end; width: 100%;
  height: clamp(330px, 27vw, 400px);
  display: flex; flex-direction: column; justify-content: flex-start;
}
.cqcard__cta{ margin-top: auto; padding-top: 12px; }

/* intelligence layer, "Why GateQ?" grammar: glow + minimal numbered rows */
.intel__glow{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 74% 38%, rgba(226,178,76,.16), transparent 68%),
    radial-gradient(40% 32% at 78% 90%, rgba(226,178,76,.07), transparent 72%);
}
.irows{ margin-top: clamp(18px, 2.4vw, 30px); border-top: 1px solid var(--line); }
.irow{
  display: grid;
  grid-template-columns: clamp(40px, 5vw, 64px) minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 8px clamp(18px, 2.6vw, 44px); align-items: baseline;
  padding: clamp(14px, 1.8vw, 22px) clamp(10px, 1.4vw, 18px);
  border-bottom: 1px solid var(--line);
  background: rgba(10,10,11,.42);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.irow__ix{
  font-family: var(--font-mono); font-weight: 500; font-size: .76rem;
  letter-spacing: .18em; color: var(--txt-dim);
}
.irow__t{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.85rem); line-height: 1.15;
  letter-spacing: -.016em; color: var(--txt-hi);
}
.irow__d{ font-size: .95rem; color: var(--txt); }
@media (max-width: 760px){
  .irow{ grid-template-columns: clamp(34px, 8vw, 44px) 1fr; }
  .irow__d{ grid-column: 2; }
}

/* the earth */
.fdn-earth{
  width: 100%; max-width: 480px; aspect-ratio: 1;
  display: block; margin-inline: auto;
}

/* ══════════ 2026-08-30i — ALIGNMENT FIXES + INTEL PHOTO BACKGROUND ══════════
   Client: stage copy back to LEFT-aligned; the "Different Needs. One Place to
   Start." block belongs in the RIGHT COLUMN of section 2's grid, left-aligned
   (not centered). CQ cards: text zones start high (CTAs never clipped), CTAs
   share one bottom line; the hover arrow meant nothing — removed. The
   intelligence layer gets a real photo background (dark boardroom, Pexels
   28506813, vetted) — the inverted world map rendered near-invisible. */

.srev__body{ align-items: flex-start; text-align: left; }

.srev__tail{ margin: 0; text-align: left; }
@media (min-width: 980px){ .srev__tail{ grid-column: 2; } }
.srev__tail .h-mid{ font-size: clamp(1.15rem, 1.9vw, 1.6rem); }
.srev__tail .lede{ margin-top: 8px; }

/* cq cards: full-height text zone, generous image reveal up top,
   CTA pinned to the shared bottom line, nothing ever clipped */
.cqcard{ min-height: clamp(540px, 42vw, 640px); }
.cqcard__body{
  align-self: stretch; height: auto;
  justify-content: flex-start;
  padding-top: clamp(120px, 13vw, 180px);
}

/* intelligence layer: photo ground instead of the invisible map */
.intel__mapimg{
  opacity: .5;
  filter: brightness(.62) saturate(.85);
  object-position: 50% 45%;
}

/* ══════════ 2026-08-30j — MEET BENTO, KNOWLEDGE BENTO, SQUEEZE CAROUSEL,
   CLOSE SPLIT + MEET PANEL, spacing/centering corrections ══════════ */

/* section 2: tail hugs the stage; next section closes in */
.srev__grid{ row-gap: clamp(10px, 1.6vh, 18px); }
#familiar.sec{ padding-bottom: 0; }
#problem.sec{ padding-top: clamp(20px, 2.6vw, 40px); }

/* ── MEET WITH CONTEXT: light bento ── */
#first-meeting.sec--light{ background:#F5F6F8; }
.mbento{ display:grid; gap: clamp(14px, 1.8vw, 22px); grid-template-columns: 1fr; margin-top: clamp(10px,1.4vw,18px); }
@media (min-width: 900px){
  .mbento{ grid-template-columns: repeat(4, 1fr); }
  .mcard--hero{ grid-column: span 2; grid-row: span 2; }
  .mcard--soft{ grid-column: span 2; }
  .mcard--wide{ grid-column: span 4; }
}
.mcard{
  position:relative; overflow:hidden; padding: clamp(22px, 2.6vw, 40px);
  background:#fff; border:1px solid rgba(11,12,14,.12);
  display:flex; flex-direction:column; justify-content:center;
}
.mcard--hero{ justify-content:space-between; min-height: 380px; }
.mcard__star{
  position:absolute; right:-70px; bottom:-70px; width: 300px; height: 300px;
  fill:#EDF0F5; transition: transform 1.6s ease-in;
}
.mcard--hero:hover .mcard__star{ transform: rotate(180deg); }
.mcard__in{ position:relative; z-index:1; }
.mcard__chip{
  display:inline-block; padding: 8px 14px; margin-bottom: 18px;
  background: var(--grad-cta, var(--blue)); color:#fff;
  font-family: var(--font-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}
.mcard__big{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height:1.1; letter-spacing:-.02em;
  color:#0B0C0E;
}
.mcard__desc{ margin-top: 16px; font-size:.95rem; color:#3A4149; max-width: 46ch; }
.mcard--blue{ background: var(--grad-cta, var(--blue)); border:none; }
.mcard--blue .mcard__mid{ color:#fff; }
.mcard--ink{ background:#0B0C0E; border:none; }
.mcard--ink .mcard__mid{ color:#F4F8FB; }
.mcard__mid{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height:1.3; letter-spacing:-.014em;
}
.mcard--soft{ background:#EDF0F5; border:none; }
.mcard__body{ font-size:.95rem; color:#3A4149; }
.mcard--wide{
  background: var(--grad-cta, var(--blue)); border:none;
  flex-direction:row; align-items:center; justify-content:space-between;
  gap: clamp(18px, 3vw, 44px); text-decoration:none; cursor:pointer;
}
.mcard__widet{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing:-.018em; color:#fff;
}
.mcard__widet-b{ color: rgba(255,255,255,.75); }
.mcard__widesub{ margin-top: 8px; font-size:.95rem; color: rgba(255,255,255,.78); max-width: 60ch; }
.mcard__widecta{
  margin-top: 14px; font-family: var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
}
.mcard__circle{
  flex:none; width: clamp(64px, 6vw, 84px); aspect-ratio:1;
  display:grid; place-items:center; background:#fff; color: var(--blue);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  transition: transform .45s cubic-bezier(.25,.1,.25,1);
}
.mcard--wide:hover .mcard__circle{ transform: translateX(6px); }

/* ── KNOWLEDGE: colourful icon bento ── */
.kbento{ display:grid; gap: clamp(14px, 1.8vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 900px){
  .kbento{ grid-template-columns: repeat(3, 1fr); }
  .kcard2--wide{ grid-column: span 2; }
}
.kcard2{
  min-height: 250px; padding: clamp(22px, 2.6vw, 36px);
  display:flex; flex-direction:column; justify-content:flex-end; gap: 12px;
  transition: transform .3s cubic-bezier(.25,.1,.25,1), box-shadow .3s ease;
}
.kcard2:hover{ transform: translateY(-4px) rotate(.6deg); }
.kcard2--blue{ background: var(--grad-cta, var(--blue)); }
.kcard2--blue .kcard2__t{ color:#fff; }
.kcard2--blue .kcard2__d{ color: rgba(255,255,255,.82); }
.kcard2--blue .kcard2__ico{ background: rgba(255,255,255,.16); color:#fff; }
.kcard2--white{ background:#F4F8FB; }
.kcard2--white .kcard2__t{ color:#0B0C0E; }
.kcard2--white .kcard2__d{ color:#3A4149; }
.kcard2--white .kcard2__ico{ background: rgba(226,178,76,.1); color: var(--blue); }
.kcard2__ico{ width: 46px; height: 46px; padding: 11px; margin-bottom:auto; }
.kcard2__ico svg{ width:100%; height:100%; }
.kcard2__t{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem); letter-spacing:-.015em; line-height:1.2;
}
.kcard2__d{ font-size:.95rem; }

/* ── THE ADVANTAGE: squeeze carousel ── */
.sqz{ margin-top: clamp(10px, 1.6vw, 20px); }
.sqz__arrows{ display:flex; justify-content:flex-end; gap: 8px; margin-bottom: 14px; }
.sqz__btn{
  width: 38px; height: 38px; display:grid; place-items:center;
  background: var(--blue); color:#fff; border:0; cursor:pointer;
  transition: opacity .2s ease;
}
.sqz__btn:hover{ opacity:.85; }
.sqz__btn svg{ width:16px; height:16px; }
.sqz__view{
  display:flex; gap: 12px; overflow:hidden;
  height: clamp(220px, 30vw, 340px); width:100%;
}
.sqz__panel{
  position:relative; overflow:hidden; flex:none;
  border:0; padding:0; background: var(--bg-soft); cursor:pointer;
  transition: width .9s cubic-bezier(.16,1,.3,1);
  height:100%;
}
.sqz__img{
  position:absolute; inset-block:0; left:50%; transform: translateX(-50%);
  height:100%; width: var(--sqz-hero, 600px); max-width:none; object-fit:cover;
  filter: saturate(.92) brightness(.8);
}
.sqz__shade{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,11,.06), rgba(10,10,11,.55) 88%);
}
.sqz__tag{
  position:absolute; left: 18px; bottom: 14px; z-index:1;
  font-family: var(--font-mono); font-weight:500; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:#fff;
  opacity:0; transition: opacity .5s ease;
  white-space:nowrap;
}
.sqz__panel.is-open .sqz__tag{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .sqz__panel{ transition:none; } }
.sqz__copy{ display:grid; margin-top: clamp(18px, 2.4vw, 28px); }
.sqz__slide{
  grid-area: 1 / 1; opacity:0; visibility:hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.sqz__slide.is-on{ opacity:1; visibility:visible; transition-delay:.08s, 0s; }
.sqz__text{ font-size:.98rem; line-height:1.6; color: var(--txt-dim); max-width: 78ch; }
.sqz__text strong{ font-weight:500; color: var(--txt-hi); font-family: var(--font-display); }
.sqz__text .punch{ color: var(--txt-blue); }

/* ── CAPITALQ corrections ── */
#capitalq .sechead--center .sechead__sub{ margin-inline:auto; }
#capitalq .sechead--center .lede{ margin-inline:auto; }
#capitalq .sechead--center .h-sub{ margin-inline:auto; }
.cqcard__body{ padding-top: clamp(80px, 9vw, 120px); }   /* text moves up a touch */
#capitalq.sec{ padding-bottom: 0; }                       /* the section ends where the image ends */
.intel{ margin-bottom: 0; padding-bottom: clamp(72px, 9vw, 130px); }
.intel__map{
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 100%);
}
.intel__mapscrim{
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(10,10,11,0) 20%, rgba(10,10,11,0) 86%, rgba(10,10,11,.55) 100%),
    radial-gradient(ellipse 60% 90% at 18% 50%, rgba(10,10,11,.9) 0%, rgba(10,10,11,.5) 48%, rgba(10,10,11,0) 80%);
}

/* ── THE CLOSE: centered head, split, meet panel ── */
.close-split{ display:grid; gap: clamp(22px, 3.4vw, 56px); align-items:center; margin-top: clamp(10px,1.6vw,20px); }
@media (min-width: 920px){ .close-split{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.close-split__fig{ position:relative; overflow:hidden; min-height: clamp(260px, 30vw, 400px); border:1px solid var(--line); }
.close-split__fig img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 50% 28%;
  filter: grayscale(1) contrast(1.06) brightness(.82);
}
.meetglass{
  margin-top: clamp(40px, 5vw, 72px);
  display:grid; gap: clamp(24px, 3.4vw, 56px); align-items:center;
  padding: clamp(24px, 3.4vw, 52px);
  background: rgba(244,248,251,.04);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--line);
}
@media (min-width: 920px){ .meetglass{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.meetglass__figwrap{ position:relative; justify-self:center; width: min(100%, 380px); }
.meetglass__back{
  position:absolute; inset:0; background: rgba(226,178,76,.24);
  transform: rotate(6deg);
}
.meetglass__img{ position:relative; width:100%; display:block; object-fit:cover; aspect-ratio: 4 / 3; }

/* ── footer ambience ── */
.ftr{ position:relative; overflow:hidden; }
.ftr__blob{ position:absolute; pointer-events:none; filter: blur(70px); opacity:.14; background: var(--blue); }
.ftr__blob--a{ width: 300px; height: 300px; left: 18%; top: 10%; }
.ftr__blob--b{ width: 360px; height: 360px; right: 16%; bottom: 6%; }

/* ══════════ 2026-08-30l — CENTERED PIN, CURVED MEET CARD, WHITE KNOWLEDGE,
   ROW HOVER, CTA BASELINE, ADVANTAGE AMBIENCE, AFRICA->ARABIA CORRIDOR ══════════ */

/* section 2: fits and centres in the viewport before the steps animate */
.srev__stage{ height: min(44vh, 400px); }
@media (min-width: 980px){ .srev__list{ gap: clamp(14px, 2vh, 24px); } }

/* the meet card: curved, centred, statements on single lines, no image */
.meetglass{ display:block; text-align:center; }
.meetglass .stack-state p{ white-space:nowrap; font-size: clamp(1.15rem, 3.6vw, 2.7rem); }
.meetglass .stack-state p + p{ margin-top: 6px; }

/* knowledge on white */
#knowledge .kick{ color: var(--blue); }
#knowledge .h-mid{ color:#0B0C0E; }
#knowledge .tblue{ color: var(--blue); }
#knowledge .kcard2--white{ background:#F4F6F9; border:1px solid rgba(11,12,14,.1); }
#knowledge .btn--glass{ background: rgba(11,12,14,.03); color:#0B0C0E; border-color: rgba(11,12,14,.3); }
#knowledge .btn--glass:hover{ color: var(--blue); border-color: var(--blue); }

/* intelligence rows: the pointer is seen */
.irow{ transition: background .25s ease, transform .25s ease; }
.irow__t{ transition: color .25s ease; }
.irow:hover{ background: rgba(226,178,76,.16); transform: translateX(6px); }
.irow:hover .irow__t{ color: var(--blue-lt); }

/* cq cards: CTAs share one exact baseline (absolute at the card foot) */
.cqcard__body{ position:relative; padding-bottom: clamp(92px, 9vw, 112px); }
.cqcard__cta{
  position:absolute; margin:0; padding:0;
  left: clamp(20px, 2.6vw, 36px); bottom: clamp(22px, 2.6vw, 34px);
}

/* the advantage: ambience + staggered arrival */
#intelligence{ position:relative; overflow:hidden; }
#intelligence::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(50% 40% at 84% 10%, rgba(226,178,76,.15), transparent 70%),
    radial-gradient(42% 36% at 6% 80%, rgba(226,178,76,.08), transparent 72%);
}
#intelligence > .container{ position:relative; }
.sqz__panel{ opacity:0; }
.sqz.in .sqz__panel{ animation: sqzRise .8s cubic-bezier(.22,.61,.36,1) both; }
.sqz.in .sqz__panel:nth-child(1){ animation-delay: 0s; }
.sqz.in .sqz__panel:nth-child(2){ animation-delay: .09s; }
.sqz.in .sqz__panel:nth-child(3){ animation-delay: .18s; }
.sqz.in .sqz__panel:nth-child(4){ animation-delay: .27s; }
.sqz.in .sqz__panel:nth-child(5){ animation-delay: .36s; }
.sqz.in .sqz__panel:nth-child(6){ animation-delay: .45s; }
@keyframes sqzRise{ from{ opacity:0; transform: translateY(26px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .sqz__panel{ opacity:1; }
  .sqz.in .sqz__panel{ animation:none; }
}

/* africa -> arabia: the corridor */
.corridor{ position:relative; overflow:hidden; }
.corridor__stage{ position:absolute; inset:0; z-index:0; pointer-events:none; display:flex; }
.corridor__half{ position:relative; flex:1; overflow:hidden; }
.corridor__half img{ width:100%; height:100%; object-fit:cover; }
.corridor__half--af img{ filter: grayscale(1) brightness(.48) contrast(1.05); object-position: 50% 40%; }
.corridor__half--ar img{ filter: saturate(.92) brightness(.5); object-position: 50% 58%; }
.corridor__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(10,10,11,.62) 22%, rgba(10,10,11,.68) 78%, var(--bg) 100%),
    linear-gradient(90deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.15) 42%, rgba(242,207,124,.16) 50%, rgba(10,10,11,.15) 58%, rgba(10,10,11,.35) 100%);
}
.corridor__flow{
  position:absolute; left:5%; right:5%; top: 30%; height:2px;
  background: repeating-linear-gradient(90deg, var(--blue-lt) 0 14px, transparent 14px 32px);
  opacity:.55;
  animation: corridorFlow 1.5s linear infinite;
}
.corridor__flow::before, .corridor__flow::after{
  content:''; position:absolute; top:50%; width:10px; height:10px; margin-top:-5px;
  background: var(--blue);
  box-shadow: 0 0 16px 2px rgba(226,178,76,.7);
}
.corridor__flow::before{ left:-4px; }
.corridor__flow::after{ right:-4px; background: var(--blue-lt); }
@keyframes corridorFlow{ to{ background-position: 32px 0; } }
@media (prefers-reduced-motion: reduce){ .corridor__flow{ animation:none; } }
.corridor .container{ position:relative; z-index:1; }

/* ══════════ 2026-08-30m — CLOSE BACKDROP + MEET CARD SPLIT, corrections ══════════
   Client: the image to remove was the portrait BESIDE the close copy — gone;
   the close gets its OWN background image (bg-confidence, the approved V3
   meeting shot); the handshake picture returns INSIDE the curved meet card,
   beside the one-line statements. Knowledge header centred. The corridor
   concept for Africa→Arabia is dropped ("download that concept" read as
   drop) — the band design is back; corridor CSS retained unused. */

.close-band{ position:relative; overflow:hidden; }
.close-band__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.close-band__bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 35%;
  filter: saturate(.9) brightness(.42);
}
.close-band__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(10,10,11,.66) 24%, rgba(10,10,11,.72) 76%, var(--bg) 100%);
}
.close-band .container{ position:relative; z-index:1; }

.close-voice{ max-width: 820px; margin-inline:auto; text-align:center; }

/* the meet card, split again: statements left, the picture right */
.meetglass--split{ display:grid; text-align:left; gap: clamp(24px, 3.4vw, 56px); align-items:center; }
@media (min-width: 920px){ .meetglass--split{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.meetglass--split .stack-state p{ font-size: clamp(1.05rem, 2.6vw, 2.1rem); }
.meetglass--split .kick{ justify-content:flex-start; }
.meetglass{ margin-top: clamp(36px, 4.6vw, 64px); }

/* ══════════ 2026-08-30n — TWO CLOSE CARDS, JADE-SKY WASH, KNOWLEDGE WAVE,
   SUB-PAGES RESTORED ══════════ */

/* the close, card one: centred voice on its own curved card */
.closecard{
  padding: clamp(28px, 4vw, 60px);
  background: rgba(244,248,251,.04);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  text-align: center;
}
.closecard .close-voice{ max-width: 780px; margin-inline: auto; }

/* the meeting card: its own background image inside the curve */
.meetglass--img{ position: relative; }
.meetglass__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.meetglass__bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 35%;
  filter: saturate(.9) brightness(.4);
}
.meetglass__bgscrim{
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.66) 55%, rgba(10,10,11,.4) 100%);
}
.meetglass--img > .meetglass__copy, .meetglass--img > .meetglass__figwrap{ position:relative; z-index:1; }
.meetglass--img{ background: var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; }

/* jade-sky wash under "How can we help you" — white base, our blues */
#help{ position:relative; overflow:hidden; }
#help > .container{ position:relative; z-index:1; }
.jade{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.jade__wash{
  position:absolute; inset:-2%;
  filter: blur(26px);
  background-color:#ffffff;
  background-image:
    radial-gradient(circle at 65% 45%, rgba(234,240,255,1) 0%, rgba(234,240,255,0) 34%),
    radial-gradient(circle at 28% 74%, rgba(242,207,124,.42) 0%, rgba(242,207,124,0) 46%),
    radial-gradient(circle at 52% 20%, rgba(226,178,76,.14) 0%, rgba(226,178,76,0) 58%),
    radial-gradient(circle at 80% 84%, rgba(242,207,124,.3) 0%, rgba(242,207,124,0) 69%);
}

/* animated gradient wave under the Knowledge Centre (whisper-light blues) */
#knowledge{ position:relative; overflow:hidden; }
#knowledge > .container{ position:relative; z-index:1; }
.kwave{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.kwave canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.kwave--flat{
  background:
    radial-gradient(circle at 70% 20%, rgba(219,229,255,.9), rgba(219,229,255,0) 55%),
    radial-gradient(circle at 20% 80%, rgba(237,242,255,.9), rgba(237,242,255,0) 60%),
    #ffffff;
}

/* ══════════ 2026-08-31a — CLOSE CORRECTIONS ══════════
   Client: the backdrop belongs to the CLOSE card, not the capital card;
   the close body copy centres (the 62ch lede block was hugging the left
   edge of the card); the statement stack was "way too small". */

.closecard--img{
  position:relative; overflow:hidden;
  background: var(--bg);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.closecard__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.closecard__bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 35%;
  filter: saturate(.9) brightness(.4);
}
.closecard__bgscrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,11,.78) 0%, rgba(10,10,11,.56) 50%, rgba(10,10,11,.78) 100%);
}
.closecard--img > .sechead, .closecard--img > .close-voice{ position:relative; z-index:1; }

/* the lede is a 62ch block: centre the block, not just the text inside it */
.close-voice .lede{ margin-inline:auto; }

/* the capital card reverts to glass, statements step up in size */
.meetglass--split .stack-state p{ font-size: clamp(1.3rem, 3.2vw, 2.75rem); }

/* ══════════ 2026-08-31b — CONTACT + TEAM REWORK ══════════
   Contact: FAQ rebuilt on the client's reference (glass cards, cursor-followed
   blue glow, square icon chip that turns into a cross, meta chip, one open at
   a time); the form panel and the contact-info card wear the same skin; the
   next-step section gets its background image. Team: hero image swapped,
   leadership becomes a hover-expand image accordion (real portraits for David
   and Zino, initials panel for Fortune) with click-through detail panels; the
   invitation becomes the homepage capital-card treatment with a photo right. */

/* ── the shared FAQ-style card ── */
.fqcard{
  position:relative; overflow:hidden;
  background: rgba(244,248,251,.045);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .35s ease, border-color .35s ease;
}
.fqcard::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition: opacity .45s ease;
  background: radial-gradient(280px circle at var(--fq-x, 50%) var(--fq-y, 50%), rgba(226,178,76,.17), transparent 70%);
}
.fqcard:hover{ border-color: rgba(242,207,124,.35); }
.fqcard:hover::after, .fqcard.is-open::after{ opacity:1; }
.fqcard > *{ position:relative; z-index:1; }
.fqcard--pad{ padding: clamp(22px, 2.8vw, 36px); }

.faq2{ display:grid; gap:14px; max-width: 980px; }
.faq2 .fqcard:hover{ transform: translateY(-2px); }
.fq__btn{
  display:flex; align-items:flex-start; gap: clamp(16px, 2vw, 26px);
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
  color: var(--txt); font-family: var(--font-base);
}
.fq__ic{
  flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--line); background: rgba(244,248,251,.05);
  color: var(--txt-hi);
  transition: border-color .45s ease, color .45s ease;
}
.fq__ic svg{ width:20px; height:20px; display:block; transition: transform .45s ease; }
.fqcard.is-open .fq__ic{ border-color: rgba(242,207,124,.5); color: var(--txt-blue); }
.fqcard.is-open .fq__ic svg{ transform: rotate(45deg); }
.fq__main{ flex:1; display:block; min-width:0; }
.fq__row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-height:46px; }
.fq__q{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.02rem, 1.4vw, 1.22rem); letter-spacing:-.01em;
  line-height:1.35; color: var(--txt-hi);
}
.fq__meta{
  margin-left:auto; padding: 6px 12px; border:1px solid var(--line);
  font-family: var(--font-mono); font-size:.62rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color: var(--txt-dim);
  white-space:nowrap;
}
.fq__panel{
  display:block; overflow:hidden; max-height:0;
  transition: max-height .5s cubic-bezier(.22,.61,.36,1);
}
.fqcard.is-open .fq__panel{ max-height: 340px; }
.fq__a{ display:block; padding-top:14px; max-width:68ch; font-size:.95rem; line-height:1.65; color: var(--txt); }

/* contact info rows share the icon language */
.cinfo{ display:grid; gap:24px; margin-top:26px; }
.cinfo__row{ display:flex; gap:18px; align-items:flex-start; }
.cinfo__row .ftr__list{ margin-top:8px; }

/* ── team leadership accordion ── */
.tacc{ display:flex; flex-direction:column; gap:10px; }
.tacc__item{
  position:relative; overflow:hidden; cursor:pointer; min-width:0;
  border:1px solid var(--line);
  transition: flex-grow .45s cubic-bezier(.5,.85,.25,1.05), border-color .3s ease;
  height: 300px;
}
.tacc__item:hover, .tacc__item.is-sel{ border-color: rgba(242,207,124,.55); }
@media (min-width: 768px){
  .tacc{ flex-direction:row; height: clamp(340px, 34vw, 460px); }
  .tacc__item{ flex:1 1 0; height:auto; }
  .tacc:hover .tacc__item{ flex-grow:.45; }
  .tacc:hover .tacc__item:hover{ flex-grow:2.4; }
  .tacc__item::after{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: rgba(10,10,11,.55);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity:0; transition: opacity .35s ease;
  }
  .tacc:hover .tacc__item:not(:hover)::after{ opacity:1; }
}
.tacc__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.tacc__ph{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(60% 50% at 72% 12%, rgba(226,178,76,.3), transparent 70%),
    linear-gradient(160deg, #11162B 0%, #0A0B10 70%);
}
.tacc__ph span{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(2.6rem, 5vw, 4.4rem); letter-spacing:.02em; color: var(--txt-blue);
}
.tacc__scrim{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 46%, rgba(10,10,11,.85) 100%);
}
.tacc__tag{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: clamp(14px, 1.8vw, 22px); }
.tacc__name{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1rem, 1.4vw, 1.3rem); letter-spacing:-.01em; color: var(--txt-hi);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tacc__role{
  margin-top:6px; font-family: var(--font-mono); font-size:.66rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color: var(--txt-blue);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (min-width: 768px){
  .tacc__tag{ opacity:0; transform: translateY(8px); transition: opacity .3s ease .08s, transform .3s ease .08s; }
  .tacc__item:hover .tacc__tag, .tacc__item.is-sel .tacc__tag{ opacity:1; transform:none; }
}

/* the clicked member opens below, portrait beside the story */
.tdetail{
  display:none; position:relative; overflow:hidden;
  margin-top: clamp(28px, 3.4vw, 44px);
  border:1px solid var(--line); background: rgba(244,248,251,.03);
}
.tdetail.is-on{ display:grid; grid-template-columns: 1fr; }
@media (min-width: 920px){ .tdetail.is-on{ grid-template-columns: minmax(0,.58fr) minmax(0,1.42fr); } }
.tdetail__fig{ position:relative; min-height: 320px; margin:0; }
.tdetail__fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 15%; }
.tdetail__fig--ph{
  display:grid; place-items:center;
  background:
    radial-gradient(60% 50% at 72% 12%, rgba(226,178,76,.3), transparent 70%),
    linear-gradient(160deg, #11162B 0%, #0A0B10 70%);
}
.tdetail__fig--ph span{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(3rem, 6vw, 5rem); color: var(--txt-blue);
}
.tdetail__body{ padding: clamp(24px, 3.2vw, 48px); }
.tdetail__copy{ margin-top:18px; max-width: 72ch; }
.tdetail__copy p{ font-size:.95rem; line-height:1.7; color: var(--txt); }
.tdetail__copy p + p{ margin-top:13px; }

/* ══════════ 2026-08-31c — CONTACT: PATH CAROUSEL, DIM TOUCH BG, CENTRED FAQ ══════════
   Choose-your-path = the squeeze-carousel treatment, but with the copy and CTA
   ON the open card (client: "I want mine to be on the card itself"). Reach the
   team keeps its left alignment over a dimmed boardroom image. Common
   questions and the next-step CTA are centred. Hero = client's office photo. */

.cpath{ margin-top: clamp(6px, 1.2vw, 14px); }
.cpath__view{ display:flex; gap:12px; height: clamp(320px, 30vw, 430px); }
.cpath__panel{
  position:relative; overflow:hidden; cursor:pointer; flex:0 0 auto;
  min-width:0; background:#101114; border:1px solid var(--line);
  transition: width 1s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
  outline:none;
}
.cpath__panel:hover, .cpath__panel:focus-visible{ border-color: rgba(242,207,124,.5); }
.cpath__img{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  height:100%; max-width:none; object-fit:cover;
}
.cpath__shade{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(10,10,11,.12) 26%, rgba(10,10,11,.9) 100%);
}
.cpath__tag{
  position:absolute; left:16px; bottom:16px; z-index:2;
  font-family: var(--font-display); font-weight:500; font-size:.95rem;
  letter-spacing:-.01em; color: var(--txt-hi);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: calc(100% - 32px);
  transition: opacity .4s ease;
}
.cpath__tagix{ font-family: var(--font-mono); font-size:.72rem; color: var(--txt-blue); margin-right:8px; }
.cpath__panel.is-open .cpath__tag{ opacity:0; }
.cpath__over{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: clamp(18px, 2.4vw, 34px);
  opacity:0; transform: translateY(12px); pointer-events:none;
  transition: opacity .5s ease, transform .5s ease;
}
.cpath__panel.is-open .cpath__over{
  opacity:1; transform:none; pointer-events:auto;
  transition-delay: .3s, .3s;
}
.cpath__ix{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.22em; color: var(--txt-blue); }
.cpath__t{
  margin-top:8px; font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.2rem, 1.9vw, 1.65rem); letter-spacing:-.015em; color: var(--txt-hi);
}
.cpath__d{ margin-top:8px; font-size:.95rem; line-height:1.6; color: var(--txt); max-width: 52ch; }
.cpath__cta{ margin-top:16px; }
@media (prefers-reduced-motion: reduce){ .cpath__panel, .cpath__over{ transition:none; } }
@media (max-width: 719px){
  .cpath__view{ flex-direction:column; height:auto; }
  .cpath__panel{ width:100% !important; height: 320px; }
  .cpath__img{ width:100% !important; left:0; transform:none; }
  .cpath__tag{ display:none; }
  .cpath__over{ opacity:1; transform:none; pointer-events:auto; }
}

/* reach the team: darker veil so the form stays the subject */
.close-band--dim .close-band__bg img{ filter: saturate(.85) brightness(.28); }
.close-band--dim .close-band__scrim{
  background: linear-gradient(180deg, var(--bg) 0%, rgba(10,10,11,.8) 18%, rgba(10,10,11,.84) 82%, var(--bg) 100%);
}

/* centring helpers */
.faq2--center{ margin-inline:auto; }
.cta-set--center{ display:flex; justify-content:center; }

/* ══════════ 2026-09-02a — NEW HEADER (client reference port) + HERO SIMPLIFICATION ══════════
   Header 2: centred capsule that condenses on scroll — dark glass, hairline,
   soft shadow; ghost text links, outline + solid CTAs (port of the client's
   sticky-header reference, kept square per the standing rule). Markup swapped
   on all seven pages; the old .hdr rules stay dormant as the revert path.
   Hero: full stops restored on the headline (copy doc form), lede pure white
   and larger, pillars card + stats row removed, video replaced with the
   client's office photograph. */

.hdr2{ position:fixed; inset:0 0 auto 0; z-index:40; display:flex; justify-content:center; padding-inline:14px; }
.hdr2__bar{
  width:100%; max-width:1200px; height:60px; margin-top:0;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding-inline:14px;
  border:1px solid transparent; background:transparent;
  transition: margin .35s ease, max-width .35s ease, height .35s ease,
              background .35s ease, border-color .35s ease, box-shadow .35s ease,
              padding .35s ease;
}
.hdr2.is-scr .hdr2__bar{
  margin-top:12px; max-width:1020px; height:54px; padding-inline:10px;
  background: rgba(10,10,11,.62);
  border-color: var(--line-soft);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 44px rgba(0,0,0,.5), 0 0 24px rgba(226,178,76,.10);
}
.hdr2__links{ display:none; align-items:center; gap:2px; }
.hdr2__link{
  font-family: var(--font-display); font-weight:500; font-size:.9rem; letter-spacing:-.01em;
  color: var(--txt); padding:9px 14px;
  transition: color .25s ease, background .25s ease;
}
.hdr2__link:hover{ color:#fff; background: rgba(244,248,251,.06); }
.hdr2__link.is-here{ color: var(--txt-blue); }
.hdr2__cta{ display:flex; align-items:center; gap:10px; }
.hdr2__ghost{
  display:none; padding:10px 20px; font-size:.88rem;
  background:transparent; border:1px solid var(--line); color:var(--txt-hi);
}
.hdr2__ghost:hover{ background: rgba(244,248,251,.06); }
.hdr2__ghost.is-here{ border-color: rgba(242,207,124,.5); color: var(--txt-blue); }
.hdr2__solid{ display:none; padding:11px 20px; font-size:.88rem; }
@media (min-width: 1060px){
  .hdr2__links{ display:flex; }
  .hdr2__ghost, .hdr2__solid{ display:inline-flex; }
  .hdr2 .burger{ display:none; }
}

/* hero simplification */
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position: 70% 42%; }
@media (min-width: 980px){ .hero__grid{ grid-template-columns: minmax(0, 1fr); } }
.hero__lede{ color:#fff; font-size: clamp(1.12rem, 1.55vw, 1.34rem); max-width: 56ch; }

/* ══════════ 2026-09-02b — HERO: copy stack anchored LOW-LEFT (client) ══════════
   New centred executive portrait as the hero image; headline, body copy, CTAs
   and the trusted-by strip all sit together at the bottom-left of the section. */
.hero{ justify-content: flex-end; padding-block: clamp(110px, 13vh, 150px) clamp(40px, 6vh, 72px); }
.hero__bg img{ object-position: 50% 26%; }
.hero__lede{ margin-top: clamp(14px, 1.8vw, 22px); }
.hero .cta-set{ margin-top: clamp(20px, 2.6vw, 32px); }
.hero__foot{ margin-top: clamp(24px, 3.2vw, 42px); }

/* ══════════ 2026-09-02c — FAMILIAR: three persona tabs side by side (client) ══════════
   The scroll-reveal steps are replaced by three clickable persona cards after
   the section header — investor first, "You're Building a Startup" (client
   renamed the doc line; registered as an intentional cut in copycheck), then
   strategic mandate. The live card opens its details below; each persona's
   body copy carries its own treatment (hairline rows / stacked prose with
   pull-quotes / arrow list). Old .srev rules stay dormant as the revert path. */

.pside__row{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px;
  margin-bottom:18px;
}
.pside__tab{
  display:flex; align-items:center; gap:16px; text-align:left; cursor:pointer;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 28px);
  background: rgba(244,248,251,.045);
  border:1px solid var(--line); color: var(--txt);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(.98rem, 1.25vw, 1.12rem); letter-spacing:-.01em; line-height:1.3;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.pside__tab:hover{ border-color: rgba(242,207,124,.35); color:#fff; }
.pside__tab.is-on{
  background: linear-gradient(123deg, rgba(201,154,54,.55), rgba(226,178,76,.4));
  border-color: rgba(242,207,124,.5); color:#fff;
}
.pside__ix{
  font-family: var(--font-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; color: var(--txt-dim); flex:0 0 auto;
}
.pside__tab.is-on .pside__ix{ color:#fff; opacity:.75; }

.pside__stage{
  position:relative; overflow:hidden;
  border:1px solid var(--line); background: rgba(244,248,251,.03);
}
.ppane2{ display:none; }
.ppane2.is-on{ display:grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); }
.ppane2__body{ padding: clamp(26px, 3.4vw, 48px); }
.ppane2__fig{ position:relative; margin:0; min-height:320px; }
.ppane2__fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%; }
.ppane2__scrim{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.08) 45%, rgba(10,10,11,0) 100%);
}
.ppane2__body p{ font-size:.95rem; line-height:1.7; color: var(--txt); }

/* investor — hairline rows */
.ppane2__rows p{ padding-block:13px; border-top:1px solid var(--line); }
.ppane2__rows p:first-child{ border-top:0; padding-top:0; }

/* startup — stacked prose */
.ppane2__stack p + p{ margin-top:13px; }

/* mandate — arrow list */
.ppane2__list p{ position:relative; padding-left:26px; }
.ppane2__list p + p{ margin-top:12px; }
.ppane2__list p::before{ content:'\2192'; position:absolute; left:0; top:0; color: var(--txt-blue); }

/* shared closing lines */
.ppane2__close{ margin-top: clamp(18px, 2.4vw, 28px); }
.ppane2__close p{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height:1.42; letter-spacing:-.01em;
  color: var(--txt-hi);
}
.ppane2__close p.blue{ color: var(--txt-blue); }
.ppane2__close--q p{ font-size: clamp(1.1rem, 1.65vw, 1.45rem); }

.pside__tail{ margin-top: clamp(32px, 4.2vw, 56px); text-align:center; margin-inline:auto; }
.pside__tail .lede{ margin-inline:auto; margin-top:10px; }

@media (max-width: 880px){
  .pside__row{ grid-template-columns:1fr; }
  .ppane2.is-on{ grid-template-columns:1fr; }
  .ppane2__fig{ order:-1; min-height:220px; }
}

/* hero portrait framing */
.hero__bg img{ object-position: 50% 24%; }

/* ══════════ 2026-09-02d — persona pane imagery upgraded (vetted set) ══════════ */
.ppane2--inv .ppane2__fig img{ object-position: 50% 40%; }
.ppane2--biz .ppane2__fig img{ object-position: 50% 45%; }
.ppane2--man .ppane2__fig img{ object-position: 50% 45%; }

/* ══════════ 2026-09-02e — THE REAL GAP: light-theme clip-figure (client reference port) ══════════
   Port of the client's AboutSection3 reference: notched SVG clip-path figure
   (B&W skyline), mono label + icon chips riding the top cut, the three
   "exists" lines as the stat row, "FDN — is the bridge" in the right notch,
   the sub copy line as the big statement below with two justified columns,
   and an FDN side column with the CTA. Deliberately LIGHT theme (client) —
   the one light section on the page; all colors set explicitly. */

.rgap{ background:#F3F5F8; }
.rgap__stage{ position:relative; }
.rgap__topbar{
  position:absolute; top:-2px; left:0; width:85%; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
}
.rgap__label{
  display:flex; align-items:center; gap:11px;
  font-family:var(--font-mono); font-weight:500; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:#39424E;
}
.rgap__ast{
  color:var(--blue); font-size:1.3rem; line-height:1; display:inline-block;
  animation:rgapspin 7s linear infinite;
}
@keyframes rgapspin{ to{ transform:rotate(360deg); } }
.rgap__chips{ display:flex; gap:12px; }
.rgap__chip{
  width:34px; height:34px; display:grid; place-items:center;
  background:#E9EDF2; border:1px solid #D7DEE7; color:#39424E;
}
.rgap__chip svg{ width:17px; height:17px; }
.rgap__fig{ margin:0; }
.rgap__fig svg{ display:block; width:100%; height:auto; }
.rgap__fig image{ filter:grayscale(1) contrast(1.06); }
.rgap__big{ position:absolute; right:0; bottom:54px; z-index:2; text-align:right; }
.rgap__bigrow{ display:flex; align-items:baseline; gap:12px; justify-content:flex-end; }
.rgap__bigblue{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.7rem, 2.9vw, 2.5rem); letter-spacing:-.02em; color:var(--blue);
}
.rgap__bigword{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.05rem, 1.7vw, 1.45rem); color:#5A6472;
  text-transform:uppercase; letter-spacing:.02em;
}
.rgap__stats{ display:flex; flex-wrap:wrap; gap:14px; padding-block:14px 4px; }
.rgap__stat{ display:flex; align-items:center; gap:8px; font-size:.95rem; color:#5A6472; }
.rgap__stat .b{ color:var(--blue); font-weight:700; }
.rgap__stat .sep{ color:#C3CBD6; }
.rgap__grid{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:clamp(28px, 4vw, 64px); margin-top:clamp(16px, 2.2vw, 28px);
}
.rgap__h{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2rem, 3.6vw, 3.1rem); line-height:1.1; letter-spacing:-.022em;
  color:#0E1319; margin-bottom:clamp(20px, 2.6vw, 34px);
}
.rgap__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 2.6vw, 36px); }
.rgap__cols p{ font-size:.95rem; line-height:1.75; color:#4A5461; text-align:justify; }
.rgap__cols p + p{ margin-top:12px; }
.rgap__cols p.rgap__miss{ color:#0E1319; font-weight:600; }
.rgap__aside{ text-align:right; }
.rgap__brand{
  font-family:var(--font-display); font-weight:500; font-size:1.65rem;
  letter-spacing:-.01em; color:var(--blue); margin-bottom:6px;
}
.rgap__role{
  font-family:var(--font-mono); font-weight:500; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:#5A6472; margin-bottom:26px;
}
.rgap__ready{ font-weight:600; font-size:1rem; line-height:1.55; color:#0E1319; margin-bottom:22px; }
@media (max-width: 880px){
  .rgap__topbar{ width:100%; position:static; margin-bottom:14px; }
  .rgap__big{ position:static; text-align:left; padding-top:10px; }
  .rgap__bigrow{ justify-content:flex-start; }
  .rgap__grid{ grid-template-columns:1fr; }
  .rgap__cols{ grid-template-columns:1fr; }
  .rgap__aside{ text-align:left; }
}

/* ══════════ 2026-09-02f — real-gap: clear the fixed header ══════════ */
#problem.sec.rgap{ padding-top: clamp(96px, 11vh, 136px); }

/* ══════════ 2026-09-02g — CONNECTION: blue panel + cutout (client) ══════════
   The dark photo band becomes part of the light run: an FDN-blue rectangle,
   the three lines stacked left (white / white / black), and the client's
   transparent-PNG lady standing on the right of the shape, head breaking the
   panel's top edge. */
.rgap2{ background:#F3F5F8; }
.rgap2.sec{ padding-top: clamp(10px, 1.6vw, 24px); }
.rgap2__panel{
  position:relative; background: var(--blue);
  padding: clamp(36px, 4.6vw, 68px);
  min-height: clamp(280px, 26vw, 380px);
  display:flex; align-items:center;
}
.rgap2__copy{ position:relative; z-index:1; max-width:60%; }
.rgap2__line{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.7rem, 3.4vw, 3rem); line-height:1.18; letter-spacing:-.022em;
  color:#fff;
}
.rgap2__line--ink{ color:#0C0F14; }
.rgap2__lady{
  position:absolute; right:clamp(28px, 5vw, 90px); bottom:0;
  height:clamp(320px, 30vw, 440px); width:auto; display:block;
}
@media (max-width: 880px){
  .rgap2__panel{ display:block; padding-bottom:0; }
  .rgap2__copy{ max-width:none; }
  .rgap2__lady{ position:static; margin:22px auto 0; height:auto; width:min(68%, 300px); }
}

/* ══════════ 2026-09-02i — HOW CAN WE HELP: split header + on-image cards (client Hero08 reference) ══════════
   Back to the DARK theme (client). Header runs two columns — main + sub copy
   line left, body copy right (bottom-aligned like the reference) — and the
   three audience cards become full-bleed image cards with the kicker, title,
   body and CTA living on the image over a top-heavy scrim. */

.help2{ background: var(--bg); }
.help2__head{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px, 4vw, 72px); align-items:end;
  margin-bottom: clamp(32px, 4.2vw, 56px);
}
.help2__right{ display:flex; flex-direction:column; gap:16px; }
.help2__sides p{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1rem, 1.3vw, 1.18rem); letter-spacing:-.01em; line-height:1.5;
  color: var(--txt-hi);
}
.help2__body{ font-size:.95rem; line-height:1.7; color: var(--txt); max-width:58ch; }
.help2__pledge{
  font-family: var(--font-display); font-weight:500;
  font-size:1.02rem; letter-spacing:-.01em; color: var(--txt-blue);
}
.help2__grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.help2__card{
  position:relative; isolation:isolate; overflow:hidden; display:flex;
  border:1px solid var(--line); aspect-ratio: 4 / 5;
}
.help2__img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; transition: transform .55s ease;
}
.help2__card:hover .help2__img{ transform: scale(1.045); }
.help2__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(165deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.5) 46%, rgba(10,10,11,.22) 100%);
}
.help2__content{
  flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding: clamp(20px, 2.2vw, 30px);
}
.help2__kick{
  font-family: var(--font-mono); font-weight:500; font-size:.7rem;
  letter-spacing:.24em; text-transform:uppercase; color: var(--txt-blue);
}
.help2__title{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.2rem, 1.75vw, 1.55rem); line-height:1.24; letter-spacing:-.015em;
  color:#fff;
}
.help2__desc{ font-size:.9rem; line-height:1.62; color: rgba(244,248,251,.84); }
.help2__cta{ margin-top:auto; padding:12px 20px; font-size:.88rem; }
@media (max-width: 980px){
  .help2__head{ grid-template-columns:1fr; align-items:start; }
  .help2__grid{ grid-template-columns:1fr; }
  .help2__card{ aspect-ratio: 16 / 10; }
}

/* ══════════ 2026-09-02j — FEEDBACK ROUND (client voice note) ══════════
   Hero: "Capital. Intelligence." one line, "Opportunity." second line in the
   deep FDN blue; scrim rebuilt bottom-up so the portrait's face reads and the
   office shows. Header capsule gets more side padding. More air after the
   persona tabs. Real gap: big title with the exists-lines directly under it,
   icon chips gone, FDN / IS THE BRIDGE stacked at one size, denser body type.
   Blue panel gets a blueprint grid pattern. Help: pledge line moves under the
   cards as a centred statement; card copy drops to the bottom by the CTAs. */

.tnavy{ color: var(--blue); }
.hero--exec .hero__scrim{
  background: linear-gradient(0deg,
    rgba(10,10,11,.97) 0%, rgba(10,10,11,.72) 26%,
    rgba(10,10,11,.28) 55%, rgba(10,10,11,.06) 82%, rgba(10,10,11,0) 100%);
}
.hero--exec .hero__bg img{ object-position: 50% 16%; }

.hdr2__bar{ padding-inline: 20px; }
.hdr2.is-scr .hdr2__bar{ padding-inline: 24px; }

#familiar.sec{ padding-bottom: clamp(84px, 9vw, 132px); }

.rgap__headrow{ margin-bottom: clamp(18px, 2.4vw, 30px); }
.rgap__title{
  display:flex; align-items:center; gap:18px;
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(2rem, 3.4vw, 3rem); line-height:1.08; letter-spacing:-.022em;
  color:#0E1319;
}
.rgap__title .rgap__ast{ font-size:.6em; }
.rgap__stats--top{ padding-block: 14px 0; }
.rgap__bigcol{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.12; }
.rgap__bigcol .rgap__bigblue{ font-size: clamp(1.8rem, 2.9vw, 2.55rem); }
.rgap__bigcol .rgap__bigword{
  font-size: clamp(1.8rem, 2.9vw, 2.55rem); color:#0E1319; letter-spacing:-.01em;
}
.rgap__big{ bottom: 78px; }
.rgap__cols p{ font-size:1.03rem; line-height:1.58; }
.rgap__cols p + p{ margin-top:14px; }

.rgap2__panel{
  background:
    radial-gradient(90% 130% at 6% 0%, rgba(255,255,255,.14), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 56px),
    var(--blue);
}

.help2__content{ justify-content:flex-end; }
.help2__cta{ margin-top: 6px; }
.help2__veil{
  background: linear-gradient(0deg,
    rgba(10,10,11,.9) 0%, rgba(10,10,11,.55) 42%,
    rgba(10,10,11,.2) 74%, rgba(10,10,11,.08) 100%);
}
.help2__pledge2{
  margin-top: clamp(28px, 3.4vw, 44px); text-align:center;
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem); letter-spacing:-.015em; line-height:1.4;
  color: var(--txt-hi);
}

/* ══════════ 2026-09-02k — fixups: FDN block into its notch, kicker legibility ══════════ */
.rgap__bigcol .rgap__bigblue, .rgap__bigcol .rgap__bigword{ font-size: clamp(1.5rem, 2.3vw, 2.05rem); }
.rgap__big{ bottom: 10px; }
.help2__veil{
  background: linear-gradient(0deg,
    rgba(10,10,11,.92) 0%, rgba(10,10,11,.64) 46%,
    rgba(10,10,11,.3) 76%, rgba(10,10,11,.14) 100%);
}

/* ══════════ 2026-09-02l — ADVANTAGE: client imagery, bigger copy, pop transition; reveal goes LIGHT ══════════
   Carousel panels now carry the client's generated photography; the slide
   copy is larger and brighter; changing slides pops the old copy down and the
   new copy up (client). The CapitalQ name reveal moves into its own
   light-theme band, globe on a dark ink panel for contrast. */

.sqz__text{ font-size: clamp(1.06rem, 1.35vw, 1.28rem); line-height:1.64; color: var(--txt); }
.sqz__tag{ font-size: clamp(1.05rem, 1.6vw, 1.45rem); }
.sqz__slide{
  transform: translateY(26px);
  transition: opacity .4s ease, transform .45s cubic-bezier(.22,.61,.36,1), visibility 0s .45s;
}
.sqz__slide.is-on{
  transform: none;
  transition: opacity .45s ease .1s, transform .5s cubic-bezier(.22,.61,.36,1) .1s, visibility 0s 0s;
}

.adv-reveal{ background:#F3F5F8; }
.adv-reveal .h-mid{ color:#0E1319; }
.adv-reveal .lede{ color:#4A5461; }
.adv-reveal .h-sub{ color:#39424E; }
.adv-reveal .cqname{ color:#0E1319; }
.adv-reveal .nameglow__globe{
  background:#0B0E14; border:1px solid #D7DEE7;
  display:grid; place-items:center; padding: clamp(14px, 1.8vw, 26px);
}

/* ══════════ 2026-09-02m — sqz panels must not vanish without animation ══════════
   Base opacity flips to 1 so panels render with reduced motion, no JS, and in
   headless captures; the .in entrance animation still rises them from 0. */
.sqz__panel{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .sqz.in .sqz__panel{ animation:none; }
}

/* ══════════ 2026-09-02n — INTER TYPE SWAP + FADING HEADLINES + DOT-GLASS KIT (client) ══════════
   All three font roles now resolve to Inter (client: he does not like the old
   font). Display headings step up to 600 so Inter holds the old presence; big
   white headlines pick up the client's fade-out gradient (colored spans keep
   their own color). The moving-dot glass card from the client's reference is
   ported as the house .dotglass kit — glass panel, crop-mark hairlines past
   the corners, top light ray, and a glowing dot sweeping the top edge — and
   applied to the three persona cards + their stage. */

.h-hero, .h-major, .h-mid{ font-weight:600; }
.h-sub, .sechead__sub, .pside__t, .hdr2__link, .btn{ font-weight:600; }
.h-hero{ letter-spacing:-.032em; }
.h-major{ letter-spacing:-.028em; }
.rgap__h, .rgap__title, .rgap2__line, .help2__title, .cqname{ font-weight:600; }

/* fade-out gradient on the big white headlines */
.h-hero, .h-major{
  background: linear-gradient(105deg, #F4F8FB 42%, rgba(244,248,251,.34) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h-hero span, .h-major span{ -webkit-text-fill-color: currentColor; }

/* ── dot-glass kit ── */
.dotglass{
  position:relative;
  background: rgba(244,248,251,.055);
  border:1px solid rgba(244,248,251,.16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: visible;
}
.dotglass::before{
  content:''; position:absolute; inset:0 0 auto 0; height:62%; pointer-events:none;
  background: radial-gradient(62% 100% at 50% 0%, rgba(255,255,255,.14), transparent 72%);
}
.dotglass__line{ position:absolute; background: rgba(244,248,251,.14); pointer-events:none; }
.dotglass__line--t{ top:0; left:-9%; width:118%; height:1px; }
.dotglass__line--b{ bottom:0; left:-9%; width:118%; height:1px; }
.dotglass__line--l{ left:0; top:-26%; height:152%; width:1px; }
.dotglass__line--r{ right:0; top:-26%; height:152%; width:1px; }
.dotglass__dot{
  position:absolute; top:-2px; left:0; width:5px; height:5px; pointer-events:none;
  background:#fff;
  box-shadow: 0 0 9px 2px rgba(255,255,255,.95), 0 0 22px 7px rgba(226,178,76,.5);
  animation: dotsweep 4.6s ease-in-out infinite;
}
.pside__row .pside__tab:nth-child(2) .dotglass__dot{ animation-delay: 1.5s; }
.pside__row .pside__tab:nth-child(3) .dotglass__dot{ animation-delay: 3s; }
@keyframes dotsweep{
  0%{ left:0; opacity:0; }
  14%{ opacity:1; }
  80%{ opacity:1; }
  100%{ left: calc(100% - 5px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .dotglass__dot{ animation:none; opacity:0; } }
.pside__tab.dotglass{ background: rgba(244,248,251,.055); }
.pside__tab.dotglass.is-on{
  background: linear-gradient(123deg, rgba(201,154,54,.55), rgba(226,178,76,.4));
}
.pside__stage.dotglass--still .dotglass__line--l{ top:-8%; height:116%; }
.pside__stage.dotglass--still .dotglass__line--r{ top:-8%; height:116%; }
.pside__stage.dotglass--still::before{ display:none; }

/* ══════════ 2026-09-03a — FEEDBACK: quiet cards + cursor glow, real-gap tightening, bigger lady ══════════
   Persona cards: sweeping dot and crop-mark rails REMOVED (client never asked
   for them) — clean glass boxes again, and the cursor-following blue glow is
   back (the "glow that moves around", via --fq-x/y like the FAQ cards).
   Real gap: title + exists line drop down to hug the image (figure tucks up
   under them); FDN / IS THE BRIDGE left-aligned and much bigger in its notch;
   the copy columns lose justify-stretching and paragraph gaps. Blue panel
   lady scales up so head + shoulders rise out of the rectangle. Headline
   fade-gradient starts earlier so every heading shows it. */

.dotglass__dot, .dotglass__line{ display:none; }
.dotglass::before{
  inset:0; height:auto;
  background: radial-gradient(320px circle at var(--fq-x, 50%) var(--fq-y, 30%), rgba(226,178,76,.20), transparent 72%);
  opacity:0; transition: opacity .45s ease;
}
.dotglass:hover::before{ opacity:1; }
.pside__stage.dotglass--still::before{ display:block; }

.rgap__headrow{ margin-bottom:0; }
.rgap__stats--top{ padding-block:10px 0; }
@media (min-width: 881px){ .rgap__fig{ margin-top:-52px; } }
.rgap__big{ right:auto; left:78.6%; bottom:10px; text-align:left; }
.rgap__bigcol{ align-items:flex-start; }
.rgap__bigcol .rgap__bigblue, .rgap__bigcol .rgap__bigword{ font-size: clamp(1.75rem, 2.55vw, 2.2rem); line-height:1.1; white-space:nowrap; }

.rgap__cols p{ text-align:left; }
.rgap__cols > div:first-child p + p{ margin-top:3px; }

.rgap2__panel{ min-height: clamp(320px, 30vw, 440px); }
.rgap2__lady{ height: clamp(400px, 38vw, 540px); }
.rgap2.sec{ padding-top: clamp(80px, 9vw, 120px); }

.h-hero, .h-major{
  background: linear-gradient(115deg, #FAFCFE 10%, rgba(244,248,251,.42) 96%);
  -webkit-background-clip: text; background-clip: text;
}

/* ══════════ 2026-09-03b — CLIENT ROUND (voice note): let blue be blue, gradient v2,
   in/out scroll fades, CapitalQ split header, first-meeting + knowledge go DARK
   (knowledge as a StatsBento-style bento), the-name becomes the Featured globe
   panel, close cards squared with the second FDN removed, footer full name. ══════════ */

/* let blue be blue — every blue TEXT accent aligns to the logo blue (client) */
:root{ --txt-blue: #E2B24C; }
.lyra__left .blue, .pcar__pane .ppane__aside .blue{ color: var(--blue); }

/* gradient v2 — brighter, smoother fade on every big line that sits on black
   (client: "the gradient is more black... a nice smooth transition") */
.h-hero, .h-major,
.sec:not(.sec--light):not(.adv-reveal):not(.rgap) .h-mid,
.help2__title, .stack-state p.on{
  background: linear-gradient(177deg, #FFFFFF 14%, #DAE3EF 64%, rgba(218,227,239,.55) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h-hero span, .h-major span, .h-mid span, .help2__title span, .stack-state p.on span{
  -webkit-text-fill-color: currentColor;
}
.adv-reveal .h-mid, .sec--light .h-major{
  background:none; -webkit-text-fill-color: currentColor;
}

/* softer both-ways scroll pop (observer now toggles in AND out) */
[data-fade]{ transition: opacity .55s ease, transform .6s cubic-bezier(.22,.61,.36,1); }

/* CapitalQ split header */
.cq2head{ align-items:end; }
.cq2head .help2__right{ gap: 14px; }
.cq2head .sechead__sub{ margin-top: 10px; }
.cq2head .help2__pledge{ color: var(--txt-blue); }

/* first-meeting: dark ground, white bento pops (client: text white, not black) */
#first-meeting.sec{ background: var(--bg-soft); }
#first-meeting .mcard--ink{ border: 1px solid var(--line); }

/* knowledge: black themed + StatsBento-style bento (client reference port) */
#knowledge.sec{ background: var(--bg); }
#knowledge .kwave{ display: none; }
#knowledge .kcard2{ background: rgba(244,248,251,.045); border: 1px solid var(--line); }
#knowledge .kcard2 .kcard2__t{ color: var(--txt-hi); }
#knowledge .kcard2 .kcard2__d{ color: var(--txt); }
#knowledge .kcard2 .kcard2__ico{ background: rgba(226,178,76,.16); color: var(--blue-lt); }
#knowledge .kbento > :nth-child(1){
  background: var(--grad-cta, var(--blue)); border: none;
  position: relative; overflow: hidden; justify-content: space-between;
}
#knowledge .kbento > :nth-child(1)::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 1px, transparent 1px 10px);
  opacity:.28;
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 100% 0%, #000 70%, transparent 110%);
  mask-image: radial-gradient(ellipse 80% 50% at 100% 0%, #000 70%, transparent 110%);
}
#knowledge .kbento > :nth-child(1) .kcard2__t{ color:#fff; font-size: clamp(1.6rem, 2.5vw, 2.3rem); }
#knowledge .kbento > :nth-child(1) .kcard2__d{ color: rgba(255,255,255,.78); max-width: 44ch; }
#knowledge .kbento > :nth-child(1) .kcard2__ico{ background: rgba(255,255,255,.16); color:#fff; }
@media (min-width: 900px){
  #knowledge .kbento{ grid-template-columns: repeat(6, 1fr); }
  #knowledge .kbento > :nth-child(1){ grid-column: span 3; grid-row: span 2; min-height: 420px; }
  #knowledge .kbento > :nth-child(2){ grid-column: span 3; }
  #knowledge .kbento > :nth-child(3){ grid-column: span 3; }
  #knowledge .kbento > :nth-child(4){ grid-column: span 2; }
  #knowledge .kbento > :nth-child(5){ grid-column: span 4; }
}

/* the-name: Featured globe panel — light bordered card, copy left, globe
   breaking out of the bottom-right corner */
.adv-reveal .nameglow{
  position:relative; overflow:hidden; background:#FFFFFF; border:1px solid #DFE6EE;
  padding: clamp(28px, 4vw, 64px); min-height: clamp(380px, 36vw, 500px);
}
.adv-reveal .nameglow__halo{ display:none; }
.adv-reveal .nameglow__grid{ display:block; }
.adv-reveal .nameglow__copy{ position:relative; z-index:1; max-width: 60ch; }
.adv-reveal .h-mid .dim2{ color:#828D9B; }
.adv-reveal .nameglow__globe{
  position:absolute; right:-6%; bottom:-36%; width: min(52%, 580px); max-width:none;
  margin:0; background:none; border:none; padding:0; display:block;
}
.adv-reveal .fdn-earth{ max-width:none; }
@media (max-width: 880px){
  .adv-reveal .nameglow__globe{ position:relative; right:auto; bottom:auto; width:72%; margin: 18px 0 -30% auto; }
}

/* close: first line logo blue, second white; copy top-aligns with the image */
#close .sechead__sub{ color: var(--blue); }
#close .sechead__sub .tblue{ color: var(--txt-hi); }
.meetglass--split{ align-items:start; }

/* connection panel: the lady much bigger (client: "much more bigger") */
.rgap2__lady{ height: clamp(500px, 47vw, 680px); }
.rgap2__panel{ min-height: clamp(340px, 32vw, 480px); }
.rgap2.sec{ padding-top: clamp(120px, 14vw, 185px); }

/* footer full name under the wordmark */
.ftr__sub{
  display:block; margin-top:6px; font-family: var(--font-mono); font-size:.62rem;
  font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:#fff;
}

/* ══════════ 2026-09-03c — CLIENT ROUND: real-gap third column, swirl pattern,
   Featured panel fidelity, CapitalQ sub to the right, meet-with-context back to
   light, knowledge split header, white close card, Africa -> Arabia rebuilt on
   the client's HeroSection reference. ══════════ */

/* ── REAL GAP: three columns, all tops aligned; the second FDN is gone ── */
@media (min-width: 881px){
  .rgap__grid{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,.88fr);
    align-items: start;
  }
  .rgap__main{ display: contents; }
  .rgap__h{ grid-column: 1 / -1; }
  .rgap__cols{ grid-column: 1 / span 2; gap: clamp(28px, 4vw, 64px); }
  .rgap__aside{ grid-column: 3; }
}
.rgap__role{ margin-bottom: 18px; }

/* the cursor-following blue glow, light-section variant (client: "the blue
   stuff that moves around... I can't see it where the body copy is") */
.fqglow{ position:relative; isolation:isolate; }
.fqglow::before{
  content:''; position:absolute; inset:-30px; z-index:-1; pointer-events:none;
  background: radial-gradient(360px circle at var(--fq-x, 50%) var(--fq-y, 40%), rgba(226,178,76,.14), transparent 70%);
  opacity:0; transition: opacity .45s ease;
}
.fqglow:hover::before{ opacity:1; }

/* ── CONNECTION PANEL: the client's swirl pattern, scaled big, blended back ── */
.rgap2__panel{
  background:
    radial-gradient(90% 130% at 6% 0%, rgba(255,255,255,.14), transparent 55%),
    var(--blue);
}
.rgap2__panel::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: url('../assets/img/pattern-swirl.webp') no-repeat 50% 32%;
  background-size: auto 260%;
  mix-blend-mode: overlay; opacity:.22;
}
.rgap2__copy{ z-index:2; }
.rgap2__lady{ z-index:2; }

/* ── CAPITALQ: sub copy line now leads the right column, a size down ── */
.cq2head__sub{
  font-size: clamp(1rem, 1.32vw, 1.18rem); line-height:1.4; margin-bottom: 2px;
}

/* ── THE NAME: closer to the client's Featured_05 reference ── */
.adv-reveal .nameglow{
  box-shadow: 0 18px 60px -30px rgba(11,19,31,.4);
  display:flex; align-items:center;
}
.adv-reveal .nameglow__grid{ width:100%; }
.adv-reveal .nameglow__copy{ max-width: min(56%, 620px); }
.adv-reveal .h-mid{
  font-size: clamp(1.45rem, 2.1vw, 2rem); line-height:1.24; letter-spacing:-.018em;
}
.adv-reveal .h-mid .dim2{ color: var(--txt-blue); }
.adv-reveal .lede{ font-size:.95rem; line-height:1.66; }
.adv-reveal .cqname{ font-size: clamp(2rem, 3.4vw, 3rem); }
.nameglow__cta{ margin-top: 22px; }
.adv-reveal .nameglow__globe{ right:-13%; bottom:-46%; width: min(60%, 660px); }
@media (max-width: 880px){
  .adv-reveal .nameglow{ display:block; }
  .adv-reveal .nameglow__copy{ max-width:none; }
}

/* ── MEET WITH CONTEXT: back to light (client) ── */
#first-meeting.sec{ background:#F5F6F8; }

/* ── KNOWLEDGE: split header, both columns left-aligned ── */
.khead{ align-items:end; }
.khead .help2__right{ gap: 12px; }
.khead .help2__pledge{ color: var(--txt-hi); font-size: clamp(1.05rem, 1.5vw, 1.24rem); }

/* ── THE CLOSE: pure white card, no image (client) ── */
.closecard--white{
  position:relative; background:#FFFFFF; border:1px solid #DFE6EE;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.closecard--white .h-major{
  background:none; -webkit-text-fill-color: currentColor; color:#0B0C0E;
}
.closecard--white .sechead__sub{ color: var(--blue); }
.closecard--white .sechead__sub .tblue{ color:#0B0C0E; }
.closecard--white .lede{ color:#3A4149; }

/* ══ AFRICA -> ARABIA — client's HeroSection reference: copy left, slanted
   image right, contact-style info row along the bottom ══ */
.aar{ background: var(--bg-soft); overflow:hidden; }
.aar.sec{ padding-block: 0 clamp(64px, 8vw, 120px); }
.aar__grid{ display:grid; grid-template-columns: 1fr; }
.aar__copy{
  display:flex; flex-direction:column; justify-content:space-between;
  gap: clamp(36px, 5vw, 64px);
  padding: clamp(56px, 7vw, 104px) 20px clamp(40px, 5vw, 64px);
}
@media (min-width:640px){ .aar__copy{ padding-inline: 32px; } }
@media (min-width:768px){ .aar__copy{ padding-inline: 40px; } }
@media (min-width: 981px){
  .aar__grid{ grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items:stretch; }
  .aar__copy{
    padding-left: max(40px, calc((100vw - 1440px) / 2 + 40px));
    padding-right: clamp(36px, 4vw, 64px);
  }
}
.aar__slogan{
  font-family: var(--font-mono); font-weight:500; font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color: var(--txt-blue);
  margin-bottom: 18px;
}
.aar__title{ font-size: clamp(2.4rem, 5vw, 4.2rem); line-height:1.02; }
.aar__rule{
  display:block; width: 80px; height: 4px; background: var(--blue);
  margin: clamp(20px, 2.6vw, 30px) 0;
}
.aar__sub{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing:-.015em; color: var(--txt-hi);
  margin-bottom: 18px;
}
.aar__body p{ font-size:.97rem; line-height:1.72; color: var(--txt); max-width: 54ch; }
.aar__body p + p{ margin-top: 10px; }
.aar__bridge{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem); color: var(--txt-hi) !important;
}
.aar__cta{
  display:inline-flex; align-items:center; gap:.6em; margin-top: 26px;
  font-family: var(--font-display); font-weight:600; font-size:.86rem;
  letter-spacing:.16em; text-transform:uppercase; color: var(--txt-blue);
  transition: color .25s ease, gap .25s ease;
}
.aar__cta:hover{ color: var(--blue-lt); gap:.9em; }
.aar__foot{
  display:grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: 1fr;
  padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--line);
}
@media (min-width: 720px){ .aar__foot{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.aar__fitem{ display:flex; align-items:flex-start; gap: 10px; }
.aar__fico{ flex:none; width:20px; height:20px; color: var(--blue-lt); }
.aar__fico svg{ width:100%; height:100%; display:block; }
.aar__fitem p{ font-size:.8rem; line-height:1.55; color: var(--txt-dim); }
.aar__fitem .aar__mandate{ color: var(--txt-blue); font-weight:600; }
.aar__stages{ font-family: var(--font-mono); letter-spacing:.04em; font-size:.72rem !important; }
.aar__fig{ position:relative; min-height: clamp(300px, 62vw, 420px); }
.aar__fig img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 40%;
}
@media (min-width: 981px){
  .aar__fig{ min-height: clamp(520px, 52vw, 720px); }
  .aar__fig img{ clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%); }
}
.aar__close{ margin-top: clamp(44px, 5.5vw, 72px); margin-bottom:0; }

/* ── 2026-09-03c fixups ── */
/* the white close card: the second half of the sub line was inheriting the
   dark-theme white from #close and vanishing into the card */
#close .closecard--white .sechead__sub{ color: var(--blue); }
#close .closecard--white .sechead__sub .tblue{ color:#0B0C0E; }

/* real gap: the third column reads with the other two, not against them */
.rgap__aside{ text-align:left; }
.rgap__aside .btn{ align-self:flex-start; }

/* ══════════ 2026-09-03d — CLIENT ROUND: ring on the persona panel, one divider
   instead of many, tighter real-gap columns, pattern edge-to-edge, the name
   panel moves onto the black run, descender clipping fixed, world-map close. ══════════ */

/* ── the blue line that travels around the persona panel. It lives on its own
   element now: .gring::before and the cursor-glow .dotglass::before are the
   same pseudo, and the glow (defined later) was winning. ── */
.gring2{
  position:absolute; inset:0; z-index:6; pointer-events:none; padding:2px;
  background: conic-gradient(from var(--gring-a),
    transparent 0deg, transparent 210deg,
    rgba(242,207,124,.5) 262deg, #F2CF7C 296deg, #E2B24C 318deg,
    rgba(226,178,76,.35) 342deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: gringSpin 5.5s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .gring2{ animation:none; } }

/* one divider AFTER the paragraphs, none between them (client) */
.ppane2__rows p{ padding-block:0; border-top:0; }
.ppane2__rows p + p{ margin-top:13px; }
.ppane2__close{
  border-top:1px solid var(--line);
  padding-top: clamp(16px, 2vw, 24px);
  margin-top: clamp(18px, 2.4vw, 28px);
}

/* ── real gap: the three columns ride up under the headline ── */
.rgap__grid{ row-gap: 0; }
.rgap__h{ margin-bottom: clamp(14px, 1.8vw, 22px); }

/* ── connection panel: the swirl now spans the rectangle end to end ── */
.rgap2__panel::before{
  background-size: 100% auto;
  background-position: 50% 42%;
  opacity:.2;
}

/* ── the black run continues through the name panel (client) ── */
#intelligence.sec{ padding-bottom: clamp(150px, 17vw, 250px); }
.adv-reveal{ background: var(--bg-soft); }
.adv-reveal.sec{ padding-top: 0; padding-bottom: clamp(96px, 11vw, 160px); }
.adv-reveal .nameglow{ margin-top: clamp(-230px, -15vw, -130px); }

/* ── descenders were being cut: background-clip:text paints only the
   background box, and the tight line-height left the g/y tails outside it ── */
.h-hero, .h-major,
.sec:not(.sec--light):not(.adv-reveal):not(.rgap) .h-mid,
.help2__title, .stack-state p.on{
  padding-bottom: .14em; margin-bottom: -.14em;
}

/* ── the close: plain world-map landscape behind the card ── */
.closecard--white{ overflow:hidden; }
.closecard__map{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: url('../assets/img/worldmap-dots.svg') no-repeat 50% 52%;
  background-size: 118% auto;
  opacity:.5;
}
.closecard--white > .sechead, .closecard--white > .close-voice{ position:relative; z-index:1; }

/* ── a little more life on scroll: cards arrive in sequence ── */
.kbento > *, .help2__grid > *, .cqcards > *{
  transition: opacity .6s ease, transform .65s cubic-bezier(.22,.61,.36,1);
}
[data-fade] .kbento > :nth-child(2), [data-fade].kbento > :nth-child(2){ transition-delay:.06s; }
.kbento > :nth-child(3){ transition-delay:.12s; }
.kbento > :nth-child(4){ transition-delay:.18s; }
.kbento > :nth-child(5){ transition-delay:.24s; }
.help2__grid > :nth-child(2){ transition-delay:.08s; }
.help2__grid > :nth-child(3){ transition-delay:.16s; }

/* ══════════ 2026-09-03e — FOR BUSINESSES: full-viewport hero on the client's
   image, label small and white on top, catch line leading; the homepage close
   card ported to every page that has one. ══════════ */

/* ── the hero fills the viewport: the next section stays below the fold ── */
.hero--biz{
  min-height: 100vh; min-height: 100svh;
  display:flex; align-items:center;
  padding-block: clamp(120px, 15vh, 190px) clamp(48px, 7vh, 90px);
}
.hero--biz .hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position: 68% 50%;
}
.hero--biz .hero__scrim{
  background:
    linear-gradient(90deg, rgba(8,9,12,.95) 0%, rgba(8,9,12,.86) 30%, rgba(8,9,12,.55) 54%, rgba(8,9,12,.16) 76%, rgba(8,9,12,0) 100%),
    linear-gradient(0deg, rgba(8,9,12,.7) 0%, rgba(8,9,12,.1) 42%, rgba(8,9,12,0) 100%);
}
.bizhero{ max-width: min(58%, 780px); }

/* small, white, on top — not blue (client) */
.bizhero__kick{
  font-family: var(--font-mono); font-weight:600; font-size:.74rem;
  letter-spacing:.28em; text-transform:uppercase; color: var(--txt-hi);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.bizhero__h{
  font-size: clamp(2.1rem, 4.3vw, 3.7rem); line-height:1.06; letter-spacing:-.028em;
}
.bizhero__sub{
  margin-top: clamp(16px, 2.2vw, 26px); max-width: 60ch;
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1rem, 1.45vw, 1.24rem); line-height:1.5; letter-spacing:-.012em;
  color: var(--txt-hi);
}
.bizhero .lede{ color: rgba(244,248,251,.9); }
.bizhero .hero__lede{ margin-top: clamp(18px, 2.4vw, 28px); }
.bizhero .cta-set{ margin-top: clamp(22px, 3vw, 34px); }
@media (max-width: 900px){
  .bizhero{ max-width:none; }
  .hero--biz .hero__bg img{ object-position: 74% 50%; }
}

/* ── the close card, now shared by every page that closes ── */
.closecard__cta{ justify-content:center; margin-top: clamp(22px, 3vw, 32px); }
.closecard--white .h-sub{ color:#0B0C0E; }
.closecard--white .h-sub.tblue{ color: var(--blue); }
.closecard--white .close-voice{ max-width: 780px; margin-inline:auto; }
/* glass buttons need dark ink on the white card */
.closecard--white .btn--glass{
  background: rgba(11,19,31,.03); color:#0B0C0E; border-color:#C6D0DC;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.closecard--white .btn--glass:hover{ border-color: var(--blue); color: var(--blue); }

/* short laptop screens: the full-viewport hero has to hold the CTAs too */
@media (min-width: 901px) and (max-height: 800px){
  .hero--biz{ padding-block: clamp(92px, 13vh, 128px) clamp(26px, 5vh, 44px); }
  .bizhero__h{ font-size: clamp(1.85rem, 3.3vw, 2.65rem); }
  .bizhero__sub{ font-size: 1rem; margin-top: 14px; }
  .bizhero .lede{ font-size: .92rem; line-height:1.6; }
  .bizhero .hero__lede{ margin-top: 16px; }
  .bizhero .lede + .lede{ margin-top: 8px !important; }
  .bizhero .cta-set{ margin-top: 20px; }
  .bizhero__kick{ margin-bottom: 12px; }
}

/* ══════════ 2026-09-03f — FOR BUSINESSES: hero copy as one block, the honest
   questions as sliding blue cards + rotating confidence line, the pattern as a
   two-column orbit. ══════════ */

/* screen-reader-only text that copycheck still sees */
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── hero ── */
.hero--biz .hero__bg img{ object-position: 68% 5%; }
.bizhero__sub{ color: var(--txt-blue); }
.bizhero__body{ margin-top: clamp(18px, 2.4vw, 28px); max-width: 62ch; }
.bizhero__body strong{ font-weight:700; color: var(--txt-hi); }

/* ── THE HONEST QUESTIONS ── */
.bhq{ background: var(--bg); }
.bhq__qs{
  display:grid; gap: clamp(12px, 1.4vw, 18px);
  grid-template-columns: 1fr; margin-top: clamp(8px, 1.2vw, 16px);
}
@media (min-width: 760px){ .bhq__qs{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.bhq__q{
  position:relative; padding: clamp(20px, 2.4vw, 30px);
  background: linear-gradient(118deg, #C99A36 0%, #E2B24C 62%, #F2CF7C 100%);
  color:#fff; font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.02rem, 1.45vw, 1.24rem); line-height:1.35; letter-spacing:-.014em;
  box-shadow: 0 18px 46px -26px rgba(226,178,76,.9);
  transform: translateX(-46px); opacity:0;
  transition: opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.bhq__q.in{ transform:none; opacity:1; }
.bhq__q:hover{ transform: translateY(-3px); }
.bhq__stop{ margin-top: clamp(26px, 3.2vw, 40px); }
.bhq__split{
  display:grid; gap: clamp(26px, 4vw, 64px); align-items:start;
  margin-top: clamp(18px, 2.4vw, 28px);
}
@media (min-width: 900px){ .bhq__split{ grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); } }
.bhq__col--ask{ border-left: 2px solid var(--blue); padding-left: clamp(18px, 2.4vw, 30px); }
.bhq__ask{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height:1.36; letter-spacing:-.015em;
  color: var(--txt-hi);
}
.bhq__ask--blue{ color: var(--txt-blue); }
.bhq__start{
  margin-block: 12px; font-family: var(--font-mono); font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color: var(--txt-dim);
}
.bhq__conf{
  margin-top: clamp(20px, 2.6vw, 30px);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.36em;
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); letter-spacing:-.016em; color: var(--txt-hi);
}
.bhq__rot{ position:relative; display:inline-block; min-width: 8.6em; height:1.35em; }
.bhq__rotitem{
  position:absolute; left:0; top:0; white-space:nowrap; color: var(--txt-blue);
  opacity:0; transform: translateY(.42em);
  transition: opacity .4s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.bhq__rotitem.is-on{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .bhq__q{ transform:none; opacity:1; }
  .bhq__rotitem{ transition:none; }
}

/* ── THE PATTERN: copy left, orbiting reasons right ── */
.pat{ background: var(--bg-soft); }
.pat__panel{
  position:relative; overflow:hidden;
  border:1px solid var(--line); background: rgba(244,248,251,.02);
  display:grid; grid-template-columns: 1fr; align-items:center;
  min-height: clamp(420px, 44vw, 520px);
  padding: clamp(30px, 4vw, 60px);
}
@media (min-width: 940px){
  .pat__panel{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding-right:0; }
}
.pat__copy{ position:relative; z-index:2; max-width: 46ch; }
.pat__copy .h-major{ font-size: clamp(2rem, 3.4vw, 3rem); }
.pat__orbit{ position:relative; height: clamp(300px, 34vw, 460px); }
.pat__stage{
  position:absolute; top:50%; left:50%;
  width: clamp(430px, 46vw, 660px); aspect-ratio:1;
  transform: translate(-38%, -50%);
}
@media (min-width: 940px){ .pat__stage{ transform: translate(-22%, -50%); } }
.pat__core{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: clamp(62px, 6vw, 84px); aspect-ratio:1; display:grid; place-items:center;
  background: rgba(244,248,251,.06); border:1px solid rgba(244,248,251,.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--blue-lt); z-index:2;
}
.pat__core svg{ width:46%; height:46%; }
.pat__ring{
  position:absolute; left:50%; top:50%; border:1px dotted rgba(244,248,251,.16);
  border-radius:50%; transform: translate(-50%,-50%);
  animation: patSpin linear infinite;
}
.pat__ring--1{ width:46%; height:46%; animation-duration:26s; }
.pat__ring--2{ width:72%; height:72%; animation-duration:34s; }
.pat__ring--3{ width:98%; height:98%; animation-duration:44s; }
@keyframes patSpin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }
.pat__orbit:hover .pat__ring, .pat__orbit:hover .pat__spin{ animation-play-state: paused; }
.pat__node{ position:absolute; transform: translate(-50%,-50%); }
.pat__spin{
  position:relative; display:block;
  animation: patSpinBack linear infinite;
}
@keyframes patSpinBack{ to{ transform: rotate(-360deg); } }
.pat__ico{
  display:grid; place-items:center;
  width: clamp(46px, 4.4vw, 60px); aspect-ratio:1;
  background: rgba(244,248,251,.07); border:1px solid rgba(244,248,251,.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--txt-hi); transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.pat__ico svg{ width:48%; height:48%; }
.pat__node:hover .pat__ico{
  background: var(--blue); border-color: var(--blue-lt); color:#fff;
}
.pat__lbl{
  position:absolute; left:50%; top: calc(100% + 10px); transform: translateX(-50%);
  white-space:nowrap; padding: 7px 12px;
  background: rgba(10,12,16,.92); border:1px solid var(--line);
  font-size:.76rem; color: var(--txt-hi); pointer-events:none;
  opacity:0; transition: opacity .25s ease;
}
.pat__node:hover .pat__lbl{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .pat__ring, .pat__spin{ animation:none; }
}

/* ── 2026-09-03f fixups: real circular orbits + every icon reachable ── */
.pat__paths{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.pat__paths circle{
  fill:none; stroke: rgba(244,248,251,.17); stroke-width:.22; stroke-dasharray: .9 1.7;
}
/* the rings are now invisible carriers — the SVG draws the paths */
.pat__ring{ border:0; }
/* centre the orbit so all four icons can be hovered, and let tooltips escape */
.pat__panel{ overflow: visible; }
@media (min-width: 940px){ .pat__panel{ padding-right: clamp(30px, 4vw, 60px); } }
.pat__orbit{ display:grid; place-items:center; }
.pat__stage{
  position:relative; top:auto; left:auto; transform:none;
  width: min(100%, 460px);
}
@media (min-width: 940px){ .pat__stage{ transform:none; } }

/* ══════════ 2026-09-03g — INSIDE CAPITALQ as read-more cards, THE OUTCOME as a
   pre-meeting ledger (first concept for client review). ══════════ */

.feats{ background: var(--bg); }
.fcards{
  display:grid; gap: clamp(14px, 1.8vw, 22px); grid-template-columns: 1fr;
  margin-top: clamp(26px, 3.4vw, 42px);
}
@media (min-width: 860px){ .fcards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.fcard{
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  padding: clamp(24px, 2.8vw, 36px);
  background: rgba(244,248,251,.04); border:1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.fcard__ix{
  font-family: var(--font-mono); font-weight:500; font-size:.72rem;
  letter-spacing:.2em; color: var(--txt-blue); margin-bottom: 14px;
}
.fcard__t{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.18rem, 1.75vw, 1.5rem); line-height:1.24; letter-spacing:-.018em;
  color: var(--txt-hi);
}
.fcard__sub{
  margin-top: 8px; font-family: var(--font-display); font-weight:500;
  font-size:.95rem; line-height:1.45; color: var(--txt-blue);
}
.fcard__lead{ margin-top: 16px; }
.fcard__lead p, .fcard__body p{ font-size:.93rem; line-height:1.7; color: var(--txt); }
.fcard__lead p + p, .fcard__body p + p{ margin-top: 10px; }
.fcard .punch{
  margin-top: auto; padding-top: 18px;
  font-family: var(--font-display); font-weight:600; font-size:.98rem; line-height:1.45;
  color: var(--txt-blue);
}
.fcard__more{ width:100%; margin-top: 14px; }
.fcard__more summary{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font-family: var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color: var(--txt-hi);
  padding: 9px 14px; border:1px solid var(--line);
  background: rgba(244,248,251,.05);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.fcard__more summary::-webkit-details-marker{ display:none; }
.fcard__more summary:hover{ border-color: var(--blue-lt); color: var(--blue-lt); }
.fcard__chev{
  width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px,-1px); transition: transform .3s ease;
}
.fcard__more[open] .fcard__chev{ transform: rotate(-135deg) translate(-1px,-1px); }
.fcard__more[open] summary{ border-color: var(--blue); color: var(--blue-lt); }
.fcard__body{ margin-top: 16px; animation: fcardIn .4s ease both; }
@keyframes fcardIn{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform:none; } }
.fcard__body .gcard{ margin-top: 16px; }
.fcard__body .ticks{ margin-top: 14px; }

/* ── THE OUTCOME — everything already done before the first meeting ── */
.outc{ background: var(--bg-soft); }
.outc__grid{
  display:grid; gap: clamp(28px, 4vw, 64px); align-items:start;
  margin-top: clamp(30px, 4vw, 52px);
}
@media (min-width: 940px){ .outc__grid{ grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); } }
.outc__kick{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--txt-hi); margin-bottom: 20px;
}
.outc__steps{ list-style:none; position:relative; padding-left: 26px; }
.outc__steps::before{
  content:''; position:absolute; left:6px; top:6px; bottom:6px; width:1px;
  background: linear-gradient(180deg, var(--blue) 0%, rgba(226,178,76,.15) 100%);
}
.outc__step{
  position:relative; padding-block: 11px; border-top:1px solid var(--line);
}
.outc__step:first-child{ border-top:0; }
.outc__dot{
  position:absolute; left:-26px; top:15px; width:13px; height:13px;
  background: var(--blue); display:block;
}
.outc__dot::after{
  content:''; position:absolute; left:3.5px; top:1.5px; width:4px; height:7px;
  border-right:1.6px solid #fff; border-bottom:1.6px solid #fff; transform: rotate(42deg);
}
.outc__txt{ font-size:.95rem; line-height:1.6; color: var(--txt); }
.outc__card{
  position:relative; overflow:hidden; padding: clamp(26px, 3.2vw, 42px);
  background: rgba(244,248,251,.04); border:1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
@media (min-width: 940px){ .outc__card{ position:sticky; top: 120px; } }
.outc__cardmap{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: url('../assets/img/worldmap-dots.svg') no-repeat 60% 40%;
  background-size: 150% auto; opacity:.24;
}
.outc__card > *{ position:relative; z-index:1; }
.outc__cardk{
  font-family: var(--font-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color: var(--txt-blue); margin-bottom: 18px;
}
.outc__line{ font-size:.98rem; line-height:1.6; color: var(--txt); }
.outc__was{
  margin-top: 20px; font-size:.95rem; line-height:1.55;
  color: var(--txt-dim); text-decoration: line-through; text-decoration-color: rgba(226,178,76,.55);
}
.outc__now{
  margin-top: 12px; font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.2rem, 1.9vw, 1.62rem); line-height:1.3; letter-spacing:-.018em;
  color: var(--txt-blue);
}

/* ══════════ 2026-09-03h — THE SHIFT (light, rotating photos), THE APPROACH
   (swipeable step cards), THE PLATFORM (eight framed tiles, light + blue glow). ══════════ */

/* ── THE SHIFT ── */
.shift{ background:#F5F7FA; }
.shift__grid{ display:grid; gap: clamp(32px, 5vw, 76px); align-items:center; }
@media (min-width: 940px){ .shift__grid{ grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); } }
.shift__copy .sechead__sub{ margin-top:10px; }
.shift__body{
  margin-top: clamp(18px, 2.4vw, 26px); max-width: 60ch;
  font-size: clamp(.97rem, 1.15vw, 1.05rem); line-height:1.75; color:#3A4149;
}
.shift__body strong{ font-weight:700; color:#0B0C0E; }
.shift__close{
  margin-top: clamp(20px, 2.6vw, 30px);
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height:1.45; letter-spacing:-.014em;
  color:#0B0C0E;
}
.shift__stage{
  position:relative; width:100%; aspect-ratio: 4 / 3.1; perspective: 1100px;
}
.shift__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  box-shadow: 0 26px 60px -30px rgba(11,19,31,.55);
  transition: transform .9s cubic-bezier(.4,1.4,.35,1), opacity .9s ease;
  backface-visibility:hidden;
}
.shift__img[data-pos="0"]{ transform: none; z-index:3; opacity:1; }
.shift__img[data-pos="1"]{ transform: translate3d(9%, -7%, 0) scale(.87) rotateY(-13deg); z-index:2; opacity:1; }
.shift__img[data-pos="2"]{ transform: translate3d(-9%, -7%, 0) scale(.87) rotateY(13deg); z-index:1; opacity:1; }
@media (prefers-reduced-motion: reduce){ .shift__img{ transition:none; } }

/* ── THE APPROACH: step cards you can move through ── */
.appr{ background: var(--bg-soft); }
.scar{ margin-top: clamp(26px, 3.4vw, 42px); }
.scar__head{ display:flex; justify-content:flex-end; margin-bottom:14px; }
.scar__btns{ display:flex; gap:8px; }
.scar__btn{
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  background: rgba(244,248,251,.06); border:1px solid var(--line); color: var(--txt-hi);
  transition: background .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}
.scar__btn:hover{ background: var(--blue); border-color: var(--blue); color:#fff; }
.scar__btn svg{ width:15px; height:15px; }
.scar__btn[disabled]{ opacity:.35; cursor:default; }
.scar__btn[disabled]:hover{ background: rgba(244,248,251,.06); border-color: var(--line); color: var(--txt-hi); }
.scar__track{
  display:flex; gap: clamp(14px, 1.8vw, 22px);
  overflow-x:auto; scroll-snap-type: x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth;
  padding-bottom: 4px;
}
.scar__track::-webkit-scrollbar{ display:none; }
.scard{
  position:relative; isolation:isolate; overflow:hidden; flex:none;
  width: clamp(250px, 78vw, 300px); aspect-ratio: 3 / 4;
  scroll-snap-align:start; display:flex; flex-direction:column; justify-content:space-between;
  padding: clamp(20px, 2.2vw, 28px); border:1px solid var(--line);
}
@media (min-width: 700px){ .scard{ width: clamp(260px, 31vw, 330px); } }
.scard__img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; transition: transform .6s ease;
}
.scard:hover .scard__img{ transform: scale(1.05); }
.scard__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(180deg, rgba(8,10,14,.72) 0%, rgba(8,10,14,.42) 42%, rgba(8,10,14,.9) 100%);
}
.scard__ix{
  font-family: var(--font-mono); font-size:.74rem; font-weight:500;
  letter-spacing:.18em; color: rgba(244,248,251,.72);
}
.scard__t{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing:.04em; text-transform:uppercase;
  color:#fff; margin-bottom: 8px;
}
.scard__d{ font-size:.88rem; line-height:1.6; color: rgba(244,248,251,.82); }

/* ── THE PLATFORM: eight framed tiles, four up four down ── */
.plat{ background:#FFFFFF; }
.ptiles{
  display:grid; gap: clamp(12px, 1.5vw, 18px);
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin-top: clamp(30px, 4vw, 50px);
}
@media (min-width: 900px){ .ptiles{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.ptile{
  display:grid; place-items:center; text-align:center;
  min-height: clamp(104px, 11vw, 136px); padding: clamp(16px, 2vw, 24px);
  background:#FFFFFF; border:1px solid #D7E0EC;
  box-shadow: 0 12px 30px -22px rgba(226,178,76,.55);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ptile:hover{
  transform: translateY(-3px); border-color: var(--blue);
  box-shadow: 0 0 0 1px rgba(226,178,76,.35), 0 18px 44px -20px rgba(226,178,76,.75);
}
.ptile__t{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(.94rem, 1.15vw, 1.06rem); line-height:1.35; letter-spacing:-.012em;
  color:#0B0C0E;
}
.ptile__t sup, .ptile__t .tm{ color: var(--blue); }
.plat__close{ margin-top: clamp(40px, 5vw, 68px); text-align:center; }
.plat__close p{ color:#0B0C0E; }
.plat__close p.blue{ color: var(--blue); }

/* ── 2026-09-03h fixup: the white-headline gradient made the closing lines
   vanish on the light Platform section ── */
.plat__close p.on{
  background:none; -webkit-text-fill-color: currentColor; color:#0B0C0E;
}
.plat__close p{ font-size: clamp(1.15rem, 2.2vw, 1.9rem); }

/* ══════════ 2026-09-03i — CLIENT ROUND: name reveal loses its card, questions
   slide in from the right, the pattern stands on its own, the shift flips,
   approach cards become blue/white pattern tiles, features slide two-up. ══════════ */

/* ── the name reveal is part of the advantage run now, not a card on it ── */
.adv-reveal .nameglow--bare{
  background:none; border:0; box-shadow:none; padding:0; min-height:0;
}
.adv-reveal .nameglow--bare .nameglow__halo{
  display:block; position:absolute; inset:-10% -20% auto auto;
  width: min(70%, 760px); aspect-ratio:1; pointer-events:none;
  background: radial-gradient(circle, rgba(226,178,76,.30), transparent 68%);
}
.adv-reveal .nameglow--bare .h-mid{ color: var(--txt-hi); }
.adv-reveal .nameglow--bare .h-mid .dim2{ color: var(--txt-blue); }
.adv-reveal .nameglow--bare .lede{ color: var(--txt); }
.adv-reveal .nameglow--bare .h-sub{ color: var(--txt-hi); }
.adv-reveal .nameglow--bare .cqname{ color: var(--txt-hi); }
.adv-reveal.sec{ padding-top: clamp(20px, 3vw, 46px); }
.adv-reveal .nameglow--bare{ margin-top: 0; }

/* ── the four questions arrive from the right ── */
.bhq__q{ transform: translateX(52px); }
/* the rotating word sat off the prefix's baseline: an absolutely-positioned
   inline-block has no in-flow content to set one, so give it a zero-width char */
.bhq__rot::before{ content:'\200b'; display:inline; }
.bhq__rot{ height:auto; line-height:1.25; }
.bhq__rotitem{ line-height:1.25; }

/* ── THE PATTERN stands on its own ── */
.pat__panel{ border:0; background:none; padding:0; min-height:0; }
@media (min-width: 940px){ .pat__panel{ padding-right:0; gap: clamp(28px, 4vw, 64px); } }
/* the empty outer ring was a full-size box on top of the icons and swallowed
   every hover — rings carry no pointer now, the nodes do */
.pat__ring{ pointer-events:none; }
.pat__node{ pointer-events:auto; }
.pat__lbl{ z-index:4; }

/* ── THE SHIFT: photos left, copy right ── */
@media (min-width: 940px){
  .shift__grid{ grid-template-columns: minmax(0,.98fr) minmax(0,1.02fr); }
  .shift__stage{ order:1; }
  .shift__copy{ order:2; }
}

/* ── approach + feature carousels ── */
.scar__track{ --scar-gap: clamp(14px, 1.8vw, 22px); gap: var(--scar-gap); }
.scar--3up .scard{ width:auto; flex: 0 0 calc((100% - 2 * var(--scar-gap)) / 3); }
@media (max-width: 860px){ .scar--3up .scard{ flex-basis: calc((100% - var(--scar-gap)) / 2); } }
@media (max-width: 620px){ .scar--3up .scard{ flex-basis: 100%; } }
.scar--2up .fcard{ flex: 0 0 calc((100% - var(--scar-gap)) / 2); scroll-snap-align:start; }
@media (max-width: 760px){ .scar--2up .fcard{ flex-basis: 100%; } }
.scar--2up .scar__track{ align-items: stretch; }
.fcards.scar__track{ display:flex; grid-template-columns:none; margin-top:0; }
.scar--2up{ margin-top: clamp(26px, 3.4vw, 42px); }

/* approach cards: blue and white tiles carrying the house swirl, no photos */
.scard--blue{
  background: linear-gradient(142deg, #C99A36 0%, #E2B24C 58%, #F2CF7C 100%);
  border-color: transparent;
}
.scard--light{ background:#F2F5FA; border-color:#D7E0EC; }
.scard__pat{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-mask: url('../assets/img/pattern-swirl.webp') no-repeat 50% 38%;
          mask: url('../assets/img/pattern-swirl.webp') no-repeat 50% 38%;
  -webkit-mask-size: 175% auto; mask-size: 175% auto;
}
.scard--blue .scard__pat{ background: rgba(255,255,255,.17); }
.scard--light .scard__pat{ background: rgba(226,178,76,.15); }
.scard--blue .scard__ix{ color: rgba(255,255,255,.72); }
.scard--blue .scard__t{ color:#fff; }
.scard--blue .scard__d{ color: rgba(255,255,255,.86); }
.scard--light .scard__ix{ color:#5A6472; }
.scard--light .scard__t{ color:#0B0C0E; }
.scard--light .scard__d{ color:#3A4149; }
.scard{ aspect-ratio: 4 / 4.4; }

/* ── THE PLATFORM: the blue wash belongs to the section, not just the tiles ── */
.plat{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(226,178,76,.16), transparent 62%),
    radial-gradient(90% 60% at 50% 108%, rgba(226,178,76,.12), transparent 64%),
    #FFFFFF;
}

/* ── THE OUTCOME: a picture of the meeting itself ── */
.outc__cardimg{
  display:block; width:100%; aspect-ratio: 16 / 9; object-fit:cover;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}

/* ══════════ 2026-09-03j — the four questions become one continuously sliding
   row; the pattern lists four boxes instead of orbiting; the outcome photo
   moves behind the card. ══════════ */

/* ── the questions ride a marquee, right to left, all four together ── */
.bhq__mq{
  position:relative; overflow:hidden; margin-top: clamp(10px, 1.4vw, 18px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.bhq__mqtrack{ display:flex; width:max-content; animation: bhqSlide 34s linear infinite; }
.bhq__mq:hover .bhq__mqtrack{ animation-play-state: paused; }
.bhq__mqgroup{ display:flex; }
@keyframes bhqSlide{ to{ transform: translate3d(-33.3333%, 0, 0); } }
@media (prefers-reduced-motion: reduce){ .bhq__mqtrack{ animation:none; } }

/* the card itself: the gap rides as margin so one group is exactly a third of
   the track and the loop has no seam */
.bhq__q{
  flex: 0 0 clamp(250px, 25vw, 350px);
  margin-right: clamp(12px, 1.4vw, 18px);
  display:flex; align-items:center; min-height: clamp(96px, 9vw, 118px);
  padding: clamp(18px, 2.2vw, 28px);
  transform:none; opacity:1;            /* no scroll-in — it is always moving */
  transition: none;
}
.bhq__q:hover{ transform:none; }
.bhq__stop{ margin-top: clamp(26px, 3.2vw, 40px); }

/* ── THE PATTERN: four boxes listed down the right column ── */
.pat__list{ list-style:none; display:grid; gap: clamp(10px, 1.2vw, 14px); }
.pat__item{
  display:flex; align-items:center; gap: clamp(14px, 1.6vw, 20px);
  padding: clamp(16px, 1.9vw, 24px);
  background: rgba(244,248,251,.045); border:1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.pat__item:hover{
  border-color: var(--blue); background: rgba(226,178,76,.1); transform: translateX(4px);
}
.pat__item .pat__ico{
  flex:none; width: clamp(44px, 4vw, 54px); aspect-ratio:1;
  display:grid; place-items:center;
  background: rgba(226,178,76,.16); border:1px solid rgba(242,207,124,.3);
  color: var(--blue-lt);
}
.pat__item .pat__ico svg{ width:46%; height:46%; }
.pat__itemt{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1rem, 1.35vw, 1.18rem); letter-spacing:-.014em; color: var(--txt-hi);
}
.pat__orbit, .pat__stage, .pat__paths, .pat__ring, .pat__core{ display:none; }

/* ── THE OUTCOME: the meeting photo sits behind the card ── */
.outc__cardbg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,12,16,.58) 0%, rgba(10,12,16,.84) 52%, rgba(10,12,16,.95) 100%),
    url('../assets/img/marquee-11.webp') center 32% / cover no-repeat;
}

/* ══════════ 2026-09-03k — header (Team back, white links, blue hover), the
   contact page (full-bleed hero, white Get in Touch, photo moved to the FAQ),
   and the outcome kicker contrast. ══════════ */

/* ── header ── */
.hdr2__link{ color:#fff; }
.hdr2__link:hover{ background: var(--blue); color:#fff; }
.hdr2__link.is-here{ color: var(--txt-blue); }
.hdr2__link.is-here:hover{ color:#fff; }

/* ── the outcome kicker was washing out on the new photo ── */
.outc__cardk{ color:#F2CF7C; text-shadow: 0 1px 10px rgba(0,0,0,.85); }

/* ── contact hero fills the screen, like the other landing heroes ── */
.hero--full{
  min-height: 100vh; min-height: 100svh;
  display:flex; align-items:center;
  padding-block: clamp(120px, 15vh, 190px) clamp(48px, 7vh, 90px);
}
.hero--full .hero__bg img{ width:100%; height:100%; object-fit:cover; object-position: 50% 42%; }
.hero--full .hero__scrim{
  background:
    linear-gradient(90deg, rgba(8,9,12,.94) 0%, rgba(8,9,12,.84) 32%, rgba(8,9,12,.5) 58%, rgba(8,9,12,.14) 80%, rgba(8,9,12,0) 100%),
    linear-gradient(0deg, rgba(8,9,12,.7) 0%, rgba(8,9,12,.1) 44%, rgba(8,9,12,0) 100%);
}
.ctahero__body{ font-size: clamp(.92rem, 1.05vw, 1rem); line-height:1.7; max-width: 56ch; }
@media (min-width: 901px) and (max-height: 800px){
  .hero--full{ padding-block: clamp(92px, 13vh, 128px) clamp(26px, 5vh, 44px); }
}

/* ── GET IN TOUCH on white. NOTE: the client asked for the headline "white in
   colour" on a white section — that would be invisible, so the heading takes
   the light-section ink and this is flagged back to him. ── */
.touch--light{ background:#FFFFFF; }
.touch--light .h-major{
  background:none; -webkit-text-fill-color: currentColor; color:#0B0C0E;
}
.touch--light .lede{ color:#3A4149; }
.touch--light .h-mid{ color:#0B0C0E; }
.touch--light .kick{ color: var(--blue); }
/* the glass card stays, but as light glass */
.touch--light .fqcard{
  background: rgba(255,255,255,.72); border:1px solid #D7E0EC;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px -30px rgba(11,19,31,.4);
}
.touch--light .fld__lbl{ color:#3A4149; }
.touch--light .fld__lbl i{ color: var(--blue); }
.touch--light .fld__in{
  background:#FFFFFF; border:1px solid #CBD6E4; color:#0B0C0E;
}
.touch--light .fld__in::placeholder{ color:#8A94A3; }
.touch--light .fld__in:focus{ border-color: var(--blue); }
/* the dropdown list itself: white-on-white made the options unreadable */
.touch--light .fld__sel, .touch--light .fld__sel option{
  color:#0B0C0E; background:#FFFFFF;
}
.touch--light .fld--check{ color:#3A4149; }
.touch--light .chip span{ border-color:#CBD6E4; color:#3A4149; }
.touch--light .chip input:checked + span{
  border-color: var(--blue); color: var(--blue); background: rgba(226,178,76,.08);
}
.touch--light .ftr__h{ color:#5A6472; }
.touch--light .ftr__link{ color:#0B0C0E; opacity:1; }
.touch--light .ftr__link:hover{ color: var(--blue); }
.touch--light .fq__ic{ background: rgba(226,178,76,.1); color: var(--blue); }
.touch--light .btn--glass{
  background: rgba(11,19,31,.03); color:#0B0C0E; border-color:#C6D0DC;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
/* label and value belong together — the old gaps read as separate blocks */
.cinfo .ftr__h{ margin-bottom: 4px; }
.cinfo__row .ftr__list{ margin-top: 2px; }
.cinfo{ gap: 20px; }

/* the FAQ inherits the photo the contact section gave up */
.faqband .close-band__bg img{ object-position: 50% 42%; }

/* ── 2026-09-03k fixups ── */
/* the white-headline gradient followed .h-mid onto the white contact card
   (the section is .touch--light, not .sec--light, so the guard missed it) */
.touch--light .h-mid, .touch--light .h-major{
  background:none; -webkit-text-fill-color: currentColor; color:#0B0C0E;
}
/* five nav links + two buttons wrapped once the capsule condensed on scroll */
.hdr2__link{ white-space:nowrap; padding:9px 11px; font-size:.86rem; }
.hdr2__links{ gap:0; }
@media (min-width: 1180px){ .hdr2__link{ padding:9px 13px; font-size:.9rem; } }
.hdr2__bar{ flex-wrap:nowrap; }
.brand__word, .brand__sub{ white-space:nowrap; }

/* .h-mid has no light-section colour of its own — give it one here */
.touch--light .h-mid{ color:#0B0C0E; }

/* ══════════ 2026-09-03l — KNOWLEDGE CENTRE: centred full-bleed hero, the two
   Figma frames (Latest Thinking card, Start Here chips), the Library on the
   homepage Advantage carousel, subscribe with email capture on a skyline. ══════════ */

/* ── hero: centred on the client's group photo ── */
.kchero .hero__inner{ display:flex; justify-content:center; }
.kchero__stack{ text-align:center; max-width: 860px; }
.kchero__lede{ margin-inline:auto; max-width: 62ch; font-size: clamp(.95rem, 1.1vw, 1.05rem); }
.kchero .hero__bg img{ object-position: 50% 30%; }
.kchero .hero__scrim{
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(8,9,12,.72), rgba(8,9,12,.3) 70%, rgba(8,9,12,.1) 100%),
    linear-gradient(0deg, rgba(8,9,12,.85) 0%, rgba(8,9,12,.25) 40%, rgba(8,9,12,.2) 100%);
}

/* ── LATEST THINKING: the Figma card ── */
.lt{
  display:grid; border:1px solid var(--line); overflow:hidden;
  background: linear-gradient(135deg, #181D38 0%, #131731 55%, #0F1326 100%);
}
@media (min-width: 900px){ .lt{ grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } }
.lt__fig{ margin:0; min-height: 280px; }
.lt__fig img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; }
.lt__panel{
  display:flex; flex-direction:column; justify-content:center; gap: 18px;
  padding: clamp(26px, 3.4vw, 48px);
}
.lt__tags{ display:flex; flex-wrap:wrap; gap: 8px; }
.lt__tag{
  font-family: var(--font-mono); font-size:.66rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color: var(--blue-lt);
  padding: 6px 11px; border:1px solid rgba(242,207,124,.45);
}
.lt__lede{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height:1.34; letter-spacing:-.016em;
  color: var(--txt-hi); max-width: 34ch;
}
.lt__note{ font-size:.8rem; color: var(--txt-dim); }

/* ── START HERE: the Figma chips ── */
.reschips{ display:flex; flex-wrap:wrap; gap: 10px; }
.reschip{
  display:inline-flex; align-items:center; gap: 12px;
  padding: 14px 22px 14px 18px;
  background: rgba(244,248,251,.045); border:1px solid var(--line);
  font-family: var(--font-display); font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  color: var(--txt-hi); text-decoration:none;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.reschip:hover{ border-color: var(--blue); background: rgba(226,178,76,.12); transform: translateY(-2px); }
.reschip__ic{ width:16px; height:16px; color: var(--blue-lt); display:block; }
.reschip__ic svg{ width:100%; height:100%; display:block; }

/* ── NEVER MISS AN UPDATE: skyline behind, email capture ── */
.subband .close-band__bg img{ filter: saturate(.6) brightness(.38); object-position:50% 40%; }
.subband .close-band__scrim{
  background: linear-gradient(180deg, var(--bg) 0%, rgba(10,10,11,.6) 20%, rgba(10,10,11,.68) 80%, var(--bg) 100%);
}
.subform{
  display:flex; gap: 10px; max-width: 620px; margin: clamp(24px, 3vw, 34px) auto 0;
  padding: 8px; background: rgba(244,248,251,.05); border:1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.subform__in{
  flex:1; min-width:0; padding: 12px 16px; font: inherit; font-size:.95rem;
  background: rgba(10,12,16,.6); border:1px solid var(--line); color: var(--txt-hi);
}
.subform__in::placeholder{ color: var(--txt-dim); }
.subform__in:focus{ outline:none; border-color: var(--blue); }
.subform__btn{ flex:none; padding: 12px 20px; font-size:.9rem; }
@media (max-width: 560px){ .subform{ flex-direction:column; } }

/* ══════════ 2026-09-03m — CLIENT ROUND: name card back on white, stronger
   headline fade on all white display text, carousels equal-width + B&W
   inactive, KC faces / latest-thinking frame / start-here light, team hero,
   contact centring, one-bar question ticker, header no-wrap, hover pops. ══════════ */

/* ── HOMEPAGE: the name reveal is the white card on the light band again.
   (Client: "take it back to white... remove this black background on it.") ── */
.adv-reveal{ background:#F3F5F8; }
.adv-reveal.sec{ padding-top: clamp(72px, 9.5vw, 150px); padding-bottom: clamp(72px, 9.5vw, 150px); }
.adv-reveal .nameglow{ margin-top:0; }
#intelligence.sec{ padding-bottom: clamp(72px, 9.5vw, 150px); }

/* ── the fade the client pictured: white top, clearly grey by the bottom,
   on EVERY white display line that sits on a dark ground ── */
.h-hero, .h-major,
.sec:not(.sec--light):not(.adv-reveal):not(.rgap) .h-mid,
.sec:not(.sec--light):not(.adv-reveal):not(.rgap) .h-sub,
.hero .h-sub,
.help2__title, .stack-state p.on, .fcard__t, .scard--blue .scard__t, .lt__lede,
#knowledge .kcard2__t, .pat__itemt, .bhq__ask, .outc__now, .ppane2__close p:not(.blue),
.mcard__widet{
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 26%, #C7D0DC 62%, #7C8A9F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .14em; margin-bottom: -.14em;
}
.h-sub span, .fcard__t span, .scard__t span, .lt__lede span, .bhq__ask span,
.outc__now span, .pat__itemt span, .mcard__widet span{ -webkit-text-fill-color: currentColor; }
.outc__now{ -webkit-text-fill-color: currentColor; background:none; }   /* it is blue, not white */
.bhq__ask--blue{ -webkit-text-fill-color: currentColor; background:none; }

/* ── CAROUSELS (library + homepage advantage): inactive panels equal width and
   black & white; only the open one in colour ── */
.sqz__panel:not(.is-open) .sqz__img{ filter: grayscale(1) saturate(0) brightness(.62); }
.sqz__panel.is-open .sqz__img{ filter: saturate(1) brightness(.9); }
.sqz__img{ transition: filter .6s ease; }

/* ── KNOWLEDGE CENTRE ── */
/* faces pop: the veil sits low, the middle stays clear */
.kchero .hero__scrim{
  background:
    linear-gradient(0deg, rgba(8,9,12,.92) 0%, rgba(8,9,12,.62) 26%, rgba(8,9,12,.12) 52%, rgba(8,9,12,.06) 100%);
}
.kchero .hero__bg img{ filter: saturate(1.05) contrast(1.04); }
/* latest thinking: the frame follows the text panel, the photo just fills it */
.lt{ align-items:stretch; }
@media (min-width: 900px){ .lt{ grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); } }
.lt__fig{ position:relative; min-height:0; height:100%; }
.lt__fig img{ position:absolute; inset:0; }
.lt__panel{ padding: clamp(24px, 3vw, 40px); gap: 14px; }
.lt__lede{ font-size: clamp(1.08rem, 1.6vw, 1.38rem); }
@media (max-width: 899px){ .lt__fig{ height:auto; min-height:240px; } .lt__fig img{ position:static; } }
/* start here: light and centred, with icons that say what the resource is */
.res--light{ background:#FFFFFF; }
.res--light .reschips{ justify-content:center; }
.res--light .reschip{ background:#F4F7FB; border-color:#D7E0EC; color:#0B0C0E; }
.res--light .reschip:hover{ border-color: var(--blue); background: rgba(226,178,76,.08); }
.res--light .reschip__ic{ color: var(--blue); width:18px; height:18px; }

/* ── HEADER: the solid CTA never breaks across two lines ── */
.hdr2__ghost, .hdr2__solid{ white-space:nowrap; }
.hdr2__solid{ padding:11px 16px; }
.hdr2.is-scr .hdr2__solid{ padding:10px 14px; font-size:.84rem; }
.hdr2.is-scr .hdr2__ghost{ padding:9px 14px; font-size:.84rem; }
.hdr2.is-scr .hdr2__bar{ padding-inline: 18px; }

/* ── CONTACT: hero copy in the middle, Get in Touch centred and close ── */
.hero--mid{ padding-block: clamp(96px, 12vh, 150px); }
.hero--mid .hero__inner{ margin-block:auto; }
.touch__head{ margin-bottom: clamp(14px, 1.8vw, 24px); }
.touch__head .lede{ margin-inline:auto; }
.touch__head .lede + .lede{ margin-top: 6px !important; }
.touch--light .ppane{ margin-top: clamp(10px, 1.4vw, 18px); }

/* ── FOR BUSINESSES: one long blue rectangle, only the words travel ── */
.bhq__bar{
  position:relative; overflow:hidden; margin-top: clamp(10px, 1.4vw, 18px);
  background: linear-gradient(118deg, #C99A36 0%, #E2B24C 62%, #F2CF7C 100%);
  box-shadow: 0 18px 46px -26px rgba(226,178,76,.9);
  padding-block: clamp(20px, 2.4vw, 30px);
}
.bhq__bar .bhq__mqtrack{ display:flex; width:max-content; animation: bhqSlide 36s linear infinite; }
.bhq__bar:hover .bhq__mqtrack{ animation-play-state: paused; }
.bhq__bar .bhq__q{
  flex:none; margin:0; padding:0 clamp(28px, 3.4vw, 56px); min-height:0;
  background:none; box-shadow:none; color:#fff; white-space:nowrap;
  font-size: clamp(1.05rem, 1.55vw, 1.32rem);
}
.bhq__bar .bhq__q::after{
  content:'\2022'; margin-left: clamp(28px, 3.4vw, 56px); color: rgba(255,255,255,.55);
}

/* ── hover pops on the card families the client named ── */
.scard{ transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.scard:hover{ transform: translateY(-8px); box-shadow: 0 26px 50px -24px rgba(226,178,76,.6); }
.fcard{ transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .35s ease; }
.fcard:hover{ transform: translateY(-8px); border-color: rgba(242,207,124,.45); box-shadow: 0 26px 50px -26px rgba(226,178,76,.55); }

/* ══════════ 2026-09-03n — CAPITALQ PAGE rebuilt on the client's references;
   Outcome checklist icons; light-section text safety. ══════════ */

/* ── text safety on light grounds (the platform closing lines had gone
   invisible again once the 0903m gradient re-declared .stack-state p.on) ── */
.sec--light .stack-state p.on, .plat__close p.on,
.sec--light .h-mid, .sec--light .h-sub, .sec--light .fcard__t{
  background:none; -webkit-text-fill-color: currentColor;
}
.plat__close p.on{ color:#0B0C0E; }

/* ── CAPITALQ HERO ── */
.cqhero .hero__bg img{ object-position: 60% 28%; }
.cqhero__h{ font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.cqhero .bizhero{ max-width: min(60%, 820px); }
.cqhero__boxes{
  display:grid; grid-template-columns: 1fr; gap: 8px;
  margin-top: clamp(16px, 2vw, 24px); max-width: 640px;
}
@media (min-width: 700px){ .cqhero__boxes{ grid-template-columns: 1fr 1fr; } }
.cqbox{
  display:flex; align-items:flex-start; gap: 9px; padding: 10px 12px;
  background: rgba(244,248,251,.06); border:1px solid rgba(244,248,251,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size:.84rem; line-height:1.45; color: rgba(244,248,251,.92);
}
.cqbox__ic{ flex:none; width:15px; height:15px; margin-top:2px; color: var(--blue-lt); }
.cqbox__ic svg{ width:100%; height:100%; display:block; }
.cqhero .hero__lede{ margin-top: clamp(16px, 2vw, 24px); }
@media (min-width: 901px) and (max-height: 800px){
  .cqhero__h{ font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
  .cqbox{ padding: 8px 10px; font-size:.8rem; }
}

/* ── THE OLD WAY ── */
.oldway__grid{ display:grid; gap: clamp(28px, 4vw, 64px); align-items:center; }
@media (min-width: 900px){ .oldway__grid{ grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); } }
.oldway__body{ margin-top: clamp(16px, 2vw, 24px); font-size:.97rem; line-height:1.72; color: var(--txt); max-width: 58ch; }
.oldway__fig{ margin:0; aspect-ratio: 4 / 3.2; overflow:hidden; border:1px solid var(--line); }
.oldway__fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.oldway__result{ margin-top: clamp(32px, 4vw, 56px); border-top:1px solid var(--line); padding-top: clamp(22px, 2.8vw, 34px); }
.oldway__q{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color: var(--txt-blue); margin-bottom: 14px; }
.oldway__cells{ display:grid; gap: 1px; background: var(--line); border:1px solid var(--line); }
@media (min-width: 700px){ .oldway__cells{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .oldway__cells{ grid-template-columns: repeat(4, 1fr); } }
.oldway__cells p{
  background: var(--bg); padding: clamp(18px, 2.2vw, 28px);
  font-family: var(--font-display); font-weight:600; font-size: clamp(1rem, 1.3vw, 1.15rem);
  letter-spacing:-.012em; color: var(--txt-hi);
}
.oldway__punch{ margin-top: 18px; font-family: var(--font-display); font-weight:600; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--txt-blue); }

/* ── A BETTER WAY (light) ── */
.better__grid{ display:grid; gap: clamp(28px, 4vw, 72px); align-items:start; margin-top: clamp(8px, 1vw, 16px); }
@media (min-width: 900px){ .better__grid{ grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } }
.better__fig{ margin:0; }
.better__frame{ display:block; padding:1px; background: linear-gradient(180deg, #C9D3E0, transparent); }
.better__frame img{ width:100%; aspect-ratio: 76 / 59; object-fit:cover; display:block; box-shadow: 0 20px 50px -30px rgba(11,19,31,.45); }
.better__p{ font-size:1rem; line-height:1.7; color:#3A4149; }
.better__p strong{ font-weight:700; color:#0B0C0E; }
.better__ticks{ margin-top: 18px; }
.better .tick{ color:#3A4149; }
.better__quote{ margin-top: clamp(22px, 2.8vw, 34px); border-left: 4px solid var(--blue); padding-left: 16px; }
.better__quote p{ font-size:1.02rem; line-height:1.6; color:#0B0C0E; }

/* ── ONE PLACE: resource cards + glass app card ── */
.rcards{ display:grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .rcards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px){ .rcards{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.rcard{
  display:flex; align-items:flex-start; gap: 14px; padding: clamp(18px, 2vw, 24px);
  background: rgba(244,248,251,.04); border:1px solid var(--line); text-decoration:none;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.rcard:hover{ transform: translateY(-4px); border-color: rgba(242,207,124,.45); box-shadow: 0 22px 46px -28px rgba(226,178,76,.6); }
.rcard__ic{ flex:none; width:40px; height:40px; display:grid; place-items:center; background: rgba(226,178,76,.16); color: var(--blue-lt); }
.rcard__ic svg{ width:52%; height:52%; }
.rcard__body{ flex:1; min-width:0; }
.rcard__t{ display:block; font-family: var(--font-display); font-weight:600; font-size:1rem; letter-spacing:-.012em; color: var(--txt-hi); }
.rcard__s{ display:block; margin-top:4px; font-size:.78rem; line-height:1.45; color: var(--txt-dim); }
.rcard__arr{ flex:none; width:18px; height:18px; color: var(--txt-dim); transition: transform .3s ease, color .3s ease; }
.rcard__arr svg{ width:100%; height:100%; }
.rcard:hover .rcard__arr{ transform: translate(2px,-2px); color: var(--blue-lt); }
.appsplit{ display:grid; gap: clamp(28px, 4vw, 64px); align-items:center; margin-top: clamp(44px, 5.5vw, 72px); }
@media (min-width: 940px){ .appsplit{ grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); } }
.appglass{
  position:relative; overflow:hidden; padding: clamp(22px, 2.6vw, 34px);
  background: rgba(244,248,251,.05); border:1px solid rgba(244,248,251,.14);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.8);
}
.appglass__halo{ position:absolute; right:-80px; top:-80px; width:260px; height:260px; background: radial-gradient(circle, rgba(226,178,76,.35), transparent 65%); filter: blur(30px); pointer-events:none; }
.appglass > *{ position:relative; }
.appglass__head{ display:flex; align-items:center; gap: 12px; margin-bottom: 22px; }
.appglass__q{ width:44px; height:44px; display:grid; place-items:center; background: var(--blue); color:#fff; font-family: var(--font-display); font-weight:700; font-size:1.2rem; }
.appglass__brand{ font-family: var(--font-display); font-weight:600; color: var(--txt-hi); }
.appglass__status{ font-family: var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color: var(--txt-blue); }
.appglass__row{ display:flex; justify-content:space-between; align-items:baseline; font-size:.88rem; color: var(--txt); }
.appglass__row strong{ font-family: var(--font-display); font-weight:700; font-size: clamp(1.8rem, 2.6vw, 2.4rem); color: var(--txt-hi); letter-spacing:-.02em; }
.appglass__bar{ height:6px; margin-top: 8px; background: rgba(244,248,251,.1); overflow:hidden; }
.appglass__bar span{ display:block; height:100%; width: var(--w, 0%); background: linear-gradient(90deg, #E2B24C, #F2CF7C); transition: width 1.6s cubic-bezier(.22,.61,.36,1); }
.appglass__mini{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; padding: 16px 0; border-top:1px solid rgba(244,248,251,.1); border-bottom:1px solid rgba(244,248,251,.1); text-align:center; }
.appglass__mini strong{ display:block; font-family: var(--font-display); font-weight:700; font-size: clamp(1rem, 1.35vw, 1.25rem); color: var(--txt-hi); }
.appglass__mini span{ display:block; margin-top:3px; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--txt-dim); }
.appglass__list{ display:grid; gap: 8px; }
.appglass__list > div{ display:flex; justify-content:space-between; gap: 12px; font-size:.86rem; color: var(--txt-dim); }
.appglass__list b{ font-weight:600; color: var(--txt-hi); font-family: var(--font-mono); font-size:.8rem; letter-spacing:.04em; text-align:right; }
.appglass__list b.tblue{ color: var(--txt-blue); }
.appglass__list b.dim{ color: var(--txt-dim); }

/* ── BAND: two lines, then the minutes line on its own, right-aligned ── */
.band--min .container{ display:flex; justify-content:flex-end; }
.band__state--min{ text-align:right; max-width: 24ch; }
.band__min{ display:block; margin-top: .25em; font-size:1.18em; }

/* ── THE PLATFORM (light, image cards) ── */
.plat2{ background:#F5F7FA; }
.plat2 .scar__btn{ background:#FFFFFF; border-color:#D7E0EC; color:#0B0C0E; }
.plat2 .scar__btn:hover{ background: var(--blue); border-color: var(--blue); color:#fff; }
.plat2 .scar__btn[disabled]:hover{ background:#FFFFFF; border-color:#D7E0EC; color:#0B0C0E; }
.plat2 .scar__track{ --scar-gap: clamp(16px, 2vw, 26px); }
.fcard--img{ border-color: transparent; min-height: 460px; }
.fcard__bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
.fcard__veil{ position:absolute; inset:0; z-index:0; background: linear-gradient(180deg, rgba(8,10,14,.62) 0%, rgba(8,10,14,.82) 45%, rgba(8,10,14,.94) 100%); }
.fcard--img > *:not(.fcard__bg):not(.fcard__veil){ position:relative; z-index:1; }
.plat2 .fcard__t{ background:none; -webkit-text-fill-color: currentColor; color:#fff; }
.plat2 .fcard__sub{ color: var(--blue-lt); }
.plat2 .fcard__lead p, .plat2 .fcard__body p{ color: rgba(244,248,251,.88); }
.plat2 .fcard .punch{ color: var(--blue-lt); }
.plat2 .fcard__more summary{ background: rgba(244,248,251,.1); border-color: rgba(244,248,251,.3); color:#fff; }
.plat2 .fcard__body .tick{ color: rgba(244,248,251,.9); }

/* ── THE JOURNEY: four cards over a live swirl ── */
.jcards{ display:grid; gap: 16px; grid-template-columns: 1fr; margin-top: clamp(26px, 3.4vw, 42px); }
@media (min-width: 640px){ .jcards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px){ .jcards{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.jcard{ position:relative; min-height: 330px; isolation:isolate; }
.jcard__bg{
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(150deg, #C99A36 0%, #E2B24C 45%, #F2CF7C 100%);
}
.jcard__bg::after{
  content:''; position:absolute; inset:0; background: rgba(255,255,255,.22);
  -webkit-mask: url('../assets/img/pattern-swirl.webp') no-repeat 50% 40%; mask: url('../assets/img/pattern-swirl.webp') no-repeat 50% 40%;
  -webkit-mask-size: 220% auto; mask-size: 220% auto;
  animation: jswirl 14s ease-in-out infinite alternate;
}
@keyframes jswirl{ to{ -webkit-mask-position: 60% 60%; mask-position: 60% 60%; } }
.jcard__in{
  position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
  margin: 10px; padding: clamp(22px, 2.4vw, 30px);
  background: rgba(8,10,14,.82); border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .35s ease;
}
.jcard:hover .jcard__in{ transform: translateY(-6px); }
.jcard__ic{ width:44px; height:44px; color:#fff; margin-bottom: 18px; }
.jcard__ic svg{ width:100%; height:100%; }
.jcard__t{ font-family: var(--font-display); font-weight:600; font-size: clamp(1.2rem, 1.6vw, 1.45rem); color:#fff; margin-bottom: 10px; letter-spacing:-.015em; }
.jcard__d{ font-size:.9rem; line-height:1.62; color: rgba(244,248,251,.86); }

/* ── BEFORE THE FIRST MEETING: two rows ── */
.conn__top, .conn__bottom{ display:grid; gap: clamp(26px, 4vw, 64px); align-items:start; }
@media (min-width: 900px){ .conn__top, .conn__bottom{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.conn__bottom{ margin-top: clamp(32px, 4vw, 56px); align-items:center; }
.conn__aside{ border-left: 2px solid var(--blue); padding-left: clamp(18px, 2.4vw, 30px); align-self:center; }
.conn__line{ font-family: var(--font-display); font-weight:600; font-size: clamp(1.15rem, 1.8vw, 1.55rem); line-height:1.34; letter-spacing:-.016em; color: var(--txt-hi); }
.conn__line + .conn__line{ margin-top: 10px; }
.conn__line--blue{ color: var(--txt-blue); }
.conn__fig{ margin:0; aspect-ratio: 4 / 3; overflow:hidden; }
.conn__fig img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── THE CLOSE: full screen, image left, copy right ── */
.cqclose{ background: var(--bg-soft); }
.cqclose.sec{ padding-block: 0; }
.cqclose__grid{ display:grid; grid-template-columns: 1fr; min-height: 100vh; min-height: 100svh; }
@media (min-width: 940px){ .cqclose__grid{ grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); } }
.cqclose__fig{ position:relative; margin:0; min-height: 320px; }
.cqclose__fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.cqclose__fig::after{ content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(16,17,20,.05) 0%, rgba(16,17,20,.3) 60%, var(--bg-soft) 100%); }
.cqclose__copy{ display:flex; align-items:center; justify-content:flex-end; padding: clamp(56px, 7vw, 104px) 20px; }
@media (min-width:640px){ .cqclose__copy{ padding-inline: 32px; } }
@media (min-width: 940px){ .cqclose__copy{ padding-right: max(40px, calc((100vw - 1440px) / 2 + 40px)); padding-left: clamp(36px, 4vw, 64px); } }
.cqclose__copy > div{ text-align:right; max-width: 60ch; }
.cqclose__copy .lede{ margin-left:auto; }
.cqclose__cta{ justify-content:flex-end; margin-top: 26px; }

/* ── FOR BUSINESSES: icons on the outcome checklist ── */
.outc__steps--ico{ padding-left: 36px; }
.outc__steps--ico::before{ left: 9px; }
.outc__ico{ position:absolute; left:-36px; top:10px; width:19px; height:19px; color: var(--blue-lt); background: var(--bg-soft); }
.outc__ico svg{ width:100%; height:100%; display:block; }

.appglass__mini > div{ display:flex; flex-direction:column-reverse; }

/* split headers on light sections need ink, not the dark-theme grey */
.sec--light .help2__body{ color:#3A4149; }
.sec--light .help2__pledge{ color:#0B0C0E; }

/* the months line sits on two lines, the minutes line on its own */
.band__state--min{ max-width: 34ch; }

/* ══════════ 2026-09-04a — CapitalQ audited against the pass-35 note ══════════ */
/* Old Way, lower row: "text to the left or right, and images on the other side" —
   body copy + results as text on the right, a client photo on the left. */
.oldway__result--split{ display:grid; gap: clamp(28px, 4vw, 64px); align-items:center; }
@media (min-width: 900px){ .oldway__result--split{ grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } }
.oldway__result--split .oldway__body{ margin-top:0; max-width:none; }
.oldway__result--split .oldway__q{ margin-top: clamp(20px, 2.4vw, 30px); }
.oldway__result--split .oldway__cells{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px){ .oldway__result--split .oldway__cells{ grid-template-columns: 1fr; } }
.oldway__fig2{ margin:0; aspect-ratio: 4 / 3.4; overflow:hidden; border:1px solid var(--line); }
.oldway__fig2 img{ width:100%; height:100%; object-fit:cover; display:block; }
/* The Platform: "it should have the width more ... not like the way the other one has" —
   wider container than the For Businesses slider, so each card gets more room. */
/* widen only the slider, so "The Platform" title still lines up with every other section */
.plat2 .scar{ --ext: clamp(0px, calc((100vw - 1440px) / 2), 68px); width: calc(100% + 2 * var(--ext)); margin-left: calc(-1 * var(--ext)); }

/* ══════════ 2026-09-04b — SHARED PRIMITIVES for the 21st.dev-mined redesign
   of capitalq.html + investors.html. Section builders REUSE these hooks and
   must not redefine them. Every effect: square, one blue #E2B24C, Inter,
   IO-gated, reduced-motion aware. ══════════ */

/* ── 1 · [data-cqx-cut] — display text rises out of a slot ────────────────
   18595 Vertical Cut Reveal + 19257 Text Reveal (Mask) + 884 (chars).
   JS wraps lines (default) / words / chars. Descender padding keeps "g" whole
   and matches the house gradient-text guard. */
.cqx-line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.cqx-line__in{
  display:block; transform: translateY(112%); will-change: transform;
  transition: transform .82s cubic-bezier(.19,1,.22,1);
  transition-delay: calc(var(--i, 0) * var(--cqx-stagger, 90ms));
}
[data-cqx-cut][data-reverse] .cqx-line__in{ transform: translateY(-112%); }
.cqx-cw{ display:inline-flex; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; vertical-align:bottom; }
.cqx-cc{
  display:inline-block; transform: translateY(102%); will-change: transform;
  transition: transform .7s cubic-bezier(.22,1.2,.36,1);
  transition-delay: calc(var(--d, 0) * var(--cqx-stagger, 26ms));
}
[data-cqx-cut][data-reverse] .cqx-cc{ transform: translateY(-102%); }
[data-cqx-cut].is-in .cqx-line__in,
[data-cqx-cut].is-in .cqx-cc{ transform: none; }

/* ── 2 · [data-cqx-read] — body copy inks in at reading pace ──────────────
   19275 Text Scroll Read. One flowing paragraph stays one paragraph. */
[data-cqx-read]{
  --ink: #F4F8FB; --dim: rgba(244,248,251,.20);
  background-image: linear-gradient(-90deg, var(--dim) 50%, var(--ink) 50%);
  background-size: 200% 100%; background-repeat:no-repeat; background-position-x: 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color: var(--ink);
  padding-bottom:.14em; margin-bottom:-.14em;
}
.sec--light [data-cqx-read]{ --ink:#0B0C0E; --dim: rgba(11,12,14,.16); }
[data-cqx-read].tblue{ --ink:#E2B24C; --dim: rgba(226,178,76,.22); }

/* ── 3 · .cqx-edge — the card's border lights up toward the cursor ────────
   1567 Glowing Effect. Add <span class="cqx-edge" aria-hidden="true"></span>
   as the LAST child of any square glass card (card: position:relative). */
.cqx-edge{ position:absolute; inset:0; pointer-events:none; z-index:3; --start:0; --active:0; --spread:42; --bw:1.5px; }
.cqx-edge::after{
  content:""; position:absolute; inset: calc(var(--bw) * -1);
  border: var(--bw) solid transparent;
  background: conic-gradient(from 0deg, #E2B24C, #F2CF7C, #E2B24C) border-box;
  opacity: var(--active); transition: opacity .3s ease;
  -webkit-mask: linear-gradient(#0000,#0000),
    conic-gradient(from calc((var(--start) - var(--spread)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 2deg));
  -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: source-in;
  mask: linear-gradient(#0000,#0000),
    conic-gradient(from calc((var(--start) - var(--spread)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 2deg));
  mask-clip: padding-box, border-box; mask-composite: intersect;
}
.sec--light .cqx-edge{ --bw:2px; }

/* ── 4 · [data-cqx-mag] — the CTA leans toward the cursor (649 Magnetic) ── */
[data-cqx-mag]{ display:inline-block; will-change: transform; }

/* ── 5 · [data-cqx-shine] — one restrained light sweep across a ™ word ──── */
[data-cqx-shine]{
  --gs-base: currentColor; --gs-spread: 24px; --gs-mid: 17px; display:inline-block;
  background-image: linear-gradient(105deg,
    var(--gs-base) calc(50% - var(--gs-spread)),
    #F2CF7C calc(50% - var(--gs-mid)), #ffffff 50%, #F2CF7C calc(50% + var(--gs-mid)),
    var(--gs-base) calc(50% + var(--gs-spread)));
  /* repeat-x, not no-repeat: with background-clip:text any glyph outside the
     layer would go unpainted (the tail of the word vanished). */
  background-repeat: repeat-x; background-size: 100% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ── 6 · [data-cqx-odo] — numbers roll like a mechanical meter (20068) ──── */
[data-cqx-odo]{ font-variant-numeric: tabular-nums; display:inline-block; white-space:nowrap; }
.cqx-odo__d{ display:inline-block; width:1ch; height:1em; line-height:1; overflow:hidden; vertical-align:bottom; }
.cqx-odo__s{ display:block; will-change: transform; }
.cqx-odo__s i{ display:block; height:1em; font-style:normal; }
/* prefix/suffix/decimal point share the digit box metrics so $ 2.5 M sit on one baseline */
.cqx-odo__c{ display:inline-block; height:1em; line-height:1; vertical-align:bottom; }
.cqx-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── 7 · .cqx-stars — hairline grid, twinkles and light running the lines ─
   18478 Shooting Stars Grid. CSS-only ambience for any dark section. */
.cqx-stars{ position:relative; isolation:isolate; overflow:hidden; --gs:44px; --sx:50%; --sy:30%; }
.cqx-stars::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.55; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: var(--gs) var(--gs);
}
.cqx-stars::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at var(--sx) var(--sy), rgba(226,178,76,.20), transparent 34%),
    radial-gradient(circle at center, transparent 0, rgba(10,10,11,.18) 52%, rgba(10,10,11,.92) 100%);
}
.cqx-stars > *{ position:relative; z-index:1; }
.cqx-star{ position:absolute; z-index:0; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.5);
  animation: cqx-twinkle var(--d,3s) ease-in-out var(--dl,0s) infinite; }
@keyframes cqx-twinkle{ 0%,100%{ opacity: calc(var(--o,.6) * .45); transform: scale(.85); } 50%{ opacity: var(--o,.6); transform: scale(1.15); } }
.cqx-run{ position:absolute; z-index:0; height:1px; width: var(--len,140px); top: calc(var(--gs) * var(--lane,3)); left:-18%;
  background: linear-gradient(90deg, transparent 0, rgba(226,178,76,.14) 18%, rgba(226,178,76,.9) 52%, rgba(255,255,255,.95) 58%, transparent 100%);
  box-shadow: 0 0 16px rgba(226,178,76,.45); opacity:0;
  animation: cqx-run var(--cyc,9s) ease-out var(--dl,0s) infinite; }
@keyframes cqx-run{ 0%{ transform: translateX(0) scaleX(.35); opacity:0 } 5%{ opacity:1 }
  22%{ transform: translateX(128vw) scaleX(1.05); opacity:1 } 26%,100%{ transform: translateX(128vw) scaleX(.8); opacity:0 } }
.cqx-stars.is-off .cqx-star, .cqx-stars.is-off .cqx-run{ animation-play-state: paused; }

/* ── 8 · .cqx-panel — instrument panel: corner brackets + light sweep ─────
   19341 CTA Banner. Square, glass, one blue. */
.cqx-panel{ position:relative; overflow:hidden;
  background: rgba(20,22,26,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(226,178,76,.42); box-shadow: 0 0 46px rgba(226,178,76,.10); }
.cqx-panel::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.035) 2px, rgba(0,0,0,.035) 4px); }
.cqx-panel__sweep{ position:absolute; left:0; top:0; height:1px; width:33%; pointer-events:none; z-index:2;
  background: linear-gradient(90deg, transparent, rgba(226,178,76,.75), transparent);
  animation: cqx-sweep 4.6s ease-in-out infinite; }
@keyframes cqx-sweep{ 0%,100%{ transform: translateX(-30%) } 50%{ transform: translateX(233%) } }
.cqx-panel__c{ position:absolute; width:20px; height:20px; pointer-events:none; z-index:2; border:0 solid rgba(226,178,76,.55); }
.cqx-panel__c:nth-of-type(1){ left:0; top:0; border-left-width:2px; border-top-width:2px; }
.cqx-panel__c:nth-of-type(2){ right:0; top:0; border-right-width:2px; border-top-width:2px; }
.cqx-panel__c:nth-of-type(3){ left:0; bottom:0; border-left-width:2px; border-bottom-width:2px; }
.cqx-panel__c:nth-of-type(4){ right:0; bottom:0; border-right-width:2px; border-bottom-width:2px; }
.cqx-panel > *:not(.cqx-panel__sweep):not(.cqx-panel__c){ position:relative; z-index:1; }
.cqx-panel.is-off .cqx-panel__sweep{ animation-play-state: paused; }

/* ── 9 · .cqx-ring — a comet runs the border of the most important card ───
   18032 Shine Border. Wrap content in .cqx-ring__in. */
.cqx-ring{ position:relative; padding:2px; overflow:hidden; isolation:isolate; }
.cqx-ring::before{ content:""; position:absolute; left:50%; top:50%; width:200%; height:200%; z-index:0;
  transform: translate(-50%,-50%) rotate(0deg);
  background: conic-gradient(from 90deg, transparent 0 60%, #E2B24C 92%, #F2CF7C 100%);
  animation: cqx-beam 4.4s linear infinite; }
@keyframes cqx-beam{ to{ transform: translate(-50%,-50%) rotate(360deg) } }
.cqx-ring.is-off::before{ animation-play-state: paused; }
.cqx-ring__in{ position:relative; z-index:1; background: rgba(10,10,11,.86);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border:1px solid rgba(255,255,255,.08); }

/* ── 10 · .cqx-grain — film grain, 5% overlay (11494) ─────────────────────── */
.cqx-grain{ position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay; z-index:1;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* ── reduced motion: every primitive lands in its final state ─────────────── */
@media (prefers-reduced-motion: reduce){
  .cqx-line__in, .cqx-cc{ transform:none !important; transition:none !important; }
  [data-cqx-read]{ background-position-x: 0% !important; }
  .cqx-star, .cqx-run, .cqx-panel__sweep, .cqx-ring::before{ animation:none !important; }
  .cqx-run{ display:none; }
  [data-cqx-mag]{ transform:none !important; }
}

/* ══════════ 20260904m — investors rebuilt from 21st.dev-mined sections ══════════ */
/* ── A1 · #top — INVESTORS HERO ─────────────────────────────────────────────
   heroes 11615: the photo is a 120vh position:fixed layer clipped to the
   section by clip-path (overflow:hidden alone does not clip a fixed child), so
   the page scrolls over the picture instead of dragging it along.
   heroes 19322: lagos.jpg pans inside the letterforms of the word "Africa"
   under a blue grade — client photography without a second full-bleed image. */

.inv-hero{ clip-path: inset(0); }
.inv-hero .hero__bg{
  position: fixed; top: -10vh; left: 0; width: 100%; height: 120vh;
  z-index: 0; will-change: transform;
}
.inv-hero .hero__bg img{
  width: 100%; height: 100%; object-fit: cover; object-position: 56% 30%; display: block;
}
/* the portrait crop puts a lot of light on the right — hold the copy side dark */
.inv-hero .hero__scrim{
  background:
    linear-gradient(90deg, rgba(8,9,12,.96) 0%, rgba(8,9,12,.9) 34%, rgba(8,9,12,.62) 58%, rgba(8,9,12,.2) 84%, rgba(8,9,12,0) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(8,9,12,.62) 16%, rgba(8,9,12,.12) 50%, rgba(8,9,12,.42) 100%);
}

.inv-hero .bizhero{ max-width: min(62%, 830px); }
.inv-hero__h{ font-size: clamp(2.05rem, 4.15vw, 3.7rem); }
/* the hero gradient-text guard (.hero .h-sub) would paint this white — the
   client wants the question in the one blue */
.inv-hero .bizhero .inv-hero__q{
  margin-top: clamp(16px, 2.1vw, 24px); max-width: 44ch;
  background: none; -webkit-text-fill-color: currentColor; color: var(--txt-blue);
}
.inv-hero__p{ margin-top: clamp(11px, 1.4vw, 16px); max-width: 60ch; }
.inv-hero__p--first{ margin-top: clamp(14px, 1.8vw, 20px); }
/* the odometer's digit windows align to the LINE BOX bottom, which drops them
   below the baseline inside a 1.65 line-height paragraph */
.inv-hero__p [data-cqx-odo]{ line-height: 1; }
.inv-hero__p .cqx-odo__d,
.inv-hero__p .cqx-odo__c{ vertical-align: -.14em; }
.inv-hero .cta-set{ margin-top: clamp(22px, 2.8vw, 34px); }
/* the magnetic label span would eat the button's own flex gap */
.inv-btnl{ display: inline-flex; align-items: center; gap: .7em; }

/* "Africa", filled with the city.
   Two url() layers on purpose: the first resolves while this block is inlined
   at the site root (section preview), the second once it lives in css/style.css.
   Whichever one 404s simply paints nothing. `auto 260%` guarantees the photo
   covers the letterforms vertically and leaves horizontal slack to pan across.
   .h-hero span sets -webkit-text-fill-color:currentColor, so this needs two
   classes of specificity to win. */
/* "Africa" is the word the whole headline turns on, so it carries the accent.
   TRIED AND REJECTED: filling the glyphs with a panning photo (harvest heroes
   19322). At this headline size the letterforms are ~60px tall and every
   candidate photo — lagos.jpg (dusk aerial) and rgap-city.jpg (pale sky) —
   read as grey speckle next to the crisp white words, even brightened and
   stroked. Legibility beats novelty: solid FDN blue, which is also exactly
   what the 10% accent rule is for. */
.inv-hero .inv-imgtxt{
  display: inline-block;
  color: var(--blue); -webkit-text-fill-color: var(--blue);
  padding-bottom: .14em; margin-bottom: -.14em;
}

/* laptop screens: keep the whole block above the fold */
@media (min-width: 901px) and (max-height: 820px){
  .inv-hero__h{ font-size: clamp(1.8rem, 3.1vw, 2.6rem); }
  .inv-hero .bizhero .inv-hero__q{ margin-top: 14px; }
  .inv-hero__p{ margin-top: 10px; }
  .inv-hero .cta-set{ margin-top: 20px; }
}

@media (max-width: 900px){
  .inv-hero .bizhero{ max-width: none; }
  /* fixed layers stutter on mobile browsers with a collapsing URL bar */
  .inv-hero .hero__bg{ position: absolute; top: -14%; left: 0; width: 100%; height: 128%; }
  .inv-hero .hero__bg img{ object-position: 52% 26%; }
  .inv-hero .hero__scrim{
    background:
      linear-gradient(90deg, rgba(8,9,12,.94) 0%, rgba(8,9,12,.86) 46%, rgba(8,9,12,.66) 100%),
      linear-gradient(0deg, var(--bg) 0%, rgba(8,9,12,.72) 22%, rgba(8,9,12,.34) 62%, rgba(8,9,12,.5) 100%);
  }
}

@media (prefers-reduced-motion: reduce){
  .inv-hero .hero__bg{ transform: none !important; }
}


/* ── A2 · #familiar — "Where You Are Today" ────────────────────────────────
   The pile of pitch decks (harvest steps 25275 Stacking Cards) + the four
   More/Less lines as draining fill pillars (harvest steps 3192).
   index.html carries a #familiar section too, so EVERY override here is
   qualified with .inv-fam and can never leak onto the home page. */

#familiar.inv-fam{ padding-top: clamp(36px, 4.2vw, 64px); padding-bottom: clamp(72px, 9vw, 132px); }
#familiar.inv-fam .sechead{ margin-bottom: clamp(12px, 1.5vw, 20px); max-width: 940px; }
/* the site's white-gradient guard (0,5,0) outranks .tblue, so the blue line of
   this header needs an id-scoped reset to actually be blue. */
#familiar.inv-fam .sechead .h-sub.tblue{
  background:none; -webkit-text-fill-color: currentColor; color: var(--txt-blue);
}

/* ── the pile ─────────────────────────────────────────────────────────────
   Four full-height sticky slots; the card inside each lands a step lower than
   the one before it, so every buried deck keeps its index tab showing. */
.inv-stack{ position:relative; --top0: 74px; --step: 32px; }
.inv-stack__slot{ position:sticky; top:0; height:100vh; }

.inv-deck{
  position:relative;
  top: calc(var(--top0) + var(--i, 0) * var(--step));
  /* sized so the FIRST frame of the section (header + deck 01) fits one screen
     and the title never lands under the fold */
  height: min(calc(100vh - 300px), 560px);
  width: min(calc(100% - 40px), 1225px); margin-inline:auto;
  display:grid; grid-template-rows: auto 1fr;
  overflow:hidden; isolation:isolate;
  background: rgba(14,16,20,.90);
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 70px rgba(0,0,0,.55);
  transform-origin: top center; will-change: transform, filter;
}

.inv-deck__ph{ position:absolute; inset:0; z-index:0; overflow:hidden; display:block; }
.inv-deck__ph img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  opacity:.46; filter: grayscale(1) contrast(1.08) brightness(1.04);
}
.inv-deck__ph::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 80% at 88% 4%, rgba(226,178,76,.14), transparent 62%),
    linear-gradient(180deg, rgba(10,10,11,.34) 0%, rgba(10,10,11,.66) 46%, rgba(10,10,11,.95) 100%);
}

/* the index tab — the strip that stays visible once a deck is buried */
.inv-deck__tab{
  position:relative; z-index:2; display:flex; align-items:center; gap:14px;
  padding: 15px clamp(22px, 3vw, 44px) 0;
}
.inv-deck__ix{
  font-style:normal; font-family: var(--font-mono); font-size:.7rem; font-weight:600;
  letter-spacing:.24em; color: rgba(244,248,251,.55);
}
.inv-deck__tab::after{ content:""; flex:1 1 auto; height:1px; background: var(--line); }

.inv-deck__t{
  position:relative; z-index:2; align-self:end;
  margin:0; padding: 0 clamp(22px, 3vw, 44px) clamp(24px, 3.2vw, 46px);
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.85rem, 5vw, 4.1rem); line-height:1.04; letter-spacing:-.028em;
  color:#F4F8FB; max-width: 20ch;
}

/* ONE blue deck — the 10%. It is the deck that ends up on top of the pile. */
.inv-deck--blue{
  background: var(--blue);
  border-color: rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 30px 80px rgba(226,178,76,.30);
}
/* the photo becomes a duotone INSIDE the blue rather than washing it out */
.inv-deck--blue .inv-deck__ph img{ opacity:.38; filter: grayscale(1) contrast(1.06); mix-blend-mode: overlay; }
.inv-deck--blue .inv-deck__ph::after{
  background: linear-gradient(180deg, rgba(226,178,76,.10) 0%, rgba(11,24,78,.44) 56%, rgba(7,15,52,.76) 100%);
}
.inv-deck--blue .inv-deck__ix{ color: rgba(255,255,255,.72); }
.inv-deck--blue .inv-deck__tab::after{ background: rgba(255,255,255,.30); }
.inv-deck--blue .inv-deck__t{ color:#FFFFFF; }

/* ── the flow copy under the pile ─────────────────────────────────────────── */
.inv-fam__after{
  margin-top: clamp(46px, 5.6vw, 84px);
  display:grid; gap: clamp(40px, 5vw, 74px);
  border-top: 1px solid var(--line); padding-top: clamp(38px, 4.6vw, 66px);
}
.inv-fam__lede{ max-width: 68ch; font-size: clamp(1.04rem, 1.45vw, 1.26rem); line-height:1.62; }

/* ── the four More/Less lines: fill pillars that drain (steps 3192) ───────── */
.inv-pillars{
  display:grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.inv-pillar{
  position:relative; overflow:hidden;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  min-height: clamp(158px, 16.5vw, 232px);
  display:flex; align-items:flex-end;
  padding: 16px clamp(14px, 1.4vw, 22px);
}
.inv-pillar::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:0; z-index:0;
  background: linear-gradient(180deg, rgba(242,207,124,.80) 0%, #E2B24C 46%, #C99A36 100%);
  box-shadow: 0 -1px 0 0 rgba(255,255,255,.42);
  transition: height .9s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--n, 0) * .1s);
}
.inv-pillars.in .inv-pillar::before{ height: var(--lvl, 0%); }
.inv-pillar__t{
  position:relative; z-index:1;
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(.98rem, 1.25vw, 1.2rem); line-height:1.22; letter-spacing:-.014em;
  color:#F4F8FB; text-shadow: 0 1px 14px rgba(10,10,11,.45);
}

/* ── the close ────────────────────────────────────────────────────────────── */
.inv-fam__close{ text-align:center; display:grid; gap:4px; }
.inv-fam__close .h-mid{ font-size: clamp(1.5rem, 3.1vw, 2.6rem); }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .inv-deck__t{ max-width: 26ch; }
}

/* below 900px the pin is dropped entirely: four blocks in normal flow */
@media (max-width: 900px){
  .inv-stack{ display:grid; gap:14px; }
  .inv-stack__slot{ position:static; height:auto; }
  .inv-deck{
    top:0; height:auto; min-height: 60vh;
    transform:none !important; filter:none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.45);
  }
  .inv-deck--blue{ box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 18px 44px rgba(226,178,76,.26); }
  .inv-deck__t{ max-width: 18ch; }
  .inv-pillars{ grid-template-columns: repeat(2, 1fr); }
  .inv-pillar{ min-height: 170px; }
}

@media (max-width: 520px){
  .inv-deck{ min-height: 54vh; }
  .inv-deck__t{ font-size: clamp(1.7rem, 8.6vw, 2.4rem); max-width: 15ch; }
  .inv-pillar{ min-height: 148px; padding: 16px 14px; }
}

@media (prefers-reduced-motion: reduce){
  .inv-deck{ transform:none !important; filter:none !important; }
  .inv-pillar::before{ transition:none; height: var(--lvl, 0%); }
}


/* ── A3 · #there-is — "The Better Way" pinned scroll story ──────────────────
   Ported from 21st.dev 6265 "Interactive Scrolling Story" (Dara's own bookmark):
   an N×viewport wrapper pins one panel; the left column crossfades the copy while
   the right column's photo strip slides up one frame per step. Recoloured to the
   house system — black ground, white Inter display, one blue #E2B24C, square. */

.inv-there{ background: var(--bg-soft); overflow: clip; }
/* container gutter, mirrored so the pinned panel lines up with .container copy */
.inv-there{ --inv-gut: max(20px, calc((100vw - 1440px) / 2 + 40px)); }
@media (max-width:767px){ .inv-there{ --inv-gut: max(20px, calc((100vw - 1440px) / 2 + 32px)); } }

/* the tall wrapper: 4 steps of travel. Pin is one viewport tall. */
.inv-story{ position:relative; height: calc(var(--n, 4) * 92vh); margin-block: clamp(8px, 2vw, 28px) 0; }
.inv-story__pin{
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; grid-template-columns: 1fr 1fr;
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg-soft) 100%);
}

/* ── left: the argument ──────────────────────────────────────────────────── */
.inv-story__left{
  position: relative; z-index: 2; min-width: 0;
  display: grid; align-content: center;
  padding: clamp(96px, 13vh, 150px) clamp(28px, 3.4vw, 60px) clamp(56px, 8vh, 96px) var(--inv-gut);
}
/* depth behind the argument, so the black half is not flat */
.inv-story__left::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 46% at 18% 58%, rgba(226,178,76,.16), transparent 72%);
}
.inv-story__nav{
  position: absolute; left: var(--inv-gut); top: clamp(84px, 13vh, 146px);
}
/* the spine: a hairline dropping from the bars into the argument */
.inv-story__nav::after{
  content: ""; position: absolute; left: 0; top: 22px; width: 1px;
  height: clamp(70px, 13vh, 150px);
  background: linear-gradient(180deg, rgba(226,178,76,.55), rgba(226,178,76,0));
}
.inv-story__bars{ display: flex; gap: 8px; }
.inv-story__bars i{
  display: block; width: 24px; height: 2px; background: rgba(244,248,251,.20);
  transition: width .5s cubic-bezier(.22,.61,.36,1), background .5s ease, box-shadow .5s ease;
}
[data-inv-active="0"] .inv-story__bars i:nth-child(1),
[data-inv-active="1"] .inv-story__bars i:nth-child(2),
[data-inv-active="2"] .inv-story__bars i:nth-child(3),
[data-inv-active="3"] .inv-story__bars i:nth-child(4){
  width: 48px; background: var(--blue); box-shadow: 0 0 14px rgba(226,178,76,.65);
}

.inv-story__stage{ position: relative; min-height: clamp(300px, 40vh, 430px); }
.inv-story__copy{
  position: absolute; inset: 0; display: grid; align-content: start;
  opacity: 0; transform: translateY(40px); pointer-events: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
[data-inv-active="0"] .inv-story__copy:nth-child(1),
[data-inv-active="1"] .inv-story__copy:nth-child(2),
[data-inv-active="2"] .inv-story__copy:nth-child(3),
[data-inv-active="3"] .inv-story__copy:nth-child(4){
  opacity: 1; transform: none; pointer-events: auto;
}

.inv-story__ix{
  display: block; margin-bottom: clamp(16px, 2.4vh, 26px);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--txt-dim);
}
.inv-story__ix b{ font-weight: 600; color: var(--txt-hi); }

.inv-story__l{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.45rem, 2.35vw, 2.2rem); line-height: 1.14; letter-spacing: -.022em;
  color: var(--txt-hi); max-width: 20ch;
}
.inv-story__l + .inv-story__l{ margin-top: .3em; }
.inv-story__l--sm{
  font-size: clamp(1.05rem, 1.5vw, 1.36rem); font-weight: 500; line-height: 1.3;
  color: var(--txt); max-width: 28ch;
}
.inv-story__l--sm + .inv-story__l:not(.inv-story__l--sm){ margin-top: .7em; }
.inv-story__l--blue{ color: var(--txt-blue); }
.inv-story__l--big{
  font-size: clamp(1.7rem, 3vw, 2.75rem); line-height: 1.1; max-width: 16ch;
}
.inv-story__l--mid{
  font-size: clamp(1.1rem, 1.55vw, 1.45rem); font-weight: 400; line-height: 1.52;
  color: var(--txt); max-width: 40ch; letter-spacing: -.006em;
}

/* "Search them. / Compare them. / Understand them. / And decide with confidence."
   — square blue markers, the site's crop-mark language, not tick boxes. */
.inv-story__beats{ display: grid; gap: 10px; margin-top: clamp(18px, 2.6vh, 28px); }
.inv-story__beat{
  position: relative; padding-left: 24px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.02rem, 1.42vw, 1.28rem); line-height: 1.25; letter-spacing: -.012em;
  color: var(--txt-hi);
}
.inv-story__beat::before{
  content: ""; position: absolute; left: 0; top: .48em; width: 8px; height: 8px;
  background: var(--blue); box-shadow: 0 0 12px rgba(226,178,76,.7);
}

/* ── right: the photo strip that slides one frame per step ───────────────── */
.inv-story__right{
  position: relative; min-width: 0; border-left: 1px solid var(--line);
  background: var(--bg);
}
.inv-story__frame{ position: absolute; inset: 0; overflow: hidden; }
.inv-story__strip{
  position: absolute; inset: 0; display: grid; grid-auto-rows: 100%;
  transform: translateY(calc(var(--i, 0) * -100%));
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.inv-story__strip img{
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) contrast(1.04) brightness(.86);
}
.inv-story__veil{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,11,.72) 0%, rgba(10,10,11,.14) 34%, rgba(10,10,11,.06) 62%, rgba(10,10,11,.34) 100%),
    linear-gradient(0deg, rgba(10,10,11,.42) 0%, rgba(10,10,11,0) 38%);
}
/* one blue hairline that ties the photo half back to the argument */
.inv-story__frame::after{
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 3; height: 2px;
  width: calc((var(--i, 0) + 1) * 25%);
  background: linear-gradient(90deg, rgba(226,178,76,.35), var(--blue));
  box-shadow: 0 0 18px rgba(226,178,76,.55);
  transition: width .9s cubic-bezier(.22,.61,.36,1);
}

/* ── the close ───────────────────────────────────────────────────────────── */
.inv-there__close{ margin-top: clamp(64px, 8vw, 116px); }
/* em, not ch — ch would resolve against the wrapper's 16px, not the display size */
.inv-there__close .stack-state p{ max-width: 13.5em; }
.inv-there__close .stack-state p + p{ margin-top: .1em; }

/* ── ≤900px and reduced motion: no pin. Same DOM, re-ordered into
      copy → photo pairs with display:contents so the story still reads. ──── */
@media (max-width: 900px){
  .inv-story{ height: auto; margin-top: clamp(28px, 6vw, 48px); }
  .inv-story__pin{
    position: static; height: auto; display: grid; grid-template-columns: 1fr;
    gap: clamp(22px, 5vw, 34px); border: 0; background: none;
  }
  .inv-story__left, .inv-story__stage,
  .inv-story__right, .inv-story__frame, .inv-story__strip{ display: contents; }
  .inv-story__nav{ display: none; }
  .inv-story__copy{
    position: static; opacity: 1; transform: none; pointer-events: auto;
    padding-inline: var(--inv-gut); align-content: start;
  }
  .inv-story__copy:nth-child(1){ order: 1 }
  .inv-story__copy:nth-child(2){ order: 3 }
  .inv-story__copy:nth-child(3){ order: 5 }
  .inv-story__copy:nth-child(4){ order: 7 }
  .inv-story__strip img{
    order: 2; height: clamp(220px, 46vw, 330px); border-block: 1px solid var(--line);
  }
  .inv-story__strip img:nth-child(2){ order: 4 }
  .inv-story__strip img:nth-child(3){ order: 6 }
  .inv-story__strip img:nth-child(4){ order: 8 }
  .inv-story__veil, .inv-story .cqx-grain, .inv-story__frame::after{ display: none; }
  .inv-story__l, .inv-story__l--sm, .inv-story__l--big, .inv-story__l--mid{ max-width: none; }
}

@media (prefers-reduced-motion: reduce){
  .inv-story{ height: auto; }
  .inv-story__pin{
    position: static; height: auto; display: grid; grid-template-columns: 1fr;
    gap: clamp(22px, 5vw, 34px); border: 0; background: none;
  }
  .inv-story__left, .inv-story__stage,
  .inv-story__right, .inv-story__frame, .inv-story__strip{ display: contents; }
  .inv-story__nav{ display: none; }
  .inv-story__copy{
    position: static; opacity: 1; transform: none; transition: none;
    padding-inline: var(--inv-gut); align-content: start;
  }
  .inv-story__copy:nth-child(1){ order: 1 }
  .inv-story__copy:nth-child(2){ order: 3 }
  .inv-story__copy:nth-child(3){ order: 5 }
  .inv-story__copy:nth-child(4){ order: 7 }
  .inv-story__strip img{ order: 2; height: clamp(220px, 40vw, 380px); }
  .inv-story__strip img:nth-child(2){ order: 4 }
  .inv-story__strip img:nth-child(3){ order: 6 }
  .inv-story__strip img:nth-child(4){ order: 8 }
  .inv-story__veil, .inv-story .cqx-grain, .inv-story__frame::after{ display: none; }
}


/* ── A4 · #capitalq — "Introducing CapitalQ™" as a glass bento ────────────────
   Techniques: 18898 Feature Bento (tile rhythm: copy tiles + ONE photo tile +
   ONE flat-blue tile as the 10%) · 25283 Glow Card Grid (one pointer writes
   --px/--py onto every tile; a blurred, over-saturated blue blob drifts behind
   the glass and a border-only backdrop-filter ring amplifies it into a glowing
   edge) · 25311 Stats Bento (the diagonal hairline texture on the blue tile).
   Square, one blue #E2B24C, Inter 600 display, glass + .glow on every tile. */

.inv-cq{ overflow: hidden; isolation: isolate; }
/* for-businesses.html also owns an #capitalq and zeroes its bottom padding —
   take the section padding back with a more specific selector. */
#capitalq.sec.inv-cq{ padding-bottom: clamp(72px, 9.5vw, 150px); }

/* one soft blue ground so the glass tiles have something to refract */
.inv-cq__aura{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(118% 50% at 50% 114%, rgba(226,178,76,.13), transparent 64%),
    radial-gradient(64% 42% at 8% 0%,    rgba(226,178,76,.09), transparent 72%);
}
.inv-cq > .container{ position: relative; z-index: 1; }

/* the dark-section gradient guard paints every .h-sub white — this one is blue */
#capitalq .inv-cq__eye{
  background: none; -webkit-text-fill-color: currentColor;
  color: var(--txt-blue); margin-top: 16px;
}

/* ── the four paragraphs, set in two columns so no line runs 100+ characters ── */
.inv-cq__cols{ display: grid; gap: clamp(14px, 2vw, 24px) clamp(30px, 4vw, 60px); }
.inv-cq__col > .lede{ max-width: none; }
.inv-cq__col > .lede + .lede{ margin-top: clamp(13px, 1.5vw, 19px); }
@media (min-width: 1024px){
  .inv-cq__cols{ grid-template-columns: 1fr 1fr; align-items: start; }
}

.inv-cq__lead{
  margin-top: clamp(36px, 4.6vw, 62px);
  margin-bottom: clamp(16px, 2vw, 24px);
}
.inv-cq__cta{ margin-top: clamp(28px, 3.5vw, 44px); }
/* the magnetic label span would otherwise eat the button's own flex gap */
.inv-cq__btnl{ display: inline-flex; align-items: center; gap: .7em; }

/* ── the bento ──────────────────────────────────────────────────────────── */
.inv-bento{
  display: grid; gap: clamp(10px, 1.2vw, 16px);
  grid-template-columns: 1fr;
}
@media (min-width: 768px){ .inv-bento{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .inv-bento{ grid-template-columns: repeat(3, 1fr); } }

.inv-bento__tile{
  position: relative; isolation: isolate; min-width: 0;
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.2vw, 30px);
  background: linear-gradient(180deg, rgba(26,29,35,.60), rgba(12,13,16,.74));
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
          backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--line);
  transition: border-color .4s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.inv-bento__tile:hover{ border-color: rgba(242,207,124,.34); transform: translateY(-2px); }

/* 25283 · the light source: a blurred, over-saturated blue square that the
   pointer drags around behind the glass. Default parks it up and to the left so
   a still frame still reads as lit from one direction. */
.inv-bento__blob{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.inv-bento__blob > i{
  position: absolute; left: 50%; top: 50%;
  width: 100px; height: 100px; margin: -50px 0 0 -50px;
  background: var(--blue);
  transform: translate3d(calc(var(--px, -.88) * 170px), calc(var(--py, -1.12) * 96px), 0) scale(2.2);
  filter: blur(34px) saturate(3) brightness(1.15);
  opacity: .26; will-change: transform;
}

/* 25283 · border-only overlay: its backdrop-filter amplifies whatever the blob
   is doing underneath into a glowing edge. Desktop + fine pointer only — this
   is the expensive layer, and the -webkit- mask-composite pair is mandatory. */
.inv-bento__ring{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 2px solid transparent;
}
@media (hover: hover) and (min-width: 1024px){
  .inv-bento__ring{
    -webkit-backdrop-filter: blur(8px) brightness(1.55) contrast(1.15) saturate(1.5);
            backdrop-filter: blur(8px) brightness(1.55) contrast(1.15) saturate(1.5);
    -webkit-mask: linear-gradient(#fff 0 0) border-box, linear-gradient(#fff 0 0) padding-box;
    -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) border-box, linear-gradient(#fff 0 0) padding-box;
            mask-composite: exclude;
  }
}

/* content sits above the light */
.inv-bento__mk{
  position: relative; z-index: 1; flex: none; align-self: flex-start;
  display: grid; place-items: center; width: 22px; height: 22px;
  background: rgba(226,178,76,.18); border: 1px solid rgba(242,207,124,.40);
  font-size: .66rem; line-height: 1; color: var(--blue-lt);
}
.inv-bento__t{
  position: relative; z-index: 1;
  margin-top: auto; padding-top: clamp(18px, 2.2vw, 30px);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  line-height: 1.26; letter-spacing: -.014em; color: var(--txt-hi);
}
.inv-bento__d{
  position: relative; z-index: 1;
  margin-top: 10px; font-size: .93rem; line-height: 1.62; color: var(--txt-dim);
}

/* the ONE flat-blue tile — the 10%. It carries the closing line of the six. */
.inv-bento__tile--blue{
  background: linear-gradient(158deg, #E2B24C 0%, rgba(226,178,76,.86) 100%);
  border-color: rgba(255,255,255,.22);
  box-shadow: inset 0 0 60px rgba(255,255,255,.06);
}
.inv-bento__tile--blue::before{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(212deg, transparent 6%, #000 66%);
          mask-image: linear-gradient(212deg, transparent 6%, #000 66%);
}
.inv-bento__tile--blue:hover{ border-color: rgba(255,255,255,.42); }
.inv-bento__tile--blue .inv-bento__mk{
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); color: #fff;
}
.inv-bento__tile--blue .inv-bento__t{ color: #fff; }
.inv-bento__tile--blue .inv-bento__d{ color: rgba(255,255,255,.88); }

/* 18898 · the photo tile: full-width band through the middle of the bento,
   no copy, house scrim + grain, grayscale→colour on hover like the rest of the site */
.inv-bento__photo{
  position: relative; overflow: hidden; margin: 0; grid-column: 1 / -1;
  min-height: clamp(150px, 19vw, 240px);
  border: 1px solid var(--line);
}
.inv-bento__photo img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 66% 44%;
  filter: grayscale(.42) contrast(1.06) brightness(.82);
  transform: scale(1.02);
  transition: filter .8s ease, transform 1.2s cubic-bezier(.22,1,.36,1);
}
.inv-bento__photo:hover img{ filter: grayscale(0) contrast(1.06) brightness(.98); transform: scale(1.06); }
.inv-bento__scrim{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,11,.58) 0%, rgba(10,10,11,.20) 44%, rgba(10,10,11,.78) 100%),
    linear-gradient(90deg, rgba(226,178,76,.30) 0%, rgba(226,178,76,.04) 52%, rgba(10,10,11,.30) 100%);
}
.inv-bento__photo .cqx-grain{ z-index: 2; }
/* the edge glow draws OUTSIDE its box; overflow:hidden here would eat it */
.inv-bento__photo .cqx-edge{ inset: 2px; }

/* below 1024 the band would leave holes mid-grid — send it to the end */
@media (max-width: 1023.98px){
  .inv-bento__tile{ order: 1; }
  .inv-bento__photo{ order: 2; }
}

@media (max-width: 520px){
  .inv-bento__photo{ min-height: 170px; }
}

@media (prefers-reduced-motion: reduce){
  .inv-bento__tile{ transition: none; }
  .inv-bento__tile:hover{ transform: none; }
  .inv-bento__photo img{ transition: none; }
}


/* ── A5 · #smarter — cinematic parallax statement band (scrollstory 2768) ──────
   A 150vh block. The photo card is sticky, scales 1 → 0.85 and its scrim darkens
   .55 → .85 as the block leaves, so the image physically pulls away from the
   reader. The statement lives INSIDE the card but is counter-scaled (--is), so it
   rides through the whole pinned phase at true size while the photo shrinks
   behind it (y 250 → -250px, opacity ramping to full across the entire pin).
   Five custom props, ONE rAF scroll handler in 05-smarter.js. */
.inv-band{
  --s: 1;    /* photo card scale            */
  --is: 1;   /* 1 / --s, keeps type at size */
  --o: .55;  /* flat scrim opacity          */
  --y: 0px;  /* statement travel            */
  --a: 1;    /* statement opacity           */
  position: relative;
  height: 150vh;
  padding: 0 12px;
  background: var(--bg);
  isolation: isolate;
}

/* the sticky photo card — pulls away as the block leaves */
.inv-band__card{
  position: sticky; top: 12px;
  height: calc(100vh - 24px);
  transform: scale(var(--s));
  transform-origin: 50% 50%;
  will-change: transform;
  background: #07080A;
}
.inv-band__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  display: block;
  filter: saturate(.84) contrast(1.13) brightness(.97);
}
/* flat scrim — the value the JS darkens as the card leaves */
.inv-band__scrim{
  position: absolute; inset: 0; pointer-events: none;
  background: #0A0A0B;
  opacity: var(--o);
}
/* editorial bed + vignette: the statement reads on every frame of the scroll */
.inv-band__bed{
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(10,10,11,.90) 0%, rgba(10,10,11,.16) 18%,
      rgba(10,10,11,.30) 34%, rgba(10,10,11,.66) 47%,
      rgba(10,10,11,.74) 57%, rgba(10,10,11,.40) 70%,
      rgba(10,10,11,.16) 82%, rgba(10,10,11,.90) 100%),
    radial-gradient(112% 86% at 50% 50%, rgba(10,10,11,0) 26%, rgba(10,10,11,.74) 100%);
}
/* 1px editorial frame — square hairline, above every photo layer */
.inv-band__frame{
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(10,10,11,.35);
}
.inv-band .cqx-grain{ z-index: 2; }

/* the statement — counter-scaled so it never shrinks with the photo */
.inv-band__copy{
  position: absolute; inset: 0; z-index: 4;
  display: grid; align-items: center;
  transform: translateY(var(--y)) scale(var(--is));
  transform-origin: 50% 50%;
  opacity: var(--a);
  will-change: transform, opacity;
  pointer-events: none;
}
.inv-band__copy .container{ width: 100%; }

.inv-band__l{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.85rem, 6.1vw, 4.5rem);
  line-height: 1.05; letter-spacing: -.03em;
  text-align: center;
  color: var(--txt-hi);
  text-shadow: 0 2px 34px rgba(6,7,9,.72), 0 1px 3px rgba(6,7,9,.55);
  margin: 0;
  padding-bottom: .14em; margin-bottom: -.14em;
}
.inv-band__l--blue{
  color: var(--blue);
  margin-top: .14em;
  /* one blue, lifted off the photo by a tight halo — not a wash */
  text-shadow: 0 0 15px rgba(226,178,76,.62), 0 1px 2px rgba(6,7,9,.9), 0 3px 22px rgba(6,7,9,.85);
}
/* the payoff line rises a beat after the setup line */
.inv-band__l--blue .cqx-line__in{ transition-delay: .16s; }

/* the house blue halo, kept as the signature on the one object in this section */
.inv-band__card.glow::after{ box-shadow: 0 0 40px 4px rgba(226,178,76,.28), 0 0 110px 18px rgba(226,178,76,.14); }
.inv-band:hover .inv-band__card.glow::after{ opacity: 1; }

@media (max-width: 900px){
  .inv-band{ padding: 0 10px; }
  .inv-band__card{ top: 10px; height: calc(100vh - 20px); }
  .inv-band__l{ font-size: clamp(1.7rem, 8.2vw, 3rem); letter-spacing: -.026em; }
  .inv-band__bed{
    background:
      linear-gradient(180deg,
        rgba(10,10,11,.88) 0%, rgba(10,10,11,.28) 15%,
        rgba(10,10,11,.44) 33%, rgba(10,10,11,.68) 52%,
        rgba(10,10,11,.70) 72%, rgba(10,10,11,.32) 87%,
        rgba(10,10,11,.88) 100%),
      radial-gradient(150% 90% at 50% 50%, rgba(10,10,11,0) 28%, rgba(10,10,11,.72) 100%);
  }
}

@media (prefers-reduced-motion: reduce){
  .inv-band{ --s: 1; --is: 1; --o: .55; --y: 0px; --a: 1; }
  .inv-band__card{ transform: none; }
  .inv-band__copy{ transform: none; opacity: 1; }
}


/* ── A6 · #who-we-serve — TEN investor types as one horizontal lane driven by
   vertical scroll (scrollstory 20139) with a depth focus pass (18439), over the
   house dotted world map carrying arcs from London / New York / Dubai /
   Singapore into Lagos / Nairobi / Johannesburg (backgrounds 999). ── */

.inv-serve{
  padding-top: 0;
  --inv-gut: max(20px, calc((100% - 1440px) / 2 + 20px));
}
@media (min-width:640px){ .inv-serve{ --inv-gut: max(32px, calc((100% - 1440px) / 2 + 32px)); } }
@media (min-width:768px){ .inv-serve{ --inv-gut: max(40px, calc((100% - 1440px) / 2 + 40px)); } }

/* the pin: 320vh of scroll drives the lane sideways.
   NOTE: no overflow on .inv-serve / .inv-lane — that would kill position:sticky. */
.inv-lane{ position:relative; height:320vh; }
.inv-lane__win{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
  padding-top: clamp(86px, 11.5vh, 132px);
  padding-bottom: clamp(22px, 3.4vh, 40px);
}
.inv-lane__head{ flex:0 0 auto; margin-bottom: clamp(16px, 2.8vh, 34px); }
.inv-lane__head .sechead{ margin-bottom:0; }
.inv-lane__stage{ flex:1 1 auto; min-height:0; display:flex; align-items:center; }
.inv-lane__track{
  position:relative; display:flex; align-items:stretch; gap:16px;
  width:max-content; padding-inline: var(--inv-gut); will-change: transform;
}
.inv-lane__foot{ flex:0 0 auto; margin-top: clamp(14px, 2.2vh, 26px); }
.inv-lane__rail{ margin:0; }
.inv-lane__rail i{ position:relative; display:block; height:1px; background: var(--line); }
.inv-lane__rail i::after{
  content:''; position:absolute; left:0; top:-1px; height:3px;
  width: calc(var(--p, 0) * 100%); background: var(--blue);
  box-shadow: 0 0 14px rgba(226,178,76,.8);
}

/* ── the tiles ── */
.inv-tile{
  --f: 0; --lit: 0;
  position:relative; flex:0 0 auto;
  width: clamp(224px, 23vw, 316px);
  height: clamp(268px, 50vh, 442px);
  display:flex; flex-direction:column;
  border: 1px solid rgba(244,248,251,.16);
  background: #0b0c0e;
}
.inv-tile__media{ position:absolute; inset:0; z-index:0; overflow:hidden; display:block; }
.inv-tile__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.09);
  filter: grayscale(calc(var(--f))) blur(calc(var(--f) * 3px))
          saturate(calc(1 - var(--f) * .7)) brightness(calc(1 - var(--f) * .45));
}
.inv-tile__scrim{
  position:absolute; inset:0; z-index:1; display:block; pointer-events:none;
  background: linear-gradient(180deg, rgba(8,9,11,.16) 0%, rgba(8,9,11,.55) 46%, rgba(8,9,11,.9) 100%);
}
.inv-tile__ix{
  position:relative; z-index:2; margin:0 0 auto; padding: 18px 18px 0;
  font-family: var(--font-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color: rgba(244,248,251,.55);
  opacity: calc(1 - var(--f) * .5);
}
.inv-tile__plate{
  position:relative; z-index:2; margin-top:auto;
  padding: 16px 18px 18px;
  border: 0; border-top: 1px solid rgba(244,248,251,.18);
  background: rgba(244,248,251, calc(.05 + var(--lit, 0) * .05));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* only the ONE tile at the window centre lights its edge — the 10% stays 10% */
.inv-tile__plate::after{
  content:''; position:absolute; left:0; right:0; top:-1px; height:2px;
  background: var(--blue); opacity: var(--lit, 0);
  box-shadow: 0 0 18px rgba(226,178,76,.85);
}
.inv-tile__t{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1rem, 1.22vw, 1.24rem); line-height:1.2; letter-spacing:-.016em;
  color: var(--txt-hi); margin:0; min-height: 2.4em;
  opacity: calc(1 - var(--f) * .38);
}
/* the 10% — the tile the arcs are about */
.inv-tile--blue .inv-tile__plate{ background: var(--blue); border-top-color: rgba(255,255,255,.28); }
.inv-tile--blue .inv-tile__plate::after{ background:#fff; box-shadow:0 0 18px rgba(255,255,255,.6); }
.inv-tile--blue .inv-tile__t{ color:#fff; }

/* ── world map + arcs behind the lane (texture, not a widget) ── */
.inv-serve__world{
  position:absolute; left:50%; top:43%; transform: translate(-50%,-50%);
  width: min(1560px, 136%); aspect-ratio: 1600 / 598;
  z-index:0; pointer-events:none;
  /* fade top/bottom AND the left third, so the copy column stays clean and the
     arcs read where they matter — over Africa. -webkit- pair per house rule. */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(90deg, transparent 38%, rgba(0,0,0,.26) 52%, #000 68%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(90deg, transparent 38%, rgba(0,0,0,.26) 52%, #000 68%, #000 100%);
  mask-composite: intersect;
}
.inv-serve__worldin{ position:absolute; inset:0; }
.inv-serve__map{ position:absolute; inset:0; width:100%; height:100%; opacity:.44; }
.inv-serve__arcs{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.inv-arc{
  fill:none; stroke: url(#inv-arcg); stroke-width: 1.8;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.15s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--d, 0) * .5s);
}
.inv-serve__worldin.in .inv-arc{ stroke-dashoffset: 0; }
.inv-node{ fill: var(--blue); opacity:.85; }
.inv-node--in{ fill: var(--blue); opacity:1; }
.inv-node--p{
  transform-box: fill-box; transform-origin: center; opacity:.45;
  animation: inv-node-pulse 2.4s ease-out infinite;
  animation-delay: calc(var(--d, 0) * 1s);
}
@keyframes inv-node-pulse{
  from{ transform: scale(1); opacity:.5; }
  to  { transform: scale(4.5); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .inv-node--p{ animation:none; opacity:.28; }
  .inv-arc{ transition:none; stroke-dashoffset:0; }
}

/* ── the close ── */
.inv-serve__tail{ margin-top: clamp(56px, 7vw, 96px); margin-bottom:0; }
.inv-serve__tail .lede{ margin-inline:auto; }

/* ── no pin below 900px: the same DOM becomes a snap strip ── */
@media (max-width:900px){
  .inv-lane{ height:auto; }
  .inv-lane__win{
    position:relative; height:auto;
    padding-top: clamp(64px, 11vw, 100px); padding-bottom: 0;
  }
  .inv-lane__head .sechead{ margin-bottom: clamp(28px, 5vw, 44px); }
  .inv-lane__stage{
    display:block; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
  }
  .inv-lane__stage::-webkit-scrollbar{ display:none; }
  .inv-lane__foot{ display:none; }   /* scroll-progress rail means nothing without the pin */
  .inv-lane__track{ transform:none !important; }
  .inv-tile{
    --f: 0 !important; --lit: 0 !important;
    scroll-snap-align:center;
    width: clamp(212px, 66vw, 300px); height: clamp(280px, 62vw, 380px);
  }
  .inv-tile__media img{ filter:none; }
  .inv-serve__world{ width: min(1200px, 190%); top: 54%; opacity:.75; }
}
@media (max-width:520px){
  .inv-lane__track{ gap:12px; }
}


/* ── A7 · #investor-network — the network made visible: a constellation field
   (backgrounds 25569) that gathers around the cursor, with the page's ONE
   comet-border card (bento 18032 via the shared .cqx-ring) holding the seven
   membership lines as a self-drawing checklist (steps 23569). ── */

.inv-circle{
  position: relative; overflow: hidden;
  background: var(--bg-soft);
}
/* the field sits behind everything and never takes the pointer */
.inv-circle__net{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block; pointer-events: none;
}
/* …and the copy always sits above it */
.inv-circle > .container{ position: relative; z-index: 1; }

.inv-circle__head{ margin-bottom: clamp(30px, 4vw, 52px); }
.inv-circle__lede{ margin-top: 18px; margin-inline: auto; max-width: 68ch; }

/* ── the membership card ── */
.inv-circle__ring{ max-width: 940px; margin-inline: auto; }
.inv-circle__card{ position: relative; overflow: hidden; padding: clamp(24px, 3.2vw, 44px); }
.inv-circle__kick{ position: relative; margin-bottom: clamp(18px, 2.2vw, 26px); }

.inv-circle__list{ display: grid; gap: 14px; }
@media (min-width: 860px){ .inv-circle__list{ grid-template-columns: 1fr 1fr; gap: 14px 32px; } }

.inv-check{
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  font-size: .95rem; line-height: 1.6; color: var(--txt);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--k, 0) * 90ms);
}
[data-inv-checks].is-in .inv-check{ opacity: 1; transform: none; }

/* square tick box — the check STROKE draws itself in */
.inv-check__box{
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  display: grid; place-items: center;
  background: rgba(226,178,76,.14); border: 1px solid rgba(226,178,76,.5);
  color: var(--blue-lt);
}
.inv-check__box svg{ width: 13px; height: 13px; display: block; }
.inv-check__box path{
  stroke-dasharray: 26; stroke-dashoffset: 26;
  transition: stroke-dashoffset .4s cubic-bezier(.65,0,.35,1);
  transition-delay: calc(var(--k, 0) * 90ms + 180ms);
}
[data-inv-checks].is-in .inv-check__box path{ stroke-dashoffset: 0; }

/* ── closing line + CTA ── */
.inv-circle__close{
  margin-top: clamp(34px, 4.4vw, 60px);
  text-align: center; max-width: 74ch; margin-inline: auto;
}
.inv-circle__cta{ justify-content: center; margin-top: 26px; }

@media (max-width: 520px){
  .inv-check{ font-size: .9rem; }
  .inv-circle__card{ padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce){
  .inv-check{ opacity: 1; transform: none; transition: none; }
  .inv-check__box path{ stroke-dashoffset: 0; transition: none; }
}


/* ── A8 · #start — the close. Star-grid ground (shared .cqx-stars, from
   backgrounds 18478: hairline grid, twinkles and light running the lines) with
   the strategy call sitting inside the shared .cqx-panel instrument frame
   (heroes 19341: corner brackets, scanlines, a light sweeping the top edge).
   The five call lines reuse the .inv-check self-drawing checklist from A7. ── */

.inv-start{ background: var(--bg); }

/* copy left, panel right at desktop; single column below 940px */
.inv-start__grid{ display: grid; gap: clamp(28px, 4vw, 60px); align-items: start; }
@media (min-width: 940px){
  .inv-start__grid{ grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); }
  .inv-start__foot{ grid-column: 1 / -1; }
}

.inv-start__head{ align-self: center; }
.inv-start__body{ margin-top: 18px; max-width: 56ch; }

.inv-start__panel{ padding: clamp(24px, 3vw, 40px); }
.inv-start__kick{ margin-bottom: clamp(18px, 2.2vw, 26px); }
.inv-start__list{ display: grid; gap: 14px; }

.inv-start__foot{
  margin-top: clamp(10px, 1.6vw, 22px);
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 40px);
}
.inv-start__pledge{ max-width: 74ch; }
.inv-start__cta{ margin-top: 26px; }

@media (max-width: 520px){
  .inv-start__panel{ padding: 22px 18px; }
}


/* ══════════ 20260904p — client corrections 2026-09-04 · index ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   20260904-A — HOMEPAGE CORRECTION ROUND (client voice note, items A1–A10)
   Scoped to index.html only. Plain rules, append-only, no @import, no libs.
   The lead merges this block into css/style.css afterwards.
   Standing rules kept: SQUARE corners, ONE blue #E2B24C, Inter 600 display,
   glass + .glow untouched, 60/30/10.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A1 · shared full-bleed escape from .container ─────────────────────────
   The element keeps the container's own gutter as padding so the copy inside
   still lines up with every other section, while the ground runs edge to
   edge. --fx-gut mirrors .container's 20 / 32 / 40px padding steps.
   Audit result (1440 measurements): every <section> already spans the
   viewport, and so do .marquee__row, .conf__band / .vmq, .intel + .intel__map
   and .aar__grid. The only inset bands that read as full-bleed statements
   were .rgap2__panel (A3) and .closecard--white (A10) — both carry the class
   below now. .rgap__fig, .nameglow, .meetglass and the card grids stay
   contained on purpose (they are composed cards, not bands). */
.fx-index-bleed{
  --fx-gut: max(20px, calc((100vw - 1440px) / 2 + 20px));
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--fx-gut);
}
@media (min-width: 640px){
  .fx-index-bleed{ --fx-gut: max(32px, calc((100vw - 1440px) / 2 + 32px)); }
}
@media (min-width: 768px){
  .fx-index-bleed{ --fx-gut: max(40px, calc((100vw - 1440px) / 2 + 40px)); }
}

/* ── A2 · #top hero — photo zoomed in, subject moved RIGHT and DOWN ────────
   hero-exec.webp is 1536x1024, so object-fit:cover leaves the frame with no
   vertical slack at all: object-position Y is a no-op here. The reframe has
   to be a transform. object-fit:cover always fills the element box, so the
   only no-gap rule is |translate| <= (S-1)/2 = 27.5%; 13% / 26% clears it at
   every viewport (verified 360 / 768 / 1024 / 1440 / 1920). The dark ground
   under the layer is belt-and-braces for the 1.5% margin on the Y axis. */
.hero--exec .hero__bg{ background: #0A0A0B; }
.hero--exec .hero__bg img{
  object-position: 50% 50%;
  transform-origin: 50% 50%;
  transform: translate(13%, 26%) scale(1.55);
}

/* ── A3 · #connection — the panel runs to both screen edges, border kept ── */
#connection .rgap2__panel{
  border: 1px solid rgba(8, 16, 44, .5);
}
#connection .rgap2__lady{
  right: max(20px, calc((100vw - 1440px) / 2 + 40px));
}

/* ── A4 · #connection — the swirl pattern reads much quieter ─────────────── */
#connection .rgap2__panel::before{ opacity: .10; }

/* ── A5 · #intelligence — the Advantage carousel reads active vs inactive ──
   Inactive: black-and-white under a black overlay, deliberately dull.
   Active: back in colour, brighter, under a single-blue colour gradient. */
#intelligence .sqz__panel .sqz__img{
  filter: grayscale(1) saturate(0) brightness(.5) contrast(1.04);
  transition: filter .6s ease;
}
#intelligence .sqz__panel.is-open .sqz__img{
  filter: grayscale(0) saturate(1.1) brightness(.98) contrast(1.03);
}
#intelligence .sqz__panel .sqz__shade{
  background: linear-gradient(180deg, rgba(5, 6, 8, .62) 0%, rgba(5, 6, 8, .74) 52%, rgba(5, 6, 8, .9) 100%);
  transition: background .6s ease, opacity .6s ease;
}
#intelligence .sqz__panel.is-open .sqz__shade{
  background:
    linear-gradient(158deg, rgba(226,178,76,.46) 0%, rgba(226,178,76,.17) 34%,
                    rgba(10, 10, 11, .04) 56%, rgba(10, 10, 11, .7) 100%);
}
#intelligence .sqz__panel:not(.is-open) .sqz__tag{ color: rgba(255, 255, 255, .55); }

/* ── A6 · #the-name — one sentence per line, then the block is re-padded ──
   .dim2 goes block so "The Right Investors…" always starts the second line;
   the copy column widens and the display size steps down just enough that
   "The Right Businesses Shouldn't Be Hard to Find." holds one line. */
#the-name .h-mid{
  font-size: clamp(1.18rem, 1.64vw, 1.56rem);
  line-height: 1.3;
}
#the-name .h-mid .dim2{ display: block; }
#the-name .nameglow__copy{ max-width: min(64%, 700px); }
#the-name .nameglow{
  padding-block: clamp(28px, 3.4vw, 52px);
  min-height: clamp(320px, 29vw, 420px);
}
#the-name.sec{
  padding-top: clamp(52px, 6.6vw, 100px);
  padding-bottom: clamp(52px, 6.6vw, 100px);
}
@media (max-width: 880px){
  #the-name .nameglow__copy{ max-width: none; }
}

/* ── A7 · #the-name — no off-white band: the Advantage ground continues ──── */
#the-name{ background: var(--bg-soft); }

/* ── A9 · #knowledge — less air top and bottom ───────────────────────────── */
#knowledge.sec{
  padding-top: clamp(52px, 6.4vw, 92px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
/* the section went dark in 2026-09-03b but the CTA kept its white-theme ink
   (#0B0C0E on #0A0A0B — invisible). Back to the house dark glass button. */
#knowledge .btn--glass{
  background: rgba(244, 248, 251, .05);
  color: var(--txt-hi);
  border-color: var(--line);
}
#knowledge .btn--glass:hover{ color: var(--blue-lt); border-color: var(--blue-lt); }

/* ── A10 · #close — the world-map card runs to both screen edges ─────────── */
#close .closecard--white{
  border-inline: 0;
}
#close .closecard__map{
  background-size: auto 190%;
  background-position: 50% 50%;
}

/* ══════════ 20260904p — client corrections 2026-09-04 · for-businesses ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   2026-09-04 · FOR BUSINESSES — client correction list B1–B8.
   Standalone block for the lead to fold into css/style.css. Plain rules only,
   no @import, no new custom properties beyond the two locals below.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── B1 · #top — the hero copy sits in the MIDDLE of the frame ─────────────
   .hero (line 1946 of style.css) sets justify-content:flex-end, which is what
   was pinning the block to the bottom. Centre it and balance the padding so
   the optical centre is the viewport centre, not 130px below it. */
.hero.hero--biz{
  justify-content: center;
  padding-block: clamp(104px, 13vh, 156px) clamp(64px, 8vh, 120px);
}
.hero.hero--biz .hero__inner{ margin-block: auto; }
@media (min-width: 901px) and (max-height: 800px){
  .hero.hero--biz{ padding-block: clamp(88px, 12vh, 120px) clamp(40px, 6vh, 72px); }
}


/* ── B3 · #be-honest — the questions run EDGE TO EDGE on a sliding band ────
   Ported from the GateQ .mqband: each copy of the group carries its own
   trailing separator and the track has gap:0, so one group is exactly a third
   of the track and the wrap has no seam. Direction is LEFT → RIGHT (the GateQ
   .hmq keyframe, -33.3333% → 0) as the client asked; hover parks it. */
/* NB: every rule below is written .bhq__bar.fx-for-tick so it outranks the
   existing .bhq__bar block whatever order the merge lands them in. */
.bhq__bar.fx-for-tick{
  position: relative;
  margin-top: clamp(30px, 4vw, 58px);
  overflow: hidden;
  background: linear-gradient(118deg, #C99A36 0%, #E2B24C 62%, #F2CF7C 100%);
  box-shadow: 0 22px 54px -30px rgba(226,178,76,.95);
  padding-block: clamp(22px, 2.8vw, 36px);
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
  /* the band is a section-level child, so it is already viewport-wide; this is
     the belt-and-braces guard for whatever wrapper it lands in after the merge */
  margin-inline: calc(50% - 50vw); width: 100vw; max-width: 100vw;
}

.bhq__bar.fx-for-tick .bhq__mqtrack{
  display: flex; width: max-content; gap: 0;
  animation: fxForTick 38s linear infinite;
  will-change: transform;
}
.bhq__bar.fx-for-tick:hover .bhq__mqtrack,
.bhq__bar.fx-for-tick:focus-within .bhq__mqtrack{ animation-play-state: paused; }
@keyframes fxForTick{ from{ transform: translate3d(-33.3333%,0,0); } to{ transform: translate3d(0,0,0); } }

.bhq__bar.fx-for-tick .bhq__mqgroup{ display: flex; gap: 0; }

/* GateQ display voice: Inter 600, tight leading, one white ink, blue-white
   separator inside the repeating unit so the loop stays seamless */
.bhq__bar.fx-for-tick .bhq__q{
  flex: none; margin: 0; min-height: 0; white-space: nowrap;
  padding: 0 0 0 clamp(26px, 3vw, 52px);
  background: none; box-shadow: none; border: 0;
  display: flex; align-items: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 2.05rem);
  line-height: 1.14; letter-spacing: -.02em;
  color: rgba(255,255,255,.9);
  transition: color .3s ease;
}
.bhq__bar.fx-for-tick .bhq__q::after{
  content: '\2022';
  margin-left: clamp(26px, 3vw, 52px);
  color: rgba(255,255,255,.5);
  font-weight: 400;
}
/* the hover behaviour: the band parks and the question under the cursor
   comes up to full white */
.bhq__bar.fx-for-tick .bhq__q:hover{ color: #FFFFFF; transform: none; }

@media (prefers-reduced-motion: reduce){
  .bhq__bar.fx-for-tick .bhq__mqtrack{ animation: none; }
}
@media (max-width: 620px){
  .bhq__bar.fx-for-tick{ padding-block: 18px; }
  .bhq__bar.fx-for-tick .bhq__q{ font-size: 1.05rem; padding-left: 20px; }
  .bhq__bar.fx-for-tick .bhq__q::after{ margin-left: 20px; }
}

/* the section's own rhythm now that the band breaks out of the container */
.fx-for-bhq .sechead{ margin-bottom: 0; }
.fx-for-bhq .bhq__stop{ margin-top: clamp(30px, 3.6vw, 46px); }


/* ── B4 · #nothing-changes — ONE centred column ────────────────────────────
   Heading, sub-headline and body centred; the four "more …" items sit
   underneath on a single straight line. */
.fx-for-pat .pat__panel{
  grid-template-columns: 1fr;
  min-height: 0;
  padding-inline: 0;
  gap: clamp(30px, 4vw, 52px);
  justify-items: center;
}
@media (min-width: 940px){
  .fx-for-pat .pat__panel{ grid-template-columns: 1fr; padding-right: 0; }
}
.fx-for-pat .pat__copy{
  max-width: 68ch; margin-inline: auto; text-align: center;
}
.fx-for-pat .pat__copy .lede{ margin-inline: auto; max-width: 64ch; }
.fx-for-pat .pat__copy .h-sub{ margin-inline: auto; max-width: 52ch; }

/* the straight line of four */
.fx-for-pat .pat__list{
  width: 100%;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(12px, 1.4vw, 18px);
  align-items: stretch;
}
.fx-for-pat .pat__item{
  flex-direction: column; align-items: center; text-align: center;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(20px, 2.2vw, 28px) clamp(12px, 1.4vw, 18px);
}
.fx-for-pat .pat__item:hover{ transform: translateY(-4px); }
.fx-for-pat .pat__itemt{ font-size: clamp(.98rem, 1.15vw, 1.1rem); }
@media (max-width: 860px){
  .fx-for-pat .pat__list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 460px){
  .fx-for-pat .pat__list{ grid-template-columns: 1fr; }
  .fx-for-pat .pat__item{ flex-direction: row; text-align: left; }
}


/* ── B5 · #approach — an icon on all five step cards ───────────────────────
   The index and the icon share one row at the top of the card, so the card
   keeps its three flex children and its space-between rhythm. */
.fx-for-shead{
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
}
.fx-for-sico{
  flex: none; display: grid; place-items: center;
  width: clamp(38px, 3.4vw, 46px); aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(255,255,255,.14);
  color: #FFFFFF;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.fx-for-sico svg{ width: 52%; height: 52%; display: block; }
.scard--light .fx-for-sico{
  border-color: rgba(226,178,76,.42);
  background: rgba(226,178,76,.12);
  color: var(--blue);
}
.scard:hover .fx-for-sico{ background: rgba(255,255,255,.24); border-color: #FFFFFF; }
.scard--light:hover .fx-for-sico{ background: var(--blue); border-color: var(--blue); color: #FFFFFF; }


/* ── B6 · #platform — 21st.dev background overlays on the flat white ground ─
   Technique ported to vanilla from two 21st.dev components:
     · "BG Patterns" (efferd, id 2171) — repeating CSS-gradient grid / dot
       fields with a mask-image fade. No images, no assets.
     · "Vignette Grid Background" (molecule-lab-rushil, id 5471) — the same
       grid under a radial-ellipse vignette mask placed on a chosen origin.
   Everything is FDN blue at low alpha, so the section still reads white and
   the 60/30/10 balance is untouched. */
.fx-for-plat{ position: relative; overflow: hidden; }
.fx-for-plat > .container{ position: relative; z-index: 1; }

.fx-for-bg{
  position: absolute; inset: 0; z-index: 0;
  display: block; pointer-events: none;
}

/* the grid — 1px hairlines every 56px, faded top and bottom (BG Patterns
   "fade-y" mask) so it never collides with the section seams */
.fx-for-bg--grid{
  background-image:
    linear-gradient(to right, rgba(226,178,76,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226,178,76,.16) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
}

/* the dot field — finer, offset half a cell, under a radial vignette placed
   on the tile block (the Vignette Grid Background mask) so the texture is
   densest exactly where the section was flattest */
.fx-for-bg--dots{
  background-image: radial-gradient(rgba(226,178,76,.34) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
  background-position: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 74% 62% at 50% 58%, #000 6%, transparent 92%);
          mask-image: radial-gradient(ellipse 74% 62% at 50% 58%, #000 6%, transparent 92%);
}

/* one soft beam so the ground is lit rather than merely textured */
.fx-for-bg--beam{
  background:
    radial-gradient(62% 46% at 50% -4%, rgba(226,178,76,.20), transparent 72%),
    radial-gradient(48% 36% at 8% 92%, rgba(226,178,76,.15), transparent 74%),
    radial-gradient(48% 36% at 92% 92%, rgba(226,178,76,.15), transparent 74%);
}

/* the tiles need to sit ON the texture, not be swallowed by it */
.fx-for-plat .ptile{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fx-for-plat .ptile:hover{ background: #FFFFFF; }

@media (max-width: 620px){
  .fx-for-bg--grid{ background-size: 40px 40px; }
  .fx-for-bg--dots{ background-size: 22px 22px; background-position: 11px 11px; }
}


/* ── B7 · #features — the Inside CapitalQ hover pop is no longer cropped ───
   .scar__track carries overflow-x:auto, and a scroll container clips on BOTH
   axes: the -8px lift, the .glow halo (0 0 64px 8px) and the .gring comet
   border were all being sliced off top and bottom. Give the track real
   vertical room and pull it back with matching negative margins so the
   section rhythm is unchanged. */
.fx-for-pop{ overflow: visible; }
.fx-for-pop .scar__track{
  /* NB: overflow-y:visible is not available here — a scroll container clips on
     both axes, so the room has to come from padding. */
  padding-top: 42px; padding-bottom: 58px;
  margin-top: -42px; margin-bottom: -58px;
}
/* the lift itself, with a little more travel now that it has somewhere to go */
.fx-for-pop .fcard{ will-change: transform; }
.fx-for-pop .fcard:hover{
  transform: translateY(-12px);
  box-shadow: 0 34px 64px -28px rgba(226,178,76,.62);
}
.fx-for-pop .fcard.glow::after{
  box-shadow: 0 0 34px 4px rgba(226,178,76,.34), 0 0 96px 16px rgba(226,178,76,.18);
}
@media (max-width: 620px){
  .fx-for-pop .scar__track{
    padding-top: 28px; padding-bottom: 40px;
    margin-top: -28px; margin-bottom: -40px;
  }
}


/* ── B8 · #close — the world-map overlay rectangle runs to the screen edges ─
   Matching A10 on the homepage. The map leaves the card and becomes the
   section's own full-bleed bed; the card keeps its white ground and glow and
   simply sits on top of it. */
.fx-for-close{ position: relative; overflow: hidden; }
.fx-for-close > .container{ position: relative; z-index: 1; }

.fx-for-closebed{
  position: absolute; left: 50%; top: 0;
  width: 100vw; max-width: 100vw; height: 100%;
  transform: translateX(-50%);
  z-index: 0; display: block; pointer-events: none;
  background: #FFFFFF;
  border-top: 1px solid #DFE6EE; border-bottom: 1px solid #DFE6EE;
}
.fx-for-closebed .fx-for-closemap{
  position: absolute; inset: 0; display: block;
  background: url('../assets/img/worldmap-dots.svg') no-repeat 50% 52%;
  background-size: 108% auto;
  opacity: .55;
}
/* the card's own inset map would double up on the bed */
.fx-for-close .closecard__map{ display: none; }
/* the card is now a frameless plate on the white band */
.fx-for-close .closecard--white{
  background: transparent; border-color: transparent;
}
.fx-for-close .closecard--white.gring::before{ display: none; }
.fx-for-close .closecard--white.glow::after{ display: none; }

@media (max-width: 620px){
  .fx-for-closebed .fx-for-closemap{ background-size: 260% auto; }
}

/* ══════════ 20260904p — client corrections 2026-09-04 · capitalq ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   2026-09-04 — CAPITALQ CLIENT ROUND (items F1–F9)
   Scoped to capitalq.html. Plain rules only so the lead can fold this block
   into css/style.css unchanged. House law: SQUARE corners (never a radius),
   ONE blue #E2B24C, Inter 600 display, glass + .glow, 60/30/10, nothing
   invisible on any ground. Shared primitives (.cqx-*) are REUSED, never
   redefined. New class names are prefixed fx-capitalq-.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── F1 · #top — the four hero boxes read as one height ───────────────────
   One bullet ran to three lines and dragged its row taller than the row
   above it. Equal implicit rows + full-height cells settle all four. */
.cqhero__boxes{ grid-auto-rows: 1fr; align-items: stretch; }
.cqhero__boxes .cqbox{ height: 100%; }


/* ── F2 · #old-way — a dull, desaturated skyline under the black ground ───
   The plain black plate gets a city/skyscraper landscape, greyed right down
   and veiled top and bottom so the section still reads black at the seams. */
.fx-capitalq-oldway__bg{
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.fx-capitalq-oldway__bg img{
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%;
  filter: grayscale(.9) saturate(.25) brightness(.62) contrast(.95);
}
.fx-capitalq-oldway__bg::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--bg) 0%, rgba(10,10,11,.7) 22%, rgba(10,10,11,.74) 76%, var(--bg) 100%);
}
.oldway > .container{ position: relative; z-index: 1; }
/* the hairline that splits the two rows was tuned for flat black */
.oldway__result--split{ border-top-color: rgba(215,226,234,.2); }


/* ── F3 · #search — the Better Way picture runs the copy column exactly ───
   21st.dev 18898 "Feature Bento" hero-tile treatment ported to vanilla: the
   photo is a cover layer inside a clipped frame, it eases to 1.05 on hover
   and carries a bottom-up scrim. Desktop: the frame is absolute inside the
   figure, so the figure contributes nothing to row sizing and the row height
   is the COPY column — image top on the first body line, bottom on the last. */
.better__frame{ position: relative; overflow: hidden; }
.better__frame img{ transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.better__fig:hover .better__frame img{ transform: scale(1.05); }
.better__frame::after{
  content: ''; position: absolute; inset: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, rgba(11,19,31,.4) 100%);
}
@media (min-width: 900px){
  .better__grid{ align-items: stretch; }
  .better__fig{ position: relative; min-height: 420px; }
  .better__frame{ position: absolute; inset: 0; }
  .better__frame img{
    width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
    object-position: 90% 50%;
  }
}


/* ── F4 · #one-place — centred over a shadowy black-and-white ground ──────
   Heading and body centred, the points below; a desaturated market-board
   picture behind, held down by a black overlay so every tick stays legible. */
.fx-capitalq-oneplace{ isolation: isolate; overflow: hidden; }
.fx-capitalq-oneplace__bg{
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.fx-capitalq-oneplace__bg img{
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  filter: grayscale(1) contrast(1.08) brightness(.62);
}
.fx-capitalq-oneplace__bg::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.74) 72%, rgba(0,0,0,.9) 100%);
}
.fx-capitalq-oneplace > .container{ position: relative; z-index: 1; }
.fx-capitalq-oneplace .sechead{ margin-inline: auto; text-align: center; max-width: 940px; }
.fx-capitalq-oneplace .sechead .sechead__sub,
.fx-capitalq-oneplace .sechead .lede{ margin-inline: auto; }
.fx-capitalq-oneplace__lead{ text-align: center; }
/* glass over a photograph needs its own floor, not the flat 4% wash */
.fx-capitalq-oneplace .rcard{
  background: rgba(10,12,16,.6); border-color: rgba(215,226,234,.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.fx-capitalq-oneplace .appglass{ background: rgba(10,12,16,.62); }


/* ── F5 · #minutes — the months/minutes band aligns LEFT ──────────────────
   REVERSES the 2026-09-03 right-aligned instruction; newest note wins. */
.band--min .container{ justify-content: flex-start; }
.band__state--min{ text-align: left; }


/* ── F6 · #features — THE PLATFORM, rebuilt as a bento ────────────────────
   Ported from 21st.dev 18898 "Feature Bento": an asymmetric grid where a
   photographic hero tile spans two columns, a single saturated tile carries
   the accent, and the rest are quiet cards — plus the icon chip, the
   justify-between head/foot split and the slow bg zoom on hover.
   House translation: square everything, ONE blue, Inter 600 titles. */
.fx-capitalq-bento{
  display: grid; gap: clamp(12px, 1.4vw, 18px);
  grid-template-columns: 1fr;
  margin-top: clamp(26px, 3.4vw, 44px);
}
@media (min-width: 720px){
  .fx-capitalq-bento{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* --w2m widens only here, so the two-column pass tiles with no orphan cell */
  .fx-capitalq-t--w2, .fx-capitalq-t--w3, .fx-capitalq-t--w2m{ grid-column: span 2; }
}
@media (min-width: 1040px){
  .fx-capitalq-bento{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .fx-capitalq-t--w2{ grid-column: span 2; }
  .fx-capitalq-t--w3{ grid-column: span 3; }
  .fx-capitalq-t--w2m{ grid-column: span 1; }
}
/* the client asked for this section to run wider than the other sliders */
.plat2 .fx-capitalq-bento{
  --ext: clamp(0px, calc((100vw - 1440px) / 2), 68px);
  width: calc(100% + 2 * var(--ext)); margin-left: calc(-1 * var(--ext));
}

.fx-capitalq-t{
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  min-height: 264px; padding: clamp(20px, 2.2vw, 30px);
  background: #FFFFFF; border: 1px solid #D7E0EC;
  box-shadow: 0 14px 34px -26px rgba(226,178,76,.5);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .3s ease;
}
.fx-capitalq-t:hover{
  transform: translateY(-5px);
  box-shadow: 0 28px 54px -28px rgba(226,178,76,.6);
}
/* pointer spotlight (18898's blurred corner blob, made to follow the cursor) */
.fx-capitalq-t::before{
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--fx-spot, 0); transition: opacity .35s ease;
  background: radial-gradient(220px circle at var(--fx-x, 50%) var(--fx-y, 50%),
    rgba(226,178,76,.16), transparent 70%);
}
/* only the two copy blocks are lifted — the bg/veil/pattern/edge layers keep
   the negative and positive z-indexes they were built with */
.fx-capitalq-t__head, .fx-capitalq-t__foot{ position: relative; z-index: 1; }

.fx-capitalq-t__head{ display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.fx-capitalq-t__ic{
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(226,178,76,.12); color: var(--blue);
}
.fx-capitalq-t__ic svg{ width: 52%; height: 52%; display: block; }
.fx-capitalq-t__ix{
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; color: #5A6472;
}
.fx-capitalq-t__t{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.12rem, 1.5vw, 1.38rem); line-height: 1.28;
  letter-spacing: -.015em; color: #0B0C0E;
}
.fx-capitalq-t__sub{ margin-top: 7px; font-weight: 600; font-size: .92rem; color: var(--blue); }
.fx-capitalq-t__d{ margin-top: 13px; font-size: .9rem; line-height: 1.68; color: #3A4149; }
.fx-capitalq-t__d + .fx-capitalq-t__d{ margin-top: 10px; }
.fx-capitalq-t__punch{
  margin-top: 15px; font-family: var(--font-display); font-weight: 600;
  font-size: .98rem; line-height: 1.5; color: var(--blue);
}
.fx-capitalq-t__ticks{ margin-top: 16px; }
@media (min-width: 720px){
  .fx-capitalq-t__ticks{ grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 24px; }
}
.fx-capitalq-t__ticks .tick{ font-size: .87rem; }

/* the one saturated tile — the 10% of 60/30/10 */
.fx-capitalq-t--blue{
  background: linear-gradient(142deg, #C99A36 0%, #E2B24C 58%, #F2CF7C 100%);
  border-color: transparent;
}
.fx-capitalq-t__pat{
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.13);
  -webkit-mask: url('../assets/img/pattern-swirl.webp') no-repeat 58% 34%;
          mask: url('../assets/img/pattern-swirl.webp') no-repeat 58% 34%;
  /* cover, not a fixed %, so the swirl never runs out mid-tile and leaves a seam */
  -webkit-mask-size: cover; mask-size: cover;
}
.fx-capitalq-t--blue .fx-capitalq-t__ic{ background: rgba(255,255,255,.18); color: #FFFFFF; }
.fx-capitalq-t--blue .fx-capitalq-t__ix{ color: rgba(255,255,255,.75); }
.fx-capitalq-t--blue .fx-capitalq-t__t{ color: #FFFFFF; }
.fx-capitalq-t--blue .fx-capitalq-t__sub{ color: rgba(255,255,255,.94); }
.fx-capitalq-t--blue .fx-capitalq-t__d{ color: rgba(255,255,255,.9); }
.fx-capitalq-t--blue::before{ display: none; }

/* photographic tiles */
.fx-capitalq-t--img{ border-color: transparent; min-height: 330px; }
.fx-capitalq-t__bg{
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.fx-capitalq-t--img:hover .fx-capitalq-t__bg{ transform: scale(1.06); }
.fx-capitalq-t__veil{
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8,10,14,.6) 0%, rgba(8,10,14,.86) 40%, rgba(8,10,14,.95) 100%);
}
.fx-capitalq-t--img .fx-capitalq-t__ic{ background: rgba(244,248,251,.14); color: #FFFFFF; }
.fx-capitalq-t--img .fx-capitalq-t__ix{ color: rgba(244,248,251,.74); }
.fx-capitalq-t--img .fx-capitalq-t__t{ color: #FFFFFF; }
.fx-capitalq-t--img .fx-capitalq-t__sub{ color: var(--blue-lt); }
.fx-capitalq-t--img .fx-capitalq-t__d{ color: rgba(244,248,251,.88); }
.fx-capitalq-t--img .fx-capitalq-t__punch{ color: var(--blue-lt); }
.fx-capitalq-t--img .tick{ color: rgba(244,248,251,.9); }
.fx-capitalq-t--img::before{
  background: radial-gradient(240px circle at var(--fx-x, 50%) var(--fx-y, 50%),
    rgba(242,207,124,.2), transparent 70%);
}


/* ── F7 · #journey — rebuilt as the For Businesses "Approach" carousel ────
   Same .scar / .scard--blue / .scard--light tiles, same swirl, plus the icon
   the client asked for sitting beside the step index. */
.fx-capitalq-jhead{ display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.fx-capitalq-jic{ flex: none; width: 40px; height: 40px; }
.fx-capitalq-jic svg{ width: 100%; height: 100%; display: block; }
.scard--blue .fx-capitalq-jic{ color: #FFFFFF; }
.scard--light .fx-capitalq-jic{ color: var(--blue); }
.fx-capitalq-jhead .scard__ix{ order: 2; }


/* ── F9 · #close — rebuilt like the Knowledge Centre "Never Miss an Update"
   band: one dark photographic ground, the whole close centred on top. */
.fx-capitalq-close .close-band__bg img{
  filter: saturate(.55) brightness(.46); object-position: 50% 44%;
}
.fx-capitalq-close .close-band__scrim{
  background: linear-gradient(180deg,
    var(--bg) 0%, rgba(10,10,11,.58) 20%, rgba(10,10,11,.66) 80%, var(--bg) 100%);
}
.fx-capitalq-close .sechead{ max-width: 900px; }
.fx-capitalq-close .cta-set{ justify-content: center; margin-top: clamp(24px, 3vw, 34px); }


/* ── narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 719px){
  .fx-capitalq-t{ min-height: 0; }
  .fx-capitalq-t--img{ min-height: 300px; }
  .fx-capitalq-oneplace .sechead{ text-align: left; }
  .fx-capitalq-oneplace__lead{ text-align: left; }
}

@media (prefers-reduced-motion: reduce){
  .better__frame img, .fx-capitalq-t__bg, .fx-capitalq-t{ transition: none !important; }
  .better__fig:hover .better__frame img,
  .fx-capitalq-t--img:hover .fx-capitalq-t__bg{ transform: none !important; }
}

/* ══════════ 20260904p — client corrections 2026-09-04 · investors ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   fix-investors.css — 2026-09-04 client correction list, items G1–G18.
   Loaded AFTER css/style.css on investors.html only. Plain rules, no @import,
   no new custom properties beyond the fx- namespace, so the lead can paste the
   whole file onto the end of css/style.css as one versioned block.
   Every new class is prefixed fx-investors-; every new JS hook is data-fx-.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── shared: kill the white display-line gradient wherever a line now has to
      carry its own colour (the gradient rules paint -webkit-text-fill-color
      transparent, which used to be undone by the [data-cqx-cut] line spans we
      have just removed). ── */
.fx-investors-ink{
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}


/* ══════════ G1–G4 · #top ══════════
   G1 inv-hero2.jpg (already in the markup, kept); G2/G18 no scroll-reveal text;
   G3 the copy block sits CENTRED in the hero, not anchored low; G4 the headline
   is forced to break as three lines. */
.fx-investors-hero.hero{ justify-content: center; }
.fx-investors-hero .hero__inner{ margin-block: auto; }
/* the forced breaks only apply where there is room for them */
.fx-investors-hero .inv-hero__h br{ display: none; }
@media (min-width: 700px){
  .fx-investors-hero .inv-hero__h br{ display: inline; }
  .fx-investors-hero .inv-hero__h{ max-width: none; }
}
/* the odometer is gone; the paragraph is plain type again */
.fx-investors-hero .inv-hero__p{ line-height: 1.65; }


/* ══════════ G5 · #familiar — the homepage Advantage carousel ══════════
   Same .sqz shell as index.html #intelligence so the two read as one system.
   Only the tag treatment differs: these labels are whole sentences. */
#familiar.inv-fam.fx-investors-fam{
  padding-top: clamp(72px, 9.5vw, 150px);
  padding-bottom: clamp(72px, 9vw, 132px);
}
#familiar.fx-investors-fam .sechead{ margin-bottom: clamp(28px, 3.4vw, 46px); }

.fx-investors-sqz .sqz__view{ height: clamp(230px, 32vw, 380px); }
.fx-investors-sqz .sqz__panel{ background: #0b0c0e; }
/* the open panel keeps a hairline so the square edge reads on black */
.fx-investors-sqz .sqz__panel::after{
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 1px solid rgba(244,248,251,.14);
}
.fx-investors-sqz .sqz__panel.is-open::after{
  border-color: rgba(226,178,76,.55);
  box-shadow: inset 0 0 0 1px rgba(226,178,76,.22);
}
/* whole sentences, so the house tag must wrap and stay inside the open panel */
.fx-investors-sqz .sqz__tag{
  left: clamp(14px, 1.4vw, 22px); right: clamp(14px, 1.4vw, 22px); bottom: clamp(14px, 1.4vw, 20px);
  white-space: normal; text-transform: none; letter-spacing: -.02em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.75vw, 1.7rem); line-height: 1.16;
  text-shadow: 0 2px 22px rgba(6,7,9,.8), 0 1px 3px rgba(6,7,9,.7);
}
.fx-investors-sqz .fx-investors-sqz__ix{
  position: absolute; left: clamp(14px, 1.4vw, 22px); top: clamp(12px, 1.2vw, 18px); z-index: 1;
  font-family: var(--font-mono); font-weight: 500; font-size: .7rem;
  letter-spacing: .2em; color: rgba(244,248,251,.62);
  opacity: 0; transition: opacity .5s ease;
}
.fx-investors-sqz .sqz__panel.is-open .fx-investors-sqz__ix{ opacity: 1; }
/* the closed panels are narrow — hide the sentence rather than clip it */
.fx-investors-sqz .sqz__panel:not(.is-open) .sqz__tag{ opacity: 0; }
.fx-investors-sqz .sqz__btn:disabled{ opacity: .3; cursor: default; }
@media (max-width: 600px){
  .fx-investors-sqz .sqz__view{ height: clamp(240px, 62vw, 320px); }
  .fx-investors-sqz .sqz__tag{ font-size: clamp(1.02rem, 4.6vw, 1.3rem); }
}


/* ══════════ G6 · the four More/Less lines as side-by-side icon rows ══════════ */
.fx-investors-rows{
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
@media (min-width: 560px){ .fx-investors-rows{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px){ .fx-investors-rows{ grid-template-columns: repeat(4, 1fr); } }
.fx-investors-row{
  display: flex; align-items: center; gap: clamp(12px, 1.1vw, 16px);
  padding: clamp(18px, 2.1vw, 26px) clamp(15px, 1.5vw, 22px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(244,248,251,.03);
}
.fx-investors-row__ic{
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(226,178,76,.14); border: 1px solid rgba(226,178,76,.5);
  color: var(--blue-lt);
}
.fx-investors-row__ic svg{ width: 20px; height: 20px; display: block; }
.fx-investors-row__t{
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.98rem, 1.15vw, 1.16rem); line-height: 1.24; letter-spacing: -.016em;
  color: var(--txt-hi);
}
/* the 10%: the line that actually costs the investor money */
.fx-investors-row--accent{ background: rgba(226,178,76,.10); }
.fx-investors-row--accent .fx-investors-row__ic{
  background: var(--blue); border-color: var(--blue); color: #fff;
}


/* ══════════ G7 · #there-is — one centred main copy line ══════════ */
.fx-investors-therehead{ margin-bottom: clamp(18px, 2.4vw, 34px); max-width: 1100px; }
.fx-investors-oneline{
  font-size: clamp(1.55rem, 3.5vw, 3rem); line-height: 1.12;
}
@media (min-width: 1100px){ .fx-investors-oneline{ white-space: nowrap; } }
.fx-investors-oneline .tblue{ color: var(--txt-blue); }
/* the two doc lines "There Is" + "A better way…" now read as one sentence; the
   words are untouched, only the case of the joining article is set in CSS */
.fx-investors-lc{ text-transform: lowercase; }


/* ══════════ G8 · the story is three steps, not four ══════════ */
.fx-investors-story .inv-story__frame::after{ width: calc((var(--i, 0) + 1) * 33.34%); }


/* ══════════ G9 · the punch line beneath the story ══════════ */
.fx-investors-punchwrap{
  margin-top: clamp(48px, 6vw, 86px);
  display: grid; gap: clamp(20px, 2.6vw, 38px); justify-items: center;
  text-align: center;
}
@media (min-width: 860px){
  .fx-investors-punchwrap{ grid-template-columns: 1fr 1fr; align-items: start; }
}
.fx-investors-punch{
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3.5vw, 2.9rem); line-height: 1.08; letter-spacing: -.03em;
  color: var(--txt-hi);
  padding-bottom: .12em; margin-bottom: -.12em;
}
.fx-investors-punch--blue{
  color: var(--txt-blue);
}


/* ══════════ G10 · the closing statement, centred on a photograph ══════════
   Built on the shared .close-band used by the Contact page "The Next Step". */
.fx-investors-band{
  position: relative; overflow: hidden;
  margin-top: clamp(52px, 6.5vw, 96px);
  padding-block: clamp(84px, 11vw, 168px);
  border-block: 1px solid var(--line);
}
.fx-investors-band .close-band__bg img{
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%;
  display: block; filter: saturate(.88) brightness(.72);
}
.fx-investors-band .close-band__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,9,12,.8) 0%, rgba(8,9,12,.42) 42%, rgba(8,9,12,.82) 100%),
    radial-gradient(80% 70% at 50% 50%, rgba(8,9,12,.1) 0%, rgba(8,9,12,.74) 100%);
}
.fx-investors-band__copy{ margin-bottom: 0; max-width: 1000px; }
.fx-investors-band__l{
  margin: 0; text-align: center;
  font-size: clamp(1.5rem, 3.4vw, 2.85rem); line-height: 1.12; letter-spacing: -.03em;
  text-shadow: 0 2px 30px rgba(6,7,9,.75);
}
.fx-investors-band__l--blue{
  color: var(--txt-blue); margin-top: .18em;
  text-shadow: 0 0 15px rgba(226,178,76,.5), 0 1px 3px rgba(6,7,9,.9);
}


/* ══════════ G12 / G13 · the CapitalQ bento re-laid ══════════
   TWO on top; photograph LEFT with "See the complete picture…" RIGHT; THREE
   underneath, the first of them carrying the blue treatment (G13). */
@media (min-width: 1024px){
  .fx-investors-bento{ grid-template-columns: repeat(6, 1fr); align-items: stretch; }
  .fx-investors-bento > *:nth-child(1),
  .fx-investors-bento > *:nth-child(2),
  .fx-investors-bento > *:nth-child(3),
  .fx-investors-bento > *:nth-child(4){ grid-column: span 3; }
  .fx-investors-bento > *:nth-child(5),
  .fx-investors-bento > *:nth-child(6),
  .fx-investors-bento > *:nth-child(7){ grid-column: span 2; }
}
/* the faces have to be visible, so the photo cell is given real height */
.fx-investors-bento .inv-bento__photo{ min-height: clamp(230px, 24vw, 330px); }
.fx-investors-bento .inv-bento__photo img{ filter: grayscale(0) saturate(.98) brightness(.94); }
/* DOM order is the reading order on small screens */
@media (max-width: 767px){
  .fx-investors-bento .inv-bento__tile,
  .fx-investors-bento .inv-bento__photo{ order: 0; }
  .fx-investors-bento .inv-bento__photo{ min-height: 210px; }
}


/* ══════════ G14 · #smarter — the page's ONE white section ══════════ */
.fx-investors-white{
  position: relative; overflow: hidden;
  padding-block: clamp(88px, 11.5vw, 176px);
  border-block: 1px solid #DCE3EC;
  background: #FFFFFF;
}
.fx-investors-white__bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fx-investors-white__bg img{
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 42%;
  display: block; filter: saturate(.62) brightness(1.06);
}
.fx-investors-white__wash{
  position: absolute; inset: 0; display: block;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.62) 42%, rgba(255,255,255,.93) 100%),
    radial-gradient(66% 58% at 50% 50%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.6) 100%);
}
.fx-investors-white .container{ position: relative; z-index: 1; }
.fx-investors-white__copy{ text-align: center; max-width: 1000px; margin-inline: auto; }
.fx-investors-white .fx-investors-white__l{
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -.032em;
  color: #0B0C0E;
  background: none; -webkit-text-fill-color: currentColor;
  text-shadow: 0 1px 22px rgba(255,255,255,.9);
}
.fx-investors-white .fx-investors-white__l--blue{ color: #E2B24C; margin-top: .1em; }


/* ══════════ G15 · #investor-network — the Inner Circle goes white ══════════
   The constellation field stays: it is drawn in the ONE blue, which reads on
   white as well as it did on black. */
.inv-circle.fx-investors-circle{ background: #FFFFFF; }
.fx-investors-circle .inv-circle__net{ opacity: .5; }
.fx-investors-circle .h-major{ color: #0B0C0E; background: none; -webkit-text-fill-color: currentColor; }
.fx-investors-circle .sechead__sub{ color: var(--blue); }
/* the ™ shine bakes white into its gradient — unreadable on a white ground */
.fx-investors-circle [data-cqx-shine]{
  background-image: none; -webkit-text-fill-color: currentColor; color: var(--blue);
}
.fx-investors-circle .h-sub{ color: #0B0C0E; background: none; -webkit-text-fill-color: currentColor; }
.fx-investors-circle .h-sub.tblue{ color: var(--txt-blue); }
.fx-investors-circle .lede{ color: #3A4149; }
.fx-investors-circle .h-mid{ color: #0B0C0E; background: none; -webkit-text-fill-color: currentColor; }
.fx-investors-circle .h-mid .tblue{ color: var(--txt-blue); -webkit-text-fill-color: currentColor; }
/* the comet-border card on a white ground */
.fx-investors-circle .cqx-ring__in{
  background: #F3F6FA;
  border-color: #CFD8E4;
  box-shadow: inset 0 0 0 1px #E3E9F1;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.fx-investors-circle .cqx-ring__in .cqx-grain{ opacity: .03; mix-blend-mode: multiply; }
.fx-investors-circle .inv-check{ color: #3A4149; }
.fx-investors-circle .inv-check__box{
  background: rgba(226,178,76,.12); border-color: rgba(226,178,76,.55); color: var(--blue);
}
.fx-investors-circle .btn--solid{ color: #fff; }


/* ══════════ G16 · #start — a photograph behind the star grid ══════════ */
.fx-investors-start{ position: relative; isolation: isolate; overflow: hidden; }
.fx-investors-start__bg{ position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fx-investors-start__bg img{
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%;
  display: block; filter: saturate(.82) brightness(.9);
}
.fx-investors-start__scrim{
  position: absolute; inset: 0; display: block;
  background:
    linear-gradient(90deg, rgba(8,9,12,.95) 0%, rgba(8,9,12,.88) 34%, rgba(8,9,12,.6) 62%, rgba(8,9,12,.42) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(8,9,12,.5) 20%, rgba(8,9,12,.5) 76%, var(--bg) 100%);
}
/* the star grid is texture over the photograph, not a competing ground */
.fx-investors-start.cqx-stars::before{ opacity: .4; }
.fx-investors-start .inv-start__panel{ background: rgba(10,11,14,.62); }


/* ══════════ G17 · #who-we-serve — a click-through slider ══════════
   Technique from 21st.dev "Thumbnail Slider" (19087), ported to vanilla: an
   index-driven track translate, a synchronised thumbnail rail, arrows that
   disable at the ends. No pin, no scroll hijack. */
.inv-serve.fx-investors-serve{
  position: relative; overflow: hidden;
  padding-top: clamp(72px, 9.5vw, 150px);
}
.fx-investors-serve .inv-serve__world{ top: 40%; opacity: .8; }
.fx-investors-serve__head{ position: relative; z-index: 1; max-width: 860px; }

.fx-investors-slider{ position: relative; z-index: 1; margin-top: clamp(24px, 3vw, 40px); }
.fx-investors-slider__stage{
  position: relative; overflow: hidden;
  height: clamp(300px, 42vw, 560px);
  background: #0b0c0e; border: 1px solid rgba(244,248,251,.16);
}
.fx-investors-slider__track{
  display: flex; height: 100%; width: 100%;
  transform: translate3d(calc(var(--fx-i, 0) * -100%), 0, 0);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.fx-investors-slide{
  position: relative; flex: 0 0 100%; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.fx-investors-slide__media{ position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; }
.fx-investors-slide__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.95) contrast(1.04) brightness(.9);
}
.fx-investors-slide__scrim{
  position: absolute; inset: 0; z-index: 1; display: block; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,9,11,.30) 0%, rgba(8,9,11,.12) 36%, rgba(8,9,11,.72) 78%, rgba(8,9,11,.94) 100%);
}
.fx-investors-slide__plate{
  position: relative; z-index: 2; margin: 0;
  padding: clamp(18px, 2.4vw, 34px) clamp(18px, 2.6vw, 40px);
  border: 0; border-top: 1px solid rgba(244,248,251,.2);
  background: rgba(244,248,251,.06);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.fx-investors-slide__plate::after{
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--blue); box-shadow: 0 0 18px rgba(226,178,76,.85);
}
.fx-investors-slide__ix{
  margin: 0 0 6px; font-family: var(--font-mono); font-weight: 500; font-size: .72rem;
  letter-spacing: .22em; color: rgba(244,248,251,.6);
}
.fx-investors-slide__t{
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 2.2rem); line-height: 1.12; letter-spacing: -.026em;
  color: #FFFFFF;
}
.fx-investors-slider__nav{
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 0; cursor: pointer; color: #fff;
  background: rgba(10,11,14,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(244,248,251,.22);
  transition: background .25s ease, opacity .25s ease;
}
.fx-investors-slider__nav:hover{ background: var(--blue); }
.fx-investors-slider__nav svg{ width: 17px; height: 17px; display: block; }
.fx-investors-slider__nav--prev{ left: clamp(12px, 1.4vw, 20px); }
.fx-investors-slider__nav--next{ right: clamp(12px, 1.4vw, 20px); }
.fx-investors-slider__nav:disabled{ opacity: .25; cursor: default; }
.fx-investors-slider__nav:disabled:hover{ background: rgba(10,11,14,.6); }

.fx-investors-slider__foot{
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(12px, 1.4vw, 18px);
}
.fx-investors-slider__count{
  flex: none; margin: 0;
  font-family: var(--font-mono); font-weight: 500; font-size: .78rem;
  letter-spacing: .18em; color: var(--txt-dim);
}
.fx-investors-slider__count b{ font-weight: 600; color: var(--txt-hi); }
.fx-investors-slider__thumbs{
  display: flex; gap: 8px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fx-investors-slider__thumbs::-webkit-scrollbar{ display: none; }
.fx-investors-thumb{
  position: relative; flex: 0 0 auto;
  width: clamp(64px, 8vw, 108px); height: clamp(44px, 5.4vw, 70px);
  padding: 0; border: 0; cursor: pointer; overflow: hidden;
  background: #0b0c0e;
  box-shadow: inset 0 0 0 1px rgba(244,248,251,.16);
  transition: box-shadow .3s ease;
}
.fx-investors-thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) brightness(.5);
  transition: filter .4s ease;
}
.fx-investors-thumb__ix{
  position: absolute; left: 6px; bottom: 4px;
  font-family: var(--font-mono); font-weight: 500; font-size: .62rem;
  letter-spacing: .14em; color: rgba(244,248,251,.72);
}
.fx-investors-thumb:hover img{ filter: grayscale(.4) brightness(.72); }
.fx-investors-thumb.is-on img{ filter: none; }
.fx-investors-thumb.is-on{
  box-shadow: inset 0 0 0 2px var(--blue), 0 0 18px rgba(226,178,76,.5);
}
@media (max-width: 600px){
  .fx-investors-slider__foot{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .fx-investors-slider__thumbs{ width: 100%; }
  .fx-investors-slide__plate{ padding: 16px; }
}
@media (prefers-reduced-motion: reduce){
  .fx-investors-slider__track{ transition: none; }
}

/* the tail keeps its own rhythm now the lane is gone */
.fx-investors-serve .inv-serve__tail{ margin-top: clamp(56px, 7vw, 100px); position: relative; z-index: 1; }

/* ══════════ 20260904p — client corrections 2026-09-04 · contact-kc ══════════ */
/* ══════════════════════════════════════════════════════════════
   2026-09-04 client change list — C1, E1, E2
   C1  contact.html  #touch      "Get in Touch" gets a real background
   E1  knowledge-centre #explore Library carousel takes the Advantage (A5)
                                 active / inactive treatment
   E2  knowledge-centre #resources  Start Here chips on ONE line, on a
                                 background image that keeps the white feel

   Written as a standalone sheet so parallel agents cannot clobber each
   other; the lead merges these plain rules into css/style.css afterwards.
   Nothing here introduces a second blue, a rounded corner, or a library.
   ══════════════════════════════════════════════════════════════ */


/* ══════════ SHARED — the light photographic ground ══════════
   A washed client photo, a white veil that keeps the section reading
   white, one soft FDN-blue bloom and a hairline grid. Sits at z-index 0;
   .sec > .container already carries position:relative; z-index:1. */

.fx-contact-ground{ position:relative; overflow:hidden; }

.fx-contact-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
}
.fx-contact-bg__img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  filter: grayscale(.55) saturate(.55) brightness(1.12) contrast(.92);
  opacity:.30;
}
/* the veil is what keeps the "white feel" the client asked for: a near
   opaque white wash that thins in the middle so the photo only breathes */
.fx-contact-bg__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      #FFFFFF 0%,
      rgba(255,255,255,.90) 18%,
      rgba(255,255,255,.84) 50%,
      rgba(255,255,255,.93) 82%,
      #FFFFFF 100%);
}
/* one FDN blue bloom behind the header — the 10% of the 60/30/10 */
.fx-contact-bg__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(78% 46% at 50% 6%,  rgba(226,178,76,.13), rgba(226,178,76,0) 70%),
    radial-gradient(52% 40% at 88% 92%, rgba(226,178,76,.08), rgba(226,178,76,0) 72%);
}
/* editorial hairline grid — square, never a card grid */
.fx-contact-bg__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right,  rgba(11,12,14,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,12,14,.055) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(120% 82% at 50% 34%, #000 12%, rgba(0,0,0,.25) 62%, transparent 100%);
          mask-image: radial-gradient(120% 82% at 50% 34%, #000 12%, rgba(0,0,0,.25) 62%, transparent 100%);
}

@media (max-width: 700px){
  .fx-contact-bg__grid{ background-size: 64px 64px; }
}


/* ══════════ C1 — CONTACT · #touch "Get in Touch" ══════════
   Was flat #FFFFFF with nothing on it. Now: boardroom photo washed almost
   to paper, the blue bloom behind the heading, the hairline grid, and a
   blue rule under the heading so the header block has an anchor. */

#touch.fx-contact-ground{ background:#FFFFFF; }

/* the photo is strongest at the top and gone by the time the form starts */
#touch .fx-contact-bg__img{
  object-position:50% 26%; opacity:.66;
  filter: grayscale(.5) saturate(.62) brightness(1.2) contrast(.88);
}
#touch .fx-contact-bg__veil{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.74) 16%,
      rgba(255,255,255,.88) 42%,
      rgba(255,255,255,.98) 60%,
      #FFFFFF 74%,
      #FFFFFF 100%);
}
#touch .fx-contact-bg__glow{
  background:
    radial-gradient(74% 40% at 50% 2%,  rgba(226,178,76,.16), rgba(226,178,76,0) 72%),
    radial-gradient(46% 34% at 8% 78%,  rgba(226,178,76,.07), rgba(226,178,76,0) 74%);
}
#touch .fx-contact-bg__grid{
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 42%, transparent 74%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 42%, transparent 74%);
}

/* header block sits on the photo — keep the ink dark and add the rule */
#touch .touch__head{ position:relative; padding-bottom: clamp(22px, 2.6vw, 34px); }
#touch .touch__head .h-major{ color:#0B0C0E; }
#touch .touch__head .lede{ color:#3A4149; }
#touch .touch__head::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width: 88px; height: 2px; background: var(--blue);
}

/* the two cards now float ON something, so they need a real surface */
#touch .fqcard{
  background: rgba(255,255,255,.80);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
  border-color:#D7E0EC;
  box-shadow: 0 22px 60px -34px rgba(11,20,44,.45);
}


/* ══════════ E1 — KNOWLEDGE CENTRE · #explore Library carousel ══════════
   Same treatment the client asked for on the homepage Advantage carousel
   (A5): inactive panels go black-and-white AND take a black overlay so
   they read duller; the active panel takes a colour gradient so it reads
   brighter. Scoped to #library-slides so it cannot collide with the
   homepage rules being written in parallel. */

#library-slides .sqz__img{
  transition: filter .6s ease, opacity .6s ease;
}

/* ── inactive: black and white, then knocked back by a black overlay ── */
#library-slides .sqz__panel:not(.is-open) .sqz__img{
  filter: grayscale(1) saturate(0) contrast(1.06) brightness(.72);
}
#library-slides .sqz__panel:not(.is-open) .sqz__shade{
  background:
    linear-gradient(180deg, rgba(4,5,7,.52) 0%, rgba(4,5,7,.62) 55%, rgba(4,5,7,.78) 100%);
}
/* a second, flat black plate so "duller" is unmistakable next to the
   colour of the open panel */
#library-slides .sqz__panel::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:#050608; opacity:.34;
  transition: opacity .6s ease;
}

/* ── active: full colour under a blue-to-ink gradient, and brighter ── */
#library-slides .sqz__panel.is-open .sqz__img{
  filter: grayscale(0) saturate(1.22) contrast(1.05) brightness(1.1);
}
#library-slides .sqz__panel.is-open::after{ opacity:0; }
#library-slides .sqz__panel.is-open .sqz__shade{
  background:
    /* the colour gradient the client asked for — FDN blue washing up from
       the label corner, nothing else tinted */
    linear-gradient(4deg,   rgba(226,178,76,.46) 0%, rgba(226,178,76,.14) 22%, rgba(226,178,76,0) 50%),
    linear-gradient(150deg, rgba(226,178,76,.26) 0%, rgba(226,178,76,.04) 26%, rgba(226,178,76,0) 48%),
    linear-gradient(180deg, rgba(10,10,11,0) 46%, rgba(6,7,10,.46) 100%);
}
/* the blue rail marks which one is live */
#library-slides .sqz__panel.is-open{
  box-shadow: inset 0 -3px 0 0 var(--blue), 0 0 44px -14px rgba(226,178,76,.55);
}
#library-slides .sqz__tag{ z-index:2; }

/* hovering a closed panel lifts the black plate a little so the carousel
   still answers the pointer */
@media (hover:hover) and (pointer:fine){
  #library-slides .sqz__panel:not(.is-open):hover::after{ opacity:.16; }
  #library-slides .sqz__panel:not(.is-open):hover .sqz__img{
    filter: grayscale(.55) saturate(.5) contrast(1.04) brightness(.9);
  }
}
@media (prefers-reduced-motion: reduce){
  #library-slides .sqz__img,
  #library-slides .sqz__panel::after{ transition:none; }
}


/* ══════════ E2 — KNOWLEDGE CENTRE · #resources "Start Here" ══════════
   Six chips wrapped 4 + 2. They now run on ONE line, and the section takes
   the washed photographic ground above so it is no longer flat white. */

#resources.fx-contact-ground{ background:#FFFFFF; }
#resources .fx-contact-bg__img{
  object-position:50% 46%; opacity:.62;
  filter: grayscale(.42) saturate(.7) brightness(1.16) contrast(.9);
}
#resources .fx-contact-bg__veil{
  background:
    linear-gradient(180deg,
      #FFFFFF 0%,
      rgba(255,255,255,.84) 20%,
      rgba(255,255,255,.74) 50%,
      rgba(255,255,255,.86) 82%,
      #FFFFFF 100%);
}
#resources .fx-contact-bg__grid{
  background-size: 118px 118px;
  background-image:
    linear-gradient(to right,  rgba(11,12,14,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,12,14,.07) 1px, transparent 1px);
}

/* ── one line ──
   The row is allowed to use the full section width (the container's own
   1440px cap is what forced the wrap), the chips stop growing and the type
   and padding tighten just enough that six fit. */
@media (min-width: 1160px){
  #resources .reschips{
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: clamp(6px, .62vw, 10px);
    /* the container's 1440px cap is what forced the wrap — the row steps
       outside it, still centred, and never past the viewport edge */
    position:relative; left:50%; transform:translateX(-50%);
    width: min(1420px, calc(100vw - 80px));
  }
  #resources .reschip{
    flex: 0 1 auto; min-width:0;
    gap: clamp(6px, .6vw, 10px);
    padding: 13px clamp(9px, 1.05vw, 16px);
    font-size: var(--fx-chip-fs, clamp(.74rem, .86vw, .9rem));
    white-space: nowrap;
    justify-content: center;
  }
  #resources .reschip > span:last-child{
    min-width:0; overflow:hidden; text-overflow:ellipsis;
  }
  #resources .reschip__ic{
    width: clamp(14px, 1.06vw, 17px);
    height: clamp(14px, 1.06vw, 17px);
    flex:none;
  }
}
/* below the one-line breakpoint it wraps again rather than overflow */
@media (max-width: 1159px){
  #resources .reschips{ flex-wrap:wrap; justify-content:center; }
}
/* last-resort safety: if the six chips still cannot fit at the smallest
   readable size, the JS sets this and the row wraps rather than truncate
   a single word of the client's copy */
#resources .reschips.is-fx-wrapped{
  flex-wrap: wrap; width: 100%; left: auto; transform: none;
}

/* the chips read as glass on the new ground */
#resources .reschip{
  background: rgba(255,255,255,.74);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
          backdrop-filter: blur(10px) saturate(1.08);
  border-color:#D5DFEC;
  box-shadow: 0 14px 34px -26px rgba(11,20,44,.5);
}
#resources .reschip:hover{
  background: rgba(226,178,76,.08);
  border-color: var(--blue);
}

/* ══════════ 20260908a — client corrections round 2 · global ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   fix-global.css — 2026-09-05 client round, GLOBAL items GL1 + GL2
   Loaded on ALL SEVEN pages, immediately after style.css and BEFORE any
   per-page fix file, so a page agent can still override anything here.
   Prefix: .fx-g-*   ·   JS hooks: js/fix-global.js
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   GL1 · THE BLUE HOVER GLOW MUST LEAVE THE CARD AND DISSOLVE
   Client: "this blue glow that basically comes out of it … it is like a
   cropped section … we should see the glow and see where it dissolves."

   THREE separate things were cutting the halo. All three had to go, and only
   the third one explains why the halo still looked "cropped" after the
   previous pass — it is the one that produces the dead-straight vertical line
   the client kept seeing:

   1 · THE CARD CLIPS ITS OWN HALO.  .glow::after (style.css:133) is
       position:absolute; inset:0; z-index:-1 carrying an OUTWARD box-shadow.
       Nearly every card sets overflow:hidden so it can hold a background
       photo, and a box-shadow painted by a child of a clipping box is clipped
       away completely — so on those cards the halo was not merely cut, it was
       never visible at all.  ->  .fx-g-halo re-draws it as filter:
       drop-shadow(), which is applied AFTER the element is painted and
       clipped and therefore escapes the box.

   2 · A CLIPPING ANCESTOR IS CLOSER THAN THE HALO REACHES.  ->  .fx-g-fit
       shrinks the reach to the room actually measured, so the bloom fades out
       inside that room instead of ending on a hard edge.

   3 · THE NEXT CARD IN THE ROW PAINTS ON TOP OF IT.  Measured with a pixel
       profile (hover-on minus hover-off, walked outward from each edge): the
       halo decayed smoothly for 20-26px and then dropped to ZERO in a single
       2px step — exactly where the neighbouring card starts. Siblings later
       in the DOM paint over the hovered card's bloom, so on EVERY grid and
       carousel the glow was sliced by a straight line on the side that has a
       neighbour: .scard R@20px, .fcard R@22px, .ptile R@16px B@16px,
       .help2__card R@26px, .cqcard R@24px, .kcard2 L@22px B@24px,
       .inv-bento__tile B@16px, .pside__tab L@16px.
       ->  .fx-g-rise lifts the hovered card above its neighbours, so the
       bloom carries over them and dissolves. It also finishes the -8px hover
       lift these cards already do, which read wrong while the card next door
       was painting over the lifted one.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --fx-g-r1: 18px;                       /* inner, bright core of the halo   */
  --fx-g-r2: 44px;                       /* outer bloom — where it dissolves */
  --fx-g-c1: rgba(226,178,76,.50);
  --fx-g-c2: rgba(226,178,76,.28);
}

/* 1 · the halo escapes a clipping card ------------------------------------ */
.fx-g-halo{
  transition: filter .38s ease;
}
.fx-g-halo:hover,
.fx-g-halo:focus-within{
  filter:
    drop-shadow(0 0 var(--fx-g-r1) var(--fx-g-c1))
    drop-shadow(0 0 var(--fx-g-r2) var(--fx-g-c2));
}

/* 2 · the halo is sized to the room its clipping ancestor actually leaves.
   The 1.35 / 1.60 factors keep a box-shadow's visible falloff the same size
   as the drop-shadow above it, so a card reads identically whichever path it
   is on: --fx-g-r2 = 44px lands the bloom at ~37px, the site's own reach.
   The class is repeated on purpose: style.css carries per-card overrides at
   (0,3,1) — `.fx-for-pop .fcard.glow::after` reaches 64px, which is MORE than
   the room its carousel leaves, so at (0,2,1) this rule lost and the For
   Businesses cards still ended on a hard straight line. Doubling the class
   ties that specificity, and fix-global.css loads after style.css, so it
   wins — while a page agent's own file, which loads after this one, can
   still override it. -------------------------------------------------------- */
.fx-g-fit.fx-g-fit.glow::after{
  box-shadow:
    0 0 calc(var(--fx-g-r1) * 1.35) 2px var(--fx-g-c1),
    0 0 calc(var(--fx-g-r2) * 1.60) 2px var(--fx-g-c2);
}

/* 3 · the hovered card rises above its neighbours so the bloom carries over
   them instead of being sliced where the next card starts. Deliberately a LOW
   number: anything the design already stacks on purpose (z-index >= 5, the
   fixed header at 40) still wins, and js/fix-global.js refuses to tag any
   element that already has a z-index of its own or that a later sibling
   deliberately covers. ------------------------------------------------------ */
.fx-g-rise:hover,
.fx-g-rise:focus-within{ z-index: 4; }

@media (prefers-reduced-motion: reduce){
  .fx-g-halo{ transition: none; }
}


/* ── the horizontal card carousels need room for the bloom ─────────────────
   .scar__track carries overflow-x:auto and a scroll container clips on BOTH
   axes, so the halo was being sliced top and bottom, and the first and last
   card were sliced against the scrollport ends. Pass 39 gave it 42/58px; the
   halo reaches ~64px, which is exactly why the client still saw a hard line.
   Measured, not guessed: at 64px the cards lift -8px on hover, leaving 56px,
   and the halo's Gaussian still had ~5% alpha there — a faint but real
   straight line above every card. 96px puts the clip beyond 4 sigma.
   Two safety valves for the negative margins:
     · .scar__head is raised above the track so the prev/next buttons stay
       clickable where the track's padding now overlaps them;
     · the track's padding area is made pointer-transparent so it cannot
       swallow hovers/clicks in the section below it. The cards themselves
       take pointer events back, so wheel + touch scrolling still work. */
.scar{ --fx-g-pad: 96px; --fx-g-side: clamp(28px, 4.4vw, 64px); }
.scar .scar__track{
  /* vertical: room for the bloom above and below */
  padding-top: var(--fx-g-pad);  padding-bottom: var(--fx-g-pad);
  margin-top: calc(-1 * var(--fx-g-pad));  margin-bottom: calc(-1 * var(--fx-g-pad));
  /* horizontal: the first and last card sat flush against the scrollport, so
     their halo was sliced by a straight vertical line. Equal padding and
     negative margin leave the CONTENT box exactly as wide as it was — card
     flex-basis is calc(100% - …) against that content box, so nothing
     resizes — while the scrollport itself grows into the page gutter.
     scroll-padding keeps scroll-snap landing on the same positions. */
  padding-left: var(--fx-g-side);  padding-right: var(--fx-g-side);
  margin-left: calc(-1 * var(--fx-g-side));  margin-right: calc(-1 * var(--fx-g-side));
  scroll-padding-left: var(--fx-g-side);  scroll-padding-right: var(--fx-g-side);
  /* the padding must not swallow hovers/clicks in the rows it now overlaps */
  pointer-events: none;
}
.scar .scar__track > *{ pointer-events: auto; }
.scar__head{ position: relative; z-index: 2; }

@media (max-width: 620px){
  .scar{ --fx-g-pad: 56px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   GL2 · SUBJECTS CUT OUT OF THEIR IMAGE FRAMES
   Client: "the subject is at the right-hand side … make the subject be the
   center of this image … some people are cut out, which doesn't make sense."

   Every photo in a fixed-ratio box is object-fit:cover, so object-position
   decides who survives the crop. Every <img> in a cropping frame on all seven
   pages was screenshotted and looked at. Most were already right and are left
   alone — the three below were not, and each value here is derived from the
   subject's measured position in the SOURCE file, then verified on a capture.
   Rule when a frame is simply too narrow to hold everybody: nobody gets
   sliced down the middle, even if that costs a background extra.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── index · #africa-arabia — cl-team-sunset.jpg ───────────────────────────
   THE ONE THE CLIENT NAMED. 2000x1116 source in a 706x897 portrait window, so
   cover keeps 43.9% of the width = 880 source px, and the five figures stand
   shoulder to shoulder from x1020 to x1900 = 880px. The group therefore fits
   the window EXACTLY, at exactly one position: left = 1020 of the 1120px of
   travel = 91%. That both centres the group (its midpoint, x1460, lands on
   the frame's midpoint) and is the only value where nobody is cut.
   Verified at 88 / 91 / 95%: at 82% (the old value) the woman on the right
   lost her outer half; at 95% the man on the left loses his face to the
   wedge. 91% is the one that holds everybody. */
#africa-arabia .aar__fig img{ object-position: 91% 50%; }

/* the wedge that clips this frame, style.css:2677, is
   polygon(25% 0, 100% 0, 100% 100%, 0 100%) — a diagonal that eats a quarter
   of the frame at the top. With the group now filling the window, a 25% bite
   takes the first man's head while leaving his legs, which is the headless
   figure the client was looking at. 10% keeps the wedge as a gesture (the
   photo still cuts into the copy on a slant) and passes clear of him.
   Scoped to the same 981px breakpoint the wedge itself uses — below that
   style.css draws no wedge and this must not invent one. */
@media (min-width: 981px){
  #africa-arabia .aar__fig img{ clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%); }
}

/* below 981px the frame turns landscape (390x300 at phone width), so cover
   keeps 72% of the source — nearly twice the group's width. Nobody is cut at
   any value there; 100% is simply the furthest the window can travel toward
   the group, which puts them closest to the middle and leaves the woman on
   the right a real margin instead of the 25px she had at 91%. */
@media (max-width: 980px){
  #africa-arabia .aar__fig img{ object-position: 100% 50%; }
}

/* ── index · #familiar — the persona photos ────────────────────────────────
   457x522 window over 2000x1116 keeps 49% of the width (980 source px).
   -inv: the man and the woman are 1450px apart and cannot both fit, so the
         frame holds the man whole. 15% used to leave her forearm and hands
         floating at the right edge with no body attached — an amputated arm
         is exactly what the client means by "cut out" — so the window is
         pulled back to 5% (window = source 51-1031). Captured at 2 / 5 / 8%:
         at 8% her fingertips are back in shot, at 2% he is pushed into the
         right third; 5% is the one where the frame reads clean AND he is
         centred (he spans 250-900, midpoint 575, window midpoint 541).
   -biz / -man: measured and already correct — the pair (510-1350, midpoint
         930 -> 43%) and the trio (690-1600, midpoint 1145 -> 64%) both fit
         inside the 980px window and are centred in it. Left as they are. */
#familiar .ppane2__fig img[src*="persona2-inv"]{ object-position: 5% 50%; }
#familiar .ppane2__fig img[src*="persona2-biz"]{ object-position: 44% 50%; }
#familiar .ppane2__fig img[src*="persona2-man"]{ object-position: 64% 50%; }

/* ── investors · #there-is — the pinned story photos ───────────────────────
   719x978 portrait strip keeps ~41% of the width. All three were captured one
   slide at a time and all three hold their subjects whole:
     biz-shift-1 at 26% — the man at the table, centred;
     biz-shift-3 at 69% — the walking pair, both whole;
     inv-network at 96% — the pair span 945-1900 in a 941px window, so 96% is
       the furthest right the window can go before it starts eating the woman;
       tested 47% and 60% instead and both bisect the man and drag the blurred
       foreground head into frame. 96% is the optimum this source allows.
   Restated here rather than deleted so the values survive a merge. */
#there-is .inv-story__strip img[src*="biz-shift-1"]{ object-position: 26% 50%; }
#there-is .inv-story__strip img[src*="biz-shift-3"]{ object-position: 69% 50%; }
#there-is .inv-story__strip img[src*="inv-network"]{ object-position: 96% 50%; }

/* ── knowledge centre · #featured — cl-desk-balcony.jpg ────────────────────
   THE ONE THE CLIENT NAMED: "zoom in and centre her." The img lays out at
   485x279 against a 2000x1116 source, so object-position has 15px of travel
   and cannot move her — the frame has to scale instead.
   Solved rather than nudged. In the img's own box coordinates the source maps
   at 0.25, so she occupies x310-422 (midpoint 366) and the top of her head
   sits at y7.5. At scale 2.05 the visible window is 236.6 x 136 box-px:
     translate X = 242.5 - 366.3 = -123.8px = -25.5% of 485
     translate Y = 71.5px = 25.6% of 279, which puts the window's top edge on
       the image's own top edge — the maximum headroom this source has.
   The old 16.5% put the window top at y25.5, below her hairline at y7.5, and
   sliced the crown of her head off. .lt__fig has to clip now that the image
   is bigger than its slot, or it would spill over the text column. */
#featured .lt__fig{ overflow: hidden; }
#featured .lt__fig img[src*="cl-desk-balcony"]{
  object-position: 50% 50%;
  transform: scale(2.05) translate(-25.5%, 25.6%);
  transform-origin: 50% 50%;
}

/* ── knowledge centre · #library-slides — "Research & Reports" ─────────────
   band-honest.jpg is 1920x2876 (portrait) in a 593x340 landscape strip, so
   only 38% of its height survives. At 50% that window sat on his chest and
   his head was gone. 0% pins the window to the top of the source, where his
   hair starts 7px down — head, shoulders and the report all in frame, and the
   most headroom the source contains. Verified with the panel opened. */
#library-slides .sqz__img[src*="band-honest"]{ object-position: 50% 0%; }

/* ── capitalq — captured and confirmed, kept so a merge cannot lose them ───
   #old-way  cl-night-exec at 100%: the executive stands at 72% of the source
             and the 1.18 window cut his shoulder at style.css's 90%.
   #search   cl-corridor at 96%: all six figures whole and centred.
   #connect  biz-step-4 at 62%: the lounge group whole. */
#old-way .oldway__fig2 img{ object-position: 100% 50%; }
#search .better__frame img{ object-position: 96% 50%; }
#connect .conn__fig img{ object-position: 62% 50%; }

/* ══════════ 20260908a — client corrections round 2 · sqz ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   fix-sqz.css — 2026-09-08 client round · item K3 ONLY
   "I like this blue glow you added to all the images. I don't know if we can
    do it for all the other pages that have this kind of section design —
    I feel it will make it come out well."

   The treatment he is pointing at is the ACTIVE PANEL of the Knowledge Centre
   library (.sqz squeeze carousel, knowledge-centre.html #library-slides,
   style.css block "E1"): closed panels go black-and-white under a flat black
   plate, the open one comes back to full colour under an FDN-blue colour wash
   with a blue rail and a blue halo.

   There are exactly FOUR carousels of that shape on the site:
     · knowledge-centre #library-slides   — the original. NOT touched here.
     · capitalq #features (.fx-cq-sqz)    — already rebuilt in this language
                                            by the CapitalQ agent (item C4).
                                            NOT touched here, and this file is
                                            NOT linked into capitalq.html.
     · index #advantage-slides            — had the colour/greyscale split but
                                            no blue wash of its own shape, no
                                            plate, no rail.        -> DONE HERE
     · investors #familiar (.fx-investors-sqz) — had neither.       -> DONE HERE
   (for-businesses .scar is a two-up CARD slider, a different shape, and that
    page belongs to another agent this round — left alone, flagged instead.)

   Values are copied verbatim from the library block so the four read as ONE
   system; they are not re-tuned per page. Linked into index.html,
   investors.html and knowledge-centre.html AFTER style.css and fix-global.css.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════ index.html · #advantage-slides (section #intelligence) ════════
   style.css "A5" already greyscales the closed panels and puts a 158deg blue
   on the open one. It is scoped `#intelligence …`, which is the same
   specificity as `#advantage-slides …` — this file loads later, so these win
   without !important. What is added: the flat black plate that makes "dull"
   unmistakable, the library's own 3-layer blue wash, the rail + halo, and the
   hover answer on a closed panel. */

#advantage-slides .sqz__img{ transition: filter .6s ease, opacity .6s ease; }

#advantage-slides .sqz__panel:not(.is-open) .sqz__img{
  filter: grayscale(1) saturate(0) contrast(1.06) brightness(.72);
}
#advantage-slides .sqz__panel:not(.is-open) .sqz__shade{
  background: linear-gradient(180deg,
    rgba(4,5,7,.52) 0%, rgba(4,5,7,.62) 55%, rgba(4,5,7,.78) 100%);
}
/* the plate. ::after is unused on this carousel, and being the last child in
   tree order it paints above the absolutely-positioned .sqz__img — which is
   the only way a dulling layer can reach the photo. */
#advantage-slides .sqz__panel::after{
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #050608; opacity: .34; transition: opacity .6s ease;
}
#advantage-slides .sqz__panel.is-open::after{ opacity: 0; }

#advantage-slides .sqz__panel.is-open .sqz__img{
  filter: grayscale(0) saturate(1.22) contrast(1.05) brightness(1.1);
}
#advantage-slides .sqz__panel.is-open .sqz__shade{
  background:
    linear-gradient(4deg,   rgba(226,178,76,.46) 0%, rgba(226,178,76,.14) 22%, rgba(226,178,76,0) 50%),
    linear-gradient(150deg, rgba(226,178,76,.26) 0%, rgba(226,178,76,.04) 26%, rgba(226,178,76,0) 48%),
    linear-gradient(180deg, rgba(10,10,11,0) 46%, rgba(6,7,10,.46) 100%);
}
#advantage-slides .sqz__panel.is-open{
  box-shadow: inset 0 -3px 0 0 var(--blue), 0 0 44px -14px rgba(226,178,76,.55);
}
/* the label sits under the plate otherwise */
#advantage-slides .sqz__tag{ z-index: 2; }

@media (hover: hover) and (pointer: fine){
  #advantage-slides .sqz__panel:not(.is-open):hover::after{ opacity: .16; }
  #advantage-slides .sqz__panel:not(.is-open):hover .sqz__img{
    filter: grayscale(.55) saturate(.5) contrast(1.04) brightness(.9);
  }
}
@media (prefers-reduced-motion: reduce){
  #advantage-slides .sqz__img,
  #advantage-slides .sqz__panel::after{ transition: none; }
}


/* ══════════ investors.html · #familiar (.fx-investors-sqz) ════════════════
   This one already spends ::after on a hairline frame (style.css:5719, z-index
   2), so the plate cannot have its own pseudo-element. It is folded into that
   same ::after as a background — a border and a background live happily on one
   box, and the alpha is carried by the colour rather than by `opacity` so the
   hairline keeps its own strength. */

.fx-investors-sqz .sqz__img{ transition: filter .6s ease, opacity .6s ease; }

.fx-investors-sqz .sqz__panel:not(.is-open) .sqz__img{
  filter: grayscale(1) saturate(0) contrast(1.06) brightness(.72);
}
.fx-investors-sqz .sqz__panel:not(.is-open) .sqz__shade{
  background: linear-gradient(180deg,
    rgba(4,5,7,.52) 0%, rgba(4,5,7,.62) 55%, rgba(4,5,7,.78) 100%);
}
.fx-investors-sqz .sqz__panel::after{
  background: rgba(5,6,8,.34);
  transition: background .6s ease, border-color .6s ease;
}
.fx-investors-sqz .sqz__panel.is-open::after{
  background: transparent;
}

.fx-investors-sqz .sqz__panel.is-open .sqz__img{
  filter: grayscale(0) saturate(1.22) contrast(1.05) brightness(1.1);
}
.fx-investors-sqz .sqz__panel.is-open .sqz__shade{
  background:
    linear-gradient(4deg,   rgba(226,178,76,.46) 0%, rgba(226,178,76,.14) 22%, rgba(226,178,76,0) 50%),
    linear-gradient(150deg, rgba(226,178,76,.26) 0%, rgba(226,178,76,.04) 26%, rgba(226,178,76,0) 48%),
    linear-gradient(180deg, rgba(10,10,11,0) 46%, rgba(6,7,10,.46) 100%);
}
.fx-investors-sqz .sqz__panel.is-open{
  box-shadow: inset 0 -3px 0 0 var(--blue), 0 0 44px -14px rgba(226,178,76,.55);
}
/* the label here is a whole sentence in white display type and ::after sits
   above it at z-index 2 — it has to clear the plate or the sentence dulls
   with the photo. The index number rides with it. */
.fx-investors-sqz .sqz__tag,
.fx-investors-sqz .fx-investors-sqz__ix{ z-index: 3; }

@media (hover: hover) and (pointer: fine){
  .fx-investors-sqz .sqz__panel:not(.is-open):hover::after{ background: rgba(5,6,8,.16); }
  .fx-investors-sqz .sqz__panel:not(.is-open):hover .sqz__img{
    filter: grayscale(.55) saturate(.5) contrast(1.04) brightness(.9);
  }
}
@media (prefers-reduced-motion: reduce){
  .fx-investors-sqz .sqz__img,
  .fx-investors-sqz .sqz__panel::after{ transition: none; }
}

/* ══════════ 20260908a — client corrections round 2 · index ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   fix-index.css — HOMEPAGE ONLY · client correction round 2026-09-04b
   Loads AFTER style.css and fix-global.css. Never edit style.css from here.
   Items: H1 hero head-room · H2 persona tab transition · H3 #the-name up +
   tighter below · H4 #africa-arabia framing (verified, owned by fix-global).
   ══════════════════════════════════════════════════════════════════════════ */


/* ── H1 · HERO — the top of his head must never leave the frame ────────────
   THE REGRESSION: style.css:5045 framed the portrait with
   `object-position:50% 50%; transform: translate(13%,26%) scale(1.55)`.
   Both halves of that are viewport-dependent in the wrong direction.

   hero-exec.webp is 1536x1024 and object-fit:cover on a frame wider than 3:2
   is WIDTH-constrained, so the rendered photo is 1440x960 at 1440px wide but
   2560x1706 at 2560px wide. `translateY(26%)` is 26% of the FRAME height
   (234px at 900 tall, 374px at 1440 tall) while the crop it has to compensate
   for grows with the photo — so the taller the screen, the further the head
   climbs past the top edge. Measured head-top (his hair starts 5.7% down the
   source): +25px at 1440x900, -52px at 1920x1080, -70px at 2560x1440. On a
   full-screen 1440p display his head was 70px above the frame. Exactly what
   he is looking at.

   THE FIX is anchoring, not a bigger nudge:
     object-position: 50% 0%   -> the browser pins the photo's TOP edge to the
                                  frame's top edge at every viewport, and can
                                  never leave a gap (cover always overfills).
     transform-origin: 50% 0%  -> the scale grows downward from that same
                                  pinned edge, so the head-room band scales
                                  with the photo instead of being eaten.
   Head-top is then f x scale x renderedHeight and is positive by construction:
     1280x800  -> 0.057 x 1.32 x  853 =  64px
     1440x900  -> 0.057 x 1.32 x  960 =  72px
     1920x1080 -> 0.057 x 1.32 x 1280 =  96px
     2560x1440 -> 0.057 x 1.32 x 1707 = 128px
     390x844   -> 0.057 x 1.32 x  844 =  63px  (height-constrained: y is fixed)
   and it never shrinks as the viewport grows, which was the whole bug.

   ZOOM: 1.55 -> 1.32, the client's "so zoomed in". Lower is not free — the
   source only has 5.7% of head-room, so head clearance is directly
   proportional to the zoom; below ~1.3 his crown slides under the header
   capsule (which ends at y=60). 1.32 is the least zoom that still clears it.

   TRANSLATE X: 9%. The no-gap ceiling is (scale-1)/2 = 16%, so 9% is inside
   it at every width; it keeps him right of the headline column exactly where
   he sits today (his silhouette spans x 629-1125 at 1440, vs 648-1231 before). */
#top.hero--exec .hero__bg img{
  object-position: 50% 0%;
  transform-origin: 50% 0%;
  transform: translateX(9%) scale(1.32);
}


/* ── H2 · PERSONA TABS — a real transition when 02 / 03 is clicked ─────────
   Before: `.ppane2{display:none}` -> `.ppane2.is-on{display:grid}`. A display
   swap cannot transition, so the panel teleported and the stage snapped from
   the 5-row height to the 4-row height in the same frame.
   Now: all three panes are stacked absolutely in the stage, the stage's own
   height is animated to the incoming pane's height (no jump), the panes
   crossfade, and the copy column and the photo slide in from the direction of
   travel. Everything below is gated on [data-fx-index-ps], which js/fix-index.js
   only sets once it has successfully measured a pane — with JS off the
   original display swap is still what runs. */

[data-fx-index-ps]{
  position: relative;
  transition: height .5s cubic-bezier(.22,.61,.36,1);
}
/* The stage clips ONLY while a swap is in flight — the incoming pane is often
   taller and would otherwise hang below the hairline border for the half
   second the height takes to catch up. At rest overflow goes back to visible,
   so the .glow halo on this stage is never clipped and GL1 is not undone. */
[data-fx-index-ps].fx-index-swapping{ overflow: hidden; }

/* the live pane is the one left IN FLOW, so the stage's resting height is
   plain `auto` and an inline height only exists during a swap */
[data-fx-index-ps] .ppane2{
  position: absolute; top: 0; left: 0; width: 100%;
  /* re-stated because this selector (0,2,0) now outranks .ppane2.is-on */
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* the OUT half of the crossfade is deliberately shorter than the IN half:
     at a symmetric .5s both panels sit at ~50% for a beat and the old copy
     reads as a ghost behind the new one. .3s out / .5s in keeps the total
     above 1 the whole way (no dip to a bare stage) and clears the old text
     by 300ms. */
  transition:
    opacity .3s ease,
    visibility 0s linear .3s;
}
[data-fx-index-ps] .ppane2.is-on{
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transition:
    opacity .5s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s;
}
/* the pane that just lost the tab stays painted for the length of the
   crossfade, so the stage is never briefly bare between the two */
[data-fx-index-ps] .ppane2.fx-index-out{
  visibility: visible;
  z-index: 1;
}

/* THE SLIDE IS ON THE CHILDREN, NEVER ON THE PANE BOX. The pane box is what
   the stage's border frames; sliding it would pull a 26px strip of bare glass
   in at one edge. The copy column moves inside its own 26-48px padding, and
   the photo moves inside .ppane2__fig, which is the only thing here that
   clips (it carries no .glow, so fix-global's halo work is untouched). The
   photo is over-scaled by 7% so a 2.5% travel can never uncover an edge. */
[data-fx-index-ps] .ppane2__fig{ overflow: hidden; }
[data-fx-index-ps] .ppane2__body{
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
[data-fx-index-ps] .ppane2__fig img{
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
[data-fx-index-ps] .ppane2:not(.is-on) .ppane2__body{
  transform: translateX(var(--fx-index-in, 26px));
}
[data-fx-index-ps] .ppane2:not(.is-on) .ppane2__fig img{
  transform: translateX(var(--fx-index-imgin, 2.5%)) scale(1.07);
}
/* placed AFTER the :not(.is-on) pair on purpose — same specificity, and for
   the one frame where the outgoing pane is still .is-on these must win */
[data-fx-index-ps] .ppane2.fx-index-out .ppane2__body{
  transform: translateX(var(--fx-index-out, -26px));
}
[data-fx-index-ps] .ppane2.fx-index-out .ppane2__fig img{
  transform: translateX(var(--fx-index-imgout, -2.5%)) scale(1.07);
}

/* js/fix-index.js hangs this on the stage for exactly one layout flush, so the
   INCOMING pane can be snapped to the correct starting side before .is-on
   lands on it. Without it a direction change (03 -> 01) retargets a
   transition that is already running toward the old side, and the panel
   slides in from the wrong edge. */
[data-fx-index-ps].fx-index-nosnap .ppane2,
[data-fx-index-ps].fx-index-nosnap .ppane2__body,
[data-fx-index-ps].fx-index-nosnap .ppane2__fig img{ transition: none !important; }

@media (max-width: 980px){
  /* style.css:2027 stacks the pane on small screens; restate it because the
     [data-fx-index-ps] selector above now wins on order */
  [data-fx-index-ps] .ppane2{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  [data-fx-index-ps],
  [data-fx-index-ps] .ppane2,
  [data-fx-index-ps] .ppane2__body,
  [data-fx-index-ps] .ppane2__fig img{ transition: none; }
  [data-fx-index-ps] .ppane2:not(.is-on) .ppane2__body,
  [data-fx-index-ps] .ppane2.fx-index-out .ppane2__body{ transform: none; }
  [data-fx-index-ps] .ppane2:not(.is-on) .ppane2__fig img,
  [data-fx-index-ps] .ppane2.fx-index-out .ppane2__fig img{ transform: none; }
}


/* ── H3 · #the-name — the white card moves UP, and the air under it goes ───
   "move that white placeholder up, let it be closer to the previous section,
   the Advantage. And reduce the bottom padding before we see the next
   section, Introducing CapitalQ."
   #intelligence and #the-name share the same ground (var(--bg-soft)), so the
   band he is looking at is the SUM of the two paddings that meet there:
       above the card  136.8 (#intelligence pb) + 95.0 (#the-name pt) = 232px
       below the card   95.0 (#the-name pb) + 136.8 (#capitalq pt)    = 232px
   Trimming only #the-name could not close either gap on its own, so each pair
   is cut together, and by more on the section that owns the dead space:
       above  232px -> 92px      below  232px -> 106px                */
#intelligence.sec{ padding-bottom: clamp(40px, 5.2vw, 76px); }
#the-name.sec{
  padding-top: clamp(8px, 1.2vw, 16px);
  padding-bottom: clamp(18px, 2.4vw, 34px);
}
#capitalq.sec{ padding-top: clamp(44px, 5vw, 72px); }


/* ── H4 · #africa-arabia — VERIFIED, not re-set ────────────────────────────
   fix-global.css:159 already sets object-position: 91% 50% (plus the 10%
   wedge above 981px and 100% 50% below it). Captured at 1440 and 390 with
   that in force: all five figures are inside the frame and the group is
   centred in the window, so there is nothing to override here. Deliberately
   no rule — see the notes in the structured report. */

/* ══════════ 20260908a — client corrections round 2 · fb ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   fix-fb.css — 2026-09-08 client round · FOR BUSINESSES page only
   Items F1 (Platform background), F2 (Inside CapitalQ card images),
   F3 (The Close padding), F4 (halo crop — verification, global agent owns it).

   Load order: css/style.css → css/fix-global.css → THIS FILE.
   Wired into for-businesses.html ONLY. Prefix: .fx-fb-*  ·  hooks: data-fx-fb-*
   House law obeyed: SQUARE corners (no border-radius anywhere below), ONE blue
   #E2B24C, Inter, glass + .glow kept, 60/30/10, nothing invisible on any ground.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   F1 · #platform — THE GRID IS GONE, THE HOMEPAGE SWIRL IS THE GROUND
   Client: "the grid stuff you added to the background is not it at all. Add
   that pattern we added to the homepage 'Too Much Capital' section, but make
   it screen or overlay blending mode, and reduce the opacity a bit."

   'Too Much Capital' is index.html #connection; its pattern is
   .rgap2__panel::before — assets/img/pattern-swirl.png, WHITE strokes on
   transparent, 100% wide, anchored 50% 42%, mix-blend-mode:overlay, opacity
   .10 after pass 39. Same asset, same size, same anchor are reused here.

   THE PROBLEM THAT HAD TO BE SOLVED, measured not guessed: #platform's ground
   was pure #FFFFFF. Both modes the client named are mathematically NO-OPS
   against a white backdrop when the blend layer is white:
       screen(b, 1)  = 1 - (1-b)(1-1) = 1
       overlay(b, s) = 1 - 2(1-b)(1-s)  and at b = 1 that is 1 for every s
   i.e. the swirl would have been invisible — the section would simply have
   lost the grid and gained nothing.

   So the ground is deepened just enough for `screen` to bite: a pale
   FDN-tinted plate instead of paper white. The swirl then paints in screen
   exactly as the client asked, in the same white polarity as the homepage.
   Measured on the render at 1440: the swirl runs #D6DEF1 → #ECF0F7, a
   luminance ratio of 1.19 against the ground, where the homepage panel runs
   1.34 — so it is the same artwork, read a step quieter, which is the
   "reduce the opacity a bit". The section is still a LIGHT section; the
   light/dark alternation down the page is unchanged, and the black display
   type on it still measures ~16:1.
   ══════════════════════════════════════════════════════════════════════════ */

/* the plate. ~8% off white, carrying the blue's own hue, so the swirl has
   something to lift off and the black display type is untouched. */
#platform.sec--light{
  background:
    linear-gradient(180deg, #EAEFF8 0%, #E1E8F4 46%, #E7ECF6 100%);
}

/* the grid and the dot field are removed outright — the spans are gone from
   the markup, this is the belt-and-braces in case a merge puts them back. */
#platform .fx-for-bg--grid,
#platform .fx-for-bg--dots{ display: none !important; }

/* the swirl. Same asset, same size logic as #connection (100% wide, anchored
   just below centre) so it reads as the same artwork at the same stroke
   scale. opacity .34 of a screen blend against a ~0.90 ground lifts the lit
   strokes to ~0.955 — a watermark, not a graphic competing with the tiles. */
.fx-fb-swirl{
  position: absolute; inset: 0; z-index: 0;
  display: block; pointer-events: none;
  background-image: url('../assets/img/pattern-swirl.webp');
  background-repeat: no-repeat;
  background-position: 50% 42%;
  background-size: 100% auto;
  mix-blend-mode: screen;
  opacity: .34;
}

/* the soft blue beam stays — it lights the ground, it is not a grid — but it
   is pulled back so the swirl is the texture the eye reads, not the wash. */
#platform .fx-for-bg--beam{
  background:
    radial-gradient(62% 46% at 50% -4%, rgba(226,178,76,.14), transparent 72%),
    radial-gradient(48% 36% at 8% 92%, rgba(226,178,76,.10), transparent 74%),
    radial-gradient(48% 36% at 92% 92%, rgba(226,178,76,.10), transparent 74%);
}

/* the tiles sit ON the new plate: opaque white, a real edge, and the .glow
   halo now has a ground to dissolve into instead of white-on-white. */
.fx-for-plat .ptile{
  background: rgba(255,255,255,.94);
  border-color: rgba(11,19,31,.14);
}
.fx-for-plat .ptile:hover{
  background: #FFFFFF;
  border-color: rgba(226,178,76,.42);
}

/* Safari < 15.4 and any engine without mix-blend-mode still needs a ground the
   swirl can be seen on — this is a no-op everywhere it is supported. */
@supports not (mix-blend-mode: screen){
  .fx-fb-swirl{ mix-blend-mode: normal; opacity: .22; }
}

@media (max-width: 620px){
  /* the pattern is portrait; at phone width 100%-wide would show one stroke.
     Height-locking keeps the same stroke weight as the desktop reading. */
  .fx-fb-swirl{ background-size: auto 120%; background-position: 50% 40%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   F2 · #features "Inside CapitalQ" — EVERY CARD GETS A BACKGROUND IMAGE
   Client: "for each of those cards, let's just add an image for it, like as a
   background, so that section does not look boring."

   Six client photos from assets/img, all previously UNUSED anywhere on the
   site (audited with grep over all 7 html files + style.css — they appear
   only in _test-sheet.html, the contact sheet), so nothing on the page is
   repeated:
     06.1 AI Investment Associate  → v4-founder-10  founder at his desk
     06.2 Investment Snapshot      → v4-detail-06   the quick read: pen + book
     06.3 Investability IQ         → v4-founder-08  founder being assessed
     06.4 Investor Briefing        → v4-work-05     the boardroom briefing
     06.5 Smart Data Room          → v4-detail-08   documents, handed over
     06.6 Investor Matching        → v4-work-01     three people, one clipboard

   READABILITY IS THE CONSTRAINT, and it is enforced as a FLOOR, not by eye.
   The first attempt at this item crushed the photos to nothing — measured on
   the render, the open bands of card 1 and card 2 averaged #151516 and
   #111112 (luminance .0075 / .0056): the photograph was contributing under
   9% of its own value and the section still read as six black rectangles.
   That is the client's complaint, not the fix for it.

   So the scrim is derived from the text, not guessed. Text runs measured in
   a closed 582x397 card, as a fraction of the card box:

     .fcard__ix     y  9-14%   x  6-12%   BLUE  #E2B24C   11.5px
     .fcard__t      y 18-26%   x  6-55%   WHITE #F4F8FB   24px
     .fcard__sub    y 27-33%   x  6-56%   BLUE  #E2B24C   15.2px
     lead paragraph y 37-43%   x  6-85%   LIGHT #C9D4DC   14.9px
     summary chip   y 47-56%   x  6-29%   WHITE (own plate)
     .punch         y 80-91%   x  6-92%   BLUE  #E2B24C   15.7px

   Two rules follow, because the two inks fail in OPPOSITE directions:
     · Light ink (#C9D4DC at 14.9px is the worst case) needs its ground BELOW
       luminance .101 to hold 4.5:1. That is generous — about #595959 — so
       the photograph is allowed to live wherever only light ink sits.
     · BLUE #E2B24C is DARKER than mid grey (luminance .0759). Every lumen
       added behind it makes it WORSE: on the card's own #0A0A0B it reads
       2.38:1 and any lift drops it further. Blue on black is the site's
       standing treatment, so the rule here is DO NOT REGRESS IT — the bands
       carrying blue ink are held at transmission <= .05, which keeps the
       composited ground at luminance ~.003 and the ratio at 2.38:1,
       identical to the same card with no photo behind it at all.

   The guarantee is arithmetic, so it holds for ANY photo, including one with
   a blown window in it: contrast(.88) brightness(.85) caps the brightest
   possible source pixel at .799 of white, and the thinnest scrim the photo
   is ever seen through in a light-ink band is transmission .415, so the
   worst ground a body line can sit on is .799 x .415 = .332 sRGB, luminance
   .091 → 5.6:1 against #C9D4DC. Checked against the real render afterwards,
   band by band — see the numbers reported with this pass.

   .fcard already spends both pseudo-elements (.glow::after is the halo,
   .gring::before the comet border), so the photo needs a real element:
   <span class="fx-fb-shot"> carries the photo on ::before and the scrim on
   ::after, so the photo can be filtered without the filter eating the scrim.
   Ink stays white/blue exactly as it was — no copy changed.
   ══════════════════════════════════════════════════════════════════════════ */

.fx-fb-card{ position: relative; overflow: hidden; isolation: isolate; }

/* the card's own glass tint would sit ON TOP of the photo and grey it out */
.fx-fb-card{
  background: #0A0A0B;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: rgba(215,226,234,.20);
  transition: border-color .38s ease;
}
.fx-fb-card:hover,
.fx-fb-card:focus-within{ border-color: rgba(226,178,76,.55); }

.fx-fb-shot{
  position: absolute; inset: 0; z-index: 0;
  display: block; pointer-events: none; overflow: hidden;
}

/* the photograph. grayscale keeps six different photos reading as one system;
   contrast(.88) lifts the shadows so a dark frame still shows something and
   caps the highlight at .799 — the number the contrast floor above is
   computed from. Do not raise brightness without redoing that arithmetic. */
.fx-fb-shot::before{
  content: ''; position: absolute; inset: 0;
  background-image: var(--fx-fb-img);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--fx-fb-pos, 50% 50%);
  filter: grayscale(.32) contrast(.88) brightness(.85);
  transform: scale(1.04);
  transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .7s ease;
}

/* THE SCRIM. Four stacked layers, all pure #08090C, so the composite
   transmission is exactly the product of (1 - alpha) and can be reasoned
   about directly.

   The two guards are anchored in PIXELS, not percentages, and that is the
   whole point. Blue ink does not sit at a fixed FRACTION of the card: it
   sits in the first ~158px (ix + title + sub) and the last ~130px (punch),
   and those two numbers barely move while the card height does. Measured
   across the six cards at 1440 / 1024 / 768:
       card height        393      397      413
       lowest blue sub    152      138      157   -> guard dense to 152px
       highest punch top  274      286      283   -> guard dense to 130px up
   A card also grows ~2.2x when its "Read more" opens, which slides a
   percentage band straight out from under the copy; a pixel guard does not
   move. The % band is layer 3 and only shapes the window between them.
   Layer 4 is a mild left weighting, because every line in the card is left
   aligned and the right edge is the emptiest part of all six. */
.fx-fb-shot::after{
  content: ''; position: absolute; inset: 0;
  background:
    /* 1 · guard, from the top, in PIXELS — the ix / title / sub block is the
       first ~156px whatever the card height does, and a card grows ~2.2x when
       its "Read more" opens, which would slide a percentage band straight out
       from under that copy. This layer does not move. */
    linear-gradient(180deg,
      rgba(8,9,12,.90) 0px, rgba(8,9,12,.88) 156px, rgba(8,9,12,0) 186px),
    /* 2 · the band plan. Dense over the blue runs, open from 52% to 62% —
       the lead line, the READ MORE chip and the stretch above the punch —
       which is the window the photograph lives in. The stops are set by the
       widest spread the six cards actually produce, measured at 1440 / 1024
       / 768: lowest 2-line .fcard__sub 152 / 138 / 157px (= 39% of a 393px
       card) and earliest 3-line .punch 274 / 286 / 283px (= 70%). The punch
       is always the LAST child, so on an open card it lands in the 90-100%
       tail and stays black there too. */
    linear-gradient(180deg,
      rgba(8,9,12,.92) 0%,
      rgba(8,9,12,.90) 30%,
      rgba(8,9,12,.52) 42%,
      rgba(8,9,12,.46) 52%,
      rgba(8,9,12,.46) 62%,
      rgba(8,9,12,.88) 68%,
      rgba(8,9,12,.94) 75%,
      rgba(8,9,12,.96) 100%),
    /* 3 · left weighting */
    linear-gradient(90deg,
      rgba(8,9,12,.42) 0%, rgba(8,9,12,.26) 42%, rgba(8,9,12,.18) 100%);
}

/* HOVER is a colour change, not a brightness change — grey to full colour is
   the strongest perceptual move available that leaves the contrast floor
   intact (peak source pixel .836 against the .799 the floor was built on,
   still inside the margin). The slow push-in does the rest. */
.fx-fb-card:hover .fx-fb-shot::before,
.fx-fb-card:focus-within .fx-fb-shot::before{
  filter: grayscale(.04) contrast(.90) brightness(.88);
  transform: scale(1.10);
}

/* every child of the card rides above the photo */
.fx-fb-card > *:not(.fx-fb-shot){ position: relative; z-index: 1; }

/* An opened "Read more" panel puts a long, dense read over the photo. The two
   pixel guards already hold the head and the punch of an open card, so this
   plate only has to quiet the middle — it is a reading surface, not a
   blackout, and it keeps the picture alive around it.
   NOTE, deliberately NOT done: a plate on .punch itself. It was tried and
   rejected on the render — the punch is a text-width box inside the card's
   36px padding, so a background on it draws a visible floating rectangle
   over the photograph on the lighter cards. The bottom guard is full bleed
   and does the same job invisibly. */
.fx-fb-card .fcard__body{
  background: rgba(6,7,9,.72);
  border-left: 2px solid rgba(226,178,76,.55);
  padding: 14px 16px;
}
.fx-fb-card .fcard__more summary{
  background: rgba(6,7,9,.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.fx-fb-card .fcard__body .gcard{
  background: rgba(6,7,9,.68);
}

/* the six photos + the framing for each. Positions are set against the card's
   real 1.56:1 crop so no person is sliced (GL2's rule, applied on this page).
   The two portrait sources (2:3) crop VERTICALLY only — cover scales them to
   the card width, so their X value is inert and Y is what frames the face:
   v4-founder-08 at 18% keeps the woman's hair inside the top edge, which 40%
   was cutting. */
.fx-fb-card[data-fx-fb-shot="associate"]{ --fx-fb-img: url('../assets/img/v4-founder-10.webp'); --fx-fb-pos: 60% 40%; }
.fx-fb-card[data-fx-fb-shot="snapshot"]  { --fx-fb-img: url('../assets/img/v4-detail-06.webp');  --fx-fb-pos: 54% 52%; }
.fx-fb-card[data-fx-fb-shot="iq"]        { --fx-fb-img: url('../assets/img/v4-founder-08.webp');  --fx-fb-pos: 50% 18%; }
.fx-fb-card[data-fx-fb-shot="briefing"]  { --fx-fb-img: url('../assets/img/v4-work-05.webp');     --fx-fb-pos: 50% 42%; }
.fx-fb-card[data-fx-fb-shot="dataroom"]  { --fx-fb-img: url('../assets/img/v4-detail-08.webp');   --fx-fb-pos: 50% 30%; }
.fx-fb-card[data-fx-fb-shot="matching"]  { --fx-fb-img: url('../assets/img/v4-work-01.webp');     --fx-fb-pos: 46% 26%; }

@media (prefers-reduced-motion: reduce){
  .fx-fb-shot::before{ transition: none; }
  .fx-fb-card:hover .fx-fb-shot::before,
  .fx-fb-card:focus-within .fx-fb-shot::before{ transform: scale(1.04); }
}


/* ══════════════════════════════════════════════════════════════════════════
   F3 · #close — THE PADDING COMES WAY DOWN
   Client: "the top and bottom padding of that close, reduce it. It's too much.
   Way too much."

   Measured before: section padding-block 136.8px + .closecard padding 57.6px
   = 194.4px of empty ground above "The Close" and again below the CTA pair.
   After: 56 + 25.9 = 82px each side at 1440 — a 58% cut; the section is 453px
   tall where it was 678px.
   #close.sec is (0,1,1) so it beats .sec (0,1,0) without !important.
   ══════════════════════════════════════════════════════════════════════════ */

#close.sec{
  padding-top: clamp(38px, 3.9vw, 56px);
  padding-bottom: clamp(38px, 3.9vw, 56px);
}
#close .closecard{
  padding-top: clamp(18px, 1.8vw, 26px);
  padding-bottom: clamp(18px, 1.8vw, 26px);
}
/* the CTA pair carried its own top margin on top of the card padding */
#close .closecard__cta{ margin-top: clamp(18px, 2vw, 26px); }

/* the world-map bed was sized against the old height; keep it filling the
   shorter band rather than showing a cropped sliver of map. */
#close .fx-for-closebed .fx-for-closemap{ background-size: 122% auto; }
@media (max-width: 620px){
  #close .fx-for-closebed .fx-for-closemap{ background-size: 280% auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
   F4 · HALO CROP — css/fix-global.css owns the fix and it is left to do its
   job. js/fix-global.js tags every .glow on the page, measures the room its
   clipping ancestor actually leaves, and writes a per-element --fx-g-r1 /
   --fx-g-r2 so the bloom dissolves INSIDE that room. A previous version of
   this file re-declared the drop-shadow here with hard-coded 18/44px radii,
   which overrode those measured values on exactly the cards that needed them
   most — the Inside CapitalQ cards, which now clip because they hold a photo.
   That is removed: do not re-add a filter to .fx-fb-card.

   The one thing this page still has to contribute is standing down
   style.css `.fx-for-pop .fcard.glow::after` (0,3,1), a 64px OUTWARD
   box-shadow. A card with overflow:hidden cannot paint it at all, so on the
   photo cards it is dead weight that only risks fighting the global rule.
   ══════════════════════════════════════════════════════════════════════════ */

.fx-for-pop .fx-fb-card.glow::after{ box-shadow: none; }

/* ══════════ 20260908a — client corrections round 2 · cq ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   fix-cq.css — CapitalQ page · client correction round 2026-09-04b (C1–C5)
   Loaded AFTER css/style.css and css/fix-global.css, on capitalq.html only.
   Square corners, one blue (#E2B24C), Inter, 60/30/10, nothing invisible.
   New classes are prefixed fx-cq-; JS hooks data-fx-cq-.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── C1 · #top — every hero point is exactly TWO lines, centred in its box ──
   Client: "I said make sure everything is a two-liner… also adjust the
   placeholder they are inside — make them centralised horizontally."

   Measured, not guessed. At the .cqbox font size the four strings all wrap to
   two lines only while the text column is between 20.76em and 23.59em wide
   (below that the longest string takes three lines, above it the shortest
   collapses to one). Target is the middle of that band, 22.2em, so every
   breakpoint keeps the same ratio:
       text column = 22.2em ;  box = text + 12+12 padding + 15 icon + 9 gap
   ─────────────────────────────────────────────────────────────────────── */

/* ≥760px — two columns. 22.2em of text at .84rem = 18.65rem per box.
   The pair may run wider than the 60%-wide .bizhero copy column; the hero is
   full-bleed so it still lands well inside .container. */
.cqhero .cqhero__boxes{
  max-width: none;
  width: min(calc(37.3rem + 104px), calc(100vw - 64px));
}

/* ≤759px — one column, same text column.
   .cqhero .bizhero pins the copy to 60% of the container at EVERY width — it
   out-specifies the max-width:none that style.css sets at ≤900px — so on a
   phone the whole hero column, headline included, was squeezed into 210px of
   a 350px container. The cap is released below 900px (restoring the intent of
   style.css:2806) and the boxes measure against the container, not the 60%. */
@media (max-width: 900px){
  .cqhero .bizhero{ max-width: none; }
}
@media (max-width: 759px){
  .cqhero .cqhero__boxes{
    grid-template-columns: 1fr;
    width: min(calc(18rem + 48px), calc(100vw - 40px));
  }
}
/* ≤639px the container itself is narrower than the box, so the font steps
   down to keep the text column inside the two-line band at 360–639px. */
@media (max-width: 639px){
  .cqhero .cqbox{ font-size: 13px; }
}
/* short desktop viewports keep the tighter type from style.css (.8rem +
   8/10 padding) — the box is re-sized so the ratio still holds there. */
@media (min-width: 901px) and (max-height: 800px){
  .cqhero .cqhero__boxes{ width: min(calc(35.52rem + 96px), calc(100vw - 64px)); }
}

/* the point itself, centred inside its placeholder. The tick joins the text
   flow instead of sitting in its own flex column, so the whole [tick + two
   lines] group reads as one centred block rather than a stranded icon beside
   centred copy. Every box is two lines and the rows are 1fr, so symmetric
   padding centres them vertically too. */
.cqhero .cqbox{
  display: block;
  text-align: center;
}
.cqhero .cqbox__ic{
  display: inline-block; margin-top: 0; margin-right: 9px;
  vertical-align: -2px;
}
.cqhero .cqbox > span:last-child{ display: inline; }


/* ── C2 · #one-place — a different photograph, and darker ──────────────────
   Client: "I'm seeing the background image you added there… I don't like it.
   Whatever background image you add next, make it more darker."
   The stock-ticker wall (cq-ambient.jpg) is replaced in the markup by
   intel-bg.jpg — a near-monochrome boardroom under one shaft of light, which
   is both a different subject and a far darker source (mean luminance 39 vs
   80, measured by drawing both to a 64x64 canvas). Grade + overlay push it
   darker still than the panel it replaces. */
.fx-capitalq-oneplace__bg img{
  /* Y only — the source is 1920x2880 portrait and the section box is landscape,
     so cover leaves NO horizontal slack and the X value is inert. 32% keeps the
     window shaft short and contained behind the header; tested 62%, which runs
     the shaft the full height of the section and reads brighter, not darker. */
  object-position: 50% 32%;
  filter: grayscale(1) contrast(1.12) brightness(.72);
}
.fx-capitalq-oneplace__bg::after{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.94) 0%, rgba(0,0,0,.80) 26%,
      rgba(0,0,0,.82) 72%, rgba(0,0,0,.94) 100%);
}


/* ── C3 · #old-way — the skyline goes much darker ──────────────────────────
   Client: "the background image, make it much more darker. It's so obvious.
   Add more overlay to it."  brightness .62 → .32, overlay .70/.74 → .90/.92. */
.fx-capitalq-oldway__bg img{
  filter: grayscale(1) saturate(0) brightness(.32) contrast(.92);
}
.fx-capitalq-oldway__bg::after{
  background: linear-gradient(180deg,
    var(--bg) 0%, rgba(10,10,11,.90) 20%,
    rgba(10,10,11,.92) 78%, var(--bg) 100%);
}


/* ── C4 · #features — The Platform rebuilt in the Knowledge Centre LIBRARY
   language ────────────────────────────────────────────────────────────────
   Client: "I don't want it to be this way. I want you to design it the way
   you designed the library in Knowledge Centre, with all the text showing."
   Same .sqz squeeze carousel as knowledge-centre.html #library-slides: the
   eight features are panels squeezed into strips, the active one opens 16:9,
   inactive go black-and-white under a black plate, the active takes the blue
   colour gradient + blue rail + halo — and the whole of that feature's copy
   (title, sub-line, body, checklist, punch) is printed underneath. */

.fx-cq-sqz{ margin-top: clamp(18px, 2.4vw, 30px); }
/* eight panels, not the library's five, so the open panel gives width back to
   the strips (90px each at 1440) — a 72px strip reads as a black bar. */
.fx-cq-sqz .sqz__view{ height: clamp(230px, 24vw, 330px); }
.fx-cq-sqz .sqz__panel{ background: #0B0C0E; }
.fx-cq-sqz .sqz__img{ transition: filter .6s ease, opacity .6s ease; }

/* inactive — black and white, then knocked back by a flat black plate */
.fx-cq-sqz .sqz__panel:not(.is-open) .sqz__img{
  filter: grayscale(1) saturate(0) contrast(1.06) brightness(.72);
}
.fx-cq-sqz .sqz__panel:not(.is-open) .sqz__shade{
  background: linear-gradient(180deg,
    rgba(4,5,7,.52) 0%, rgba(4,5,7,.62) 55%, rgba(4,5,7,.78) 100%);
}
.fx-cq-sqz .sqz__panel::after{
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #050608; opacity: .30; transition: opacity .6s ease;
}

/* active — full colour under the FDN-blue wash, brighter, on a blue rail */
.fx-cq-sqz .sqz__panel.is-open .sqz__img{
  filter: grayscale(0) saturate(1.22) contrast(1.05) brightness(1.06);
}
.fx-cq-sqz .sqz__panel.is-open::after{ opacity: 0; }
.fx-cq-sqz .sqz__panel.is-open .sqz__shade{
  background:
    linear-gradient(4deg,   rgba(226,178,76,.46) 0%, rgba(226,178,76,.14) 22%, rgba(226,178,76,0) 50%),
    linear-gradient(150deg, rgba(226,178,76,.26) 0%, rgba(226,178,76,.04) 26%, rgba(226,178,76,0) 48%),
    linear-gradient(180deg, rgba(10,10,11,0) 42%, rgba(6,7,10,.52) 100%);
}
.fx-cq-sqz .sqz__panel.is-open{
  box-shadow: inset 0 -3px 0 0 var(--blue), 0 0 44px -14px rgba(226,178,76,.55);
}

/* the number rides every panel so the closed strips are still readable */
.fx-cq-sqz__ix{
  position: absolute; left: 12px; top: 11px; z-index: 2;
  font-family: var(--font-mono); font-weight: 500; font-size: .7rem;
  letter-spacing: .16em; color: rgba(255,255,255,.62);
  transition: color .5s ease;
}
.fx-cq-sqz .sqz__panel.is-open .fx-cq-sqz__ix{ color: #FFFFFF; }

/* the label must FIT. style.css:2291 sizes .sqz__tag at clamp(1.05rem,1.6vw,
   1.45rem) = 23px at 1440, and it is white-space:nowrap. That was tuned for
   the Knowledge Centre library, which opens FIVE panels so the live one is
   wide; this carousel opens one of EIGHT, so the live panel is 474px and
   three labels ran straight off it and were cut by the panel's own
   overflow:hidden — measured 593px (04.5), 600px (04.6) and 625px (04.8)
   against 442px of usable width. The type steps down to fit at 1440-2560,
   and wrapping is allowed as the floor so a label can never be sliced again
   at any width. */
.fx-cq-sqz .sqz__tag{
  z-index: 2; left: 16px; right: 16px; bottom: 14px;
  font-size: clamp(.84rem, 1.06vw, 1rem);
  line-height: 1.34;
  white-space: normal;
  text-wrap: pretty;
  /* the panel is a <button>, so its centred text-align would inherit once the
     tag is stretched left-to-right; the library sits its label bottom-LEFT */
  text-align: left;
}

@media (hover: hover) and (pointer: fine){
  .fx-cq-sqz .sqz__panel:not(.is-open):hover::after{ opacity: .14; }
  .fx-cq-sqz .sqz__panel:not(.is-open):hover .sqz__img{
    filter: grayscale(.55) saturate(.5) contrast(1.04) brightness(.92);
  }
  .fx-cq-sqz .sqz__panel:not(.is-open):hover .fx-cq-sqz__ix{ color: #FFFFFF; }
}
@media (prefers-reduced-motion: reduce){
  .fx-cq-sqz .sqz__img,
  .fx-cq-sqz .sqz__panel::after,
  .fx-cq-sqz__ix{ transition: none; }
}

/* ── the copy under the carousel · ALL of it, on the light ground ───────── */
/* the slides share one grid cell, so without help the block would always be
   as tall as the tallest feature (04.4, eight checklist lines) and every
   other feature would sit over a dead gap. fix-cq.js sets the height to the
   open slide and this transitions it. No JS → the grid cell auto-sizes and
   everything is still fully visible. */
.fx-cq-sqz__copy{
  margin-top: clamp(22px, 2.8vw, 34px);
  transition: height .45s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce){
  .fx-cq-sqz__copy{ transition: none; }
}
.fx-cq-slide{ align-self: start; }
.fx-cq-slide__head{ display: flex; align-items: center; gap: 14px; }
.fx-cq-slide__ic{
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(226,178,76,.1); border: 1px solid rgba(226,178,76,.24);
  color: var(--blue);
}
.fx-cq-slide__ic svg{ width: 52%; height: 52%; display: block; }
.fx-cq-slide__ix{
  font-family: var(--font-mono); font-weight: 500; font-size: .72rem;
  letter-spacing: .26em; color: #6B7480;
}
.fx-cq-slide__t{
  margin-top: 15px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.42rem, 2.3vw, 2.05rem);
  letter-spacing: -.02em; line-height: 1.14;
  background: none; -webkit-text-fill-color: currentColor; color: #0B0C0E;
}
.fx-cq-slide__sub{
  margin-top: 9px; font-weight: 600;
  font-size: clamp(.95rem, 1.15vw, 1.06rem); color: var(--blue);
}
.fx-cq-slide__d{
  margin-top: 15px; font-size: clamp(.94rem, 1.05vw, 1.02rem);
  line-height: 1.7; color: #3A4149; max-width: 92ch;
}
.fx-cq-slide__d + .fx-cq-slide__d{ margin-top: 11px; }
.fx-cq-slide__ticks{ margin-top: 17px; gap: 11px; max-width: 92ch; }
@media (min-width: 760px){
  .fx-cq-slide__ticks{ grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
.fx-cq-slide .tick{ color: #3A4149; font-size: .92rem; }
.fx-cq-slide .tick::before{
  background: rgba(226,178,76,.12); border-color: rgba(226,178,76,.32);
  color: var(--blue);
}
.fx-cq-slide__punch{
  margin-top: 18px; font-weight: 600;
  font-size: clamp(.98rem, 1.15vw, 1.08rem); color: var(--blue);
}

/* light-ground arrows, same shape as the rest of the page */
.plat2 .fx-cq-sqz .sqz__btn{ background: var(--blue); color: #FFFFFF; }
.plat2 .fx-cq-sqz .sqz__btn:hover{ opacity: .85; }

/* ── narrow: eight strips do not fit, so the view becomes one panel ───────
   Breakpoint raised 760 → 900 (2026-09-05): with eight panels the closed
   strips measure 48px at 760 and 58px at 899 — black bars, not photographs
   (they are 90px at 1440, which is the least that still reads as a picture).
   Tablet portrait therefore gets the single open panel and the arrows.
   js/fix-cq.js carries the same 900 in NARROW — change both together. */
@media (max-width: 899px){
  .fx-cq-sqz .sqz__view{ height: clamp(200px, 52vw, 260px); }
  .fx-cq-sqz .sqz__panel{ display: none; }
  .fx-cq-sqz .sqz__panel.is-open{ display: block; width: 100%; }
  .fx-cq-sqz .sqz__panel.is-open .sqz__img{ width: 100%; }
  .fx-cq-sqz .sqz__arrows{ justify-content: space-between; align-items: center; }
}


/* ── C5 · #close — the body copy runs to two lines, then the padding drops ─
   Client: "that body copy… make that a two-liner instead of a three-liner,
   so we can reduce the top and bottom padding of that close section."
   The sentence needs 635px to fall on two lines at its type size; the lede
   was capped at 492px. Cap moves to 760px (inside the 900px .sechead), and
   the block padding comes down from clamp(72,9.5vw,150) to clamp(52,6.2vw,96). */
.fx-capitalq-close.sec{ padding-block: clamp(52px, 6.2vw, 96px); }
.fx-capitalq-close .sechead .lede{
  max-width: min(760px, 100%); margin-inline: auto;
}
@media (max-width: 719px){
  .fx-capitalq-close.sec{ padding-block: clamp(48px, 9vw, 72px); }
}

/* ══════════ 20260908a — client corrections round 2 · inv ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   fix-inv.css — 2026-09-05 client correction round · INVESTORS PAGE ONLY
   Items I1 · I2 · I3(verify) · I4 · I5 · I6 from .claude/CHANGES-0904b.md

   Load order on investors.html:
       style.css  →  fix-global.css  →  fix-inv.css   (this file wins ties)
   Prefix: .fx-inv-*   ·   JS hooks: data-fx-inv-*   ·   js/fix-inv.js
   Never edit css/style.css or js/main.js from here — other page agents run in
   parallel and append to those files.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   I1 · HERO — THE WOMAN'S FACE MUST BE BRIGHT
   Client: "I want the face of the woman to be bright. I know you added an
   overlay, but her face needs to come out."

   Two things were burying her, and both had to be fixed — dimming the scrim
   alone is not enough, because the plate itself is a dim interior:

   1 · THE SCRIM WAS FLAT ACROSS HER.  style.css:4023 paints
       linear-gradient(90deg …) that still carries .62 black at 58% and .20 at
       84% — her head sits at ~75% of the width, so a fifth of the light was
       being taken off her face purely to darken a column the copy does not
       even reach (the copy block ends at 47% of the viewport at 1440).
       ON TOP of that a second gradient added .42 black at the TOP of the
       frame, which is exactly where her head is.
       ->  the horizontal ramp now reaches zero by 74%, so the whole right
       third of the frame is clean glass; the top band is cut to a thin strip
       that clears the header links and is gone by 11% of the height, above
       her hairline; the copy column KEEPS its density (.97 → .86 out to 40%)
       so the headline and lede contrast are untouched.

   2 · THE PLATE IS DARK WHERE SHE IS.  So a second copy of the same photo is
       laid over it, exposed up ~2 stops, and MASKED to a soft ellipse over
       her head and shoulders. A duplicate + mask is used instead of a filter
       on the <img> on purpose: a filter on the image would lift the copy
       column too and eat the headline contrast the scrim exists to protect.
       The mask rides on the same element as the background, so it tracks the
       parallax translate exactly and never slides off her.
   ══════════════════════════════════════════════════════════════════════════ */

/* the mask centre, in the coordinate space of .hero__bg (which is 120vh tall
   and starts at -10vh, so viewport-16% reads as box-22%) */
.fx-inv-hero{
  --fx-inv-face-x: 75%;
  --fx-inv-face-y: 22%;
  --fx-inv-face-rx: 27%;
  --fx-inv-face-ry: 29%;
}

/* 1 · the shaped scrim -------------------------------------------------- */
.fx-inv-hero .hero__scrim{
  background:
    /* the copy column keeps its density and then gets out of the way */
    linear-gradient(90deg,
      rgba(8,9,12,.97)  0%,
      rgba(8,9,12,.95) 26%,
      rgba(8,9,12,.86) 40%,
      rgba(8,9,12,.58) 51%,
      rgba(8,9,12,.26) 61%,
      rgba(8,9,12,.07) 69%,
      rgba(8,9,12,0)   76%),
    /* a thin band behind the header links only — gone above her hairline */
    linear-gradient(180deg,
      rgba(8,9,12,.60)  0%,
      rgba(8,9,12,.30) 5.5%,
      rgba(8,9,12,0)    11%),
    /* the ground fade that hands the hero over to the page */
    linear-gradient(0deg,
      var(--bg)         0%,
      rgba(8,9,12,.66) 13%,
      rgba(8,9,12,.10) 36%,
      rgba(8,9,12,0)   52%);
}

/* 2 · the local exposure lift, masked to her ---------------------------- */
.fx-inv-hero .hero__bg{ position: fixed; }        /* re-stated: the ::after is absolute inside it */
.fx-inv-hero .hero__bg img{
  filter: brightness(1.05) saturate(1.04);        /* whisper-level, whole plate */
}
.fx-inv-hero .hero__bg::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("../assets/img/inv-hero2.webp");
  background-size: cover;
  background-position: 56% 30%;                   /* identical to the <img> object-position */
  background-repeat: no-repeat;
  filter: brightness(2.05) contrast(.9) 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 40%, rgba(0,0,0,.55) 68%, 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 40%, rgba(0,0,0,.55) 68%, rgba(0,0,0,0) 100%);
}

/* tall/short frames move her inside the cover crop — nudge the ellipse */
@media (min-width: 901px) and (max-height: 820px){
  .fx-inv-hero{ --fx-inv-face-y: 24%; --fx-inv-face-ry: 32%; }
}
@media (min-width: 1700px){
  .fx-inv-hero{ --fx-inv-face-x: 74%; --fx-inv-face-rx: 24%; }
}

/* MOBILE IS DELIBERATELY LEFT ALONE.
   Below 900px style.css:4077-4087 re-crops the plate to 52% 26% in a 390-wide
   frame: the woman falls almost entirely outside the crop (only hair and a
   shoulder survive at the right edge) so there is no face to lift, while the
   copy block goes FULL width and sits on top of the picture — which is why
   that breakpoint carries a near-opaque scrim. A first attempt here replaced
   that scrim with a lighter one and the headline's white→grey gradient went
   unreadable over the bright window at 390. Both of this item's layers are
   therefore switched off on mobile and style.css's own mobile treatment
   stands untouched. */
@media (max-width: 900px){
  .fx-inv-hero .hero__bg::after{ display: none; }
  .fx-inv-hero .hero__bg img{ filter: none; }
  /* .fx-inv-hero .hero__scrim above ties style.css:4081 on specificity and
     loads later, so it would leak the desktop shape into this breakpoint —
     restate style.css's own mobile scrim verbatim to hand it back. */
  .fx-inv-hero .hero__scrim{
    background:
      linear-gradient(90deg, rgba(8,9,12,.94) 0%, rgba(8,9,12,.86) 46%, rgba(8,9,12,.66) 100%),
      linear-gradient(0deg, var(--bg) 0%, rgba(8,9,12,.72) 22%, rgba(8,9,12,.34) 62%, rgba(8,9,12,.5) 100%);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   I2 · "WHERE YOU ARE TODAY" — ONE POINT IS A DIFFERENT COLOUR + NEEDS HOVER
   Client: "these points that are basically side by side, there's one that is a
   different color, which is not nice. I want it to be the same color as the
   other one. And when I hover over them, I should basically see that I'm
   moving over them."

   The odd one out is the fourth row, "Less time spent investing.":
   style.css:5776 gives it `background: rgba(226,178,76,.10)` and a SOLID blue
   icon while the other three sit on rgba(244,248,251,.03) with a blue-tinted
   icon. Both overrides are removed here, so all four are identical at rest —
   and the blue treatment is moved onto :hover, where it now marks the row the
   cursor is on instead of an arbitrary one.
   ══════════════════════════════════════════════════════════════════════════ */

/* rest state: all four identical (kills the accent row) */
#familiar-rows .fx-investors-row.fx-investors-row--accent{
  background: rgba(244,248,251,.03);
}
#familiar-rows .fx-investors-row.fx-investors-row--accent .fx-investors-row__ic{
  background: rgba(226,178,76,.14);
  border-color: rgba(226,178,76,.5);
  color: var(--blue-lt);
}

/* the hover state, on all four ------------------------------------------ */
#familiar-rows .fx-investors-row{
  position: relative;
  isolation: isolate;
  cursor: default;
  transition: background .3s ease, box-shadow .3s ease;
}
/* a blue rail wipes in along the top edge */
#familiar-rows .fx-investors-row::before{
  content: "";
  position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: var(--blue);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
  z-index: 2;
}
#familiar-rows .fx-investors-row:hover,
#familiar-rows .fx-investors-row:focus-within{
  background: rgba(226,178,76,.13);
  box-shadow: inset 0 0 0 1px rgba(226,178,76,.42);
}
#familiar-rows .fx-investors-row:hover::before,
#familiar-rows .fx-investors-row:focus-within::before{ transform: scaleX(1); }

#familiar-rows .fx-investors-row .fx-investors-row__ic{
  transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
#familiar-rows .fx-investors-row:hover .fx-investors-row__ic,
#familiar-rows .fx-investors-row:focus-within .fx-investors-row__ic{
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(226,178,76,.18), 0 0 22px rgba(226,178,76,.55);
}
#familiar-rows .fx-investors-row .fx-investors-row__t{ transition: color .3s ease; }
#familiar-rows .fx-investors-row:hover .fx-investors-row__t,
#familiar-rows .fx-investors-row:focus-within .fx-investors-row__t{ color: #FFFFFF; }

@media (prefers-reduced-motion: reduce){
  #familiar-rows .fx-investors-row,
  #familiar-rows .fx-investors-row::before,
  #familiar-rows .fx-investors-row__ic,
  #familiar-rows .fx-investors-row__t{ transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   I4 · "LESS WAITING / LESS SCREENING" AS A TRUE SPLIT SCREEN
   Client: "one has a white text, the other has a blue text. The one that has
   white text should have a BLUE background, and the one with blue text should
   have a WHITE background. So it's like a split screen. Less waiting on the
   LEFT with a blue background, less screening on the RIGHT with a white
   background." — two equal halves, edge to edge, no gap between them.

   The block was two centred paragraphs inside `.container`, which can never be
   edge to edge; it is now a direct child of the section (see investors.html)
   so the two halves run the full width with no gutter and no gap.
   ══════════════════════════════════════════════════════════════════════════ */

#there-is-punch.fx-investors-punchwrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;                                   /* "no gap between them" */
  margin-top: clamp(48px, 6vw, 86px);
  margin-bottom: 0;
  width: 100%;
  justify-items: stretch;
  border-block: 1px solid rgba(255,255,255,.08);
}

#there-is-punch .fx-investors-punch{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(200px, 24vw, 330px);
  padding: clamp(40px, 5.4vw, 78px) clamp(18px, 3vw, 54px);
  font-size: clamp(1.28rem, 2.9vw, 2.55rem);
  line-height: 1.14;
  letter-spacing: -.03em;
  /* the site-wide white→grey headline gradient must not run on these two */
  background-image: none;
  -webkit-text-fill-color: currentColor;
}

/* LEFT — blue ground, white ink */
#there-is-punch .fx-investors-punch:first-child{
  background-color: var(--blue);
  color: #FFFFFF;
}
/* RIGHT — white ground, blue ink */
#there-is-punch .fx-investors-punch.fx-investors-punch--blue{
  background-color: #FFFFFF;
  color: var(--blue);
}

/* below 560 two halves would be 160px wide — stack them, blue on top, still
   edge to edge and still gapless */
@media (max-width: 559px){
  #there-is-punch.fx-investors-punchwrap{ grid-template-columns: 1fr; }
  #there-is-punch .fx-investors-punch{ min-height: 0; padding-block: clamp(34px, 11vw, 54px); }
}


/* ══════════════════════════════════════════════════════════════════════════
   I5 · KILL THE DEAD SPACE UNDER "THE FUTURE OF INVESTING…"
   Client: "there's a space underneath it that I don't know what it's for. Move
   this Introducing CapitalQ up to the ending of that section."

   Measured at 1440: the photo band ended at 6157, #there-is ended at 6294
   (137px of section padding-bottom under a full-bleed band that has its own
   158px of internal padding), and #capitalq then spent another 162px before
   its heading — 299px of nothing. The band is the end of the section, so the
   section's bottom padding goes to zero and CapitalQ opens right under it.
   ══════════════════════════════════════════════════════════════════════════ */

#there-is.sec.inv-there{ padding-bottom: 0; }
#there-is #there-is-close.fx-investors-band{ margin-bottom: 0; border-bottom: 0; }
/* style.css:4454 already fights for this section's padding with #capitalq.sec
   .inv-cq — match that specificity so the top padding actually lands */
#capitalq.sec.inv-cq{ padding-top: clamp(44px, 5vw, 74px); }


/* ══════════════════════════════════════════════════════════════════════════
   I6 · THE INNER CIRCLE — THE PHOTO GOES INSIDE THE BORDERED CARD, NOT BEHIND
        THE SECTION
   Client: "that placeholder with the moving glow lines, 'As a member you gain
   access to' — add an image to that placeholder ALONE, not the background.
   Underneath it, black and white, and dim so we can read the text. You might
   have to change the text colour to white."

   So: the photo becomes the background of .cqx-ring__in ONLY (the comet-border
   card), greyscaled and dimmed under a dark plate, and every line inside the
   card switches to white. The constellation canvas and the white section
   ground are deliberately left alone.

   Two painting rules this had to respect:
   · .cqx-ring__in is position:relative; z-index:1, so it owns a stacking
     context — an absolutely positioned ::before paints ABOVE the card's
     non-positioned in-flow children (the checklist), not below them. The
     content is therefore lifted to z-index 2.
   · .cqx-grain is already position:absolute — it must be excluded from that
     lift or `position:relative` would collapse it.
   Photo: marquee-13.jpg, the only unused client boardroom frame (0 references
   across all 7 pages before this), so nothing on the site repeats.
   ══════════════════════════════════════════════════════════════════════════ */

#investor-network .cqx-ring__in.inv-circle__card{
  background: #08090C;
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
  isolation: isolate;
}
/* the photograph, black and white */
#investor-network .inv-circle__card::before{
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: url("../assets/img/marquee-13.webp");
  background-size: cover;
  background-position: 50% 34%;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.08) brightness(.86);
}
/* …and the dim plate that keeps the copy readable. Tuned by measurement, not
   by eye: the plate lands the card's mean ground at L≈0.05, so the white copy
   sits above 15:1 while the photograph is still clearly a photograph. */
#investor-network .inv-circle__card::after{
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,7,9,.70) 0%, rgba(6,7,9,.60) 44%, rgba(6,7,9,.76) 100%),
    linear-gradient(90deg, rgba(6,7,9,.40) 0%, rgba(6,7,9,.18) 46%, rgba(6,7,9,.46) 100%);
}
/* content over the plate — the grain is already absolute, leave its position */
#investor-network .inv-circle__card > :not(.cqx-grain){
  position: relative; z-index: 2;
}
#investor-network .inv-circle__card .cqx-grain{
  z-index: 3; opacity: .05; mix-blend-mode: overlay;
}

/* the copy goes white (the section is .sec--light, so every one of these is
   currently ink — each needs its own reset) */
#investor-network .inv-circle__card .inv-circle__kick,
#investor-network .inv-circle__card .h-sub{
  color: #FFFFFF;
  background-image: none;
  -webkit-text-fill-color: #FFFFFF;
  text-shadow: 0 1px 18px rgba(6,7,9,.6);
}
#investor-network .inv-circle__card .inv-check{
  color: rgba(255,255,255,.93);
}
#investor-network .inv-circle__card .inv-check span{ color: inherit; }
#investor-network .inv-circle__card .inv-check__box{
  background: rgba(226,178,76,.34);
  border-color: rgba(242,207,124,.8);
  color: #F2CF7C;
}

/* ══════════ 20260908a — client corrections round 2 · kc ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   fix-kc.css — 2026-09-08 client round · KNOWLEDGE CENTRE page items
   Linked into knowledge-centre.html ONLY, after style.css and fix-global.css.
   Prefix: .fx-kc-*   ·   JS hooks: data-fx-kc-*
   Items:  K1 (verify only) · K2 (verify only) · K4 (built here)
           K3 lives in css/fix-sqz.css — it is a site-wide item, not a KC one.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════ K1 · "Latest Thinking" photo — VERIFIED, NOT CHANGED ══════════
   Client: "zoom in and centre the woman, she is far right in the source."
   css/fix-global.css already re-frames cl-desk-balcony.jpg with
   `transform: scale(2.05) translate(-25.5%, 25.6%)` on #featured .lt__fig img.
   Re-derived and re-photographed here before accepting it:
     the img lays out 485x279 over a 2000x1116 source, so object-fit:cover maps
     the source at 0.25 and object-position has only 15px of horizontal travel —
     it genuinely cannot move her, the frame has to scale.
     At scale 2.05 the visible window is 236.6 x 136 in the img's own box
     coordinates, running x 247.9-484.5 and y 0.1-136.1.
     She occupies x 310-422 (midpoint 366.3); the window's midpoint is 366.2,
     so she is centred to within a pixel.
     Her hairline is at y 7.5, and the window's top edge is on the image's own
     top edge — the maximum headroom this source contains. Rendered, that is
     15.4px of clear ground above her head in a 279px frame.
   Captured at 2x (caps/fix2-kc/k1-fig.png) and looked at: head whole, centred,
   visible clearance. Nothing to refine — deliberately left alone so the two
   files cannot fight over one image. */


/* ══════════ K2 · library "Research & Reports" panel — VERIFIED ════════════
   Client: the subject is out of frame.
   fix-global.css sets #library-slides .sqz__img[src*="band-honest"] to
   `object-position: 50% 0%`. Re-checked with the panel OPENED (a static
   screenshot of the section only ever shows panel 1) — caps/fix2-kc/
   k2-panel3-open.png — and the value is right and is at the source's limit:
     band-honest.jpg is 1920x2876 portrait; the open panel is 593x340, so cover
     scales the source by 0.309 (WIDTH-bound: 1920 x .309 = 593 exactly, i.e.
     there is no horizontal crop and no horizontal choice to make) and renders
     it 593x889. Only 38% of the height survives, and 0% pins that window to
     the very top of the source, which is the only position that holds his
     face. 50%, the old value, sat on his chest.
   FLAG, honestly: at 0% the top of his hair still meets the frame edge —
   because it meets the edge IN THE SOURCE FILE. The photographer cropped his
   crown; there are ~7 source px (2 rendered px) of hair above the frame line.
   No object-position, scale or translate can invent headroom that the file
   does not contain (scaling up and translating down by the same amount lands
   the hairline back on the same 2-3px). If the client still reads it as "cut",
   the fix is a different photograph for that panel, not another crop value —
   raised in the report rather than swapped unilaterally, because swapping a
   client photo is a content decision. */


/* ══════════ K4 · "Start Here" — drop the grid, keep the photo, pop the chips
   Client: "this grid you added on the image is not it at all. Remove the grid
    but leave the image. And when I hover over those points, make them pop up,
    that kind of stuff."
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · the grid goes. ────────────────────────────────────────────────────
   #resources still carries the <span class="fx-contact-bg__grid"> the pass-39
   agent added; it is aria-hidden decoration, so removing it visually removes
   it entirely. Killed by display, not opacity, so it also stops painting.
   Scoped to #resources — the same span on contact.html #touch is NOT this
   page and the client approved contact.html this round. */
#resources .fx-contact-bg__grid{ display: none !important; }

/* ── 2 · "but leave the image" — and let it actually read. ─────────────────
   The grid was carrying most of the section's texture; with it gone the
   washed photo was the only thing left and it was sitting under an .84/.74
   white veil at .62 opacity, which read as a smudge rather than a picture.
   Lifted a measured, small amount — the veil still holds white behind the
   heading band (0-16%) and behind the footer edge, and thins only across the
   middle where the chips sit. Contrast checked on the capture: "Start Here"
   is #0B0C0E ink and the chip labels are ink on their own near-white glass. */
#resources .fx-contact-bg__img{
  opacity: .72;
  filter: grayscale(.34) saturate(.78) brightness(1.1) contrast(.94);
  /* AND her head goes back on. The moment the photo reads, the old
     `50% 46%` was a decapitated woman standing behind the heading — exactly
     the GL2 complaint, just faint enough to have been missed before.
     cl-desk-glass.jpg is 2000x1080; her head starts at source y150 and she
     spans x1150-1520. Measured frames: 1440x505, 1920x532, 2560x532,
     390x637 — so a cover fit overflows on exactly ONE axis at a time and the
     two halves of object-position can each be set for the case they own:
       y 18% governs the wide viewports (window top lands on source y68 /
         y95 / y120 at 1440 / 1920 / 2560 — 30-82px of clear ground above her
         head at every one of them; 46% started the window at y177, 27px
         BELOW her hairline);
       x 75% governs narrow ones, where there is no vertical crop at all and
         the 661-source-px window would otherwise cut her arm off — at 75%
         the window runs 1004-1665 and her midpoint, 1335, sits on its
         centre, 1334. */
  object-position: 75% 18%;
}
#resources .fx-contact-bg__veil{
  background:
    linear-gradient(180deg,
      #FFFFFF 0%,
      rgba(255,255,255,.90) 15%,
      rgba(255,255,255,.72) 48%,
      rgba(255,255,255,.86) 84%,
      #FFFFFF 100%);
}
/* the blue bloom is the only 10% on this section — it was competing with the
   grid before, now it can be the thing that gives the ground its depth */
#resources .fx-contact-bg__glow{
  background:
    radial-gradient(74% 44% at 50% 4%,  rgba(226,178,76,.15), rgba(226,178,76,0) 70%),
    radial-gradient(56% 42% at 88% 94%, rgba(226,178,76,.10), rgba(226,178,76,0) 72%);
}

/* ── 3 · the six chips POP. ────────────────────────────────────────────────
   style.css gives them translateY(-2px) and a tint, which is not a pop.
   Now: a real 7px lift, the plate goes solid white so it separates from the
   photo, a blue edge, a grounded drop shadow so the lift reads as height, and
   the icon steps up with it. The blue BLOOM is left to .glow::after, which
   every chip already carries and which fix-global.js sizes to the room the
   section's overflow:hidden actually leaves — adding a second bloom here
   would double it. Selector is (1,3,0) so it clears both
   `#resources .reschip:hover` (1,2,0) and `.res--light .reschip:hover`. */
#resources .reschips .reschip{
  position: relative;
  transition:
    transform .3s cubic-bezier(.22,.61,.36,1),
    box-shadow .3s ease,
    background .25s ease,
    border-color .25s ease;
}
#resources .reschips .reschip:hover,
#resources .reschips .reschip:focus-visible{
  transform: translateY(-7px);
  background: #FFFFFF;
  border-color: var(--blue);
  box-shadow:
    inset 0 0 0 1px rgba(226,178,76,.28),   /* the blue edge, doubled inward   */
    0 20px 34px -20px rgba(11,20,44,.55),  /* the ground shadow = the height  */
    0 3px 10px -6px rgba(11,20,44,.35);
  /* rise above the neighbouring chips so the .glow bloom carries over them
     instead of being sliced where the next chip starts (the GL1 lesson).
     fix-global.js tags this element .fx-g-rise for the same reason; this is
     the same value, declared here so the chips still behave with JS off. */
  z-index: 4;
}
#resources .reschips .reschip__ic{
  transition: transform .3s cubic-bezier(.22,.61,.36,1), color .25s ease;
}
#resources .reschips .reschip:hover .reschip__ic,
#resources .reschips .reschip:focus-visible .reschip__ic{
  transform: scale(1.14);
  color: var(--blue);
}
/* keyboard users get the same thing, plus a ring they can actually see */
#resources .reschips .reschip:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  #resources .reschips .reschip,
  #resources .reschips .reschip__ic{ transition: none; }
  #resources .reschips .reschip:hover,
  #resources .reschips .reschip:focus-visible{ transform: none; }
  #resources .reschips .reschip:hover .reschip__ic,
  #resources .reschips .reschip:focus-visible .reschip__ic{ transform: none; }
}

/* touch: no hover, so the lift would stick after a tap. The edge and the
   plate still answer the press. */
@media (hover: none){
  #resources .reschips .reschip:hover{ transform: none; }
}

/* ══════════ 20260915a — ACCENT SWAP: FDN blue -> Talent Capital yellow ══════════
   Every blue literal was remapped: #2554e8 -> #E2B24C · #7ea0ff/#8fb0ff/#b6cbff/#3f6cf5/#4a7bff -> #F2CF7C ·
   #1c3fb8/#1b3fb0 -> #C99A36 · #0a1130 -> #0A0A0B · rgba(37,84,232,a) -> rgba(226,178,76,a) ·
   rgba(126,160,255,a) -> rgba(242,207,124,a). Backup: _backup/20260915a-pre-yellow/.
   Talent Capital's rule, mirrored: TEXT ON A YELLOW FILL IS DARK #0A0A0B, NEVER WHITE (white on #E2B24C is 1.3:1).
   These are the rules that paint a solid fill AND set light text in the same declaration block. */
.btn--solid, .btn--solid:hover, .btn--solid:focus-visible,
.fshow__numbtn.is-on, .mcard__chip, .sqz__btn, .bhq__q,
.pat__node:hover .pat__ico, .scar__btn:hover, .plat2 .scar__btn:hover, .hdr2__link:hover,
.appglass__q, .inv-deck--blue, .inv-bento__tile--blue, .inv-tile--blue .inv-tile__plate,
.scard--light:hover .fx-for-sico, .fx-investors-row--accent .fx-investors-row__ic,
.plat2 .fx-cq-sqz .sqz__btn,
#familiar-rows .fx-investors-row:hover .fx-investors-row__ic,
#familiar-rows .fx-investors-row:focus-within .fx-investors-row__ic,
#there-is-punch .fx-investors-punch:first-child{
  color: var(--accent-on); -webkit-text-fill-color: currentColor;
}
.btn--solid:hover{ background: var(--accent-hov); }

/* ══════════ 20260915b — ACCENT SWAP pass 2: legibility on the new yellow ══════════
   Pass 1 (20260915a) remapped every blue literal, so anything that set WHITE type on a blue FILL now
   sets it on #E2B24C at ~1.3:1. Talent Capital's rule, mirrored: type on a yellow fill is ink #0A0A0B;
   secondary type is the same ink at reduced strength (Talent Capital: rgba(10,10,11,.58-.72)).
   SPECIFICITY: several of these headings also carry the white-to-grey gradient guard (selectors up to
   0,5,0). ":is(<fill>, #accent-ink)" borrows id-level specificity from an id that never exists in the
   DOM, so the resets win without !important. Measured before/after with .claude/contrast.js. */

/* 1 · Approach (for-businesses #approach) + Journey (capitalq #journey) — the yellow cards */
:is(.scard--blue, #accent-ink) .scard__ix{ color: rgba(10,10,11,.62); -webkit-text-fill-color: currentColor; }
:is(.scard--blue, #accent-ink) :is(.scard__t, .scard__t span){ background:none; -webkit-text-fill-color: currentColor; color:#0A0A0B; }
:is(.scard--blue, #accent-ink) .scard__d{ color: rgba(10,10,11,.8); -webkit-text-fill-color: currentColor; }
:is(.scard--blue, #accent-ink) .fx-for-sico{ color:#0A0A0B; border-color: rgba(10,10,11,.3); background: rgba(10,10,11,.06); }
:is(.scard--blue, #accent-ink):hover .fx-for-sico{ color: var(--accent); background:#0A0A0B; border-color:#0A0A0B; }
:is(.scard--blue, #accent-ink) .fx-capitalq-jic{ color:#0A0A0B; }
.scard--light .fx-for-sico{ color: var(--accent-deep); border-color: rgba(122,87,20,.32); background: rgba(226,178,76,.16); }
.scard--light .fx-capitalq-jic{ color: var(--accent-deep); }

/* 2 · "Meet With Context" (index #first-meeting) */
:is(.mcard--blue, #accent-ink) .mcard__mid{ color:#0A0A0B; -webkit-text-fill-color: currentColor; }
:is(.mcard--wide, #accent-ink) .mcard__widet{ background:none; -webkit-text-fill-color: currentColor; color:#0A0A0B; }
:is(.mcard--wide, #accent-ink) .mcard__widet-b{ color: rgba(10,10,11,.6); -webkit-text-fill-color: currentColor; }
:is(.mcard--wide, #accent-ink) .mcard__widesub{ color: rgba(10,10,11,.76); -webkit-text-fill-color: currentColor; }
:is(.mcard--wide, #accent-ink) .mcard__widecta{ color:#0A0A0B; -webkit-text-fill-color: currentColor; }
:is(.mcard--wide, #accent-ink) .mcard__circle{ color:#0A0A0B; }

/* 3 · The yellow resource card (index #knowledge bento card 1) */
#knowledge .kbento > :nth-child(1) .kcard2__t, .kcard2--blue .kcard2__t{ background:none; -webkit-text-fill-color: currentColor; color:#0A0A0B; }
#knowledge .kbento > :nth-child(1) .kcard2__d, .kcard2--blue .kcard2__d{ color: rgba(10,10,11,.76); -webkit-text-fill-color: currentColor; }
#knowledge .kbento > :nth-child(1) .kcard2__ico, .kcard2--blue .kcard2__ico{ color:#0A0A0B; background: rgba(10,10,11,.08); }
.kcard2--white .kcard2__ico{ color: var(--accent-deep); }

/* 4 · The Honest Questions ticker (for-businesses #be-honest) */
:is(.bhq__bar, #accent-ink) .bhq__q{ color: rgba(10,10,11,.88); -webkit-text-fill-color: currentColor; }
:is(.bhq__bar, #accent-ink) .bhq__q:hover{ color:#0A0A0B; }
:is(.bhq__bar, #accent-ink) .bhq__q::after{ color: rgba(10,10,11,.45); }
.bhq__bar, .bhq__bar.fx-for-tick{ box-shadow: 0 18px 46px -26px rgba(226,178,76,.5); }

/* 5 · "Too Much Capital" (index #connection) — the client's favourite. Two-tone kept: the punch line
   "Too Little Connection." full ink, the two set-up lines the same ink at 55% (about 4:1 at 48px). */
:is(.rgap2__panel, #accent-ink) .rgap2__line{ color: rgba(10,10,11,.55); -webkit-text-fill-color: currentColor; }
:is(.rgap2__panel, #accent-ink) .rgap2__line--ink{ color:#0A0A0B; }
#connection .rgap2__panel{ border-color: rgba(10,10,11,.3); }

/* 6 · CapitalQ yellow feature-card variant */
:is(.fx-capitalq-t--blue, #accent-ink) .fx-capitalq-t__ic{ color:#0A0A0B; background: rgba(10,10,11,.08); }
:is(.fx-capitalq-t--blue, #accent-ink) .fx-capitalq-t__ix{ color: rgba(10,10,11,.6); }
:is(.fx-capitalq-t--blue, #accent-ink) .fx-capitalq-t__t{ background:none; -webkit-text-fill-color: currentColor; color:#0A0A0B; }
:is(.fx-capitalq-t--blue, #accent-ink) .fx-capitalq-t__sub{ color: rgba(10,10,11,.86); }
:is(.fx-capitalq-t--blue, #accent-ink) .fx-capitalq-t__d{ color: rgba(10,10,11,.78); }
:is(.fx-capitalq-t--blue, #accent-ink) .fx-capitalq-t__punch{ color:#0A0A0B; }

/* 7 · Investors — the network CTA was pinned white by `.fx-investors-circle .btn--solid` (0,2,0), which
   out-ranked pass 1's `.btn--solid` (0,1,0); one tick-box border was a blue pass 1's list missed; and the
   disabled carousel arrow was yellow at 30% opacity, which reads as an olive square. */
.fx-investors-circle .btn--solid, .fx-investors-circle .btn--solid *{ color: var(--accent-on); -webkit-text-fill-color: currentColor; }
#investor-network .inv-circle__card .inv-check__box{ border-color: rgba(242,207,124,.7); }
.fx-investors-sqz .sqz__btn:disabled{ opacity:1; background: rgba(244,248,251,.08); color: rgba(244,248,251,.34); -webkit-text-fill-color: currentColor; }

/* 8 · SMALL yellow type and marks on LIGHT grounds -> --accent-deep, exactly as Talent Capital does for its
   kickers, ticks, arrows and icons. LARGE sub-heads and emphasised words stay plain #E2B24C on white:
   that is the client's explicit choice on Talent Capital ("I just want the yellow text"). */
.rgap__stat .b{ color: var(--accent-deep); }
.touch--light .kick{ color: var(--accent-deep); }
.touch--light .fld__lbl i{ color: var(--accent-deep); }
.touch--light .fld__in:focus{ border-color: var(--accent-deep); }
.touch--light .chip input:checked + span{ border-color: var(--accent-deep); color: var(--accent-deep); background: rgba(226,178,76,.14); }
.touch--light .ftr__link:hover{ color: var(--accent-deep); }
.touch--light .fq__ic{ color: var(--accent-deep); background: rgba(226,178,76,.16); }
.fx-cq-slide__ic{ color: var(--accent-deep); border-color: rgba(122,87,20,.3); background: rgba(226,178,76,.14); }
.fx-cq-slide__sub{ color: var(--accent-deep); }
.fx-cq-slide .tick::before{ color: var(--accent-deep); border-color: rgba(122,87,20,.36); background: rgba(226,178,76,.16); }

/* 9 · Photo washes. Blue at 46% over a dark photo read as navy; yellow at 46% reads as olive. Mirror
   Talent Capital's library panel (true-colour photo, neutral dark shade, yellow index + rail): keep a
   faint warm lift in the label corner, and keep the yellow rail and halo the client praised. */
#intelligence .sqz__panel.is-open .sqz__shade,
#advantage-slides .sqz__panel.is-open .sqz__shade,
#library-slides .sqz__panel.is-open .sqz__shade,
.fx-investors-sqz .sqz__panel.is-open .sqz__shade,
.fx-cq-sqz .sqz__panel.is-open .sqz__shade{
  background:
    linear-gradient(4deg, rgba(226,178,76,.18) 0%, rgba(226,178,76,0) 32%),
    linear-gradient(180deg, rgba(10,10,11,.42) 0%, rgba(10,10,11,.06) 38%, rgba(10,10,11,.74) 100%);
}

/* 10 · Decorative accents that turned olive. A translucent yellow on near-black can only read as mud,
   so each becomes either a faint warm glow (footer) or a deliberate solid accent (the tilted back card). */
:is(.ftr__blob, #accent-ink){ opacity:.06; }
.meetglass__back{ background: var(--accent); }

/* ══════════ 20260915d — client feedback batch 1 (homepage section 2) + persona tab colour ══════════
   Source: .claude/CLIENT-FEEDBACK-0915.md */

/* HF6 - the client does not want the box around the persona body copy: plain text left, photo right.
   Strips the glass panel, its rails, ring and halo from the stage only; the tabs keep their styling. */
#familiar .pside__stage.dotglass{ background:transparent; border-color:transparent; box-shadow:none; filter:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; }
#familiar .pside__stage.dotglass.dotglass--still::before,
#familiar .pside__stage.dotglass.dotglass--still::after,
#familiar .pside__stage.glow::after{ display:none; }
#familiar .pside__stage > span[aria-hidden="true"]{ display:none; }
#familiar .ppane2__body{ padding: 0 clamp(26px, 3.4vw, 48px) 0 0; }

/* Colour swap - the active persona tab was white type on a translucent yellow gradient (reads olive, and
   the contrast audit skips gradient grounds). Talent Capital marks a selected item with a solid yellow fill
   and ink type, so the active tab does the same. */
#familiar .pside__tab.is-on{ background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
#familiar .pside__tab.is-on *{ color: var(--accent-on); -webkit-text-fill-color: currentColor; }

/* ══════════ 20260915e — HF6 follow-up: phone spacing once the persona box is gone ══════════
   Below 880px the photo stacks ABOVE the bullets (style.css .ppane2__fig order:-1). The box padding used to
   separate them; without it the first bullet touched the photo, and the desktop right padding narrowed the
   text column on one side only. */
@media (max-width: 880px){
  #familiar .ppane2__body{ padding: 22px 0 0; }
}

/* ══════════ 20260917a — client feedback batch 2, central prep (.claude/CLIENT-FEEDBACK-0917.md) ══════════
   S2-4 · #familiar closing lines: "make that bigger, especially the one that is down there in yellow". */
#familiar .pside__tail .h-mid{ font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height:1.06; }
#familiar .pside__tail .lede{ font-size: clamp(1.45rem, 2.9vw, 2.45rem); font-weight:600; line-height:1.18;
  letter-spacing:-.015em; max-width:none; margin-top: clamp(10px, 1.2vw, 16px); }

/* ══════════ 20260917b · gap — merged from css/fix-0917-gap.css (feedback batch 2) ══════════ */
/* Client feedback batch 2 · SECTION 3 — #problem + #connection (.claude/CLIENT-FEEDBACK-0917.md P1–P4, C1–C3)

   #problem, rebuilt in the document's order: "Capital Isn't the Problem." first, then L35, L36–L38, L39,
   L40 (the three "exists" lines), L41. Removed as not in Section 3 of the document: "The Real Gap",
   "FDN IS THE BRIDGE", the "Capital. Intelligence. Opportunity." label and the button.
   The city plate: the empty bottom-left space is filled, the rounded SVG notches are gone and every corner
   is square. The one remaining notch (top-left) is where the headline sits, so the shape still "fits". */

#problem .rgap3__stage{
  --nw: 54%;                                   /* notch width  — the headline column */
  --nh: clamp(230px, 20vw, 300px);             /* notch height — headline + lead line */
  position: relative;
  height: clamp(470px, 44vw, 640px);
}
#problem .rgap3__plate{
  position: absolute; inset: 0; z-index: 0;
  background: #C9CED6 url('../assets/img/rgap-city.webp') 50% 100% / cover no-repeat;
  filter: grayscale(1) contrast(1.06);
  clip-path: polygon(var(--nw) 0, 100% 0, 100% 100%, 0 100%, 0 var(--nh), var(--nw) var(--nh));
}
#problem .rgap3__head{
  position: absolute; left: 0; top: 0; z-index: 1;
  width: calc(var(--nw) - clamp(24px, 3vw, 48px));
  height: calc(var(--nh) - clamp(18px, 2.2vw, 30px));
  display: flex; flex-direction: column; justify-content: flex-start;
}
#problem .rgap3__h{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.3rem, 4.3vw, 3.9rem); line-height: 1.02; letter-spacing: -.03em;
  color: #0E1319; margin: 0;
}
#problem .rgap3__lead{
  margin-top: clamp(12px, 1.4vw, 20px); max-width: 30ch;
  font-size: clamp(1.02rem, 1.45vw, 1.32rem); font-weight: 600; line-height: 1.38; letter-spacing: -.01em;
  color: #0E1319;
}

#problem .rgap3__grid{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
  margin-top: clamp(34px, 4vw, 56px);
}
#problem .rgap3__col p{ font-size: 1.03rem; line-height: 1.6; color: #4A5461; }
#problem .rgap3__col > p + p{ margin-top: 4px; }
#problem .rgap3__stats{
  margin-top: clamp(16px, 1.8vw, 22px); padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px solid rgba(14,19,25,.14);
}
#problem .rgap3__stats p{ font-size: 1.03rem; line-height: 1.5; color: #4A5461; }
#problem .rgap3__stats b{ font-weight: 700; color: var(--accent-deep); }
#problem .rgap3__col p.rgap3__miss{
  border-left: 3px solid var(--accent); padding-left: clamp(16px, 1.6vw, 22px);
  font-size: clamp(1.18rem, 1.7vw, 1.55rem); font-weight: 600; line-height: 1.34;
  letter-spacing: -.012em; color: #0E1319;
}

@media (max-width: 880px){
  #problem .rgap3__stage{ height: auto; display: flex; flex-direction: column; gap: 22px; }
  #problem .rgap3__head{ position: static; width: auto; height: auto; }
  #problem .rgap3__lead{ max-width: none; }
  #problem .rgap3__plate{ position: relative; inset: auto; height: clamp(220px, 58vw, 380px); clip-path: none; }
  #problem .rgap3__grid{ grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
}

/* #connection — C1 the swirl reads again: the white-stroke artwork is turned black and laid on plainly at low
   strength (overlay/screen of a black layer on yellow barely registers). */
#connection .rgap2__panel::before{ filter: brightness(0); mix-blend-mode: normal; opacity: .085; }

/* C2 — "Too Much Capital." and "Too Much Opportunity." in white on the yellow (client's choice).
   "Too Little Connection." keeps the ink. Beats the id-level :is(.rgap2__panel, #accent-ink) rule. */
#connection .rgap2__panel .rgap2__line:not(.rgap2__line--ink){ color: #fff; -webkit-text-fill-color: currentColor; }

/* C3 — the light grey band under the panel is gone: the panel's bottom edge meets the next section. */
#connection.sec.rgap2{ padding-bottom: 0; }

/* ══════════ 20260917c · help — merged from css/fix-0917-help.css (feedback batch 2) ══════════ */
/* Client feedback batch 2 · SECTION 4 — #help (.claude/CLIENT-FEEDBACK-0917.md H1–H5)
   Header centred: "How Can We Help You?" on one line with its sub-headline under it; the side copy moved down
   under the header, centred. Cards: photo (dimmer) + kicker + headline only; body copy and the Explore CTA sit
   behind Read More.

   The READ MORE CARD (.rmcard) is a shared pattern — #capitalq uses it too — so its base rules are written
   once here, unscoped by section, under their own class names that nothing else on the site uses. */

#help .help3__head{ text-align: center; margin: 0 auto; }
#help .help3__h{
  white-space: nowrap; margin-inline: auto;
  font-size: clamp(1.6rem, 7vw, 4.6rem); line-height: 1.04;
}
#help .help3__sub{ margin: clamp(10px, 1.2vw, 16px) auto 0; max-width: none; text-align: center; }
#help .help3__intro{
  max-width: 860px; margin: clamp(22px, 2.6vw, 34px) auto clamp(36px, 4.4vw, 60px);
  text-align: center;
}
#help .help3__sides p{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.02rem, 1.4vw, 1.24rem); line-height: 1.5; letter-spacing: -.01em; color: var(--txt-hi);
}
#help .help3__body{
  max-width: 66ch; margin: clamp(14px, 1.6vw, 20px) auto 0;
  font-size: .98rem; line-height: 1.7; color: var(--txt);
}
#help .help3__grid{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px);
}
@media (max-width: 980px){
  #help .help3__grid{ grid-template-columns: 1fr; }
}

/* ── the Read More card ─────────────────────────────────────────────────── */
.rmcard{
  position: relative; isolation: isolate; overflow: hidden; display: flex;
  border: 1px solid var(--line); aspect-ratio: 4 / 5;
}
.rmcard__img{
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s ease;
}
.rmcard:hover .rmcard__img{ transform: scale(1.045); }
/* dimmer than before so the headline pops (client) */
.rmcard__veil{
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,10,11,.96) 0%, rgba(10,10,11,.8) 34%, rgba(10,10,11,.56) 66%, rgba(10,10,11,.42) 100%);
}
.rmcard__veil::after{
  content: ''; position: absolute; inset: 0; background: rgba(10,10,11,.62);
  opacity: 0; transition: opacity .45s ease;
}
.rmcard.is-open .rmcard__veil::after{ opacity: 1; }
.rmcard__content{
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: clamp(22px, 2.4vw, 32px);
}
.rmcard__kick{
  font-family: var(--font-mono); font-weight: 500; font-size: .7rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
}
.rmcard__title{
  margin-top: 10px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.35rem, 1.95vw, 1.8rem); line-height: 1.18; letter-spacing: -.02em; color: #fff;
}
.rmcard__more{
  display: grid; grid-template-rows: 0fr; width: 100%;
  transition: grid-template-rows .5s cubic-bezier(.22,.61,.36,1);
}
.rmcard.is-open .rmcard__more{ grid-template-rows: 1fr; }
.rmcard__inner{
  min-height: 0; overflow: hidden;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.rmcard.is-open .rmcard__inner{ opacity: 1; transform: none; transition-delay: .08s; }
.rmcard__inner > *:first-child{ margin-top: 14px; }
.rmcard__desc{ font-size: .95rem; line-height: 1.62; color: rgba(244,248,251,.9); }
.rmcard__desc + .rmcard__desc{ margin-top: 9px; }
.rmcard__cta{ margin-top: 18px; margin-bottom: 4px; padding: 12px 20px; font-size: .88rem; }
.rmcard__toggle{
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 6px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  transition: color .25s ease;
}
.rmcard__plus{
  position: relative; width: 26px; height: 26px; flex: none;
  border: 1px solid rgba(255,255,255,.45);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), border-color .25s ease, background-color .25s ease;
}
.rmcard__plus::before, .rmcard__plus::after{
  content: ''; position: absolute; left: 50%; top: 50%; background: currentColor;
  transform: translate(-50%, -50%);
}
.rmcard__plus::before{ width: 11px; height: 1.5px; }
.rmcard__plus::after{ width: 1.5px; height: 11px; }
.rmcard__toggle:hover, .rmcard__toggle:focus-visible{ color: var(--accent); }
.rmcard__toggle:hover .rmcard__plus, .rmcard__toggle:focus-visible .rmcard__plus{ border-color: var(--accent); }
.rmcard__toggle:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; }
.rmcard.is-open .rmcard__plus{ transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--accent-on); }

@media (max-width: 980px){
  .rmcard{ aspect-ratio: auto; min-height: clamp(340px, 92vw, 460px); }
}
@media (prefers-reduced-motion: reduce){
  .rmcard__more, .rmcard__inner, .rmcard__plus, .rmcard__veil::after, .rmcard__img{ transition: none; }
}

/* ══════════ 20260917d · advantage — merged from css/fix-0917-advantage.css (feedback batch 2) ══════════ */
/* Client feedback batch 2 · SECTION 5 — #intelligence + #the-name (.claude/CLIENT-FEEDBACK-0917.md A1–A6)
   The Advantage: all copy on the left, a phone-mockup slot on the right (Dara is generating the image);
   carousel arrows flank the carousel, previous left and next right; "Discovery is only the beginning.
   Understanding builds conviction." closes the section as its drop-mic line.
   The name band: white runs edge to edge, no dark gap under it, and the globe is drawn in ink on white. */

/* ── image slot shared with #capitalq: a real <img>; while the file is missing the frame shows a placeholder ── */
.phframe{ position: relative; margin: 0; display: grid; place-items: center; }
.phframe img{ display: block; width: 100%; height: auto; }
.phframe__label{ display: none; }
.phframe.is-empty{
  aspect-ratio: 4 / 5;
  border: 1px dashed rgba(226,178,76,.5);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px);
}
.phframe.is-empty img{ display: none; }
.phframe.is-empty::before{
  content: ''; width: 42%; aspect-ratio: 9 / 19;
  border: 2px solid rgba(244,248,251,.24); box-shadow: inset 0 0 0 7px rgba(244,248,251,.04);
}
.phframe.is-empty .phframe__label{
  display: block; position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(226,178,76,.85);
}

/* ── #intelligence: two columns ── */
#intelligence .adv3__head{
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(32px, 5vw, 84px); align-items: center;
  margin-bottom: clamp(44px, 5.4vw, 80px);
}
#intelligence .adv3__sub{ margin-top: 12px; }
#intelligence .adv3__lead{ margin-top: 18px; }
#intelligence .adv3__p{ margin-top: 16px; max-width: 62ch; font-size: 1rem; line-height: 1.7; color: var(--txt); }
#intelligence .adv3__attn{
  margin-top: 20px; padding-left: 16px; border-left: 3px solid var(--accent);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.18rem, 1.7vw, 1.5rem); line-height: 1.3; letter-spacing: -.012em; color: var(--txt-hi);
}
#intelligence .adv3__phone{ width: min(100%, 420px); justify-self: center; }

/* ── the carousel: previous on the left, next on the right ── */
#intelligence .adv3__sqz{ margin-top: 0; }
#intelligence .adv3__stage{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(12px, 1.6vw, 22px);
}
#intelligence .adv3__arrow{ width: 52px; height: 52px; }
#intelligence .adv3__arrow svg{ width: 18px; height: 18px; }

/* ── the drop-mic line ── */
#intelligence .adv3__drop{
  margin: clamp(64px, 8vw, 124px) auto 0; text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 4rem); line-height: 1.06; letter-spacing: -.03em; color: #fff;
}
#intelligence .adv3__drop .tblue{ display: block; color: var(--accent); }

@media (max-width: 880px){
  #intelligence .adv3__head{ grid-template-columns: 1fr; }
  #intelligence .adv3__phone{ width: min(78%, 340px); }
  #intelligence .adv3__stage{ grid-template-columns: minmax(0, 1fr); position: relative; }
  #intelligence .adv3__arrow{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; }
  #intelligence .adv3__arrow--prev{ left: 8px; }
  #intelligence .adv3__arrow--next{ right: 8px; }
}

/* ── #the-name: a full-width white band ── */
#the-name.sec.adv-reveal{ background: #FFFFFF; padding-block: clamp(52px, 6vw, 92px); }
#the-name.adv-reveal .nameglow{
  background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0;
  margin: 0; overflow: visible; display: block;
}
#the-name.adv-reveal .nameglow__grid{
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 84px); align-items: center;
}
#the-name.adv-reveal .nameglow__copy{ max-width: none; }
#the-name.adv-reveal .nameglow__globe{
  position: relative; right: auto; bottom: auto; width: 100%; max-width: 560px; margin: 0 0 0 auto;
}
#the-name.adv-reveal .fdn-earth{ display: block; width: 100%; height: auto; max-width: none; }
@media (max-width: 880px){
  #the-name.adv-reveal .nameglow__grid{ grid-template-columns: 1fr; }
  #the-name.adv-reveal .nameglow__globe{ width: min(86%, 440px); margin: 8px auto 0; }
}

/* ══════════ 20260917e · capitalq — merged from css/fix-0917-capitalq.css (feedback batch 2) ══════════ */
/* Client feedback batch 2 · SECTION 6 — #capitalq (.claude/CLIENT-FEEDBACK-0917.md Q1–Q5)
   "Introducing CapitalQ™" massive, one line, centred, with the body copy centred under it; a slot for the
   CapitalQ character Dara is supplying; the two image cards use the Read More card (base rules live with #help);
   the two feature lanes are slower; the "More Than Matching" table is removed (client cut L119–L129). */

#capitalq.sec{ padding-bottom: clamp(72px, 9vw, 130px); }
#capitalq .cq3__head{ text-align: center; max-width: 1100px; margin: 0 auto; }
#capitalq .cq3__h{
  white-space: nowrap; margin-inline: auto;
  font-size: clamp(1.9rem, 6.6vw, 6rem); line-height: 1.02; letter-spacing: -.035em;
}
#capitalq .cq3__sub{ margin: clamp(12px, 1.4vw, 20px) auto 0; max-width: none; text-align: center; }
#capitalq .cq3__body{
  max-width: 66ch; margin: clamp(14px, 1.6vw, 20px) auto 0;
  font-size: 1rem; line-height: 1.7; color: var(--txt);
}
#capitalq .cq3__pledge{
  margin: 14px auto 0; max-width: 60ch;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.02rem, 1.3vw, 1.16rem); color: var(--txt-blue);
}

/* the character slot — square frame while the artwork is missing */
#capitalq .cq3__char{ width: min(300px, 70%); margin: clamp(28px, 3.4vw, 44px) auto clamp(30px, 3.6vw, 48px); }
#capitalq .cq3__char.is-empty{ aspect-ratio: 1 / 1; }
#capitalq .cq3__char.is-empty::before{ width: 36%; aspect-ratio: 3 / 4; }

#capitalq .cq3__grid{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px); align-items: start;
}
#capitalq .rmcard{ aspect-ratio: auto; min-height: clamp(420px, 34vw, 520px); }
#capitalq .rmcard__img{ filter: grayscale(1) brightness(.92); transition: transform .6s ease, filter .6s ease; }
#capitalq .rmcard:hover .rmcard__img, #capitalq .rmcard.is-open .rmcard__img{ filter: grayscale(.2) brightness(.95); }
#capitalq .rmcard__punch{ font-family: var(--font-display); font-weight: 500; color: var(--txt-blue); }

#capitalq .cq3__standard{ margin: clamp(36px, 4.5vw, 56px) auto 0; text-align: center; }
#capitalq .cq3__band{ margin-top: clamp(30px, 3.6vw, 48px); }

@media (max-width: 940px){
  #capitalq .cq3__grid{ grid-template-columns: 1fr; }
  #capitalq .rmcard{ min-height: clamp(340px, 92vw, 460px); }
}

/* ══════════ 20260917f · knowledge — merged from css/fix-0917-knowledge.css (feedback batch 2) ══════════ */
/* Client feedback batch 2 · KNOWLEDGE CENTRE — #knowledge (.claude/CLIENT-FEEDBACK-0917.md K1–K3)
   Sub-titles removed (client cut L158–L159). LEFT: the heading, the body copy under it, then the closing
   statement + CTA. RIGHT: the five resource icons travel slowly around a circle; hover / focus / tap on an icon
   pauses the orbit and shows that resource's name + description in the centre. Square tiles (square-corner
   rule); the rings are SVG circles, which the border-radius guard does not touch. */

#knowledge.sec.kc3{ background: var(--bg); }
#knowledge .kc3__grid{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 90px); align-items: center;
}
#knowledge .kc3__h{ font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 1.02; }
#knowledge .kc3__body{
  margin-top: clamp(16px, 1.8vw, 24px); max-width: 52ch;
  font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.7; color: var(--txt);
}
#knowledge .kc3__close{
  margin-top: clamp(28px, 3.4vw, 44px); padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line);
}
#knowledge .kc3__statement{ font-size: clamp(1.4rem, 2.3vw, 2.1rem); line-height: 1.16; }
#knowledge .kc3__statement .tblue{ color: var(--accent); }
#knowledge .kc3__cta{ margin-top: clamp(18px, 2vw, 26px); }
#knowledge .kc3__cta .btn--glass{ background: rgba(244,248,251,.04); color: var(--txt-hi); border-color: rgba(244,248,251,.3); }
#knowledge .kc3__cta .btn--glass:hover{ color: var(--accent); border-color: var(--accent); }

/* ── the orbit ── */
#knowledge .korb{
  --ns: 66px;                       /* node size */
  --spin: 70s;
  position: relative; width: min(100%, 580px); aspect-ratio: 1 / 1; margin-left: auto;
}
#knowledge .korb::before{
  content: ''; position: absolute; inset: 16%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(226,178,76,.13), rgba(226,178,76,.04) 60%, transparent 100%);
}
#knowledge .korb__rings{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#knowledge .korb__ring{ fill: none; stroke: rgba(244,248,251,.16); stroke-width: .22; }
#knowledge .korb__dash{
  fill: none; stroke: rgba(226,178,76,.42); stroke-width: .28; stroke-dasharray: .6 1.8;
  animation: korbDash 40s linear infinite;
}
@keyframes korbDash{ to{ stroke-dashoffset: -48; } }
@keyframes korbSpin{ to{ transform: rotate(360deg); } }

#knowledge .korb__spin{ position: absolute; inset: 0; animation: korbSpin var(--spin) linear infinite; }
#knowledge .korb__slot{ position: absolute; inset: 0; transform: rotate(var(--a)); pointer-events: none; }
#knowledge .korb__node{
  position: absolute; left: calc(50% + 41.5% - var(--ns) / 2); top: calc(50% - var(--ns) / 2);
  width: var(--ns); height: var(--ns); padding: 0; cursor: pointer; pointer-events: auto;
  transform: rotate(calc(-1 * var(--a)));
  background: rgba(18,19,22,.92); border: 1px solid rgba(244,248,251,.2); color: var(--accent);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#knowledge .korb__ico{
  display: grid; place-items: center; width: 100%; height: 100%;
  animation: korbSpin var(--spin) linear infinite reverse;
}
#knowledge .korb__ico svg{ width: 44%; height: 44%; }
#knowledge .korb__node:hover, #knowledge .korb__node:focus-visible, #knowledge .korb__node.is-on{
  background: var(--accent); border-color: var(--accent); color: var(--accent-on);
  box-shadow: 0 0 0 6px rgba(226,178,76,.14), 0 0 38px rgba(226,178,76,.45);
}
#knowledge .korb__node:focus-visible{ outline: 2px solid #fff; outline-offset: 4px; }
#knowledge .korb.is-paused .korb__spin,
#knowledge .korb.is-paused .korb__ico{ animation-play-state: paused; }

#knowledge .korb__center{
  position: absolute; left: 50%; top: 50%; width: 50%; height: 56%;
  transform: translate(-50%, -50%); text-align: center; pointer-events: none;
}
#knowledge .korb__panel{
  position: absolute; left: 0; right: 0; top: 50%;
  opacity: 0; transform: translateY(-50%) translateY(10px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
#knowledge .korb__panel.is-on{ opacity: 1; transform: translateY(-50%); }
#knowledge .korb__mark{ display: block; width: 12px; height: 12px; margin: 0 auto 14px; background: var(--accent); box-shadow: 0 0 22px rgba(226,178,76,.7); }
#knowledge .korb__kick{
  font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--txt-hi);
}
#knowledge .korb__t{
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.02rem, 1.6vw, 1.42rem);
  line-height: 1.2; letter-spacing: -.015em; color: #fff;
}
#knowledge .korb__d{ margin-top: 10px; font-size: clamp(.8rem, 1vw, .92rem); line-height: 1.55; color: var(--txt); }

@media (max-width: 960px){
  #knowledge .kc3__grid{ grid-template-columns: 1fr; }
  #knowledge .korb{ margin: 8px auto 0; width: min(100%, 470px); }
}
@media (max-width: 560px){
  #knowledge .korb{ --ns: 50px; }
  #knowledge .korb__center{ width: 62%; height: 62%; }
  #knowledge .korb__t{ font-size: .98rem; }
  #knowledge .korb__d{ margin-top: 6px; font-size: .76rem; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce){
  #knowledge .korb__spin, #knowledge .korb__ico, #knowledge .korb__dash{ animation: none; }
  #knowledge .korb__panel{ transition: none; }
}

/* ══════════ 20260917g · aar — merged from css/fix-0917-aar.css (feedback batch 2) ══════════ */
/* ══════════ fix-0917-aar · #africa-arabia — "The Loom" (client batch 2, R1–R4) ══════════
   Own identity: strip-weave (Africa) sewn to a khatam lattice (Arabia) by ONE yellow FDN stitch.
   Colour law: ochre = Africa · brass = Arabia · yellow = FDN. Every selector scoped to #africa-arabia. */

#africa-arabia{
  --aarw-night:#140E17; --aarw-earth:#2A1510; --aarw-plum:#241424; --aarw-indigo:#15142A;
  --aarw-sand:#F1E4CC; --aarw-sand-dim:rgba(241,228,204,.72); --aarw-line:rgba(241,228,204,.14);
  --aarw-terracotta:#C65A34; --aarw-ochre:#E29B35; --aarw-palm:#3F6B4F; --aarw-brass:#C9A46A;
  --aarw-thread:#E2B24C;
  --aarw-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --aarw-lat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 15L45.36 27.07L57.68 22.32L52.93 34.64L65 40L52.93 45.36L57.68 57.68L45.36 52.93L40 65L34.64 52.93L22.32 57.68L27.07 45.36L15 40L27.07 34.64L22.32 22.32L34.64 27.07ZM40 15V0M65 40H80M40 65V80M15 40H0M57.68 22.32L76.5 3.5M57.68 57.68L76.5 76.5M22.32 57.68L3.5 76.5M22.32 22.32L3.5 3.5' fill='none' stroke='%23C9A46A' stroke-opacity='.75' stroke-width='5'/%3E%3C/svg%3E");
  --aarw-weave:
    repeating-linear-gradient(0deg, rgba(198,90,52,.6) 0 2px, transparent 2px 8px, rgba(226,155,53,.5) 8px 10px, transparent 10px 24px),
    repeating-linear-gradient(90deg, rgba(241,228,204,.18) 0 1px, transparent 1px 6px),
    linear-gradient(#2A1510,#2A1510);
  background:var(--aarw-night); color:var(--aarw-sand); overflow:clip; position:relative;
}
#africa-arabia.sec{ padding-block:0; }
#africa-arabia *{ border-radius:0; }

/* ── ACT I · plate ─────────────────────────────────────────────────────── */
#africa-arabia .aarw-plate{
  position:relative; isolation:isolate; height:clamp(620px, 86vh, 860px); overflow:clip;
  background: linear-gradient(180deg, rgba(10,8,12,.55), transparent 22%), linear-gradient(90deg, #2A1510 0%, #241424 50%, #15142A 100%);
}
#africa-arabia .aarw-plate::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:var(--aarw-grain); opacity:.05; mix-blend-mode:overlay;
}
#africa-arabia .aarw-plate::after{
  content:""; position:absolute; left:-10%; right:-10%; bottom:-30%; height:70%; z-index:0; pointer-events:none;
  background: radial-gradient(60% 50% at 50% 100%, rgba(226,155,53,.38), rgba(198,90,52,.14) 45%, transparent 72%);
  transform: translate3d(0, calc((1 - var(--aarw-p, .6)) * 90px), 0); opacity: calc(.55 + var(--aarw-p, .6) * .45);
}
#africa-arabia .aarw-loom, #africa-arabia .aarw-stitch{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#africa-arabia .aarw-loom{
  z-index:1;
  -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 14%,rgba(0,0,0,.2) 32%,rgba(0,0,0,.2) 70%,#000 90%);
          mask-image: linear-gradient(180deg,#000 0%,#000 14%,rgba(0,0,0,.2) 32%,rgba(0,0,0,.2) 70%,#000 90%);
}
#africa-arabia .aarw-stitch{ z-index:2; overflow:visible; }
#africa-arabia .aarw-seam{ fill:none; stroke:#E2B24C; stroke-width:1.5; stroke-dasharray:10 6; filter:drop-shadow(0 0 5px rgba(226,178,76,.55)); }
#africa-arabia .aarw-spark-g{ position:absolute; left:0; top:0; z-index:2; width:0; height:0; opacity:0; pointer-events:none; will-change:transform; }
#africa-arabia .aarw-spark{ position:absolute; left:-3px; top:-3px; width:6px; height:6px; background:#E2B24C; transform:rotate(45deg);
  box-shadow:0 0 6px #E2B24C, 0 0 12px rgba(226,178,76,.6); }

#africa-arabia .aarw-plate__type{ position:absolute; left:0; right:0; top:50%; transform:translateY(-54%); z-index:4; text-align:center; }
#africa-arabia .aarw-plate__type::before{
  content:""; position:absolute; inset:-20% 10%; z-index:-1; pointer-events:none;
  background:radial-gradient(46% 42% at 50% 50%, rgba(18,12,22,.66), transparent 72%);
}
#africa-arabia .aarw-title{
  display:grid; grid-template-columns:1fr auto 1fr; column-gap:.28em; align-items:baseline; margin:0;
  font-family:Inter, system-ui, sans-serif;
  font-size:clamp(3.4rem, 8.6vw, 7.75rem); font-weight:500; line-height:.95; letter-spacing:-.04em; color:var(--aarw-sand);
  background:none; -webkit-text-fill-color:currentColor;
}
#africa-arabia .aarw-w{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
#africa-arabia .aarw-w > span{ display:inline-block; }
#africa-arabia .aarw-w--a{ justify-self:end; }
#africa-arabia .aarw-w--b{ justify-self:start; }
#africa-arabia .aarw-w--arrow{ color:var(--aarw-thread); -webkit-text-fill-color:currentColor; }
#africa-arabia .aarw-sub{ margin:clamp(18px,2vw,30px) 0 0; max-width:none; font-size:clamp(1.15rem,1.9vw,1.75rem); font-weight:500; letter-spacing:-.012em; color:var(--aarw-sand); }
#africa-arabia .aarw-y{ color:var(--aarw-thread); -webkit-text-fill-color:currentColor; }
#africa-arabia .aarw-label{ margin:18px 0 0; max-width:none; font-size:.78rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--aarw-ochre); }

/* ── ACT II · regions ──────────────────────────────────────────────────── */
#africa-arabia .aarw-regions{
  padding-top:clamp(96px,10vw,150px);
  background: linear-gradient(180deg, transparent 55%, var(--aarw-night)), linear-gradient(90deg, #1E1210 0%, #1A1120 50%, #12122A 100%);
}
#africa-arabia .aarw-regions__grid{ position:relative; display:grid; grid-template-columns:1fr 120px 1fr; row-gap:0; }
#africa-arabia .aarw-region{ margin:0; grid-row:1; width:min(100%,460px); }
#africa-arabia .aarw-region--africa{ grid-column:1; justify-self:end; }
#africa-arabia .aarw-region--arabia{ grid-column:3; justify-self:start; }
#africa-arabia .aarw-photo{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#1A1120; }
#africa-arabia .aarw-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92) brightness(.92); }
#africa-arabia .aarw-region--africa img{ object-position:27% 50%; }
#africa-arabia .aarw-region--arabia img{ object-position:70% 50%; }
#africa-arabia .aarw-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 58%, rgba(20,14,23,.85)), rgba(198,90,52,.10);
}
#africa-arabia .aarw-selvedge{ position:absolute; top:0; bottom:0; width:14px; z-index:1; }
#africa-arabia .aarw-selvedge--weave{ left:0; background:var(--aarw-weave); }
#africa-arabia .aarw-selvedge--lattice{ right:0; background:var(--aarw-lat) 0 0/14px 14px, #15142A; }
#africa-arabia .aarw-statement{
  margin:28px 0 0; max-width:17ch; font-size:clamp(1.3rem,2.1vw,1.9rem); font-weight:500; line-height:1.22;
  letter-spacing:-.018em; color:rgba(241,228,204,.86);
}
#africa-arabia .aarw-region--africa .aarw-statement{ text-align:right; margin-left:auto; }
#africa-arabia .aarw-region--arabia .aarw-statement{ text-align:left; }
#africa-arabia .aarw-ochre{ color:var(--aarw-ochre); -webkit-text-fill-color:currentColor; }
#africa-arabia .aarw-brass{ color:var(--aarw-brass); -webkit-text-fill-color:currentColor; }
#africa-arabia .aarw-spine{
  grid-column:2; grid-row:1; justify-self:center; width:2px; height:100%;
  background: repeating-linear-gradient(180deg, var(--aarw-thread) 0 10px, transparent 10px 16px);
  box-shadow:0 0 6px rgba(226,178,76,.45); transform-origin:top;
}
#africa-arabia .aarw-seamband{ display:none; }
#africa-arabia .aarw-knotrow{ grid-column:1/-1; grid-row:2; display:flex; flex-direction:column; align-items:center; margin-top:64px; position:relative; }
#africa-arabia .aarw-knotrow::before,
#africa-arabia .aarw-knotrow::after{ content:""; position:absolute; top:32px; height:1px; width:calc(50% - 60px); }
#africa-arabia .aarw-knotrow::before{ right:calc(50% + 40px); background:rgba(226,155,53,.45); transform-origin:right; }
#africa-arabia .aarw-knotrow::after{ left:calc(50% + 40px); background:rgba(201,164,106,.45); transform-origin:left; }
#africa-arabia .aarw-knot{ width:64px; height:64px; overflow:visible; display:block; }
#africa-arabia .aarw-knot__star{ fill:none; stroke:var(--aarw-brass); stroke-width:2.2; stroke-dasharray:1; stroke-dashoffset:0; }
#africa-arabia .aarw-knot__heart rect:first-child{ fill:var(--aarw-ochre); }
#africa-arabia .aarw-knot__heart rect:last-child{ fill:var(--aarw-terracotta); }
#africa-arabia .aarw-knot__thread{ stroke:var(--aarw-thread); stroke-width:2; stroke-dasharray:6 4; }
#africa-arabia .aarw-bridge{ margin:22px 0 0; max-width:none; font-size:clamp(1.8rem,3.4vw,3rem); font-weight:500; letter-spacing:-.022em; line-height:1.1; color:var(--aarw-thread); }
#africa-arabia .aarw-mask{ display:inline-block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
#africa-arabia .aarw-mask > span{ display:inline-block; }

/* ── ACT III · ledger ──────────────────────────────────────────────────── */
#africa-arabia .aarw-ledgerwrap{ margin-top:clamp(72px,7vw,104px); }
#africa-arabia .aarw-ledger{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  background:rgba(241,228,204,.045); border:1px solid var(--aarw-line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
/* FIX-1 (R2): document order L150 -> L151 -> L153, read top to bottom. Row 1 count (left) · row 2 full-width stages rail ·
   row 3 the mandate closes the ledger, right-aligned (a Z-read that lands on the yellow line). */
#africa-arabia .aarw-count, #africa-arabia .aarw-mandate{ grid-column:1/-1; margin:0; max-width:none; padding:clamp(28px,3vw,44px); }
#africa-arabia .aarw-count{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px clamp(18px,2vw,28px); }
#africa-arabia .aarw-mandate{
  padding-block:clamp(24px,2.6vw,36px); border-top:1px dashed rgba(241,228,204,.18); display:flex; justify-content:flex-end; text-align:right;
  font-size:clamp(1.3rem,2vw,1.75rem); font-weight:500; line-height:1.25; letter-spacing:-.015em; color:var(--aarw-sand);
}
#africa-arabia .aarw-ledger__edge{
  position:absolute; left:0; right:0; top:-1px; height:16px; z-index:1; pointer-events:none;
  /* the yellow FDN seam notch: drops from the woven edge into the card at the centre */
  background:linear-gradient(var(--aarw-thread),var(--aarw-thread)) 50% 0/2px 16px no-repeat;
}
#africa-arabia .aarw-ledger__edge::before{ content:""; position:absolute; left:0; top:0; height:6px; width:50%; background:var(--aarw-weave); opacity:.8; }
#africa-arabia .aarw-ledger__edge::after{ content:""; position:absolute; right:0; top:0; height:6px; width:50%; background:var(--aarw-lat) 0 0/6px 6px, #15142A; opacity:.8; }
#africa-arabia .aarw-count__n{ display:block; font-size:clamp(2.8rem,4.6vw,4.2rem); font-weight:500; letter-spacing:-.035em; line-height:1; color:var(--aarw-sand); }
#africa-arabia .aarw-count__t{ display:block; margin-top:0; font-size:1rem; line-height:1.55; color:var(--aarw-sand-dim); }
#africa-arabia .aarw-stages{
  grid-column:1/-1; margin:0; max-width:none; padding:22px clamp(28px,3vw,44px) 26px; border-top:1px dashed rgba(241,228,204,.18);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 14px;
  font-size:1rem; font-weight:500; color:var(--aarw-sand);
}
#africa-arabia .aarw-grp{ display:contents; white-space:nowrap; }   /* one-line rail: stage + dot are separate, evenly spaced items */
#africa-arabia .aarw-stg{ white-space:nowrap; }
#africa-arabia .aarw-dot{ color:var(--aarw-terracotta); font-size:.9rem; }
#africa-arabia .aarw-dot.is-eol{ visibility:hidden; }   /* set by js/fix-0917-aar.js: no bullet dangling at a line end */

/* ── ACT IV · close ────────────────────────────────────────────────────── */
#africa-arabia .aarw-close{ position:relative; isolation:isolate; text-align:center; padding-block:clamp(110px,12vw,180px) clamp(96px,10vw,150px); }
#africa-arabia .aarw-emblem{
  position:absolute; left:50%; top:50%; width:min(560px,70vw); height:auto; transform:translate(-50%,-50%); z-index:-1;
  fill:none; stroke:rgba(241,228,204,.07); stroke-width:.6; pointer-events:none;
}
#africa-arabia .aarw-close__h{ margin:0; max-width:none; font-size:clamp(2rem,4.3vw,3.9rem); font-weight:500; line-height:1.08; letter-spacing:-.03em; color:var(--aarw-sand); }
#africa-arabia .aarw-line{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
#africa-arabia .aarw-line > span{ display:block; text-wrap:balance; }
#africa-arabia .aarw-close__lede{ margin:22px auto 0; max-width:52ch; font-size:1.15rem; line-height:1.6; color:var(--aarw-sand-dim); }
#africa-arabia .aarw-cta{
  margin-top:40px; background:rgba(241,228,204,.06); border:1px solid rgba(241,228,204,.24); color:var(--aarw-sand);
  padding:16px 30px; min-height:52px; display:inline-flex; align-items:center; gap:.45em;
}
#africa-arabia .aarw-cta:hover, #africa-arabia .aarw-cta:focus-visible{ border-color:var(--aarw-thread); color:var(--aarw-thread); }
#africa-arabia .aarw-cta:focus-visible{ outline:2px solid var(--aarw-thread); outline-offset:3px; }

#africa-arabia .aarw-hem{ position:relative; height:18px; background:#15142A; }
#africa-arabia .aarw-hem::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:50%; background:var(--aarw-weave); }
#africa-arabia .aarw-hem::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:50%;
  background:var(--aarw-lat) 0 0/18px 18px, #15142A; box-shadow:-2px 0 0 0 var(--aarw-thread);
}

/* ── MOTION · start states exist only under .aarw-js (defaults = final state) ── */
#africa-arabia.aarw-js .aarw-strip{ transform:translateY(-24px); opacity:0; transform-box:fill-box;
  transition: transform 900ms cubic-bezier(.19,1,.22,1) calc(var(--i)*40ms), opacity 900ms cubic-bezier(.19,1,.22,1) calc(var(--i)*40ms); }
#africa-arabia.aarw-js .aarw-col{ stroke-dasharray:1; stroke-dashoffset:1;
  transition: stroke-dashoffset 1400ms cubic-bezier(.65,0,.35,1) calc(var(--i)*55ms); }
#africa-arabia.aarw-js .aarw-stitch{ clip-path:inset(0 0 100% 0); transition: clip-path 1600ms cubic-bezier(.65,0,.35,1) 300ms; }
#africa-arabia.aarw-js .aarw-w--a > span,
#africa-arabia.aarw-js .aarw-w--b > span{ transform:translateY(110%); transition: transform 800ms cubic-bezier(.19,1,.22,1) 250ms; }
#africa-arabia.aarw-js .aarw-w--b > span{ transition-delay:330ms; }
#africa-arabia.aarw-js .aarw-w--arrow > span{ transform:scaleX(0); transform-origin:left; transition: transform 800ms cubic-bezier(.19,1,.22,1) 650ms; }
#africa-arabia.aarw-js .aarw-sub,
#africa-arabia.aarw-js .aarw-label{ opacity:0; transform:translateY(12px); transition: opacity 600ms ease-out 820ms, transform 600ms ease-out 820ms; }
#africa-arabia.aarw-js .aarw-label{ transition-delay:920ms; }

#africa-arabia.aarw-js .aarw-plate.is-in .aarw-strip{ transform:none; opacity:1; }
#africa-arabia.aarw-js .aarw-plate.is-in .aarw-col{ stroke-dashoffset:0; }
#africa-arabia.aarw-js .aarw-plate.is-in .aarw-stitch{ clip-path:inset(0); }
#africa-arabia.aarw-js .aarw-plate.is-in .aarw-w > span{ transform:none; }
#africa-arabia.aarw-js .aarw-plate.is-in .aarw-sub,
#africa-arabia.aarw-js .aarw-plate.is-in .aarw-label{ opacity:1; transform:none; }

#africa-arabia.aarw-js .aarw-region--africa .aarw-photo{ clip-path:inset(0 0 0 100%); transition: clip-path 1100ms cubic-bezier(.77,0,.18,1); }
#africa-arabia.aarw-js .aarw-region--arabia .aarw-photo{ clip-path:inset(0 100% 0 0); transition: clip-path 1100ms cubic-bezier(.77,0,.18,1) 120ms; }
#africa-arabia.aarw-js .aarw-photo img{ transform:scale(1.08); transition: transform 1600ms cubic-bezier(.19,1,.22,1); }
#africa-arabia.aarw-js .aarw-spine{ transform:scaleY(0); transition: transform 1200ms cubic-bezier(.65,0,.35,1); }
#africa-arabia.aarw-js .aarw-statement{ opacity:0; transform:translateY(16px); transition: opacity 700ms ease-out 400ms, transform 700ms ease-out 400ms; }
#africa-arabia.aarw-js .aarw-knot__star{ stroke-dashoffset:1; transition: stroke-dashoffset 900ms ease-in-out 700ms; }
#africa-arabia.aarw-js .aarw-knot__heart{ opacity:0; transition: opacity 400ms ease 1200ms; }
#africa-arabia.aarw-js .aarw-bridge .aarw-mask > span{ transform:translateY(110%); transition: transform 800ms cubic-bezier(.19,1,.22,1) 1000ms; }
#africa-arabia.aarw-js .aarw-knotrow::before,
#africa-arabia.aarw-js .aarw-knotrow::after{ transform:scaleX(0); transition: transform 900ms cubic-bezier(.65,0,.35,1) 900ms; }

#africa-arabia.aarw-js .aarw-regions.is-in .aarw-photo{ clip-path:inset(0); }
#africa-arabia.aarw-js .aarw-regions.is-in .aarw-photo img{ transform:none; }
#africa-arabia.aarw-js .aarw-regions.is-in .aarw-spine{ transform:none; }
#africa-arabia.aarw-js .aarw-regions.is-in .aarw-statement{ opacity:1; transform:none; }
#africa-arabia.aarw-js .aarw-regions.is-in .aarw-knot__star{ stroke-dashoffset:0; }
#africa-arabia.aarw-js .aarw-regions.is-in .aarw-knot__heart{ opacity:1; }
#africa-arabia.aarw-js .aarw-regions.is-in .aarw-bridge .aarw-mask > span{ transform:none; }
#africa-arabia.aarw-js .aarw-regions.is-in .aarw-knotrow::before,
#africa-arabia.aarw-js .aarw-regions.is-in .aarw-knotrow::after{ transform:none; }

#africa-arabia.aarw-js .aarw-close .aarw-line > span{ transform:translateY(105%); transition: transform 900ms cubic-bezier(.19,1,.22,1); }
#africa-arabia.aarw-js .aarw-close .aarw-line:nth-child(2) > span{ transition-delay:110ms; }
#africa-arabia.aarw-js .aarw-close .aarw-line:nth-child(3) > span{ transition-delay:220ms; }
#africa-arabia.aarw-js .aarw-close__lede,
#africa-arabia.aarw-js .aarw-close .aarw-cta{ opacity:0; transform:translateY(12px); transition: opacity 600ms ease-out 420ms, transform 600ms ease-out 420ms, color .25s ease, border-color .25s ease; }
#africa-arabia.aarw-js .aarw-close .aarw-cta{ transition-delay:520ms, 520ms, 0s, 0s; }
#africa-arabia.aarw-js .aarw-close.is-in .aarw-line > span{ transform:none; }
#africa-arabia.aarw-js .aarw-close.is-in .aarw-close__lede,
#africa-arabia.aarw-js .aarw-close.is-in .aarw-cta{ opacity:1; transform:none; }

#africa-arabia.aarw-static *, #africa-arabia.aarw-static *::before, #africa-arabia.aarw-static *::after{ transition:none !important; animation:none !important; }
@media (prefers-reduced-motion: reduce){
  #africa-arabia *, #africa-arabia *::before, #africa-arabia *::after{ transition:none !important; animation:none !important; }
}

/* ── RAIL, wrap-safe (below the width where all six stages fit on one line) ── */
@media (max-width: 1120px){
  #africa-arabia .aarw-stages{ display:block; font-size:.95rem; line-height:1.9; }
  #africa-arabia .aarw-grp{ display:inline-block; margin-right:.55em; }
  #africa-arabia .aarw-grp:last-child{ margin-right:0; }
  #africa-arabia .aarw-dot{ margin-left:.4em; }
}

/* ── PHONE ≤ 880 ───────────────────────────────────────────────────────── */
@media (max-width: 880px){
  #africa-arabia .container{ padding-inline:16px; }
  #africa-arabia .aarw-plate{ height:clamp(620px, 100svh, 760px); }
  #africa-arabia .aarw-loom{
    -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 12%,rgba(0,0,0,.18) 26%,rgba(0,0,0,.18) 78%,#000 92%);
            mask-image: linear-gradient(180deg,#000 0%,#000 12%,rgba(0,0,0,.18) 26%,rgba(0,0,0,.18) 78%,#000 92%);
  }
  #africa-arabia .aarw-title{ display:block; font-size:clamp(3.1rem,15vw,3.7rem); line-height:1; text-align:left; padding-inline:16px; }
  #africa-arabia .aarw-w--a, #africa-arabia .aarw-w--arrow{ display:inline-block; vertical-align:bottom; }
  #africa-arabia .aarw-w--b{ display:block; width:100%; text-align:right; }
  #africa-arabia .aarw-sub{ font-size:1.2rem; padding-inline:16px; }
  #africa-arabia .aarw-label{ font-size:.7rem; letter-spacing:.22em; padding-inline:24px; line-height:1.7; }

  #africa-arabia .aarw-regions{ padding-top:72px; }
  #africa-arabia .aarw-regions__grid{ grid-template-columns:1fr; }
  #africa-arabia .aarw-region{ grid-column:1; width:100%; justify-self:stretch; }
  #africa-arabia .aarw-region--africa{ grid-row:1; }
  #africa-arabia .aarw-region--arabia{ grid-row:3; }
  #africa-arabia .aarw-knotrow{ grid-row:4; margin-top:56px; }
  #africa-arabia .aarw-spine{ display:none; }
  #africa-arabia .aarw-region--africa .aarw-statement,
  #africa-arabia .aarw-region--arabia .aarw-statement{ text-align:left; max-width:none; margin-left:0; font-size:1.3rem; }
  #africa-arabia .aarw-seamband{ display:block; position:relative; grid-column:1; grid-row:2; height:28px; margin:40px -16px; background:#15142A; }
  #africa-arabia .aarw-seamband::before{ content:""; position:absolute; left:0; right:0; top:0; height:50%; background:var(--aarw-weave); }
  #africa-arabia .aarw-seamband::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:50%; background:var(--aarw-lat) 0 0/14px 14px, #15142A; border-top:1.5px dashed var(--aarw-thread); }
  #africa-arabia .aarw-selvedge{ top:0; left:0; right:0; bottom:auto; width:auto; height:10px; }
  #africa-arabia .aarw-knotrow::before, #africa-arabia .aarw-knotrow::after{ display:none; }
  #africa-arabia .aarw-bridge{ font-size:clamp(1.7rem,8vw,2.1rem); }

  #africa-arabia .aarw-ledger{ grid-template-columns:1fr; }
  #africa-arabia .aarw-count{ display:block; }
  #africa-arabia .aarw-count__t{ margin-top:10px; }
  #africa-arabia .aarw-mandate{ justify-content:flex-start; text-align:left; }
  #africa-arabia .aarw-count__n{ font-size:3rem; }

  #africa-arabia .aarw-close__h{ font-size:clamp(1.75rem,8.4vw,2.2rem); }
  #africa-arabia .aarw-emblem{ width:90vw; }
  #africa-arabia .aarw-cta{ width:100%; justify-content:center; }
  #africa-arabia .aarw-hem{ height:14px; }
}

/* ══════════ 20260917g · close — merged from css/fix-0917-close.css (feedback batch 2) ══════════ */
/* ══════════ 0917 · #close — "The Meeting Point" (X1 total redesign, X2 21st.dev ports) ══════════
   Kinetic Grid (18254) field · Pulse Beams (1561) comets on square rails · Worth Keeping CTA (26705) seal button ·
   Split Axis Convergence (27193) headline · Text Reveal Mask rows. Every selector is scoped to #close. */

/* ── base ── */
#close.xk{ background:#0A0A0B; overflow-x:clip; padding-bottom:0; border-top:1px solid var(--line); }

/* ── head ── */
#close .xk-head{
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(2rem,4.15vw,3.9rem); line-height:1.04; letter-spacing:-.028em;
}
#close .xk-head__l{ display:block; will-change:transform; }
#close .xk-head__l--a{
  text-align:left;
  /* 2026-09-18c — the client killed the fade: pure white, no gradient. */
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:#FFFFFF; color:#FFFFFF;
  padding-bottom:.14em; margin-bottom:-.14em;
}
#close .xk-head__l--b{ text-align:right; margin-top:.06em; color:#E2B24C; -webkit-text-fill-color:#E2B24C; }

/* ── rows (L176) ── */
#close .xk-rows{ display:block; margin:clamp(48px,6vw,88px) 0 0; border-bottom:1px solid var(--line); }
#close .xk-row{
  display:grid; grid-template-columns:18rem 1fr; gap:24px; align-items:baseline;
  padding-block:clamp(16px,1.9vw,24px); border-top:1px solid var(--line); position:relative; overflow:hidden;
  font-family:var(--font-display); font-size:clamp(1.2rem,1.95vw,1.75rem); line-height:1.22; letter-spacing:-.015em;
}
#close .xk-row::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:1px; background:#E2B24C;
  transform:scaleX(0); transform-origin:left; opacity:0; pointer-events:none;
}
#close .xk-row__who{ font-weight:600; color:#F4F8FB; }
#close .xk-row__what{ font-weight:500; color:rgba(244,248,251,.58); }

/* ── lede (L177) ── */
#close .xk-lede{
  margin:clamp(32px,4vw,48px) 0 0 calc(18rem + 24px); max-width:60ch;
  font-size:clamp(1.02rem,1.45vw,1.3rem); line-height:1.6; font-weight:400; color:var(--txt);
}

/* ── field + origins ── */
#close .xk-field{ position:relative; margin-top:clamp(72px,8vw,120px); padding:24px 0 clamp(110px,11vw,160px); }
#close .xk-field__cv{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
#close .xk-field__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; align-items:start; }
#close .xk-origin{
  margin:0; grid-row:1; display:inline-flex; align-items:center;
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.15rem,2vw,1.75rem); line-height:1.2; letter-spacing:-.012em;
  color:#F4F8FB; padding:18px 24px;
  background:rgba(244,248,251,.05); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px) saturate(120%); backdrop-filter:blur(10px) saturate(120%);
}
#close .xk-origin::before{ content:""; flex:none; width:8px; height:8px; margin-right:14px; background:#E2B24C; }
#close .xk-origin--cap{ grid-column:1; justify-self:start; }
/* the opportunity marker sits on its outer (right) edge so its rail mirrors the capital rail */
#close .xk-origin--opp::before{ order:2; margin-right:0; margin-left:14px; }
#close .xk-origin--opp{ grid-column:2; justify-self:end; margin-top:56px; }

/* ── plate ── */
#close .xk-plate{
  grid-column:1/-1; position:relative; isolation:isolate;
  margin:64px auto 0; width:min(1000px,100%); padding:64px 64px 88px; text-align:center; color:#0A0A0B;
}
#close .xk-plate *{ -webkit-text-fill-color:currentColor; }
#close .xk-plate__fill{ position:absolute; inset:0; z-index:-1; background:#E2B24C; }
#close .xk-meet{
  margin:0; overflow:hidden; color:#0A0A0B;
  font-family:var(--font-display); font-weight:600; font-size:clamp(2.3rem,5vw,4.75rem); line-height:.98; letter-spacing:-.035em;
  padding-bottom:.08em;
}
#close .xk-meet__in{ display:inline-block; }
#close .xk-plate__rule{ display:block; width:120px; height:1px; margin:32px auto 24px; background:rgba(10,10,11,.18); }
#close .xk-sig{ margin:0; color:#0A0A0B; }
#close .xk-sig__name{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(.98rem,1.1vw,1.06rem); line-height:1.3; letter-spacing:-.01em;
}
#close .xk-sig__tag{
  display:block; margin-top:6px; font-weight:500; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(10,10,11,.72);
}

/* ── dock + CTA (straddles the plate's bottom edge) ── */
#close .xk-dock{ position:absolute; left:50%; bottom:0; transform:translate(-50%,50%); z-index:2; }
#close .xk-mag{ display:block; }
#close .xk-cta{
  min-height:64px; padding:20px 36px; white-space:nowrap;
  font-weight:600; font-size:clamp(.98rem,1.1vw,1.06rem); letter-spacing:-.01em;
  background:#0A0A0B linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 55%);
  color:#E2B24C; -webkit-text-fill-color:#E2B24C; border:1px solid rgba(226,178,76,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
#close .xk-cta:hover,
#close .xk-cta:focus-visible{ background-color:#16171B; border-color:#E2B24C; transform:translateY(-2px); }
#close .xk-cta:focus-visible{ outline:2px solid #E2B24C; outline-offset:4px; }

/* ── motion start states (only when the JS is running) ── */
#close.xk-js .xk-row__who,
#close.xk-js .xk-row__what{ display:inline-block; transform:translateY(110%); transition:transform .8s cubic-bezier(.22,1,.36,1) .12s; }
#close.xk-js .xk-rows.is-in .xk-row__who,
#close.xk-js .xk-rows.is-in .xk-row__what{ transform:none; }
#close.xk-js .xk-row::before{ transition:transform .7s cubic-bezier(.77,0,.18,1), opacity .4s ease .7s; opacity:1; }
#close.xk-js .xk-rows.is-in .xk-row::before{ transform:scaleX(1); opacity:0; }
#close.xk-js .xk-row:nth-child(2) .xk-row__who,
#close.xk-js .xk-row:nth-child(2) .xk-row__what{ transition-delay:.26s; }
#close.xk-js .xk-row:nth-child(2)::before{ transition-delay:.14s, .84s; }
#close.xk-js .xk-row:nth-child(3) .xk-row__who,
#close.xk-js .xk-row:nth-child(3) .xk-row__what{ transition-delay:.40s; }
#close.xk-js .xk-row:nth-child(3)::before{ transition-delay:.28s, .98s; }

#close.xk-js .xk-origin{ opacity:0; transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
#close.xk-js .xk-origin--cap{ transform:translateX(-32px); }
#close.xk-js .xk-origin--opp{ transform:translateX(32px); transition-delay:.12s; }
#close.xk-js .xk-plate__fill{ clip-path:inset(50% 0 50% 0); transition:clip-path .9s cubic-bezier(.77,0,.18,1) .2s; }
#close.xk-js .xk-meet__in{ transform:translateY(105%); transition:transform .8s cubic-bezier(.22,1,.36,1) .65s; }
#close.xk-js .xk-plate__rule,
#close.xk-js .xk-sig{ opacity:0; transform:translateY(10px); transition:opacity .6s ease .85s, transform .6s ease .85s; }
#close.xk-js .xk-mag{ opacity:0; translate:0 -16px; transition:opacity .52s ease 1s, translate .52s cubic-bezier(.34,1.56,.64,1) 1s; }

/* ── end states ── */
#close .xk-field.is-in .xk-origin{ opacity:1; transform:none; }
#close .xk-field.is-in .xk-plate__fill{ clip-path:inset(0); }
/* once the fill has opened, the plate carries the yellow itself (keeps contrast audits honest) */
#close .xk-field.is-in .xk-plate{ background:#E2B24C; transition:background-color 0s 1.1s; }
#close .xk-field.is-in .xk-meet__in{ transform:none; }
#close .xk-field.is-in .xk-plate__rule,
#close .xk-field.is-in .xk-sig{ opacity:1; transform:none; }
#close .xk-field.is-in .xk-mag{ opacity:1; translate:0 0; }
#close.xk-settled *,
#close.xk-settled *::before,
#close.xk-settled *::after{ transition:none !important; }

/* ── the meeting ("click") ── */
#close .xk-cta.is-met{ border-color:#E2B24C; animation:xkIgnite .7s cubic-bezier(.16,1,.3,1); }
#close .xk-cta.is-met.glow::after{ opacity:1; }
@keyframes xkIgnite{
  0%  { box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 0 rgba(226,178,76,.55); }
  100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 22px rgba(226,178,76,0); }
}

/* ── phone ── */
@media (max-width:880px){
  #close .xk-head__l--a,
  #close .xk-head__l--b{ text-align:left; }
  #close .xk-row{ grid-template-columns:1fr; gap:4px; }
  #close .xk-lede{ margin-left:0; }
  #close .xk-field{ margin-top:56px; padding-bottom:96px; }
  #close .xk-field__inner{ grid-template-columns:1fr; }
  #close .xk-origin{ padding:14px 16px; max-width:82%; }
  #close .xk-origin--cap{ grid-column:1; grid-row:1; justify-self:start; }
  #close .xk-origin--opp{ grid-column:1; grid-row:2; justify-self:end; margin-top:12px; text-align:right; }
  #close .xk-plate{ grid-row:3; margin-top:36px; width:100%; padding:40px 22px 72px; }
  #close .xk-sig__tag{ font-size:.68rem; letter-spacing:.18em; }
  #close .xk-dock{ width:min(100% - 44px, 320px); }
  #close .xk-cta{ width:100%; min-height:58px; }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion:reduce){
  #close *, #close *::before, #close *::after{ transition:none !important; animation:none !important; }
}

/* lead polish (reviewer notes): room above the headline so an anchor jump doesn't slide it under the fixed nav,
   and a tighter hand-off from the lede into the meeting field */
#close.sec.xk{ padding-top: clamp(84px, 9vw, 128px); }
#close .xk-field{ margin-top: clamp(36px, 4.4vw, 64px); }

/* ══════════ 20260917h — GOLD SYSTEM (client feedback batch 3: "explore more of gold than yellow… a glowing gold",
   "our pictures should have those kind of golden overlay") + wider content ("the space left and right is a lot").
   Every yellow literal site-wide was remapped to gold: #FFD400 -> #E2B24C, #FFE566 -> #F2CF7C, #E6BF00 -> #C99A36,
   #7A5C00 -> #7A5714 (and their rgba forms). Ink #0A0A0B on #E2B24C measures ~10:1. The container is 1440px (was 1265px).
   Brief: .claude/CLIENT-FEEDBACK-0917b.md ══════════ */
:root{
  --accent-grad: linear-gradient(135deg, #F7DC96 0%, #E2B24C 44%, #B9872F 100%);
  --accent-sheen: radial-gradient(120% 140% at 12% 0%, rgba(255,244,214,.42), rgba(255,244,214,0) 52%);
  --gold-photo: sepia(.28) saturate(1.14) hue-rotate(-6deg);
  --gold-photo-mono: grayscale(1) sepia(.42) saturate(1.35) hue-rotate(-8deg);
}
/* glowing gold fills */
.btn--solid{ background-color: var(--accent); background-image: var(--accent-grad);
  box-shadow: 0 0 0 1px rgba(226,178,76,.28), 0 10px 30px -12px rgba(226,178,76,.65); }
.btn--solid:hover, .btn--solid:focus-visible{ background-image: linear-gradient(135deg, #FBE6B0 0%, #EBC062 46%, #C4933A 100%);
  box-shadow: 0 0 0 1px rgba(242,207,124,.5), 0 14px 40px -12px rgba(226,178,76,.85); }
.hdr2 .btn--solid{ background-image: var(--accent-grad); }
#connection .rgap2__panel{ background: var(--accent-sheen), var(--accent-grad); }
#close .xk-plate__fill{ background: var(--accent-sheen), var(--accent-grad); }
#close .xk-plate{ background: var(--accent-sheen), var(--accent-grad); }
.sqz__btn{ background-image: var(--accent-grad); }

/* golden overlay on the homepage photography */
.rmcard__img{ filter: var(--gold-photo); }
#capitalq .rmcard__img{ filter: var(--gold-photo-mono) brightness(.92); }
#capitalq .rmcard:hover .rmcard__img, #capitalq .rmcard.is-open .rmcard__img{ filter: var(--gold-photo) brightness(.95); }
#familiar .ppane2__fig img{ filter: var(--gold-photo); }
.hero--exec .hero__bg img{ filter: sepia(.2) saturate(1.1) hue-rotate(-6deg); }
#problem .rgap3__plate{ filter: var(--gold-photo-mono) contrast(1.04); }
#advantage-slides .sqz__panel.is-open .sqz__img{ filter: sepia(.22) saturate(1.2) contrast(1.05) brightness(1.06); }

/* ══════════ 20260917i — batch 3 homepage review (.claude/CLIENT-FEEDBACK-0917b.md H1 H2 H3 H5 G4) ══════════ */

/* H1 — "Different Needs. One Place to Start." on one line; "That's where FDN comes in." under it */
#familiar .pside__tail .h-mid{ white-space: nowrap; max-width: none; font-size: clamp(1.15rem, 4.3vw, 3.9rem); }

/* H2 — "Capital Isn't the Problem." the size of the section headers ("Does This Sound Familiar?") and bolder;
   the sub-headline in gold (a deeper gold on this light ground so it still reads) */
#problem .rgap3__stage{ --nh: clamp(250px, 22vw, 340px); }
#problem .rgap3__h{ font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.035em; }
#problem .rgap3__lead{ color: #B8862F; font-size: clamp(1.08rem, 1.55vw, 1.4rem); font-weight: 600; }

/* H3 — the gold panel moves up; the lady's head still clears the copy above */
#problem.sec.rgap{ padding-bottom: clamp(24px, 2.8vw, 40px); }
#connection.sec.rgap2{ padding-top: clamp(110px, 12vw, 170px); }

/* H5 — the FDN wordmark in the centre of the orbit; the icon tiles are circles (client asked for round here,
   the one exception to the square-corner rule on this section) */
#knowledge .korb__logo{ display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
#knowledge .korb__logo-word{
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: .9;
  letter-spacing: -.02em; color: var(--accent); text-shadow: 0 0 28px rgba(226,178,76,.45);
}
#knowledge .korb__logo-sub{
  font-family: var(--font-mono); font-weight: 600; font-size: clamp(.56rem, .8vw, .7rem); letter-spacing: .34em;
  text-transform: uppercase; color: #fff;
}
body #knowledge .korb__node{ border-radius: 50% !important; }
body #knowledge .korb__node::after{ border-radius: 50% !important; }

/* G4 — the CapitalQ orb (js/cq-orb.js): the character in #capitalq, and the mark beside the name in #the-name */
#capitalq .cq3__orb{ width: min(340px, 72%); margin: clamp(22px, 3vw, 40px) auto clamp(26px, 3.2vw, 44px); }
#the-name .cqname--orb{ display: flex; align-items: center; gap: .18em; }
#the-name .cqname__orb{ display: inline-block; flex: none; width: 1.3em; height: 1.3em; margin-right: .06em;
  background: radial-gradient(circle at 50% 50%, #0A0A0B 0 62%, rgba(10,10,11,0) 64%); }
/* ══════════ 20260917j · aarsplit — merged from css/fix-0917-aarsplit.css (feedback batch 2) ══════════ */
/* ══════════ fix-0917-aarsplit · #africa-arabia — H4 "The Split" (client batch 3) ══════════
   The Loom opener pins full-screen, then tears open along the gold stitch: the Africa leaf slides left, the Arabia leaf
   slides right (the → divides with them) and the two regions are revealed underneath as big, bold copy on gold-toned
   photographs. "FDN is the bridge." follows under them, then the ledger and the close (unchanged).
   Default (no JS / reduced motion) = static stacked layout. The split layout exists only under .aars-on (set by JS).
   Every selector is scoped to #africa-arabia. */

/* ── default: static stacked ───────────────────────────────────────────── */
#africa-arabia.aars .aars-stage{ position:relative; display:flex; flex-direction:column; }
#africa-arabia.aars .aars-leaf--a{ order:-1; }   /* static: opener first, regions under it */
#africa-arabia.aars .aars-leaf--b{ display:none; }
#africa-arabia.aars .aars-reveal{ position:relative; display:grid; grid-template-columns:1fr 1fr; background:var(--aarw-night); }
#africa-arabia.aars .aars-panel{
  position:relative; margin:0; overflow:hidden; isolation:isolate; min-height:clamp(620px, 92vh, 940px);
  display:flex; align-items:flex-end; background:#1A1120;
}
#africa-arabia.aars .aars-panel__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:-2;
  filter:var(--gold-photo) brightness(.97) contrast(1.06);
  transform:scale(var(--aars-zoom, 1)); transform-origin:50% 60%;
}
#africa-arabia.aars .aars-panel--africa .aars-panel__img{ object-position:30% 40%; }
#africa-arabia.aars .aars-panel--arabia .aars-panel__img{ object-position:72% 50%; }
#africa-arabia.aars .aars-panel__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(20,14,23,.94) 0%, rgba(20,14,23,.74) 26%, rgba(20,14,23,.22) 52%, rgba(20,14,23,0) 72%, rgba(20,14,23,.38) 100%);
}
#africa-arabia.aars .aars-panel__veil::after{   /* the golden overlay the client asked for on every picture */
  content:""; position:absolute; inset:0; background:var(--accent-glow); mix-blend-mode:soft-light;
}
#africa-arabia.aars .aars-panel__edge{ position:absolute; top:0; bottom:0; width:14px; z-index:1; }
#africa-arabia.aars .aars-panel__edge--weave{ right:0; background:var(--aarw-weave); }
#africa-arabia.aars .aars-panel__edge--lattice{ left:0; background:var(--aarw-lat) 0 0/14px 14px, #15142A; }
#africa-arabia.aars .aars-seam{
  position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(180deg, var(--accent) 0 10px, transparent 10px 16px);
  box-shadow:0 0 8px var(--accent-glow);
}
#africa-arabia.aars .aars-statement{
  margin:0; max-width:none; width:100%;
  padding:clamp(120px, 14vh, 180px) clamp(44px, 4.6vw, 84px) clamp(56px, 9vh, 104px);
  font-family:Inter, system-ui, sans-serif; font-size:clamp(2.3rem, 3.95vw, 4.3rem); font-weight:700;
  line-height:1.02; letter-spacing:-.038em; color:var(--aarw-sand); text-wrap:balance;
  text-shadow:0 2px 30px rgba(10,8,12,.45);
}
#africa-arabia.aars .aars-panel--africa .aars-statement{ padding-right:clamp(56px, 5.4vw, 96px); }
#africa-arabia.aars .aars-panel--arabia .aars-statement{ padding-left:clamp(56px, 5.4vw, 96px); }
#africa-arabia.aars .aars-statement .aarw-ochre,
#africa-arabia.aars .aars-statement .aarw-brass{ display:block; font-size:1.34em; letter-spacing:-.045em; line-height:.98; margin-bottom:.12em; }

/* ── bridge: the stitch comes down out of the split into the knot ─────── */
#africa-arabia.aars .aars-bridge{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 16px; background:var(--aarw-night);
}
#africa-arabia.aars .aars-bridge__thread{
  display:block; width:2px; height:clamp(64px, 8vw, 112px);
  background:repeating-linear-gradient(180deg, var(--accent) 0 10px, transparent 10px 16px);
  box-shadow:0 0 8px var(--accent-glow); transform-origin:top;
}
#africa-arabia.aars .aars-knot{ width:72px; height:72px; margin-top:6px; }
#africa-arabia.aars .aars-bridge__h{
  margin:clamp(18px, 2vw, 28px) 0 0; max-width:none;
  font-size:clamp(3rem, 7.4vw, 7.2rem); font-weight:700; line-height:1; letter-spacing:-.045em;
}
#africa-arabia.aars .aars-bridge__h .aarw-mask > span{
  color:var(--accent); background:var(--accent-sheen), var(--accent-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  padding-bottom:.06em;
}
#africa-arabia.aars .aars-bridge__h{ position:relative; isolation:isolate; }
#africa-arabia.aars .aars-bridge__h::before{
  content:""; position:absolute; left:50%; top:50%; width:120%; height:220%; transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, var(--accent-glow), transparent 70%); opacity:.55;
}

/* bridge + close reveal (the old .aarw-regions scoped states are not used here) */
#africa-arabia.aarw-js.aars .aars-bridge__thread{ transform:scaleY(0); transition:transform 900ms cubic-bezier(.65,0,.35,1); }
#africa-arabia.aarw-js.aars .aars-bridge.is-in .aars-bridge__thread{ transform:none; }
#africa-arabia.aarw-js.aars .aars-bridge.is-in .aarw-knot__star{ stroke-dashoffset:0; transition-delay:300ms; }
#africa-arabia.aarw-js.aars .aars-bridge.is-in .aarw-knot__heart{ opacity:1; transition-delay:800ms; }
#africa-arabia.aarw-js.aars .aars-bridge .aarw-mask > span{ transition-delay:500ms; }
#africa-arabia.aarw-js.aars .aars-bridge.is-in .aarw-mask > span{ transform:none; }

/* ── SPLIT (JS on, motion allowed) ─────────────────────────────────────── */
#africa-arabia.aars-on .aars-scroll{ position:relative; height:250vh; }
#africa-arabia.aars-on .aars-stage{ position:sticky; top:0; display:block; height:100vh; overflow:hidden; isolation:isolate; }
#africa-arabia.aars-on .aars-reveal{ position:absolute; inset:0; z-index:0; }
#africa-arabia.aars-on .aars-panel{ min-height:0; height:100%; }
#africa-arabia.aars-on .aars-leaf{
  position:absolute; inset:0; height:auto; z-index:2; display:block;
  transform:translate3d(var(--aars-x, 0px), 0, 0);
}
#africa-arabia.aars-on .aars-leaf--b{ z-index:3; }
#africa-arabia.aars-on.is-splitting .aars-leaf{ will-change:transform; }
/* the torn edge glows gold while the leaves open */
#africa-arabia.aars .aars-edge{ fill:none; stroke:var(--accent); stroke-width:2.5; opacity:calc(var(--aars-edge, 0) * .8); filter:drop-shadow(0 0 3px var(--accent-glow)); }
/* the revealed statements rise in as they are uncovered */
#africa-arabia.aars-on .aars-statement{ opacity:var(--aars-o, 1); transform:translate3d(0, var(--aars-y, 0px), 0); }
#africa-arabia.aars-on .aars-reveal::after{   /* dim until the leaves open */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:#0A080C; opacity:var(--aars-dim, 0);
}

/* ── PHONE ≤ 880 ───────────────────────────────────────────────────────── */
@media (max-width: 880px){
  #africa-arabia.aars .aars-reveal{ grid-template-columns:1fr; }
  #africa-arabia.aars .aars-panel{ min-height:clamp(420px, 62svh, 560px); }
  #africa-arabia.aars .aars-panel__edge{ top:auto; left:0; right:0; width:auto; height:10px; }
  #africa-arabia.aars .aars-panel__edge--weave{ bottom:0; }
  #africa-arabia.aars .aars-panel__edge--lattice{ top:0; bottom:auto; }
  #africa-arabia.aars .aars-seam{ left:0; right:0; top:50%; bottom:auto; width:auto; height:2px; margin:-1px 0 0;
    background:repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 16px); }
  #africa-arabia.aars .aars-statement,
  #africa-arabia.aars .aars-panel--africa .aars-statement,
  #africa-arabia.aars .aars-panel--arabia .aars-statement{
    padding:88px 20px 34px; font-size:clamp(1.8rem, 8.2vw, 2.25rem); line-height:1.04; letter-spacing:-.034em;
  }
  #africa-arabia.aars .aars-panel--africa .aars-panel__img{ object-position:62% 30%; }
  #africa-arabia.aars .aars-panel--arabia .aars-panel__img{ object-position:78% 50%; }
  #africa-arabia.aars .aars-bridge__h{ font-size:clamp(2.5rem, 12.4vw, 3.4rem); }

  /* title: Africa (left of the seam) → Arabia (right of the seam), stepped, so the split divides the arrow, not a word */
  #africa-arabia.aars .aarw-title{
    display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:auto auto; column-gap:.14em; row-gap:0;
    padding-inline:12px; text-align:left; font-size:clamp(2.7rem, 13.4vw, 3.4rem); line-height:1;
  }
  #africa-arabia.aars .aarw-w--a{ grid-column:1; grid-row:1; justify-self:end; display:block; }
  #africa-arabia.aars .aarw-w--arrow{ grid-column:2; grid-row:1 / span 2; align-self:center; display:block; }
  #africa-arabia.aars .aarw-w--b{ grid-column:3; grid-row:2; justify-self:start; display:block; width:auto; text-align:left; }

  #africa-arabia.aars-on .aars-scroll{ height:230vh; }
  #africa-arabia.aars-on .aars-stage{ height:100vh; }
  #africa-arabia.aars-on .aars-reveal{ grid-template-rows:1fr 1fr; }
  #africa-arabia.aars-on .aars-panel{ min-height:0; }
  #africa-arabia.aars-on .aars-statement,
  #africa-arabia.aars-on .aars-panel--africa .aars-statement,
  #africa-arabia.aars-on .aars-panel--arabia .aars-statement{ padding:70px 20px 26px; font-size:clamp(1.7rem, 7.6vw, 2.1rem); }
  #africa-arabia.aars-on .aars-panel--arabia .aars-statement{ padding-top:28px; }
}
@supports (height: 100svh){
  @media (max-width: 880px){
    #africa-arabia.aars-on .aars-scroll{ height:230svh; }
    #africa-arabia.aars-on .aars-stage{ height:100svh; }
  }
}
@media (prefers-reduced-motion: reduce){
  #africa-arabia.aars .aars-leaf, #africa-arabia.aars .aars-statement{ transform:none !important; opacity:1 !important; }
}

/* ══════════ 20260917k — NAVIGATION + NEWSLETTER (client feedback batch 4, .claude/CLIENT-FEEDBACK-0917c.md) ══════════
   "Who We Serve" holds For Businesses + For Investors in a hover dropdown; Talent Capital and Africa → Arabia open in
   a new tab; the newsletter lives in the footer on every page. */
.hdr2__bar{ max-width: 1320px; }
.hdr2.is-scr .hdr2__bar{ max-width: 1260px; }
.hdr2__links{ display: none; }
@media (min-width: 1240px){
  .hdr2__links{ display: flex; }
  .hdr2__ghost, .hdr2__solid{ display: inline-flex; }
  .hdr2 .burger{ display: none; }
}
@media (max-width: 1239px){
  .hdr2__links{ display: none !important; }
  .hdr2__ghost, .hdr2__solid{ display: none !important; }
  .hdr2 .burger{ display: inline-flex !important; flex-direction: column; }
}
@media (min-width: 1240px){ .hdr2__link{ padding: 9px 10px; font-size: .86rem; } }
@media (min-width: 1380px){ .hdr2__link{ padding: 9px 12px; font-size: .9rem; } }

.hdr2__drop{ position: relative; }
.hdr2__droptoggle{ display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer; }
.hdr2__caret{ width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.hdr2__drop.is-open .hdr2__caret{ transform: translateY(1px) rotate(225deg); }
.hdr2__menu{
  position: absolute; left: 0; top: calc(100% + 10px); min-width: 210px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(12,12,14,.94); border: 1px solid rgba(226,178,76,.28);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 22px 50px rgba(0,0,0,.55), 0 0 30px rgba(226,178,76,.10);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
}
.hdr2__menu::before{ content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.hdr2__drop.is-open .hdr2__menu{ opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s ease, visibility 0s; }
.hdr2__mlink{
  display: block; padding: 11px 14px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; font-size: .92rem; color: #fff;
  border-left: 2px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hdr2__mlink:hover, .hdr2__mlink:focus-visible{ background: rgba(226,178,76,.12); color: var(--accent); border-left-color: var(--accent); }
.hdr2__mlink.is-here{ color: var(--accent); }
.mobmenu__group{
  margin-top: 6px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent);
}
.mobmenu__link--sub{ padding-left: 16px; }

/* ── footer newsletter ── */
.ftr__news{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 48px); align-items: center;
  margin-top: clamp(36px, 4.4vw, 56px); padding: clamp(22px, 2.8vw, 34px);
  border: 1px solid rgba(226,178,76,.28);
  background: linear-gradient(120deg, rgba(226,178,76,.10), rgba(226,178,76,.02) 60%);
}
.ftr__newsh{ font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1.8vw, 1.6rem); letter-spacing: -.015em; color: #fff; }
.ftr__newsp{ margin-top: 8px; font-size: .92rem; line-height: 1.6; color: var(--txt); }
.ftr__newsform{ display: flex; gap: 10px; }
.ftr__newsin{
  flex: 1; min-width: 0; padding: 14px 16px; font: inherit; font-size: .95rem; color: #fff;
  background: rgba(244,248,251,.05); border: 1px solid var(--line);
}
.ftr__newsin:focus{ outline: none; border-color: var(--accent); }
.ftr__newsbtn{ white-space: nowrap; }
@media (max-width: 880px){
  .ftr__news{ grid-template-columns: 1fr; }
  .ftr__newsform{ flex-direction: column; }
}

/* ══════════ 20260918a — CLIENT FEEDBACK BATCH 5 (.claude/CLIENT-FEEDBACK-0918.md): globals + homepage ══════════ */

/* ── G3 · THE PATTERN as a reusable layer. Put <span class="goldpat"> inside any position:relative gold surface;
   the surface's own content must sit above it (z-index:1). --cover scales it to fill (no cropping). ── */
.goldpat{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../assets/img/pattern-swirl.webp') no-repeat 50% 42%;
  background-size: 100% auto; filter: brightness(0); opacity: .085;
}
.goldpat--cover{ background-size: cover; background-position: 50% 50%; }
.goldpat--soft{ opacity: .045; }
.mcard--blue, .mcard--wide, .xk-plate, .rgap2__panel{ position: relative; }
.mcard--blue > *:not(.goldpat), .mcard--wide > *:not(.goldpat), .xk-plate > *:not(.goldpat){ position: relative; z-index: 1; }

/* ── G1 · the logo lockup: FDN on the left, "Capital" aligned to its top and "Partners" to its bottom ── */
.brand--lock{ flex-direction: row; align-items: stretch; gap: 9px; }
.brand--lock .brand__word, .brand--lock .ftr__word{ line-height: 1; }
.brand__stack{
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding-block: 1px;
  font-family: var(--font-mono); font-weight: 600; font-size: .58rem; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
.brand--lock .brand__sub, .brand--lock .ftr__sub{ display: none; }
.ftr__stack{ font-size: .62rem; color: #fff; }
footer .brand--lock{ align-items: stretch; }

/* ── G2 · the "Who We Serve" dropdown: gold panel, ink text; hover flips to ink with gold text ── */
.hdr2__menu{ background: var(--accent-grad); border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.hdr2__mlink{ color: var(--accent-on); border-left-color: transparent; }
.hdr2__mlink:hover, .hdr2__mlink:focus-visible{ background: #0A0A0B; color: var(--accent); border-left-color: var(--accent); }
.hdr2__mlink.is-here{ color: var(--accent-on); text-decoration: underline; text-underline-offset: 4px; }
.hdr2__mlink.is-here:hover{ color: var(--accent); }

/* ── H1 · the closing line was clipped after "…to S": the white→grey gradient only paints inside the element's
   box, and the nowrap line overflows it, so the rest of the glyphs had no paint. Solid colour fixes it. ── */
#familiar .pside__tail{ max-width: none; }
#familiar .pside__tail .h-mid{ background: none; -webkit-text-fill-color: currentColor; color: var(--txt-hi); }

/* ── H2 / H3 · "Capital Isn't the Problem." larger; the plate covers more of the white space ── */
#problem .rgap3__h{ font-size: clamp(2.6rem, 6.2vw, 5.2rem); }
/* the notch is exactly the white space the client saw: it is now only as tall as the headline block, so the
   plate covers more, and the plate itself is taller. */
#problem .rgap3__stage{ --nh: clamp(250px, 19.5vw, 310px); height: clamp(560px, 54vw, 780px); }
#problem .rgap3__lead{ margin-top: clamp(10px, 1.1vw, 16px); }
#problem .rgap3__grid{ margin-top: clamp(26px, 3vw, 40px); }
#problem.sec.rgap{ padding-bottom: clamp(20px, 2.4vw, 34px); }

/* ── H4 · the gold panel lines: all ink, the first two lighter, the last heavy ── */
#connection .rgap2__panel .rgap2__line:not(.rgap2__line--ink){ color: #0A0A0B; font-weight: 400; }
#connection .rgap2__panel .rgap2__line--ink{ color: #0A0A0B; font-weight: 700; }

/* ── H5 · the Help cards take the lift-and-glow hover the client liked on the old platform tiles ── */
#help .rmcard{ transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .35s ease; }
#help .rmcard:hover{
  transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 26px 60px -24px color-mix(in srgb, var(--accent) 75%, transparent);
}
@media (prefers-reduced-motion: reduce){ #help .rmcard{ transition: none; } }

/* ── H6 · the carousel copy starts where the carousel FRAME starts, not under the arrow ── */
@media (min-width: 881px){
  #intelligence .sqz__copy{ padding-left: calc(52px + clamp(12px, 1.6vw, 22px)); }
}

/* ── H7 · the white CapitalQ/world band: less air top and bottom ── */
#the-name.sec.adv-reveal{ position: relative; padding-block: clamp(34px, 3.8vw, 60px); }
#the-name .goldpat{ filter: brightness(0); opacity: .045; }

/* ── H8 · Introducing CapitalQ: orb left, copy right ── */
#capitalq .cq3__lead{
  display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: center; max-width: none;
}
#capitalq .cq3__orb{ width: min(100%, 360px); margin: 0; justify-self: center; }
#capitalq .cq3__head{ text-align: left; max-width: none; margin: 0; }
#capitalq .cq3__h{ white-space: normal; font-size: clamp(1.9rem, 4.4vw, 4rem); margin-inline: 0; }
#capitalq .cq3__sub, #capitalq .cq3__body, #capitalq .cq3__pledge{ margin-inline: 0; text-align: left; }
@media (max-width: 880px){
  #capitalq .cq3__lead{ grid-template-columns: 1fr; }
  #capitalq .cq3__orb{ width: min(62%, 260px); }
}

/* ── H9 / H10 · one line per phrase, so nothing dangles ── */
.mcard__mid--lines span, .mcard__desc--lines span, .mcard__body--lines span{ display: block; }
.mcard__desc--lines span + span, .mcard__body--lines span + span{ margin-top: .45em; }

/* ── H12 · Knowledge Centre: pure white type, no grey gradient ── */
#knowledge .kc3__h, #knowledge .kc3__statement{ background: none; -webkit-text-fill-color: #FFFFFF; color: #FFFFFF; }
#knowledge .kc3__body, #knowledge .korb__d{ color: #FFFFFF; }
#knowledge .kc3__statement .tblue{ color: var(--accent); -webkit-text-fill-color: var(--accent); }
#knowledge .korb__logo{ flex-direction: row; align-items: stretch; gap: 8px; justify-content: center; }
#knowledge .korb__logo-stack{ font-size: clamp(.5rem, .72vw, .62rem); letter-spacing: .18em; color: #fff; }

/* ── H11 · the Africa → Arabia ledger: the glass box goes, the three parts breathe ── */
#africa-arabia .aarw-ledger{ background: none; border: 0; box-shadow: none; padding: 0; }
#africa-arabia .aarw-count--open{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
#africa-arabia .aarw-stages{
  margin-top: clamp(18px, 2.2vw, 28px); padding-block: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
#africa-arabia .aarw-mandate{ margin-top: clamp(18px, 2.2vw, 28px); }

/* ══════════ 20260918b — the client's new photographs ══════════
   hero-office.jpg (homepage hero, zoomed so the two figures read) and persona2-mandate.jpg (panel 03,
   "You Have a Strategic Mandate"). Both keep the gold tone. */
#top.hero--exec .hero__bg img{
  object-position: 64% 52%;
  transform-origin: 64% 52%;
  transform: scale(1.06);
  filter: sepia(.2) saturate(1.08) hue-rotate(-6deg) brightness(.92);
}
@media (max-width: 880px){
  #top.hero--exec .hero__bg img{ object-position: 58% 42%; transform: scale(1); }
}
#familiar .ppane2__fig img[src*="persona2-mandate"]{ object-position: 50% 26%; }

/* 20260918c — the client's new forum photograph on the Knowledge Centre hero
   carries the house gold tone like every other photo on the site. */
#top.kchero .hero__bg img{ filter: var(--gold-photo); object-position: 52% 45%; }
@media (max-width: 880px){ #top.kchero .hero__bg img{ object-position: 40% 45%; } }

/* ══════════ 2026-09-18c — CLIENT FEEDBACK BATCH 6 · GLOBALS ══════════
   G-A · "let's change all those gradient text that we had before to normal
   white… let's change it to PURE WHITE, because that's our colour."
   The fade-to-grey display gradient is retired site-wide. The gradient rules
   only ever painted -webkit-text-fill-color, so clearing it hands every line
   back to its own `color` — gold spans stay gold, ink-on-light stays ink —
   and the near-white token becomes pure white. */
:root{ --txt-hi: #FFFFFF; }

.h-hero, .h-major, .h-mid, .h-sub, .pside__t,
.help2__title, .stack-state p.on, .fcard__t, .scard--blue .scard__t, .lt__lede,
#knowledge .kcard2__t, .pat__itemt, .bhq__ask, .outc__now,
.ppane2__close p:not(.blue), .mcard__widet{
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* G-B · the Knowledge orbit centre wears the SAME lockup proportion as the nav
   (client: "the Capital Partners should look like the way it is on the
   navigation… the space between Capital and Partners is the wrong way").
   Nav ratio: stack type = .387 x the FDN box; the box here is .9em, so .348em. */
#knowledge .korb__logo{ gap: clamp(12px, 1.5vw, 20px); }
#knowledge .korb__logo-stack{
  font-size: clamp(.89rem, 1.7vw, 1.41rem); letter-spacing: .18em; padding-block: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-09-21 · CINEMATIC HERO SCRIM  (client, batch 11)
   "the black overlay would be like a gradient — one side black, the other
    transparent, so when it gets to where the main subject of the image is it
    gives the subject a really nice pop… I need it more deep, more cinematic…
    and we give it that gold, nice pop colour."
   One system, three layers, driven by four custom properties so every hero
   can aim it at its own subject:
     --hs-angle  the direction the darkness comes FROM (90deg = from the left)
     --hs-pop-x / --hs-pop-y  where the subject sits, for the warm lift
     --hs-deep   how far the wall stays solid before it releases (0-1)
   Layer 1 is a low gold bloom over the subject, layer 2 the directional wall,
   layer 3 the floor that hands the section to the page below.
   ══════════════════════════════════════════════════════════════════════════ */
#top.hero--exec .hero__scrim,
#top.hero--biz .hero__scrim,
#top.inv-hero .hero__scrim,
#top.fx-inv-hero .hero__scrim{
  --hs-angle: 90deg;
  --hs-pop-x: 72%;
  --hs-pop-y: 50%;
  --hs-deep: 1;
  background:
    radial-gradient(56% 64% at var(--hs-pop-x) var(--hs-pop-y),
      rgba(226,178,76,.14), rgba(226,178,76,.05) 45%, rgba(226,178,76,0) 72%),
    linear-gradient(var(--hs-angle),
      rgba(4,5,7,calc(.97 * var(--hs-deep))) 0%,
      rgba(4,5,7,calc(.93 * var(--hs-deep))) 28%,
      rgba(4,5,7,calc(.66 * var(--hs-deep))) 52%,
      rgba(4,5,7,calc(.24 * var(--hs-deep))) 74%,
      rgba(4,5,7,0) 96%),
    linear-gradient(0deg, var(--bg) 0%, rgba(4,5,7,.66) 16%, rgba(4,5,7,.12) 52%, rgba(4,5,7,.40) 100%);
}
/* the photographs themselves carry a touch more contrast so the lift has
   something to lift — the subject separates instead of the whole frame greying */
#top.hero--exec .hero__bg img,
#top.hero--biz .hero__bg img,
#top.inv-hero .hero__bg img{ filter: sepia(.18) saturate(1.12) hue-rotate(-6deg) contrast(1.08) brightness(.9); }

/* homepage — the pair sit centre-right, the copy low-left */
#top.hero--exec .hero__scrim{ --hs-pop-x: 66%; --hs-pop-y: 46%; }
/* for businesses — she is hard right; he asked for this one DEEPER */
#top.hero--biz .hero__scrim{ --hs-pop-x: 76%; --hs-pop-y: 44%; }
/* investors — the subject is on the LEFT and the copy on the right, so the
   wall comes from the other side */
#top.inv-hero .hero__scrim,
#top.fx-inv-hero .hero__scrim{ --hs-angle: 270deg; --hs-pop-x: 34%; --hs-pop-y: 44%; }

@media (max-width: 880px){
  /* on a phone the copy sits over the picture, so the wall lies down */
  #top.hero--exec .hero__scrim,
  #top.hero--biz .hero__scrim,
  #top.inv-hero .hero__scrim,
  #top.fx-inv-hero .hero__scrim{
    background:
      radial-gradient(70% 40% at var(--hs-pop-x) 26%,
        rgba(226,178,76,.13), rgba(226,178,76,0) 70%),
      linear-gradient(0deg, var(--bg) 0%, rgba(4,5,7,.95) 26%, rgba(4,5,7,.62) 58%, rgba(4,5,7,.3) 100%);
  }
}

/* ══════════ 2026-09-21 · the client's new FDN logo ══════════
   "Replace it with what we have on the website currently, but keep the colour
    used before — FDN gold, Capital Partners white. All we're adding to the logo
    is the white line under the Capital Partners."
   Measured off his artwork (523x104): the rule spans the FULL width of the
   CAPITAL/PARTNERS stack, sits hard at the bottom of the lockup, and is ~5px in
   a 104px lockup. Expressed in em of the stack type so it scales with every
   instance — header, mobile menu, footer and the Knowledge orbit centre — with
   no markup change anywhere. ══════════ */
.brand--lock .brand__stack{
  position: relative;
  padding-bottom: .5em;
}
.brand--lock .brand__stack::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: max(1.5px, .2em);
  background: #FFFFFF;
}
/* the orbit centre carries the lockup at display size — keep the rule in proportion */
#knowledge .korb__logo-stack{ padding-bottom: .46em; }

/* ══════════ 2026-09-22 · ACTIVE / INACTIVE CAROUSEL ARROWS (client, batch 12) ══════════
   "Make the active arrow gold — the one you are able to click has a gold outline.
    At the beginning the right one is active; once it gets to the end, the other one…
    and when it's not active it becomes dull. It should be in every section of this
    website that has this kind of arrow."
   ONE contract for every carousel on the site. The arrow markup keeps whatever class
   it already has; the carousel's own script adds .is-arrow-on to the arrow you CAN
   press and .is-arrow-off to the one you cannot. Nothing else needs to change.
   ══════════════════════════════════════════════════════════════════════════════ */
.is-arrow-on{
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(226,178,76,.18), 0 6px 26px rgba(226,178,76,.16);
  opacity: 1 !important;
}
.is-arrow-on svg{ fill: var(--accent); }
.is-arrow-on:hover{ background: var(--accent) !important; color: var(--accent-on) !important; }
.is-arrow-on:hover svg{ fill: var(--accent-on); }
.is-arrow-off{
  border: 1px solid rgba(244,248,251,.14) !important;
  color: rgba(244,248,251,.28) !important;
  box-shadow: none !important;
  opacity: .55;
  cursor: default;
}
.is-arrow-off svg{ fill: rgba(244,248,251,.28); }
/* on the light sections the dulled state has to dull against white, not black */
.sec--light .is-arrow-off, .slab--light .is-arrow-off{
  border-color: rgba(11,12,14,.16) !important; color: rgba(11,12,14,.3) !important;
}
.sec--light .is-arrow-off svg, .slab--light .is-arrow-off svg{ fill: rgba(11,12,14,.3); }

/* ══════════ 2026-09-23 · batch 13 · PHONE PASS ═══════════════════════════
   Client: "the mobile version… there are some images that are scrimped."
   Every rule below fixes a picture whose BOX shape fights the photograph. */

/* A · the squeeze carousel (index #intelligence, knowledge-centre #explore).
   On a phone the six-panel accordion left the open panel 175px wide holding a
   16:9 photograph — a vertical keyhole with the subject cropped out. Show the
   open panel alone, full width, and let the arrows page through it. */
@media (max-width: 759px){
  [data-sqz] .sqz__view{ gap: 0; height: clamp(212px, 56vw, 300px); }
  [data-sqz] .sqz__panel{ display: none; }
  [data-sqz] .sqz__panel.is-open{ display: block; width: 100% !important; }
  [data-sqz] .sqz__img{ width: 100% !important; left: 0; transform: none; }
  [data-sqz] .sqz__arrows{ justify-content: space-between; }
}

/* ══════════ 2026-09-23 · batch 14 ════════════════════════════════════════
   B-12 — Investors hero. 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." Two things were doing it: the gold bloom in the scrim sits at
   34%/44%, which is exactly his face, and the photograph carried a sepia +
   hue-rotate grade. Both go on this hero only; the directional wall that
   keeps the copy side dark stays. */
#top.inv-hero .hero__bg img,
#top.fx-inv-hero .hero__bg img{ filter: contrast(1.04) brightness(.94); }
#top.inv-hero .hero__scrim,
#top.fx-inv-hero .hero__scrim{
  background:
    linear-gradient(var(--hs-angle),
      rgba(4,5,7,calc(.97 * var(--hs-deep))) 0%,
      rgba(4,5,7,calc(.93 * var(--hs-deep))) 28%,
      rgba(4,5,7,calc(.66 * var(--hs-deep))) 52%,
      rgba(4,5,7,calc(.24 * var(--hs-deep))) 74%,
      rgba(4,5,7,0) 96%),
    linear-gradient(0deg, var(--bg) 0%, rgba(4,5,7,.66) 16%, rgba(4,5,7,.12) 52%, rgba(4,5,7,.40) 100%);
}
@media (max-width: 880px){
  #top.inv-hero .hero__scrim,
  #top.fx-inv-hero .hero__scrim{
    background: linear-gradient(0deg, var(--bg) 0%, rgba(4,5,7,.95) 26%, rgba(4,5,7,.62) 58%, rgba(4,5,7,.3) 100%);
  }
}

/* ══════════ SQUARE CORNERS — standing client-wide rule. LAST. ══════════ */
body *, body *::before, body *::after{ border-radius: 0 !important; }
/* SOLE exception, explicitly requested by the client 2026-08-30 ("make the
   image a curved section — just that image"): the section-3 Lyra panel. */
body .lyra--curve, body .lyra--curve::before,

/* Exception 2, explicitly requested by the client 2026-09-02 ("all the icon
   placeholder should be circle instead of box") — the orbiting pattern icons
   only. Everything else stays square. */
body .pat__ico{ border-radius: 50% !important; }

/* ══════════ 20261011b, revised 20261012a — header icons: PHONE MENU ONLY ══════════
   2026-10-11 the client asked for the old icon header back, so every desktop tab became an icon that widened on hover.
   2026-10-12 Dara reviewed it live: the DESKTOP header goes back to the plain text tabs exactly as before (desktop rules
   deleted here; the .hdr2__ico / .hdr2__lbl / .hdr2__mico markup removed, header blocks restored from commit 379167f).
   The phone menu keeps its gold icons. Markup: .claude/navicons.py (now phone menu only). */
.mobmenu__ico{ display:inline-flex; flex:none; align-items:center; justify-content:center; }
.mobmenu__ico svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mobmenu__link{ display:flex; align-items:center; gap:14px; }
.mobmenu__ico{ color: var(--accent); }
.mobmenu__ico svg{ width:22px; height:22px; }
.mobmenu__link--sub .mobmenu__ico svg{ width:19px; height:19px; }
.mobmenu__acctoggle{ justify-content:flex-start !important; gap:14px !important; text-align:left; }
.mobmenu__acctoggle .mobmenu__caret{ margin-left:auto; }