/* ══════════════════════════════════════════════════════════════════════════
   fix-0918b-home.css — homepage only, client feedback batch 6 (2026-09-18).
   Linked from index.html ONLY, so nothing here can leak to another page.
   Brief: .claude/CLIENT-FEEDBACK-0918b.md  (items H3, H4)
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   H3 · #first-meeting — the wide gold card.
   Client: "Meet the contest should be bold. Connect with Conviction should be
   black, but… medium in terms of thickness, because I don't like the colour
   you're using currently. Same as the body copy. The body copy needs to be
   bold because of the way the background is."
   ══════════════════════════════════════════════════════════════════════════ */
#first-meeting .mcard--wide .mcard__widet{ font-weight: 700; }
/* the second half stops being the washed 60%-ink it was — full ink, medium weight */
#first-meeting .mcard--wide .mcard__widet-b{
  font-weight: 500;
  color: var(--accent-on);
  -webkit-text-fill-color: var(--accent-on);
}
/* body copy + CTA line hold up on the gold ground */
#first-meeting .mcard--wide .mcard__widesub{
  font-weight: 700;
  color: var(--accent-on);
  -webkit-text-fill-color: var(--accent-on);
}
#first-meeting .mcard--wide .mcard__widecta{
  font-weight: 700;
  color: var(--accent-on);
  -webkit-text-fill-color: var(--accent-on);
}

/* ══════════════════════════════════════════════════════════════════════════
   H4 · #africa-arabia — "THE BOLT", round 2.
   Second time of asking, so this is not a restyled box: the ledger is the
   finished cloth the section has spent three acts weaving.

     · THE FIELD. 10,000+ is not a claim, it is drawn — ten thousand real warp
       marks (canvas, js/fix-0918b-home.js) bleeding selvedge to selvedge with
       no hard edge, terracotta at the Africa side running to brass at the
       Arabia side and visibly THINNING as it crosses: what leaves Africa is
       dense, what reaches Arabia is what the bridge carries. The figure is
       CUT OUT of that field, so the number and the cloth are one thing.
     · SIX COURSES. Each stage is a course of the same cloth; the weft has been
       carried from the selvedge as far as that stage's knot and the bare warp
       runs on past it. Course by course it crosses further AND the cloth
       thickens — row, band, type, knot and glow all step up, so Strategic
       Transactions plainly carries more than Pre-Seed. The stage name is woven
       INTO its own band in ink; there are no plates sitting on the cloth.
     · ONE THREAD. A single unbroken gold FDN thread is drawn through all six
       knots and straight on into the mandate, where it ties off at the first
       word — "Multiple Stages. One Strategic Gateway." drawn, not asserted,
       and the mandate is the END OF THE THREAD, not a caption under a rule.

   Palette: only the section's own approved --aarw-* tokens. Square corners.
   No type gradients. Copy verbatim, in the document's order.
   ══════════════════════════════════════════════════════════════════════════ */

#africa-arabia .aarw-ledgerwrap{ margin-top: clamp(64px, 6.4vw, 96px); }

#africa-arabia .aarb{
  --aarb-px: clamp(30px, 3.6vw, 60px);
  --aarb-pt: clamp(30px, 3.4vw, 52px);
  position: relative; isolation: isolate;
  padding: var(--aarb-pt) var(--aarb-px) clamp(28px, 3vw, 44px);
  background:
    linear-gradient(90deg, rgba(42,21,16,.92) 0%, rgba(36,20,36,.92) 50%, rgba(21,20,42,.92) 100%),
    var(--aarw-night);
  border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
#africa-arabia .aarb::before{                       /* the cloth grain */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--aarw-grain); opacity: .05; mix-blend-mode: overlay;
}
#africa-arabia .aarb > *{ position: relative; z-index: 1; }

/* woven selvedge down the Africa edge, khatam selvedge down the Arabia edge */
#africa-arabia .aarb__sel{ position: absolute; top: 0; bottom: 0; width: 10px; z-index: 4; pointer-events: none; opacity: .85; }
#africa-arabia .aarb__sel--weave{ left: 0; background: var(--aarw-weave); }
#africa-arabia .aarb__sel--lat{ right: 0; background: var(--aarw-lat) 0 0/10px 10px, #15142A; }
/* the section's yellow stitch drops out of the bridge above and into the cloth */
#africa-arabia .aarb__edge{
  position: absolute; left: 0; right: 0; top: 0; height: 18px; z-index: 5; pointer-events: none;
  background: linear-gradient(var(--aarw-thread), var(--aarw-thread)) var(--aarb-px) 0/2px 18px no-repeat;
}

/* ── the field · ten thousand warp marks, and the figure cut out of them ─ */
#africa-arabia .aarb__head{
  position: relative;
  margin: 0 calc(-1 * var(--aarb-px));                 /* the field bleeds to both selvedges */
  padding: clamp(26px, 3vw, 44px) var(--aarb-px) clamp(24px, 2.6vw, 36px);
}
#africa-arabia .aarb__field{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* no rectangle: the field dissolves into the selvedges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
#africa-arabia .aarb__warp{
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%);
}
#africa-arabia .aarb__count{
  position: relative; z-index: 1; margin: 0; max-width: none;
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  align-items: end; column-gap: clamp(20px, 2.2vw, 40px);
}
#africa-arabia .aarb__n{
  font-size: clamp(3.4rem, 7vw, 6.4rem); font-weight: 500; line-height: .88; letter-spacing: -.045em;
  color: var(--aarw-sand); background: none; -webkit-text-fill-color: currentColor;
}
#africa-arabia .aarb__t{
  font-size: clamp(1.02rem, 1.35vw, 1.3rem); line-height: 1.45; font-weight: 500;
  letter-spacing: -.005em; color: rgba(241,228,204,.92); max-width: 24ch; padding-bottom: .42em;
}

/* ── the cloth · six courses, one thread, the mandate ──────────────────── */
#africa-arabia .aarb__cloth{ position: relative; margin-top: clamp(24px, 2.6vw, 38px); }

#africa-arabia .aarb__courses{
  /* NO z-index here: a stacking context would trap the knots under the thread */
  position: relative; list-style: none; margin: 0; padding: 0;
  border-top: 1px solid rgba(241,228,204,.13);
}
#africa-arabia .aarb__course{
  --x: 16%; --i: 0;
  --h:  calc(46px + var(--i) * 4.8px);          /* the cloth thickens as it crosses */
  --bh: calc(15px + var(--i) * 3.4px);
  --fs: calc(.78rem + var(--i) * .046rem);
  --kn: calc(9px + var(--i) * 1.7px);
  position: relative; height: var(--h); font-weight: 500;
}
/* --x  where this course's weft reaches · --xn the same as a fraction (so every
   band samples the SAME full-width colour ramp — one cloth, not six bars)
   --split  where the PREVIOUS course stopped, as a % of this band: the lit
   segment is the ground this stage newly crosses. */
#africa-arabia .aarb__course:nth-child(1){ --x: 16%;   --xn: .16;  --split: 0%;    --i: 0; }
#africa-arabia .aarb__course:nth-child(2){ --x: 31.2%; --xn: .312; --split: 51.3%; --i: 1; }
#africa-arabia .aarb__course:nth-child(3){ --x: 46.4%; --xn: .464; --split: 67.2%; --i: 2; font-weight: 600; }
#africa-arabia .aarb__course:nth-child(4){ --x: 61.6%; --xn: .616; --split: 75.3%; --i: 3; font-weight: 600; }
#africa-arabia .aarb__course:nth-child(5){ --x: 76.8%; --xn: .768; --split: 80.2%; --i: 4; font-weight: 700; }
#africa-arabia .aarb__course:nth-child(6){ --x: 92%;   --xn: .92;  --split: 83.5%; --i: 5; font-weight: 700; }

/* the bare warp past the knot — the part of the cloth not yet crossed */
#africa-arabia .aarb__warp-bare{
  position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; z-index: 0;
  background: repeating-linear-gradient(90deg, rgba(241,228,204,.32) 0 3px, transparent 3px 9px);
}
/* the weft carried from the selvedge to this course's knot */
#africa-arabia .aarb__weft{
  position: absolute; left: 0; width: var(--x); z-index: 1;
  top: calc(50% - var(--bh) / 2); height: var(--bh);
  background-image:
    linear-gradient(90deg, rgba(241,228,204,.3) 0, rgba(241,228,204,0) 30%),
    repeating-linear-gradient(90deg, rgba(20,14,23,.17) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(20,14,23,.12) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, var(--aarw-terracotta) 0%, var(--aarw-ochre) 66%, var(--aarw-brass) 100%);
  /* the last layer is sized to the WHOLE row, so every band reads the same
     Africa-to-Arabia ramp at the same place — one bolt, cut at six lengths */
  background-size: 100% 100%, auto, auto, calc(100% / var(--xn, 1)) 100%;
  background-repeat: no-repeat, repeat, repeat, no-repeat;
  box-shadow: inset 0 -1px 0 rgba(20,14,23,.28), inset 0 1px 0 rgba(241,228,204,.16);
  /* the last picks are not beaten in yet — the weft frays into the bare warp
     instead of stopping at a hard edge */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 11px), rgba(0,0,0,.35) 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 11px), rgba(0,0,0,.35) 100%);
  transform-origin: left center;
  transition: filter .3s ease;
}
/* the ground this stage newly crosses, lit, picking up where the last stopped */
#africa-arabia .aarb__weft::after{
  content: ""; position: absolute; left: var(--split, 0%); right: 0; top: 0; bottom: 0;
  background: rgba(241,228,204,.2);      /* --aarw-sand, as a light pick */
  box-shadow: inset 1px 0 0 rgba(20,14,23,.45);
  pointer-events: none;
}
#africa-arabia .aarb__course:nth-child(1) .aarb__weft::after{ box-shadow: none; }
/* the stage name is WOVEN INTO its band — ink on the cloth, never a plate */
#africa-arabia .aarb__stg{
  position: absolute; left: clamp(10px, 1vw, 16px); top: 50%; z-index: 2;
  transform: translateY(-50%); white-space: nowrap; line-height: 1;
  font-size: var(--fs); font-weight: inherit; letter-spacing: .012em;
  color: var(--aarw-night); -webkit-text-fill-color: var(--aarw-night);
  transition: color .3s ease;
}
/* the knot where the gold FDN thread passes through this course */
#africa-arabia .aarb__knot{
  position: absolute; left: var(--x); top: 50%; z-index: 4;
  width: var(--kn); height: var(--kn);
  margin: calc(var(--kn) / -2) 0 0 calc(var(--kn) / -2);
  background: var(--aarw-thread); transform: rotate(45deg);
  box-shadow:
    0 0 0 3px rgba(20,14,23,.9),
    0 0 calc(7px + var(--i) * 2.4px) rgba(226,178,76, calc(.55 + var(--i) * .08));
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}

/* ONE thread — knot to knot to knot, and on into the mandate.
   Above the cloth (z-index 3) and below the knots (4); nothing opaque is ever
   laid on top of it, which is what broke it into stubs last round. */
#africa-arabia .aarb__thread{
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3; pointer-events: none; overflow: visible;
}
#africa-arabia .aarb__threadline{
  fill: none; stroke: var(--aarw-thread); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(226,178,76,.6));
}
#africa-arabia .aarb__tieknot{ fill: var(--aarw-thread); filter: drop-shadow(0 0 6px rgba(226,178,76,.7)); }

/* hover / focus: the course lights along its own thread */
#africa-arabia .aarb__course:hover .aarb__weft{ filter: brightness(1.22) saturate(1.1); }
#africa-arabia .aarb .aarb__course:hover .aarb__knot,
#africa-arabia .aarb.aarb-js.is-woven .aarb__course:hover .aarb__knot{
  transform: rotate(45deg) scale(1.5);
  box-shadow: 0 0 0 3px rgba(20,14,23,.9), 0 0 20px rgba(226,178,76,.98);
  /* the weave-in end state carries a long stagger delay; hover must not inherit it */
  transition: transform .28s cubic-bezier(.22,.61,.36,1) 0s, box-shadow .28s ease 0s;
}

/* ── the mandate closes the bolt — the thread ties off at its first word ── */
#africa-arabia .aarb__mandate{
  position: relative; margin: clamp(28px, 3vw, 44px) 0 0; max-width: none;
  padding-top: clamp(26px, 2.6vw, 36px); text-align: right;
  font-size: clamp(1.3rem, 2.05vw, 1.85rem); font-weight: 500; line-height: 1.25; letter-spacing: -.015em;
  color: var(--aarw-sand);
}
#africa-arabia .aarb__tie{ display: inline-block; width: 0; height: 1em; vertical-align: -.16em; }
#africa-arabia .aarb__y{ color: var(--aarw-thread); -webkit-text-fill-color: currentColor; }

/* ── motion · start states exist only once the JS has claimed the block ── */
#africa-arabia .aarb.aarb-js .aarb__weft{ transform: scaleX(0); }
#africa-arabia .aarb.aarb-js .aarb__knot{ opacity: 0; transform: rotate(45deg) scale(.2); }
#africa-arabia .aarb.aarb-js .aarb__stg{ opacity: 0; transform: translate(9px, -50%); }
#africa-arabia .aarb.aarb-js .aarb__threadline{ stroke-dasharray: var(--tl, 1); stroke-dashoffset: var(--tl, 1); }
#africa-arabia .aarb.aarb-js .aarb__tieknot{ opacity: 0; }

#africa-arabia .aarb.aarb-js.is-woven .aarb__weft{ transform: none; transition: transform 900ms cubic-bezier(.19,1,.22,1) calc(var(--i) * 90ms + 120ms); }
#africa-arabia .aarb.aarb-js.is-woven .aarb__knot{ opacity: 1; transform: rotate(45deg) scale(1); transition: opacity 320ms ease calc(var(--i) * 90ms + 520ms), transform 520ms cubic-bezier(.34,1.3,.5,1) calc(var(--i) * 90ms + 520ms); }
#africa-arabia .aarb.aarb-js.is-woven .aarb__stg{ opacity: 1; transform: translate(0, -50%); transition: opacity 520ms ease calc(var(--i) * 90ms + 420ms), transform 620ms cubic-bezier(.19,1,.22,1) calc(var(--i) * 90ms + 420ms); }
#africa-arabia .aarb.aarb-js.is-woven .aarb__threadline{ stroke-dashoffset: 0; transition: stroke-dashoffset 1700ms cubic-bezier(.65,0,.35,1) 300ms; }
#africa-arabia .aarb.aarb-js.is-woven .aarb__tieknot{ opacity: 1; transition: opacity 320ms ease 1900ms; }

/* ── phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 880px){
  #africa-arabia .aarb{ --aarb-px: 20px; --aarb-pt: 26px; padding-bottom: 24px; }
  #africa-arabia .aarb__sel{ width: 7px; }
  #africa-arabia .aarb__sel--lat{ background: var(--aarw-lat) 0 0/7px 7px, #15142A; }
  #africa-arabia .aarb__head{ padding: 22px var(--aarb-px) 20px; }
  #africa-arabia .aarb__count{ display: block; }
  #africa-arabia .aarb__n{ display: block; font-size: 3.5rem; }
  #africa-arabia .aarb__t{ display: block; margin-top: 12px; max-width: none; font-size: 1rem; padding-bottom: 0; }
  #africa-arabia .aarb__cloth{ margin-top: 20px; }
  /* the runs still grow course by course — nothing occludes them, so the
     "each course crosses further" reading holds exactly as it does at 1440 */
  #africa-arabia .aarb__course{
    --h:  calc(42px + var(--i) * 3.4px);
    --bh: calc(14px + var(--i) * 2.4px);
    --fs: calc(.68rem + var(--i) * .034rem);
    --kn: calc(8px + var(--i) * 1.3px);
  }
  #africa-arabia .aarb__course:nth-child(1){ --x: 26%;   --xn: .26;  --split: 0%; }
  #africa-arabia .aarb__course:nth-child(2){ --x: 39.2%; --xn: .392; --split: 66.3%; }
  #africa-arabia .aarb__course:nth-child(3){ --x: 52.4%; --xn: .524; --split: 74.8%; }
  #africa-arabia .aarb__course:nth-child(4){ --x: 65.6%; --xn: .656; --split: 79.9%; }
  #africa-arabia .aarb__course:nth-child(5){ --x: 78.8%; --xn: .788; --split: 83.2%; }
  #africa-arabia .aarb__course:nth-child(6){ --x: 92%;   --xn: .92;  --split: 85.7%; }
  #africa-arabia .aarb__stg{ left: 8px; letter-spacing: .015em; }
  #africa-arabia .aarb__threadline{ stroke-width: 1.7; }
  #africa-arabia .aarb__mandate{ text-align: left; font-size: 1.24rem; margin-top: 30px; padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce){
  #africa-arabia .aarb.aarb-js .aarb__weft,
  #africa-arabia .aarb.aarb-js .aarb__knot,
  #africa-arabia .aarb.aarb-js .aarb__stg,
  #africa-arabia .aarb.aarb-js .aarb__threadline,
  #africa-arabia .aarb.aarb-js .aarb__tieknot{ opacity: 1; transform: none; stroke-dashoffset: 0; transition: none; }
  #africa-arabia .aarb.aarb-js .aarb__knot{ transform: rotate(45deg); }
  #africa-arabia .aarb.aarb-js .aarb__stg{ transform: translateY(-50%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   H4 · round 3 (lead pass). The builder's "bolt" was a genuinely new object,
   but six left-aligned bands growing in length, each ending in a marker with a
   descending line through the markers, is the visual grammar of a BAR CHART —
   and it implied a quantity per stage that the copy never claims. The reviewer
   flagged the same read. So: the bars, the per-stage "runs" and the ten-thousand
   -mark noise field come out; what stays is the one idea the line actually
   carries — "Multiple Stages. ONE Strategic Gateway." — drawn as ONE thread
   running selvedge to selvedge with a knot at each of the six stages, evenly
   spaced (even spacing = no implied quantity), tying off at the mandate.
   ══════════════════════════════════════════════════════════════════════════ */
#africa-arabia .aarb__field{ display: none; }

#africa-arabia .aarl{
  position: relative;
  margin-top: clamp(34px, 3.8vw, 56px);
  padding-top: 4px;
}
#africa-arabia .aarl__thread{
  position: absolute; left: calc(var(--aarb-px) * -1); right: calc(var(--aarb-px) * -1);
  top: 7px; height: 2px; z-index: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--aarw-terracotta) 55%, transparent) 0%,
    var(--aarw-ochre) 16%, var(--aarw-thread) 58%, var(--aarw-brass) 88%,
    color-mix(in srgb, var(--aarw-brass) 45%, transparent) 100%);
}
/* the thread ties off at the right selvedge, where the mandate reads */
#africa-arabia .aarl__tie{
  position: absolute; right: calc(var(--aarb-px) * -1); top: 0; width: 2px; height: 16px;
  background: var(--aarw-thread); z-index: 1;
  box-shadow: 0 0 16px rgba(226,178,76,.55);
}
#africa-arabia .aarl__stages{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(6, 1fr);
  list-style: none; margin: 0; padding: 0;
}
#africa-arabia .aarl__stage{
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  transition: transform .4s cubic-bezier(.19,1,.22,1);
}
#africa-arabia .aarl__knot{
  width: 14px; height: 14px; flex: 0 0 auto;
  background: var(--aarw-thread); transform: rotate(45deg);
  box-shadow: 0 0 0 5px rgba(20,14,23,.95), 0 0 18px rgba(226,178,76,.45);
  transition: box-shadow .4s ease, transform .4s cubic-bezier(.34,1.3,.5,1);
}
#africa-arabia .aarl__name{
  font-size: clamp(.8rem, .95vw, .97rem); font-weight: 600; letter-spacing: .015em;
  line-height: 1.35; text-align: center; color: var(--aarw-sand);
  max-width: 15ch;
}
#africa-arabia .aarl__stage:hover .aarl__knot{
  transform: rotate(45deg) scale(1.35);
  box-shadow: 0 0 0 5px rgba(20,14,23,.95), 0 0 26px rgba(226,178,76,.85);
}
#africa-arabia .aarl__stage:hover .aarl__name{ color: var(--aarw-thread); }
#africa-arabia .aarl__mandate{
  margin-top: clamp(34px, 3.8vw, 54px);
  text-align: right;
}

@media (max-width: 760px){
  /* the beam stands up: the thread runs down the left selvedge, knots step down it */
  #africa-arabia .aarl{ padding-top: 0; padding-left: 26px; }
  #africa-arabia .aarl__thread{
    left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--aarw-terracotta) 55%, transparent) 0%,
      var(--aarw-ochre) 16%, var(--aarw-thread) 58%, var(--aarw-brass) 92%);
  }
  #africa-arabia .aarl__tie{ right: auto; left: 0; top: auto; bottom: -8px; width: 14px; height: 2px; }
  #africa-arabia .aarl__stages{ grid-template-columns: 1fr; gap: 20px; }
  #africa-arabia .aarl__stage{ flex-direction: row; align-items: center; gap: 18px; margin-left: -26px; }
  #africa-arabia .aarl__name{ text-align: left; max-width: none; }
  #africa-arabia .aarl__mandate{ text-align: left; }
}


/* ==========================================================================
   BATCH 7 - H6/C8: "Prefer It Done For You?" moved here from the CapitalQ page,
   before Africa -> Arabia, design unchanged. These rules came across verbatim
   from css/fix-0917c-cqpage.css.
   ========================================================================== */
/* ───────────────────────── 11 · PREFER IT DONE FOR YOU? — gold, the homepage swirl ───────────────────────── */
#done-for-you.cqp-dfy{
  overflow: hidden; isolation: isolate; color: var(--accent-on);
  background: var(--accent-grad); background-color: var(--accent);
}

#done-for-you .cqp-dfy__grid{
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 120px); align-items: start;
}
#done-for-you .cqp-dfy__eyebrow{
  display: inline-block; padding: 6px 10px; border: 1px solid rgba(10,10,11,.34);
  font-weight: 600; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(10,10,11,.78);
}
#done-for-you .cqp-dfy__ask{ margin-top: clamp(22px, 2.6vw, 34px); font-size: clamp(1.2rem, 1.8vw, 1.65rem); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: rgba(10,10,11,.74); }
#done-for-you .cqp-dfy__h{
  margin-top: 10px; font-size: clamp(2.6rem, 5.4vw, 5.5rem); line-height: .98; font-weight: 700; letter-spacing: -.052em; color: var(--accent-on);
  -webkit-text-fill-color: currentColor; text-wrap: balance;
}
#done-for-you .cqp-dfy__plug{
  display: inline-block; margin-top: clamp(20px, 2.4vw, 30px); padding: 10px 16px;
  background: #0A0A0B; color: var(--accent);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem); font-weight: 600; letter-spacing: -.01em;
}
#done-for-you .cqp-dfy__from{ font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.38; font-weight: 500; letter-spacing: -.015em; color: var(--accent-on); max-width: 40ch; }
#done-for-you .cqp-dfy__rail{
  list-style: none; margin-top: clamp(24px, 2.8vw, 36px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(10,10,11,.24); border-left: 1px solid rgba(10,10,11,.24);
}
#done-for-you .cqp-dfy__rail li{
  position: relative; padding: 14px 16px 16px;
  border-right: 1px solid rgba(10,10,11,.24); border-bottom: 1px solid rgba(10,10,11,.24);
  font-size: clamp(.95rem, 1.1vw, 1.06rem); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--accent-on);
  transition: background-color .35s ease, color .35s ease;
}
/* opacity .78 (not .62) so the 11px index numerals clear 4.5:1 on the gold AND on the black is-on state */
#done-for-you .cqp-dfy__n{ display: block; margin-bottom: 16px; font-size: .68rem; letter-spacing: .2em; opacity: .78; }
/* H-2 (batch 12): the `.is-on` state that the sequential 01->12 rail animation
   drove is GONE — no JS sets it any more and the selector is removed with it, so
   no step can be singled out. Only the user's own hover still inverts a step. */
/* ...and only where hover is real. On a touch screen :hover LATCHES after a tap,
   which left one step sitting in the black state on a phone - visually the very
   thing H-2 removes. Gated to fine pointers so the phone always shows all twelve
   in the same resting state. */
@media (hover: hover) and (pointer: fine){
  #done-for-you .cqp-dfy__rail li:hover{ background: #0A0A0B; color: var(--accent); }
}
#done-for-you .cqp-dfy__end{ margin-top: clamp(26px, 3vw, 40px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
#done-for-you .cqp-dfy__run{ font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.3; font-weight: 500; letter-spacing: -.015em; color: var(--accent-on); }
#done-for-you .cqp-dfy__run strong{ font-weight: 700; }
#done-for-you .cqp-dfy__cta{
  min-height: 58px; padding: 18px 30px; background: #0A0A0B; color: var(--accent); -webkit-text-fill-color: var(--accent);
  border: 1px solid #0A0A0B; font-weight: 600;
}
#done-for-you .cqp-dfy__cta:hover,
#done-for-you .cqp-dfy__cta:focus-visible{ background: #16171B; transform: translateY(-2px); }
#done-for-you .cqp-dfy__cta:focus-visible{ outline: 2px solid #0A0A0B; outline-offset: 4px; }
@media (max-width: 880px){
  #done-for-you .cqp-dfy__grid{ grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  #done-for-you .cqp-dfy__rail{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #done-for-you .cqp-dfy__cta{ width: 100%; }

}
#done-for-you.cqp-dfy{ position: relative; }
#done-for-you.cqp-dfy > *:not(.goldpat){ position: relative; z-index: 1; }
#done-for-you .goldpat{ opacity: .1; }

/* C7 — client: "Work With should be in white." The CTA was an ink chip with white
   type on the gold ground; it becomes a WHITE button with ink type, which is the
   only reading that changes anything (its text was already white). */
#done-for-you .cqp-dfy__cta{
  background: #FFFFFF; color: var(--accent-on); -webkit-text-fill-color: var(--accent-on);
  border-color: #FFFFFF;
}
#done-for-you .cqp-dfy__cta:hover,
#done-for-you .cqp-dfy__cta:focus-visible{ background: #F4F1EA; color: var(--accent-on); }

/* ══════════════════════════════════════════════════════════════════════════
   BATCH 7 · homepage items the lead owns
   ══════════════════════════════════════════════════════════════════════════ */

/* H3 — "The Advantage should be much bigger… and should be white." */
#intelligence .adv3__copy .h-major{
  font-size: clamp(2.9rem, 6.2vw, 5.2rem);
  line-height: 1.02; letter-spacing: -.03em;
  color: #FFFFFF; -webkit-text-fill-color: #FFFFFF;
}

/* H2 — "Knowing what matters is." starts on its own line, in white. */
#intelligence .adv3__lead .adv3__knowing{
  display: block; margin-top: .42em;
  color: #FFFFFF; -webkit-text-fill-color: #FFFFFF;
}

/* H4 — "the pattern underneath must reduce the opacity, and I don't want it
   showing underneath that world map… it's clashing with the world map."
   The swirl drops to a whisper AND is masked off before the globe column, so
   the two patterns never overlap. */
#the-name .goldpat--soft{
  opacity: .026;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,.35) 54%, transparent 64%);
          mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,.35) 54%, transparent 64%);
}
@media (max-width: 980px){
  /* stacked layout: the globe sits BELOW the copy, so mask vertically instead */
  #the-name .goldpat--soft{
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 62%);
            mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 62%);
  }
}

/* H-PAT (batch 8) — client: the swirl behind the premium-services section
   "is conflicting with the text. Please let's reduce the pattern a bit."
   It was the .goldpat--cover default (.085); this takes it to a whisper. */
#done-for-you .goldpat{ opacity: .038; }

/* The client's CapitalQ app photograph fills the frame that has been empty (and
   404ing) since the section was built. The source is landscape and the phone sits
   left of centre, so the frame takes a portrait crop around the handset and the
   picture carries the house gold tone like every other photo on the site. */
#intelligence .adv3__phone img{
  aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: 46% 54%;
  filter: var(--gold-photo);
}
@media (max-width: 980px){
  #intelligence .adv3__phone img{ aspect-ratio: 16 / 10; object-position: 46% 56%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   C-7 / H-1b (client batch 12) · MEET Q COMES TO THE HOMEPAGE
   "later we'll be replacing this section with Meet Q from the CapitalQ page"

   The section markup is lifted from capitalq.html and its styling is lifted
   with it, so the homepage copy is pixel-identical to the one the client
   already signed off on the CapitalQ page. Every rule below is scoped to
   #meet-q, so nothing here can reach another homepage section.

   Copied here rather than @import-ing css/fix-0917c-cqpage.css: that file
   belongs to the capitalq track and also carries #features / #journey /
   #connect rules that have no business on this page.

   ONE DELIBERATE DIVERGENCE from the source: the gold closing words
   ("It understands it.") were painted with background-clip:text over
   var(--accent-grad) — a TEXT GRADIENT, which this site forbids. On the
   homepage they are flat var(--accent). The same violation is still live on
   capitalq.html; flagged to the lead, not fixed here (not this track's file).
   ══════════════════════════════════════════════════════════════════════════ */
#meet-q .cqp-meet__w{ display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
#meet-q .cqp-meet__w > span{ display: inline-block; }
#meet-q .cqp-meet__w--gold > span{ color: var(--accent); }
/* the word-rise (JS adds .cqp-js to <html>; without JS or with reduced motion the words simply sit there) */
.cqp-js [data-cqp-rise] .cqp-better__w > span,
.cqp-js [data-cqp-rise] .cqp-one__w > span,
.cqp-js [data-cqp-rise] .cqp-meet__w > span,
.cqp-js [data-cqp-rise] .cqp-conn__w > span{ transform: translateY(108%); transition: transform 1s cubic-bezier(.22,1,.36,1); }
.cqp-js [data-cqp-rise].is-in .cqp-meet__w > span{ transform: none; }
/* ───────────────────────── 8 · MEET Q ───────────────────────── */
#meet-q.cqp-meet{ background: #070708; border-top: 1px solid var(--line); overflow: clip; isolation: isolate; }
#meet-q .cqp-meet__bg{
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 34% at 50% 56%, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 0%, transparent) 70%),
    radial-gradient(color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1.3px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 55%, #000 30%, transparent 85%);
          mask-image: radial-gradient(80% 70% at 50% 55%, #000 30%, transparent 85%);
}
#meet-q .cqp-meet__head{ text-align: center; max-width: 980px; margin-inline: auto; }
#meet-q .cqp-meet__eyebrow{
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent);
  font-weight: 600; font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
}
#meet-q .cqp-meet__blip{ width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); animation: cqpBlip 1.6s ease-in-out infinite; }
@keyframes cqpBlip{ 0%,100%{ opacity: 1; } 50%{ opacity: .25; } }
#meet-q .cqp-meet__h{
  margin-top: 22px; font-size: clamp(2.4rem, 6.2vw, 6rem); line-height: 1; font-weight: 600; letter-spacing: -.05em;
  background: none; -webkit-text-fill-color: currentColor; color: #FFFFFF;
  padding-bottom: .08em;
}
#meet-q .cqp-meet__intro{
  margin: 18px auto 0; max-width: 54ch;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.55; color: var(--txt); text-wrap: balance;
}
#meet-q .cqp-meet__rig{
  position: relative; margin-top: clamp(52px, 6vw, 96px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 30%) minmax(0, 1fr);
  column-gap: clamp(36px, 4.4vw, 84px); align-items: center;
}
#meet-q .cqp-meet__wires{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
#meet-q .cqp-meet__wires .w-base{ fill: none; stroke: color-mix(in srgb, var(--accent) 22%, transparent); stroke-width: 1; transition: stroke .35s ease; }
#meet-q .cqp-meet__wires .w-pulse{
  fill: none; stroke: var(--accent-hov); stroke-width: 2; stroke-dasharray: 5 95; stroke-dashoffset: 100;
  animation: cqpWire 3.2s linear infinite; opacity: .9;
}
#meet-q .cqp-meet__wires .w-base.is-on{ stroke: var(--accent); stroke-width: 1.4; }
@keyframes cqpWire{ to{ stroke-dashoffset: 0; } }
#meet-q .cqp-caps{ position: relative; z-index: 1; list-style: none; display: grid; gap: 14px; }
#meet-q .cqp-cap{
  position: relative; padding: 18px 22px 20px;
  border: 1px solid var(--line); background: rgba(16,17,20,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .35s ease, background-color .35s ease, transform .35s ease;
}
/* the left column mirrors the right one (index + title right-aligned, ports on the inner edge), but the
   BODY copy stays left-aligned: ragged-left paragraphs read as a mistake, and the mirror is carried by
   the gold Q.0N labels and the titles anyway. */
#meet-q .cqp-caps--l .cqp-cap{ text-align: right; }
#meet-q .cqp-caps--l .cqp-cap__d{ text-align: left; }
#meet-q .cqp-cap__ix{ font-weight: 600; font-size: .7rem; letter-spacing: .22em; color: var(--accent); }
#meet-q .cqp-cap__t{ margin-top: 6px; font-size: clamp(1.02rem, 1.2vw, 1.16rem); line-height: 1.25; font-weight: 600; letter-spacing: -.012em; color: #F4F8FB; }
#meet-q .cqp-cap__d{ margin-top: 8px; font-size: clamp(.86rem, .92vw, .93rem); line-height: 1.55; color: rgba(201,212,220,.78); }
#meet-q .cqp-cap__port{ position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: #070708; border: 1px solid var(--accent); transition: background-color .35s ease; }
#meet-q .cqp-caps--l .cqp-cap__port{ right: -4px; }
#meet-q .cqp-caps--r .cqp-cap__port{ left: -4px; }
#meet-q .cqp-cap.is-on{ border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 12%, #070708); }
#meet-q .cqp-cap.is-on .cqp-cap__port{ background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
#meet-q .cqp-meet__core{ position: relative; z-index: 1; aspect-ratio: 1 / 1; display: grid; place-items: center; }
#meet-q .cqp-meet__ring{ position: absolute; pointer-events: none; }
#meet-q .cqp-meet__ring--a{ inset: 2%; border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); }
#meet-q .cqp-meet__ring--a::before,
#meet-q .cqp-meet__ring--a::after{ content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid var(--accent); }
#meet-q .cqp-meet__ring--a::before{ left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
#meet-q .cqp-meet__ring--a::after{ right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
#meet-q .cqp-meet__ring--b{ inset: 17%; border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent); transform: rotate(45deg); animation: cqpSpin 60s linear infinite; }
@keyframes cqpSpin{ to{ transform: rotate(405deg); } }
#meet-q .cqp-meet__orb{ position: relative; width: 84%; }
#meet-q .cqp-meet__foot{ margin-top: clamp(56px, 7vw, 110px); text-align: center; }
#meet-q .cqp-meet__close .cqp-meet__w--gold{ display: table; margin-inline: auto; }
#meet-q .cqp-meet__close{
  max-width: 30ch; text-wrap: balance; margin-inline: auto;
  font-size: clamp(1.9rem, 4.2vw, 4rem); line-height: 1.06; font-weight: 600; letter-spacing: -.045em; color: #F4F8FB;
}
#meet-q .cqp-meet__cta{ justify-content: center; margin-top: clamp(28px, 3.4vw, 44px); }
#meet-q .cqp-meet__talkorb{ width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); animation: cqpBlip 1.6s ease-in-out infinite; }
.cqp-js #meet-q .cqp-cap{ opacity: 0; }
.cqp-js #meet-q .cqp-caps--l .cqp-cap{ translate: -22px 0; }
.cqp-js #meet-q .cqp-caps--r .cqp-cap{ translate: 22px 0; }
.cqp-js #meet-q .cqp-meet__rig.is-in .cqp-cap{ opacity: 1; translate: 0 0; transition: opacity .7s ease, translate .8s cubic-bezier(.22,1,.36,1), border-color .35s ease, background-color .35s ease, transform .35s ease; }
.cqp-js #meet-q .cqp-meet__rig.is-in .cqp-cap:nth-child(2){ transition-delay: .1s, .1s, 0s, 0s, 0s; }
.cqp-js #meet-q .cqp-meet__rig.is-in .cqp-cap:nth-child(3){ transition-delay: .2s, .2s, 0s, 0s, 0s; }
.cqp-js #meet-q .cqp-meet__rig.is-in .cqp-cap:nth-child(4){ transition-delay: .3s, .3s, 0s, 0s, 0s; }
@media (max-width: 1180px) and (min-width: 881px){
  #meet-q .cqp-meet__rig{ grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); column-gap: 34px; }#meet-q .cqp-cap__d{ display: none; }
}
@media (max-width: 880px){
  #meet-q .cqp-meet__rig{ grid-template-columns: minmax(0, 1fr); row-gap: 12px; }#meet-q .cqp-meet__wires{ display: none; }#meet-q .cqp-meet__core{ order: -1; width: min(300px, 80%); margin: 0 auto 20px; }#meet-q .cqp-caps{ gap: 12px; }#meet-q .cqp-caps--l .cqp-cap{ text-align: left; }#meet-q .cqp-cap__port{ display: none; }.cqp-js #meet-q .cqp-caps--l .cqp-cap,
  .cqp-js #meet-q .cqp-caps--r .cqp-cap{ translate: 0 16px; }#meet-q .cqp-meet__cta .btn{ flex: 1 1 100%; }
}
/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   0919 · CLIENT FEEDBACK BATCH 7 — CapitalQ page items C4 + C6 (.claude/CLIENT-FEEDBACK-0919.md)
   Appended block. Gold tokens only, square corners, solid display lines (no text gradients).
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ───── C4 · MEET Q — "Meet Q" is the BIG display line, "Your AI Investment Analyst" the sub-line ─────
   Client: "make Q bigger and the other one smaller, like the subline… Meet can be white, Q can be
   holding [the character]" — so "Meet" is white, "Q" is gold, and the CapitalQ orb rides beside the Q
   at letter scale, the same character the hero kicker and the rig core carry. */
#meet-q .cqp-meet__h--mq{
  margin-top: 0;
  font-size: clamp(3.4rem, 10.4vw, 9rem);
  line-height: .94; font-weight: 700; letter-spacing: -.055em;
  background: none; -webkit-text-fill-color: currentColor; color: #FFFFFF;
  padding-bottom: .06em;
}
#meet-q .cqp-meet__h--mq .cqp-meet__mw{ color: #FFFFFF; }
#meet-q .cqp-meet__h--mq .cqp-meet__mq{ color: var(--accent); white-space: nowrap; }
/* Sizing/offset live in the single declaration further down (the orb took the letter's place once G1
   landed) — this rule only establishes the box. */
#meet-q .cqp-meet__mqorb{
  display: inline-block; vertical-align: baseline;
}
#meet-q .cqp-meet__mqorb .cq-orb{ width: 100%; height: 100%; }
/* the sub-line the client demoted: smaller, gold, directly under the display line */
#meet-q .cqp-meet__sub{
  margin-top: clamp(14px, 1.7vw, 24px);
  font-size: clamp(1.08rem, 1.9vw, 1.7rem); line-height: 1.2; font-weight: 500; letter-spacing: -.015em;
  color: var(--accent);
}
#meet-q .cqp-meet__head .cqp-meet__intro{ margin-top: clamp(16px, 1.8vw, 24px); }
/* The Q of "Meet Q" IS the CapitalQ character: the gold orb, carrying the white Q the client asked for
   in G1 ("add Q at the center of that orb, white colour"). A gold letterform Q *beside* the orb printed
   "Meet Q Q" once G1 landed, so the orb takes the letter's place; the letter stays for screen readers,
   the copy check and text selection. REVERT (if the client wants the Q literally gold as a letterform):
   drop .cqp-meet__qsr's clipping and delete the .cqp-meet__mqorb span. */
#meet-q .cqp-meet__qsr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#meet-q .cqp-meet__h--mq .cqp-meet__mq{ position: relative; color: var(--accent); }
#meet-q .cqp-meet__mqorb{ width: .94em; height: .94em; margin-left: .04em; translate: 0 .1em; }
@media (max-width: 880px){
  #meet-q .cqp-meet__mqorb{ width: .92em; height: .92em; }
}
/* ══ 2026-09-23 · batch 13 · the 10,000+ claim reads as one sentence ═══════
   Client: "Access to a network spanning 10,000+ businesses through FDN and
   our ecosystem partners." The cut-out numeral stays the hero of the lockup;
   the lead-in sits on its own row above it so the sentence reads straight
   through the number instead of the number captioning a fragment. */
#africa-arabia .aarb__count{
  grid-template-areas: "pre pre" "n t";
  row-gap: clamp(8px, .9vw, 14px);
}
#africa-arabia .aarb__pre{
  grid-area: pre;
  font-size: clamp(1.02rem, 1.35vw, 1.3rem); line-height: 1.45; font-weight: 500;
  letter-spacing: -.005em; color: rgba(241,228,204,.92);
}
#africa-arabia .aarb__n{ grid-area: n; }
#africa-arabia .aarb__t{ grid-area: t; max-width: 30ch; }
@media (max-width: 880px){
  #africa-arabia .aarb__pre{ display: block; font-size: 1rem; margin-bottom: 6px; }
  #africa-arabia .aarb__t{ max-width: none; }
}

/* ══ 2026-09-23 · batch 13 · phone pass ═══════════════════════════════════
   #connection — the "much more bigger" rule in style.css sets .rgap2__lady to
   an absolute height at EVERY width, which overrides the phone block's
   height:auto. A 1044×1467 portrait was being forced into a 237×500 box: a
   34% horizontal squash, and the clearest case of the client's "scrimped"
   images. Width-driven here, so she stays large and undistorted. */
@media (max-width: 880px){
  #connection .rgap2__lady{ height: auto; width: min(80%, 320px); }
}