/* Client feedback · TEAM (team.html only). Batch 3 T2-T4 + batch 8 T-SKETCH / T-BIO.
The batch-3 and batch-7 hero blocks (#top.team3 ..., the .tlead lead-portrait cluster) were DELETED here, not
left dead. A copy of the pre-batch-8 hero is in _backup/20260921-team-prebatch8/. */
/* ══════════════════════════════════════════════════════════════════════════
batch 8 · T-SKETCH — the hero he drew, as CORRECTED on 2026-09-21.
The first reading gave him a bordered box with three equal full-height
columns and he rejected it outright: the outer box in his photograph is his
BROWSER WINDOW, not a frame — "the others are not meant to be in one frame
or whatever, I didn't draw that" — and "the one in the MIDDLE is higher than
the other... I want the MANAGING PARTNER to be the one in the middle".
So: no container, border, plate or shadow around the group; the copy and the
portraits sit straight on the hero ground; copy LEFT; three portraits RIGHT;
the MIDDLE portrait (David Nwankwo, Managing Partner) is RAISED and TALLER,
with Fortune and Zino lower beside him.
══════════════════════════════════════════════════════════════════════════ */
#top.tbox3{
background: #0A0A0B; /* plain black ground, no hero photograph (batch 5) */
justify-content: center; align-items: stretch;
padding-block: clamp(96px, 12vh, 140px) clamp(44px, 6vh, 78px);
}
#top.tbox3 .tbox3__inner{ display: block; width: 100%; margin-block: auto; text-align: left; }
/* ── the group: NO frame. Two columns sitting straight on the hero ground. ── */
#top.tbox3 .tbox{
position: relative;
display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.22fr);
gap: clamp(28px, 4vw, 70px); align-items: end;
border: 0; background: none; box-shadow: none;
}
/* ── left: the copy block ── */
#top.tbox3 .tbox__copy{ align-self: center; min-width: 0; padding: 0; }
#top.tbox3 .tbox__h{
font-size: clamp(2.15rem, 3.7vw, 3.5rem); line-height: 1.02; letter-spacing: -.035em; margin-inline: 0;
}
#top.tbox3 .tbox__h .tblue{ display: block; color: var(--accent); -webkit-text-fill-color: currentColor; }
#top.tbox3 .tbox__lede{
margin-top: clamp(14px, 1.6vw, 22px); margin-inline: 0; max-width: 46ch;
font-size: clamp(.92rem, 1.02vw, 1.05rem); line-height: 1.6; color: rgba(244,248,251,.84);
}
/* ── right: three portraits, the middle one raised and taller ── */
#top.tbox3 .tbox__reg{
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 1.15vw, 18px); align-items: end; min-width: 0;
}
#top.tbox3 .tbox__p{
position: relative; display: block; overflow: hidden; min-width: 0;
height: clamp(292px, 25.5vw, 372px); /* the two that sit lower */
text-decoration: none; background: #15141A;
}
#top.tbox3 .tbox__p--lead{
height: clamp(372px, 32.5vw, 474px); /* taller ... */
margin-bottom: clamp(26px, 2.6vw, 40px); /* ... and raised off the baseline the other two share */
}
#top.tbox3 .tbox__fig{ position: absolute; inset: 0; display: block; overflow: hidden; }
#top.tbox3 .tbox__img{
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%;
filter: var(--gold-photo); /* G1 — every photo on an FDN page carries the gold tone */
transition: filter .45s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
#top.tbox3 .tbox__p.is-hov .tbox__img,
#top.tbox3 .tbox__p:hover .tbox__img,
#top.tbox3 .tbox__p:focus-visible .tbox__img{ filter: var(--gold-photo) brightness(1.06); transform: scale(1.045); }
/* QUALITY · Fortune's headshot is still a pending client item, so his tile is a placeholder. It is toned DOWN to
the value of the two photographs beside it (their gold-filtered means are 64 and 53 of 255), never up: a lit
tile in the middle of a register whose whole point is that the three are equals is the first thing the eye
finds, and it is the one column with no face. No --accent-sheen layer, a soft .12 gold instead of .40, and the
monogram at 60% accent with no halo. */
#top.tbox3 .tbox__p--ph .tbox__fig{
background:
radial-gradient(86% 58% at 50% 30%, rgba(226,178,76,.12), rgba(226,178,76,.05) 56%, transparent 78%),
linear-gradient(168deg, #423C33 0%, #2B2620 62%, #1E1A15 100%);
}
#top.tbox3 .tbox__ini{
position: absolute; inset: 0; display: grid; place-items: center;
font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 3.2vw, 3.4rem);
color: rgba(226,178,76,.6); letter-spacing: .02em;
}
/* a hover mark that does not move the column */
#top.tbox3 .tbox__p::after{
content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(226,178,76,0), inset 0 0 40px -6px rgba(226,178,76,0);
transition: box-shadow .35s ease;
}
#top.tbox3 .tbox__p.is-hov::after,
#top.tbox3 .tbox__p:hover::after,
#top.tbox3 .tbox__p:focus-visible::after{
box-shadow: inset 0 0 0 1px rgba(226,178,76,.7), inset 0 0 44px -6px rgba(226,178,76,.5);
}
/* T-BIO in the HERO register — the same treatment the line-up below already had. The client attached T-BIO to
the sketch he had just described and then extended it: "no details until you click (hover may reveal too),
and the details hide again when the pointer leaves. Applies to the leadership line-up further down the Team
page AS WELL." So the plate starts hidden here too. The aria-label on each is left exactly as it was, so
the register stays announced to screen readers and keyboard users while it is visually silent. */
#top.tbox3 .tbox__cap{
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: clamp(12px, 1.2vw, 18px);
background: linear-gradient(0deg, rgba(8,9,12,.95) 14%, rgba(8,9,12,.6) 62%, rgba(8,9,12,0) 100%);
opacity: 0; transform: translateY(8px); pointer-events: none;
transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
/* .is-hov is set by js/fix-0917b-team.js, exactly as the line-up below does it — same mechanism, same feel, and
it is drivable/provable. The :hover / :focus-visible pair stays as the no-JS fallback. */
#top.tbox3 .tbox__p.is-hov .tbox__cap,
#top.tbox3 .tbox__p:hover .tbox__cap,
#top.tbox3 .tbox__p:focus-visible .tbox__cap{ opacity: 1; transform: none; }
#top.tbox3 .tbox__pn{
display: block; font-family: var(--font-display); font-weight: 600;
font-size: clamp(.8rem, .95vw, 1.02rem); line-height: 1.2; color: #fff;
}
#top.tbox3 .tbox__pr{
display: block; margin-top: 5px; font-family: var(--font-mono);
font-size: clamp(.55rem, .6vw, .66rem); letter-spacing: .15em; line-height: 1.35;
text-transform: uppercase; color: var(--accent);
}
/* with the names hidden, a discreet gold mark (decorative, aria-hidden — it is not copy) says the portrait
opens something; it fades out as the plate arrives. Same device as the line-up's .tbio__mark. */
#top.tbox3 .tbox__mark{
position: absolute; left: clamp(12px, 1.2vw, 18px); bottom: clamp(12px, 1.2vw, 18px); z-index: 3;
width: 20px; height: 20px; pointer-events: none; opacity: .72; transition: opacity .28s ease;
}
#top.tbox3 .tbox__mark::before,
#top.tbox3 .tbox__mark::after{
content: ''; position: absolute; left: 50%; top: 50%; background: var(--accent);
box-shadow: 0 0 12px rgba(226,178,76,.55);
}
#top.tbox3 .tbox__mark::before{ width: 13px; height: 1px; transform: translate(-50%, -50%); }
#top.tbox3 .tbox__mark::after{ width: 1px; height: 13px; transform: translate(-50%, -50%); }
#top.tbox3 .tbox__p.is-hov .tbox__mark,
#top.tbox3 .tbox__p:hover .tbox__mark,
#top.tbox3 .tbox__p:focus-visible .tbox__mark{ opacity: 0; }
/* touch: there is no pointer to take the plate away again, so a tapped column keeps it */
@media (hover: none){
#top.tbox3 .tbox__p.is-hov .tbox__cap,
#top.tbox3 .tbox__p:focus .tbox__cap,
#top.tbox3 .tbox__p:active .tbox__cap{ opacity: 1; transform: none; }
#top.tbox3 .tbox__p.is-hov .tbox__mark,
#top.tbox3 .tbox__p:focus .tbox__mark,
#top.tbox3 .tbox__p:active .tbox__mark{ opacity: 0; }
}
/* ── shorter laptops: the portraits give up height before anything clips ── */
@media (min-width: 881px) and (max-height: 900px){
#top.tbox3{ padding-block: clamp(88px, 11vh, 116px) clamp(30px, 4.6vh, 48px); }
#top.tbox3 .tbox__p{ height: clamp(258px, 22vw, 316px); }
#top.tbox3 .tbox__p--lead{ height: clamp(326px, 28vw, 402px); }
#top.tbox3 .tbox__h{ font-size: clamp(1.95rem, 3.1vw, 2.9rem); }
}
@media (min-width: 881px) and (max-height: 760px){
#top.tbox3{ padding-block: clamp(80px, 11vh, 100px) clamp(26px, 4.2vh, 40px); }
#top.tbox3 .tbox__p{ height: clamp(224px, 19vw, 266px); }
#top.tbox3 .tbox__p--lead{ height: clamp(282px, 24vw, 338px); }
#top.tbox3 .tbox__h{ font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
#top.tbox3 .tbox__lede{ font-size: .92rem; }
}
/* ── phones: the copy reads first, the three portraits keep the raised middle ── */
@media (max-width: 880px){
#top.tbox3{ padding-block: clamp(92px, 14vh, 120px) clamp(38px, 6vh, 58px); }
#top.tbox3 .tbox{ grid-template-columns: 1fr; gap: clamp(26px, 7vw, 36px); }
#top.tbox3 .tbox__copy{ padding: 0; }
#top.tbox3 .tbox__h{ font-size: clamp(2rem, 8.6vw, 2.8rem); }
#top.tbox3 .tbox__lede{ max-width: 100%; font-size: .95rem; }
#top.tbox3 .tbox__reg{ gap: 7px; }
#top.tbox3 .tbox__p{ height: clamp(146px, 39vw, 176px); }
#top.tbox3 .tbox__p--lead{ height: clamp(186px, 50vw, 224px); margin-bottom: clamp(16px, 4.4vw, 24px); }
#top.tbox3 .tbox__cap{ padding: 9px 8px; }
#top.tbox3 .tbox__pn{ font-size: .68rem; }
#top.tbox3 .tbox__pr{ font-size: .48rem; letter-spacing: .1em; margin-top: 3px; }
#top.tbox3 .tbox__ini{ font-size: 1.5rem; }
#top.tbox3 .tbox__mark{ width: 15px; height: 15px; left: 8px; bottom: 8px; }
#top.tbox3 .tbox__mark::before{ width: 10px; }
#top.tbox3 .tbox__mark::after{ height: 10px; }
}
@media (prefers-reduced-motion: reduce){
#top.tbox3 .tbox__img{ transition: none; }
#top.tbox3 .tbox__p.is-hov .tbox__img,
#top.tbox3 .tbox__p:hover .tbox__img,
#top.tbox3 .tbox__p:focus-visible .tbox__img{ transform: none; }
#top.tbox3 .tbox__cap{ transition: opacity .2s ease; transform: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
batch 8 · T-BIO — the leadership line-up.
"A member's details must NOT show until you click (hover may also reveal),
and they HIDE AGAIN when the pointer leaves." So nothing is selected on load
(js/fix-0917b-team.js clears the default main.js picks), the name/role plate
is hidden until the card is hovered or focused, and it goes again on leave.
A click opens the full bio below and marks the card with a gold hairline —
the bio panel cannot itself vanish on pointer-leave or it could never be
read. Titles unchanged: Managing Partner / Partner / Partner.
══════════════════════════════════════════════════════════════════════════ */
#leadership .tbio .tacc__tag{
opacity: 0; transform: translateY(10px); pointer-events: none;
transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
#leadership .tbio .tacc__item.is-hov .tacc__tag{ opacity: 1; transform: none; }
/* batch 8 had "a selected card is NOT a revealed card" here:
#leadership .tbio .tacc__item.is-sel:not(.is-hov) .tacc__tag{ opacity:0; transform:translateY(10px); }
BATCH 13 DELETES IT. It is the rule that produced the dead end the reviewer found: the moment
.is-pin came off a card that was still .is-sel — a click anywhere off the register did exactly
that — the one member whose bio was open became the only portrait on the page with no name, no
role and (because .is-sel also hides .tbio__mark) no affordance either. T-3 says a clicked
member SHOWS their details, so a selected card is now always a revealed card. */
#leadership .tbio .tacc__item{ border-color: rgba(226,178,76,.18); }
#leadership .tbio .tacc__item.is-hov{ border-color: var(--accent); }
#leadership .tbio .tacc__item.is-sel{ border-color: rgba(226,178,76,.75); }
/* the scrim only belongs under a revealed plate */
#leadership .tbio .tacc__scrim{ opacity: 0; transition: opacity .3s ease; }
#leadership .tbio .tacc__item.is-hov .tacc__scrim{ opacity: 1; }
/* discreet gold mark so a nameless portrait still reads as something you can open
(decorative, aria-hidden — it is not copy); it fades out as the plate arrives */
#leadership .tbio .tbio__mark{
position: absolute; left: clamp(14px, 1.8vw, 22px); bottom: clamp(14px, 1.8vw, 22px); z-index: 3;
width: 22px; height: 22px; pointer-events: none;
opacity: .78; transition: opacity .28s ease;
}
#leadership .tbio .tbio__mark::before,
#leadership .tbio .tbio__mark::after{
content: ''; position: absolute; left: 50%; top: 50%; background: var(--accent);
box-shadow: 0 0 12px rgba(226,178,76,.55);
}
#leadership .tbio .tbio__mark::before{ width: 15px; height: 1px; transform: translate(-50%, -50%); }
#leadership .tbio .tbio__mark::after{ width: 1px; height: 15px; transform: translate(-50%, -50%); }
#leadership .tbio .tacc__item.is-hov .tbio__mark,
#leadership .tbio .tacc__item.is-sel .tbio__mark{ opacity: 0; }
/* touch: there is no pointer to remove, so the open member keeps their plate */
@media (hover: none){
#leadership .tbio .tacc__item.is-sel .tacc__tag,
#leadership .tbio .tacc__item.is-sel:not(.is-hov) .tacc__tag{ opacity: 1; transform: none; }
#leadership .tbio .tacc__item.is-sel .tacc__scrim{ opacity: 1; }
}
/* the bio panel: a short cross-fade in, and the gold tone on every portrait (G1) */
#leadership .tacc__img, #leadership .tdetail__fig img{ filter: var(--gold-photo); }
#leadership .tdetail.is-on{ animation: team3Bio .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes team3Bio{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
#leadership .tdetail.is-on{ animation: none; }
#leadership .tbio .tacc__tag{ transition: opacity .2s ease; transform: none; }
#leadership .tbio .tacc__item.is-sel:not(.is-hov) .tacc__tag{ transform: none; }
}
/* QUALITY · the same placeholder tile repeats in the Leadership row, and had the same problem there — it sat
brighter than the photographs it stands among. Toned down to match them. */
#leadership .tacc__ph, #leadership .tdetail__fig--ph{
background: radial-gradient(70% 56% at 50% 28%, rgba(226,178,76,.11), rgba(226,178,76,.04) 58%, transparent 80%),
linear-gradient(160deg, #4D473C 0%, #363029 62%, #262119 100%);
}
#leadership .tacc__ph span, #leadership .tdetail__fig--ph span{ color: rgba(226,178,76,.6); text-shadow: none; }
/* G1 · the one remaining photograph on this page (The Invitation) was still untoned beside gold frames */
#join .meetglass__img{ filter: var(--gold-photo); }
/* ══════════════════════════════════════════════════════════════════════════
BATCH 12 (2026-09-22) · T-1 / T-2 / T-3 + O-7
──────────────────────────────────────────────────────────────────────────
T-2 "make it bigger — make this section really look like a hero section."
The batch-8 hero was correct in structure but small in the frame: at
1440x980 the group stood 504px tall inside a 980px section, so two
thick bands of empty black topped and tailed it. The paddings come in,
the headline goes up 53.3 -> ~66px, and the three portraits grow ~30%.
T-3 "hover shows a member's details; no hover, no details; a CLICK also
shows them." Batch 8 built hover-only and explicitly BLANKED the plate
on a clicked card. Click now PINS the plate (.is-pin, set by
js/fix-0917b-team.js) in both registers.
O-7 The revealed type was illegible — the hero role computed to 8.8px at
1440 and 7.68px at 390, the line-up role to 10.56px. Every revealed
string is re-sized here; the floors are 13px at 1440 and 12.5px at 390.
══════════════════════════════════════════════════════════════════════════ */
/* ── T-2 · the hero fills its frame ────────────────────────────────────── */
#top.tbox3{
padding-block: clamp(104px, 13vh, 138px) clamp(30px, 4.5vh, 58px);
}
#top.tbox3 .tbox{
grid-template-columns: minmax(0, .86fr) minmax(0, 1.3fr);
gap: clamp(24px, 3.2vw, 52px);
}
#top.tbox3 .tbox__h{
font-size: clamp(2.6rem, 4.72vw, 4.4rem); line-height: 1.0; letter-spacing: -.038em;
}
#top.tbox3 .tbox__lede{
margin-top: clamp(16px, 1.8vw, 26px); max-width: 42ch;
font-size: clamp(1rem, 1.1vw, 1.16rem); line-height: 1.62;
}
#top.tbox3 .tbox__reg{ gap: clamp(10px, 1.15vw, 18px); }
#top.tbox3 .tbox__p{ height: clamp(330px, 34.5vw, 498px); }
#top.tbox3 .tbox__p--lead{
height: clamp(424px, 44.5vw, 642px);
margin-bottom: clamp(24px, 2.5vw, 38px);
}
/* the bigger portraits deserve a bigger open-mark */
#top.tbox3 .tbox__mark{ width: 26px; height: 26px; }
#top.tbox3 .tbox__mark::before{ width: 17px; }
#top.tbox3 .tbox__mark::after{ height: 17px; }
/* shorter laptops — the same proportions, scaled to the glass that is there */
@media (min-width: 881px) and (max-height: 900px){
#top.tbox3{ padding-block: clamp(96px, 12vh, 124px) clamp(24px, 3.6vh, 42px); }
#top.tbox3 .tbox__p{ height: clamp(292px, 27vw, 388px); }
#top.tbox3 .tbox__p--lead{ height: clamp(372px, 34.5vw, 498px); }
#top.tbox3 .tbox__h{ font-size: clamp(2.2rem, 3.7vw, 3.4rem); }
}
@media (min-width: 881px) and (max-height: 760px){
#top.tbox3{ padding-block: clamp(88px, 11.5vh, 108px) clamp(20px, 3.2vh, 34px); }
#top.tbox3 .tbox__p{ height: clamp(250px, 23vw, 318px); }
#top.tbox3 .tbox__p--lead{ height: clamp(318px, 29.5vw, 410px); }
#top.tbox3 .tbox__h{ font-size: clamp(2rem, 3.2vw, 2.9rem); }
#top.tbox3 .tbox__lede{ font-size: .98rem; }
}
/* ── T-3 / O-7 · the HERO reveal, at a size you can read ───────────────── */
#top.tbox3 .tbox__cap{
padding: clamp(14px, 1.35vw, 20px) clamp(12px, 1.2vw, 18px);
background: linear-gradient(0deg, rgba(8,9,12,.97) 20%, rgba(8,9,12,.72) 64%, rgba(8,9,12,0) 100%);
}
#top.tbox3 .tbox__pn{
font-size: clamp(1.05rem, 1.32vw, 1.36rem); line-height: 1.16; letter-spacing: -.012em;
}
#top.tbox3 .tbox__pr{
margin-top: 7px; font-size: clamp(.82rem, .92vw, .95rem);
letter-spacing: .13em; line-height: 1.3; font-weight: 500;
}
/* a CLICK pins the plate — it stays after the pointer has gone (T-3) */
#top.tbox3 .tbox__p.is-pin .tbox__cap{ opacity: 1; transform: none; }
#top.tbox3 .tbox__p.is-pin .tbox__mark{ opacity: 0; }
#top.tbox3 .tbox__p.is-pin::after{
box-shadow: inset 0 0 0 1px rgba(226,178,76,.7), inset 0 0 44px -6px rgba(226,178,76,.5);
}
#top.tbox3 .tbox__p.is-pin .tbox__img{ filter: var(--gold-photo) brightness(1.06); }
/* ── T-3 / O-7 · the LEADERSHIP reveal ─────────────────────────────────── */
#leadership .tbio .tacc__name{ font-size: clamp(1.18rem, 1.5vw, 1.5rem); }
#leadership .tbio .tacc__role{
margin-top: 7px; font-size: clamp(.82rem, .9vw, .95rem);
letter-spacing: .14em; font-weight: 500;
}
/* batch 8 blanked the plate on a selected card; batch 12 reverses that — a
clicked member shows their details and keeps them (T-3). */
#leadership .tbio .tacc__item.is-pin .tacc__tag,
#leadership .tbio .tacc__item.is-sel.is-pin:not(.is-hov) .tacc__tag{ opacity: 1; transform: none; }
#leadership .tbio .tacc__item.is-pin .tacc__scrim{ opacity: 1; }
#leadership .tbio .tacc__item.is-pin .tbio__mark{ opacity: 0; }
/* ── phones: bigger too, and the middle column takes the width its plate needs ── */
@media (max-width: 880px){
#top.tbox3{ padding-block: clamp(96px, 14vh, 124px) clamp(30px, 5vh, 48px); }
/* the batch-12 two-column rule above sits OUTSIDE a query, so the batch-8 phone
stack has to be restated here or the copy and the portraits stay side by side
at 390 and the register runs off the right edge. */
#top.tbox3 .tbox{ grid-template-columns: 1fr; gap: clamp(24px, 6.4vw, 34px); }
#top.tbox3 .tbox__h{ font-size: clamp(2.15rem, 9.5vw, 3.05rem); }
#top.tbox3 .tbox__lede{ font-size: 1rem; max-width: 100%; }
/* equal thirds gave the raised middle a 112px plate at 390 — too narrow for a
readable name. The lead column takes a quarter more width; the sketch's
"middle one is higher and taller" reads stronger for it. */
#top.tbox3 .tbox__reg{ grid-template-columns: 1fr 1.4fr 1fr; gap: 6px; }
/* BATCH 13 · T-2 at phone width. The batch-12 pass grew the TYPE but not the PHOTOGRAPHS: at
390x844 the register stood 245px inside an 844px section and left a 139px band of dead black
under it, tiles only 99x179 and 139x230. The slack goes into the portraits. At 390 that is
242px and 304px, and because these boxes cover a 2:3 portrait the face itself comes up about
a third larger — which is what "really look like a hero section" means on a phone. */
#top.tbox3 .tbox__p{ height: clamp(230px, 62vw, 272px); }
#top.tbox3 .tbox__p--lead{ height: clamp(292px, 78vw, 346px); margin-bottom: clamp(14px, 3.8vw, 22px); }
#top.tbox3 .tbox__cap{ padding: 10px 7px; }
#top.tbox3 .tbox__pn{ font-size: .97rem; line-height: 1.14; }
#top.tbox3 .tbox__pr{ font-size: .78rem; letter-spacing: .07em; margin-top: 4px; line-height: 1.25; }
#top.tbox3 .tbox__mark{ width: 18px; height: 18px; left: 8px; bottom: 8px; }
#top.tbox3 .tbox__mark::before{ width: 12px; }
#top.tbox3 .tbox__mark::after{ height: 12px; }
}
@media (max-width: 767px){
#leadership .tbio .tacc__name{ font-size: 1.24rem; }
#leadership .tbio .tacc__role{ font-size: .84rem; letter-spacing: .12em; }
}
/* ══════════════════════════════════════════════════════════════════════════
BATCH 13 (2026-09-22 · FIX round) — O-7 · T-3 · QUALITY
──────────────────────────────────────────────────────────────────────────
O-7 Batch 12 fixed the TYPE SIZE of the reveal and then re-introduced the
illegibility somewhere else: a PINNED name plate was still rendered
inside the 184px column the accordion squeezes every non-hovered card
into, so "David Nwankwo / MANAGING PARTNER" ellipsised to
"David Nwa… / MANAGING PA…" (clientWidth 136 vs scrollWidth 162/166,
measured at 1440). The type is not shrunk to fix it — the COLUMN is
the bug, so a pinned card is given its own share of the row and is
never squeezed. Verified by driving it: pin David, hover Zino, assert
scrollWidth <= clientWidth on .tacc__name and .tacc__role.
T-3 "hover shows a member's details; no hover, no details; click also
shows them." The open member now ALWAYS carries name, role and scrim,
in every state, because .is-pin is derived from .is-sel in
js/fix-0917b-team.js instead of being tracked separately.
QUAL A resting portrait is no longer anonymous: the gold open-mark sits at
full value with a hairline beside it, and both go the instant the
plate arrives.
══════════════════════════════════════════════════════════════════════════ */
/* ── O-7 · a PINNED card is never left in the squeezed column ───────────── */
@media (min-width: 768px){
/* .tacc:hover .tacc__item{flex-grow:.45} in css/style.css is what squeezes it.
The hovered card keeps the biggest share (2.4); a card that is showing its
plate without being the hovered one takes 1.5 and a floor wide enough for the
longest plate ("Fortune Nwankwo", 184px, and "MANAGING PARTNER", 166px, plus
the tag's own 22px padding each side) at every desktop width.
The rule is written against EVERY state that reveals a plate, not just .is-pin:
driving the keyboard found the same defect one move from the pinned one —
hover David with the mouse, press Tab to Fortune, and the focused card revealed
"Fortune Nwa…" inside the 184px squeezed column (name clientWidth 138 vs
scrollWidth 184, measured at 1440). Whatever is revealed must be readable, so
the floor belongs to the reveal, not to one class that happens to cause it. */
#leadership .tbio.tacc:hover .tacc__item.is-pin:not(:hover),
#leadership .tbio.tacc:hover .tacc__item.is-sel:not(:hover),
#leadership .tbio.tacc:hover .tacc__item.is-hov:not(:hover),
#leadership .tbio.tacc:hover .tacc__item:focus-visible:not(:hover){
flex-grow: 1.5;
min-width: clamp(240px, 26vw, 330px);
}
/* ...and it is not dimmed and blurred behind the row scrim while it is revealed */
#leadership .tbio.tacc:hover .tacc__item.is-pin:not(:hover)::after,
#leadership .tbio.tacc:hover .tacc__item.is-sel:not(:hover)::after,
#leadership .tbio.tacc:hover .tacc__item.is-hov:not(:hover)::after,
#leadership .tbio.tacc:hover .tacc__item:focus-visible:not(:hover)::after{ opacity: 0; }
}
#leadership .tbio .tacc__item.is-pin{ border-color: var(--accent); }
/* ── T-3 · the open member always reads ─────────────────────────────────── */
/* .is-sel and .is-pin are kept identical by js/fix-0917b-team.js (batch 13).
These restate the reveal against .is-sel as well, so that even if the two
ever drifted apart again the open member could not go silent. */
#leadership .tbio .tacc__item.is-sel .tacc__tag,
#leadership .tbio .tacc__item.is-pin .tacc__tag{ opacity: 1; transform: none; }
#leadership .tbio .tacc__item.is-sel .tacc__scrim,
#leadership .tbio .tacc__item.is-pin .tacc__scrim{ opacity: 1; }
/* and a card that is selected but somehow NOT showing its plate keeps its mark,
so there is no state in which a portrait offers nothing at all */
#leadership .tbio .tacc__item.is-sel:not(.is-pin):not(.is-hov) .tbio__mark{ opacity: 1; }
/* ── QUALITY · a resting portrait says it opens something ───────────────── */
#leadership .tbio .tbio__mark{ opacity: 1; }
#top.tbox3 .tbox__mark{ opacity: 1; }
#leadership .tbio .tacc__item::before,
#top.tbox3 .tbox__p::before{
content: ''; position: absolute; z-index: 3; pointer-events: none;
height: 1px; background: linear-gradient(90deg, rgba(226,178,76,.85), rgba(226,178,76,0));
transition: opacity .28s ease;
}
#leadership .tbio .tacc__item::before{
left: calc(clamp(14px, 1.8vw, 22px) + 30px);
bottom: calc(clamp(14px, 1.8vw, 22px) + 10px);
width: 56px;
}
#top.tbox3 .tbox__p::before{
left: calc(clamp(12px, 1.2vw, 18px) + 34px);
bottom: calc(clamp(12px, 1.2vw, 18px) + 12px);
width: 44px;
}
/* it goes the moment the plate arrives */
#leadership .tbio .tacc__item.is-hov::before,
#leadership .tbio .tacc__item.is-pin::before,
#leadership .tbio .tacc__item.is-sel::before,
#leadership .tbio .tacc__item:hover::before,
#leadership .tbio .tacc__item:focus-visible::before,
#top.tbox3 .tbox__p.is-hov::before,
#top.tbox3 .tbox__p.is-pin::before,
#top.tbox3 .tbox__p:hover::before,
#top.tbox3 .tbox__p:focus-visible::before{ opacity: 0; }
@media (max-width: 880px){
#top.tbox3 .tbox__p::before{ left: 26px; bottom: 16px; width: 32px; }
}
@media (prefers-reduced-motion: reduce){
#leadership .tbio .tacc__item::before,
#top.tbox3 .tbox__p::before{ transition: none; }
}
/* ── T-3 · the reveal is CSS-driven as well as class-driven ─────────────────
Verification of the batch-13 contract turned up one way the two could still
disagree: css/style.css expands a card on :hover, but the plate was shown
only by .is-hov, the class js/fix-0917b-team.js adds on mouseenter. Any
moment the pointer sits on a card without that class having been applied —
the page scrolling under a stationary pointer is the everyday one, and it is
also what a visitor with JS off gets permanently — left a card expanded to
full width with no name on it. The same :hover pair the hero plate has had
since batch 8 is added here, so the card that the stylesheet expands is
always the card that carries its name. (The hovered card is by definition
the WIDE one, so nothing readable is put back in a squeezed column.) */
#leadership .tbio .tacc__item:hover .tacc__tag,
#leadership .tbio .tacc__item:focus-visible .tacc__tag{ opacity: 1; transform: none; }
#leadership .tbio .tacc__item:hover .tacc__scrim,
#leadership .tbio .tacc__item:focus-visible .tacc__scrim{ opacity: 1; }
#leadership .tbio .tacc__item:hover .tbio__mark,
#leadership .tbio .tacc__item:focus-visible .tbio__mark{ opacity: 0; }
/* the keyboard ring is the browser's white default on a page whose every other
affordance is gold; it is restated in the accent, not removed */
#leadership .tbio .tacc__item:focus-visible,
#top.tbox3 .tbox__p:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
/* ══ 2026-09-24 · "add a gold overlay on the three images on the team" ══════
They already carried --gold-photo (sepia .28), which is a tone, not an
overlay — on the two new headshots, shot against white and grey, it barely
registers. This is a real gold wash: a warmer grade plus a soft-light gold
layer over the frame, deepening toward the foot so the plate below it still
reads. Applied to all three portraits in the hero, the register and the
bio panel, so the set stays one family. */
:root{ --team-gold-photo: sepia(.44) saturate(1.22) hue-rotate(-8deg) contrast(1.02); }
/* 1 · the hero trio */
#top.tbox3 .tbox__img{ filter: var(--team-gold-photo); }
#top.tbox3 .tbox__fig::after{
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg,
rgba(242,207,124,.34) 0%, rgba(226,178,76,.26) 42%, rgba(122,87,20,.46) 100%);
mix-blend-mode: soft-light;
}
#top.tbox3 .tbox__p.is-hov .tbox__img,
#top.tbox3 .tbox__p:hover .tbox__img,
#top.tbox3 .tbox__p:focus-visible .tbox__img,
#top.tbox3 .tbox__p.is-pin .tbox__img{ filter: var(--team-gold-photo) brightness(1.06); }
/* 2 · the leadership register */
#leadership .tacc__item{ position: relative; }
#leadership .tacc__img{ filter: var(--team-gold-photo); }
#leadership .tacc__item::before{
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg,
rgba(242,207,124,.34) 0%, rgba(226,178,76,.26) 42%, rgba(122,87,20,.46) 100%);
mix-blend-mode: soft-light;
}
/* 3 · the bio panel, so the open member matches his own tile */
#leadership .tdetail__fig{ position: relative; }
#leadership .tdetail__fig img{ filter: var(--team-gold-photo); }
#leadership .tdetail__fig::after{
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg,
rgba(242,207,124,.30) 0%, rgba(226,178,76,.22) 44%, rgba(122,87,20,.40) 100%);
mix-blend-mode: soft-light;
}
/* The expanded register card is a wide landscape box, and the two new
portraits are much tighter headshots than the ones they replaced — at the
resting crop the band landed on the eyes and cut the chin. The expanded
state gets its own object-position so the whole face reads. */
#leadership .tbio .tacc__item.is-hov .tacc__img,
#leadership .tbio .tacc__item.is-sel .tacc__img{ object-position: 50% 30%; }
/* ══ 2026-09-24 · "remove it on all of them… you can leave it on this Fortune
one because [of the] picture. Every other one, it's making the image look
somehow." — the wash stays on Fortune's frames only; David and Zino go back
to the house gold TONE they carried before. ══════════════════════════════ */
#top.tbox3 .tbox__img,
#leadership .tacc__img,
#leadership .tdetail__fig img{ filter: var(--gold-photo); }
#top.tbox3 .tbox__p.is-hov .tbox__img,
#top.tbox3 .tbox__p:hover .tbox__img,
#top.tbox3 .tbox__p:focus-visible .tbox__img,
#top.tbox3 .tbox__p.is-pin .tbox__img{ filter: var(--gold-photo) brightness(1.06); }
#top.tbox3 .tbox__fig::after,
#leadership .tacc__item::before,
#leadership .tdetail__fig::after{ content: none; }
/* Fortune keeps it */
#top.tbox3 .tbox__p[data-team-jump="fortune"] .tbox__img,
#leadership .tacc__item[data-member="fortune"] .tacc__img,
#leadership [data-tdetail="fortune"] .tdetail__fig img{ filter: var(--team-gold-photo); }
#top.tbox3 .tbox__p[data-team-jump="fortune"].is-hov .tbox__img,
#top.tbox3 .tbox__p[data-team-jump="fortune"]:hover .tbox__img,
#top.tbox3 .tbox__p[data-team-jump="fortune"]:focus-visible .tbox__img,
#top.tbox3 .tbox__p[data-team-jump="fortune"].is-pin .tbox__img{ filter: var(--team-gold-photo) brightness(1.06); }
#top.tbox3 .tbox__p[data-team-jump="fortune"] .tbox__fig::after,
#leadership .tacc__item[data-member="fortune"]::before,
#leadership [data-tdetail="fortune"] .tdetail__fig::after{
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg,
rgba(242,207,124,.34) 0%, rgba(226,178,76,.26) 42%, rgba(122,87,20,.46) 100%);
mix-blend-mode: soft-light;
}