/* ══════════════════════════════════════════════════════════════
   TALENT CAPITAL — client batch 12, track "tc-copy" (2026-09-22)
   Loaded AFTER style.css and fix-0921-tc-result.css. Scope is
   strictly the elements named in L-7, L-9, L-10, L-12/O-1 and O-3;
   nothing here touches the sections other tracks are rebuilding.
   Square corners and the gold/yellow token set are inherited —
   no new colour values are introduced anywhere in this file.
   ══════════════════════════════════════════════════════════════ */

/* ── O-3 · "Contact Us" must read in EVERY header state ──────────
   The transparent top-of-page header paints the ghost button straight
   onto the hero photograph. A white label with a 14%-alpha hairline is
   only as legible as the pixels behind it, and the hero is a photo:
   bright window light and the gold records sit exactly under that
   corner, so the label dropped to ~1:1 in places.
   Fix: the transparent state gets its OWN ground — the house dark
   glass at 72% over the photo — so the contrast is a property of the
   button, not of the picture. Worst case (pure white photo pixel) the
   ground still computes to #4E4E4F and the #F4F8FB label reads 6.9:1.
   The scrolled .hdr--solid state is untouched (dark ink on light
   glass, already ~15:1) and so is the mobile menu. ── */
.hdr:not(.hdr--solid) .hdr__cta--contact{
  color: var(--txt-inv);
  background: rgba(10, 10, 11, .72);
  border-color: rgba(244, 248, 251, .55);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}
/* hover/focus stays a GHOST — "Visit FDN" is the one solid gold chip in the
   bar and keeps that weight to itself. The gold outline + gold label is the
   same "this is the live control" language as the batch-12 arrows. */
.hdr:not(.hdr--solid) .hdr__cta--contact:hover,
.hdr:not(.hdr--solid) .hdr__cta--contact:focus-visible{
  background: rgba(10, 10, 11, .86);
  border-color: var(--accent);
  color: var(--accent);
}

/* The SCROLLED state keeps its dark ink on light glass (~15:1 — the label
   was never the problem there), but its hairline is var(--line) #E2E2E9,
   which disappears on that ground: unhovered, the control read as a bare
   text link beside the gold chip. A 34% ink hairline makes it a button in
   both states without touching the label colour. */
.hdr--solid .hdr__cta--contact{ border-color: rgba(18, 18, 19, .34); }

/* ── O-3 (continued) · the THIRD header state: the mobile menu ──────
   Found while driving the menu open at 390 to prove "Contact Us" reads
   there too. It does — but the five nav links above it were running
   together as one inline paragraph ("Ownership Proof What We Do Managers
   & Agents The Vision"). .mobmenu is the column flex box, yet the links
   sit inside a <nav>, so the NAV is the only flex item and the anchors
   stayed inline. One line restores the stack the design assumes; the
   Contact Us button already broke the line because it is a <button>
   with width:100%, which is why only the links were affected. */
.mobmenu nav{ display: flex; flex-direction: column; gap: 6px; }

/* ── L-12 / O-1 · "Start your Private-Capital Journey" on ONE line ──
   .h-sec caps at 20ch, which is what forced the wrap. Measured ON THE
   PAGE (Inter 600, -.028em) the rendered line is 15.57em wide, so the
   type is sized to the gutter-to-gutter width divided by 15.9 — a 2.1%
   margin INSIDE the text column, with the whole gutter (21px a side at
   390, 70px at 1440) still behind it as run-off, so even a fallback
   font cannot push this past the viewport edge. Capped at the design
   3.55rem. Holds one line from 320px upwards.
   Verified: 907px of 1284 at 1440, 340px of 347 at 390, 294px of 280+
   at 320. ── */
#close{ --ch: min(3.55rem, calc((100vw - 2 * var(--gutter)) / 15.9)); }
#close .h-sec{
  max-width: none;
  white-space: nowrap;
  font-size: var(--ch);
}

/* ── L-12, second pass (2026-09-22, FIX round) · the HIERARCHY the
   one-line rule broke on phones ──────────────────────────────────
   Holding 33 characters on one line at 390px costs the headline its
   size: it lands at ~21.8px while "Become an owner" underneath it was
   still computing 30.4px and every other section h2 on the page is
   38.4px. The closing headline read as a caption over its own kicker.
   The absolute size cannot move (the client asked for the single line
   twice), so the GROUP moves with it: the accent line and the lede are
   tied to the headline's own computed size — 85% and 64% of it — which
   restores the descending order at every phone width and keeps it.
   Floors stop the type collapsing at 320, where the headline itself is
   only 17.6px: the accent line holds at 15px and the lede at 13px.
   The ceiling is the design default, so nothing here can ever make a
   value larger than the approved desktop composition.
   Boundary: the band runs to 560px because the stock 4.4vw on
   .statement--big only falls under the headline at ~543px; above that
   the untouched design is already in the right order (at 1440:
   headline 56.8px, accent 59.2px — the client-approved desktop look,
   deliberately left alone).
   Measured after (headline / accent / lede): 320 → 17.61 / 15 / 13 ;
   390 → 21.83 / 18.56 / 13.97 ; 480 → 26.87 / 22.84 / 16.32 ;
   560 → 31.35 / 26.64 / 16.32 ; 561 → 31.40 / 30.40 / 16.32 ;
   720 → 40.30 / 31.68 / 16.32 ; 1024 → 56.80 / 45.06 / 16.32.
   Headline largest, accent second, lede smallest at every phone and tablet
   width, and the 1440 composition is byte-identical to the approved one. ── */
@media (max-width: 560px){
  #close .statement--big{
    font-size: min(clamp(1.9rem, 4.4vw, 3.7rem), max(15px, calc(var(--ch) * .85)));
  }
  #close .lede{
    font-size: min(clamp(1.02rem, 1.5vw, 1.22rem), max(13px, calc(var(--ch) * .64)));
  }
}

/* ── L-9 · the pipeflip reads as ONE question answered by another ──
   Client: two lines each, the same font size, tops aligned, "Capital"
   pulled up so both blocks finish on the same line.
   (1) the halves were align-content:center, so the 3-line block pushed
       its eyebrow 19px above the other one — both now start at the top;
   (2) the explicit break sets the two lines, and the size is tied to
       the half-column so the longer line always fits: the
       column is ~41.1% of the viewport at every width above the 820px
       split and the long line measures 19.21em, so 41.1/20 = 2.05vw,
       capped at the design 1.9rem. ── */
.pipeflip__q, .pipeflip__ask{ max-width: none; }   /* 24ch/26ch caused the wrap */
@media (min-width: 820px){
  .pipeflip__was, .pipeflip__now{ align-content: start; }
  .pipeflip__q, .pipeflip__ask{ font-size: min(1.9rem, 2.05vw); }
}
/* Below 820px the halves are no longer side by side — they are two stacked
   full-width bands, one after the other. Every constraint in L-9 is a
   constraint on that SIDE-BY-SIDE composition: "same font size", "tops
   aligned", "both blocks end on the same line" only mean anything while the
   two blocks share a horizontal band. Keeping the hard <br> below the split
   therefore bought nothing and cost everything — the long line had to be
   squeezed to 17.4px, i.e. body-copy size, for the loudest rhetorical beat
   on the page.
   So: the desktop break is dropped under 820px and the quotes are sized for
   the band they are actually in. They wrap naturally to three lines at
   ~27px instead of two lines at 17px. L-9 is untouched at >=820px, where
   it is the only place it applies. (2026-09-22, FIX round.) */
@media (max-width: 819px){
  .pfbr{ display: none; }
  .pipeflip__q, .pipeflip__ask{
    font-size: clamp(1.5rem, 7vw, 1.75rem);
  }
}

/* ── L-7 · The Vision: a dash under the title, and the copy column
   starting level with the top of the picture ──────────────────── */
.vis2__body .secrule{
  display: block; width: clamp(48px, 5vw, 72px); height: 2px;
  background: var(--accent); margin: 0;
}
@media (min-width: 900px){
  .vis2{ align-items: start; }
  .vis2 .vstack{ align-self: start; }
  .vis2__body{ justify-content: flex-start; }
  /* optical, not mechanical: the h2's box carries leading + ascent above the
     cap line, so the box is lifted by that much and the INK of "The Vision"
     starts level with the top edge of the photo.
     2026-09-22 FIX round: -.22em was a guess and it overshot by 8.3px at 1440
     (measured ink top 231.8 vs image top 240.1). The real gap above the cap
     line is .094em of the 65.6px h-major, so the lift is now exactly that.
     Re-measured after the change: ink top 240.1, image top 240.1. */
  .vis2__body .h-major{ margin-top: -.094em; }
}

/* ── L-10 · the Vision arrows go gold ───────────────────────────
   Both step an infinite loop, so both are always clickable and both
   carry the active treatment from B-1: gold outline + gold glyph,
   filling to a solid gold chip on hover/focus. ── */
.vstack__btn{
  border-color: var(--accent);
  color: var(--accent);
}
.vstack__btn:hover,
.vstack__btn:focus-visible{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

/* L-8 note: the copy change ("We are not another wealth manager") is in the
   markup only. text-wrap:balance was tried here and changed nothing - at 72px
   in the 314px rail the five lines are already the only possible break, with
   "not" alone on line 2. Left to the design track if the size should move. */