/* ══════════════════════════════════════════════════════════════
   TALENT CAPITAL — client batch 12, track "tc-design" (2026-09-22)
   Loaded LAST: after style.css, fix-0921-tc-result.css and
   fix-0922-tc-copy.css. Scope is strictly L-1, L-2, L-3, L-6,
   O-2, O-4, O-5 and O-6 — the gallery, the #what carousel, the
   #pipeline flow, the #close ground and the #proof reveal.
   Talent Capital keeps ITS OWN palette (--accent #FFD400 and
   --accent-deep #7A5C00 for marks on white); no new colour
   values are invented here. Square corners are inherited.
   ══════════════════════════════════════════════════════════════ */


/* ══════════ L-1 / L-2 · THE GALLERY — ONE picture row + a word line ══════════
   Client: "make the gallery one row, and between the rows add a sliding text
   line naming who Talent Capital serves — pictures sliding one way, the text
   sliding the other."
   The picture row keeps the existing tcgLTR track (left → right). The word
   line takes the tcgRTL keyframe already defined in style.css, so the two
   bands visibly cross. Both are cloned to 3 sets by initGallery, which is what
   makes the -33.3333% loop seamless. ── */

.tcg--solo{
  gap: 0;
  padding-block: clamp(20px, 2.8vw, 38px);
}
/* one row now carries the band on its own, so it gets the height the two
   rows used to share */
.tcg--solo .tcg__row--a{ height: clamp(236px, 25.6vw, 396px); }

.tcgt{
  position: relative;
  overflow: hidden;
  margin-top: clamp(12px, 1.5vw, 22px);
  border-top: 1px solid var(--line-ink);
  border-bottom: 1px solid var(--line-ink);
  padding-block: clamp(11px, 1.2vw, 17px);
  /* same soft ends as the picture row, so the two bands read as one system */
  -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%);
}
.tcgt__track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: tcgRTL 58s linear infinite;   /* the OPPOSITE way to the pictures */
}
.tcgt:hover .tcgt__track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .tcgt__track{ animation: none !important; }
}
.tcgt__set{
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex: 0 0 auto;
}
.tcgt__w{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.02rem, 2.05vw, 1.86rem);
  letter-spacing: -.022em;
  line-height: 1.1;
  color: var(--txt-inv);
}
.tcgt__dot{
  font-style: normal;
  color: var(--accent);
  margin: 0 clamp(.46em, .95vw, .82em);
  font-size: .62em;
  line-height: 1;
  transform: translateY(-.12em);
}
@media (max-width: 880px){
  .tcg--solo .tcg__row--a{ height: 198px; }
  .tcgt{ padding-block: 9px; }
}


/* ══════════ L-6 · THE ARROW CONTRACT, on Talent Capital ══════════
   Client (B-1, carried to L-6): "make the active arrow gold — the one you are
   able to click has a gold outline; the one you cannot is dulled. At the
   beginning the right one is active; once it gets to the end, the other one."
   The shared contract lives in the ROOT css/style.css, which this page does
   NOT load — Talent Capital has its own stylesheet. So the same two classes
   are declared here, in Talent Capital's own tokens, and main.js sets them.
   #what sits on WHITE, so the dull state has to dull against white. ── */

.is-arrow-on{
  border: 1px solid var(--accent-deep) !important;
  color: var(--accent-deep) !important;
  box-shadow: 0 0 0 1px rgba(255, 212, 0, .16), 0 6px 26px rgba(255, 212, 0, .18);
  opacity: 1 !important;
  cursor: pointer;
}
.is-arrow-on svg{ fill: currentColor; }
.is-arrow-on:hover,
.is-arrow-on:focus-visible{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-on) !important;
}
.is-arrow-off{
  border: 1px solid rgba(11, 12, 14, .16) !important;
  color: rgba(11, 12, 14, .28) !important;
  background: none !important;
  box-shadow: none !important;
  cursor: default;
}
.is-arrow-off svg{ fill: currentColor; }
/* on the ink sections the dull state has to dull against black instead */
.slab--ink .is-arrow-off,
.on-ink .is-arrow-off{
  border-color: rgba(244, 248, 251, .14) !important;
  color: rgba(244, 248, 251, .28) !important;
}
/* the phone overlay arrows sit ON the photograph — they keep their dark glass
   ground in both states so they never disappear into the picture */
@media (max-width: 760px){
  .lib__stage .lib__btn.is-arrow-on,
  .lib__stage .lib__btn.is-arrow-off{
    background: rgba(10, 10, 11, .72) !important;
  }
  .lib__stage .lib__btn.is-arrow-on{
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }
  .lib__stage .lib__btn.is-arrow-off{
    border-color: rgba(244, 248, 251, .20) !important;
    color: rgba(244, 248, 251, .30) !important;
  }
  .lib__stage .lib__btn.is-arrow-on:hover{
    background: var(--accent) !important; color: var(--accent-on) !important;
  }
}


/* ══════════ O-5 · #what IS A CAROUSEL AT 390 ══════════
   fix-0921 built the one-at-a-time phone carousel at max-width:760px, but
   style.css's own 760px block sets `.lib__panel{ width:100% !important;
   height:210px }` and that !important width beat the absolute-positioned
   panel, so at 390 all six panels still stacked. These rules restate the
   window with the same weight, and give the tile a real height on a phone. ── */
@media (max-width: 760px){
  .lib__view{
    display: block !important;
    position: relative;
    height: clamp(210px, 58vw, 260px) !important;
    gap: 0 !important;
    overflow: hidden;
  }
  .lib__panel{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .lib__img{
    width: 100% !important; height: 100% !important;
    left: 0 !important; transform: none !important;
    object-fit: cover;
  }
  /* the counter tells the visitor there are six of these, which the stacked
     version used to say by being six tall pictures */
  .lib__idx{ font-size: .74rem; }
  .lib__tag{ font-size: 1.08rem; }
}


/* ══════════ O-4 · #pipeline — a narrowing FLOW, not a 3x2 grid ══════════
   Client: the six sub-topics were six identical paragraphs in a flat grid.
   They now read as ONE flow: hairline rows, each with a gold measure that is
   shorter than the one above it, so the section SHOWS the funnel its closing
   line describes — from a universe of thousands to the few that deserve your
   capital. No numerals (the client struck those out in batch 8). ── */

.pipeR__flow{
  margin-top: clamp(34px, 4.4vw, 62px);
  border-top: 1px solid var(--line);
}
.pipeR__step{
  display: grid;
  grid-template-columns: clamp(76px, 9.4vw, 138px) minmax(0, .78fr) minmax(0, 1.5fr);
  gap: clamp(4px, .8vw, 10px) clamp(18px, 2.7vw, 42px);
  align-items: start;
  padding-block: clamp(17px, 2.1vw, 28px);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease;
}
.pipeR__step:hover{ background: rgba(10, 10, 11, .03); }

.pipeR__meter{
  display: block;
  height: 5px;
  width: 100%;
  background: rgba(10, 10, 11, .10);
  margin-top: .74em;
}
.pipeR__meter b{
  display: block;
  height: 100%;
  width: var(--pw, 100%);
  background: var(--accent);
}
/* 2026-09-22 FIX (reviewer): the last bar used to be var(--accent-deep). Against
   five yellow bars that 21px stub read as a broken brown nub rather than as the
   end of ONE scale. Every bar is now --accent; the length does the talking, and
   --accent-deep is reserved for text and marks, not for one bar in a scale. The
   override is deleted rather than recoloured, so all six bars inherit --accent
   from .pipeR__meter b above and only their LENGTH differs. */

.pipeR__flow .pipeR__name{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 1.5vw, 1.38rem);
  line-height: 1.16; letter-spacing: -.024em;
  color: var(--txt-hi);
  margin: 0;
}
.pipeR__flow .pipeR__body{
  margin: 0;
  font-size: clamp(.95rem, 1.06vw, 1.02rem);
  line-height: 1.6;
  color: var(--txt);
  max-width: 62ch;
}

@media (max-width: 900px){
  .pipeR__step{
    grid-template-columns: clamp(58px, 12vw, 92px) minmax(0, 1fr);
    grid-template-areas: "meter name" "meter body";
    column-gap: clamp(14px, 3vw, 24px);
  }
  .pipeR__meter{ grid-area: meter; }
  .pipeR__flow .pipeR__name{ grid-area: name; }
  .pipeR__flow .pipeR__body{ grid-area: body; margin-top: 8px; }
}
@media (max-width: 560px){
  /* on the phone the measure becomes a full-width rule above the step, so the
     narrowing is still visible but the copy gets the whole column */
  .pipeR__step{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "meter" "name" "body";
    row-gap: 0;
    padding-block: 18px;
  }
  .pipeR__meter{ margin-top: 0; margin-bottom: 12px; height: 4px; }
  .pipeR__flow .pipeR__body{ margin-top: 7px; }
}

/* ── O-4 (second half) · the background photograph must be VISIBLE at 390 ──
   It was inset:0 over a section that is now much taller than it is wide, so
   `cover` scaled the frame until nothing was left, then the wash finished it
   off. The picture is now a band of a KNOWN height at the top of the section,
   and the wash runs in pixels over that same band — so the photograph reads at
   every width and the six steps still sit on plain white. ── */
.pipeR__bg{
  bottom: auto;
  height: clamp(420px, 44vw, 620px);
}
/* 2026-09-22 (client L-13 + reviewer): the frame is no longer desaturated.
   grayscale(1) threw away the one thing the client said he LIKED about the old
   picture — the golden, cinematic feel — and left a cold grey smear. The
   floodlit dusk frame is now graded to the page's own gold: mono base, sepia,
   then saturate + a small hue-rotate to carry it from sepia brown to the
   Talent Capital yellow. No new colour value is introduced. */
.pipeR__bg img{
  opacity: .42;
  filter: grayscale(1) sepia(1) saturate(2.05) hue-rotate(4deg)
          brightness(1.02) contrast(1.30);
  object-position: 50% 62%;
}
.pipeR__wash{
  background: linear-gradient(180deg,
    rgba(255,255,255,.02)  0px,
    rgba(255,255,255,.34)  210px,
    rgba(255,255,255,.82)  350px,
    #FFFFFF                440px);
}
@media (max-width: 700px){
  .pipeR__bg{ height: clamp(250px, 66vw, 330px); }
  .pipeR__bg img{
    /* At 390 the band is 257px tall against a 1900x1085 source, so cover scales
       to HEIGHT: the whole frame's height lands in the band and only ~60px is
       trimmed off each side. The keeper's gloves sit at 18% of the frame and
       his hips at 59%, so the torso and the ball both fall inside the ~200px
       the wash leaves live. He carries more opacity and contrast here because
       the figure is physically smaller. */
    opacity: .58;
    filter: grayscale(1) sepia(1) saturate(2.2) hue-rotate(4deg)
            brightness(.99) contrast(1.32);
    object-position: 50% 50%;
  }
  .pipeR__wash{
    background: linear-gradient(180deg,
      rgba(255,255,255,.02)  0px,
      rgba(255,255,255,.40)  132px,
      rgba(255,255,255,.88)  236px,
      #FFFFFF                300px);
  }
}


/* ══════════ O-2 · #close gets a ground that fits Talent Capital ══════════
   The old bg-close.jpg was carried over from the FDN page. The new frame is a
   fighter walking out to the ring under the rig — an athlete, shot from
   behind, no face, no kit mark, no sponsor board. It is the page's own closing
   line as a picture: you step out and you start. ── */
#close .ccta__img{
  background: url("../assets/img/tc-close-ringwalk.jpg?v=20260922d1") 50% 40% / cover no-repeat;
  filter: grayscale(.26) brightness(.54) contrast(1.06) sepia(.18);
}
@media (max-width: 700px){
  /* the section is much taller than it is wide on a phone, so the scrim covers
     proportionally more of the frame — the ground is lifted to compensate and
     the crop moves to the walkway, which is where the picture reads smallest. */
  #close .ccta__img{
    background-position: 50% 46%;
    filter: grayscale(.2) brightness(.74) contrast(1.05) sepia(.16);
  }
}


/* ══════════ L-3 · the "more than" picture runs the full column ══════════
   Client: "make the image bigger for the part that has 'more than' — the image
   should align its top with where the text begins and end at the bottom."
   style.css caps .vstack at aspect-ratio 6/5, so it stopped well short of the
   bottom of the copy. Above the split it now STRETCHES the row: its top edge
   is the top of the copy column (the tc-copy track's optical -.22em lift keeps
   the ink of "The Vision" level with it) and its bottom edge is the bottom of
   the column. ── */
@media (min-width: 900px){
  .vis2{ align-items: stretch; }
  .vis2 .vstack{
    align-self: stretch;
    aspect-ratio: auto;
    /* deliberately UNDER the height of the copy column so `stretch` is what
       actually sizes it: the picture then ends exactly where the copy ends. */
    min-height: clamp(320px, 32vw, 500px);
  }
  .vstack__card{ height: 100%; }
}


/* ══════════ O-6 · #proof — on a phone the DETAILS appear on TAP ══════════
   Client: "on phones it reads as a row of anonymous faces — the details should
   appear on tap." Batch 8 (TC-5) hid every name until hover, and a phone has
   no hover, so nothing ever showed. Below the 820px split main.js now moves
   the tapped person's full dossier directly underneath their picture, and
   these rules give the tap a visible affordance before it happens and a
   readable plate after it. ── */
@media (max-width: 819px){
  .cast__item{ height: 216px; }

  /* the affordance: a gold hairline chip in the corner of every card that has
     not been opened yet */
  .cast__item::after{
    content: 'Tap for details';
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 9px 14px;
    background: rgba(10, 10, 11, .76);
    border-top: 1px solid var(--accent);
    font-family: var(--font-mono); font-weight: 500;
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent);
    transition: opacity .25s ease;
  }
  .cast__item.is-sel::after{ opacity: 0; }

  /* the opened card keeps its name plate at a size a thumb-held phone can read */
  .cast__item.is-sel{ outline: 2px solid var(--accent); outline-offset: -2px; }
  .cast__item.is-sel .cast__name{ font-size: 1.16rem; }
  .cast__item.is-sel .cast__role{ font-size: .72rem; margin-top: 7px; }

  /* the dossier, once main.js has parked it under the card it belongs to */
  .cast .cdet{ margin-top: 0; }
  .cast .cdet.is-on{
    display: block;
    background: var(--bg);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    padding: clamp(18px, 4.6vw, 26px);
  }
  .cast .cdet.is-on .cdet__fig{ display: none; }   /* the picture is the card above it */
  .cast .cdet .cdet__role{ font-size: .72rem; }
  .cast .cdet .cdet__name{ font-size: 1.62rem; margin-top: 8px; }
  .cast .cdet .row__note,
  .cast .cdet .case__src{ font-size: .96rem; line-height: 1.6; }

  /* a close control, so a tapped card can be shut again on touch */
  .cast .cdet__close{
    display: inline-flex; align-items: center; gap: .6em;
    margin-top: 18px; padding: 10px 16px;
    background: none; border: 1px solid var(--accent-deep);
    color: var(--accent-deep); cursor: pointer;
    font-family: var(--font-mono); font-weight: 500;
    font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  }
}
/* above the split the injected close control is never shown */
.cdet__close{ display: none; }


/* the flow already closes on a hairline, so the chain's own top rule made an
   empty ruled band under the last step — one rule, not two. */
.pipeR__chain{
  border-top: 0;
  margin-top: clamp(34px, 4vw, 54px);
  padding-top: 0;
}