/* ═══════════════════════════════════════════════════════════════════════
   DRIFT — TEAM PAGE
   Sections T1–T6 per DRIFT-Kinetic-Immersive-Design-Spec.md, Part C.
   Deliberately less cinematic than the homepage: this page is EVIDENCE,
   not vision. Denser, document-like, blueprint lattice at full strength.
   The step-down in type scale comes from `dense: true` in the front
   matter, which sets .page-dense — see the DENSE SCALE block in site.css.

   Shared tokens, type, buttons, nav and footer live in site.css.
   ═══════════════════════════════════════════════════════════════════════ */

.thero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;
  padding:clamp(112px,15vh,150px) 0 clamp(48px,7vh,80px)}
/* Keep the photo readable. Stacking a soft-light tint over a scrim over a
   darkened greyscale image turned it to mud — one darkening pass only. */
.thero>img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;z-index:0;
  filter:grayscale(.2) contrast(1.06) brightness(.8);will-change:transform}
/* left-weighted scrim: copy sits left, so the crew stays visible on the right */
.thero .sc{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(var(--abyss-rgb),.90) 0%,rgba(var(--abyss-rgb),.68) 42%,rgba(var(--abyss-rgb),.14) 100%),
    linear-gradient(180deg,rgba(var(--abyss-rgb),.86) 0%,rgba(var(--abyss-rgb),.12) 34%,rgba(var(--abyss-rgb),.84) 100%)}
.thero .tint{position:absolute;inset:0;z-index:2;mix-blend-mode:soft-light;opacity:.20;
  background:linear-gradient(160deg,#79C0F5,#17527E)}
.thero .wrap{position:relative;z-index:3}
.thero h1,.thero .lede{text-shadow:0 2px 30px rgba(var(--abyss-rgb),.9)}
.thero .lede{margin-top:26px;color:var(--mist);max-width:46ch}

/* credibility bar — the bench summarised before a single face appears */
.credbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(38px,6vh,62px);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
/* MUST be a child selector. `.credbar div` also matched .n and .l, giving
   them their own background/padding AND display:flex;flex-direction:column
   — which stacked "$", "30" and "m+" onto three separate lines. */
.credbar>div{background:rgba(var(--abyss-rgb),.72);padding:22px 24px;backdrop-filter:blur(6px);
  display:flex;flex-direction:column}
.credbar .n{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:500;letter-spacing:-.04em;
  line-height:1.1;white-space:nowrap}
.credbar .l{font-size:.76rem;color:var(--fog);margin-top:auto;padding-top:12px;line-height:1.45}
@media(max-width:820px){.credbar{grid-template-columns:1fr 1fr}}

/* ═══ SHARED SECTION FURNITURE ═══ */
/* 12vh became 9vh on 28 Aug 2026 (James — "can we shrink the gaps"). At a
   900px-tall laptop the old clamp resolved to 108px at each end, so two
   sections met with 216px of empty page between them and the reader crossed
   a screen's worth of nothing to get from one to the next. 9vh is ~77px, so
   a section change costs ~155px — still unmistakably a break. The phone
   value is set separately in site.css (body .sec, 56px). */
.sec{position:relative;padding:clamp(56px,9vh,104px) 0}
.sec.lattice::before{content:"";position:absolute;inset:0;background:var(--grid-schematic);
  z-index:0;pointer-events:none}
.sec .wrap{position:relative;z-index:1}
.sechead{margin-bottom:clamp(38px,6vh,64px)}
.sechead p{color:var(--mist);margin-top:16px}

/* ═══ THE PORTRAIT TREATMENT ═══════════════════════════════════════════
   Every source file is greyscale, so the page makes that the house style.
   The reveal is LIGHT, not colour: the --abyss veil lifts and the face
   brightens. One filter, one asset, two states.                        */
.shot{position:relative;overflow:hidden;background:var(--hull)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(1) contrast(1.02);
  transition:filter 600ms var(--ease-out),transform 900ms var(--ease-out)}
.shot::after{content:"";position:absolute;inset:0;background:var(--abyss);opacity:.05;
  transition:opacity 600ms var(--ease-out);pointer-events:none}

/* ═══ T2 · LEADERSHIP ═══ */
/* ONE column of horizontal cards, not two of vertical ones. Two-up put a
   portrait source in a landscape band the full width of the card, and both
   of the things wrong with these photos came out of that one decision:

     resolution — the band was 603px wide on a 1440 screen, so an 880px
     source landed at x1.46 where retina wants x2, and the faces were soft;
     crop — 880x1100 into 603x418 is object-fit: cover throwing away 45% of
     the frame, which is why Peter Lacy's said ECONOMIST across the back.

   Laid across, the photo is ~280px wide instead of 603, so the SAME file is
   x3.1 — sharp, with nothing re-encoded. And the box is 4/5, which is what
   these files already are, so cover crops nothing at all: the portrait is
   shown whole, as it was taken. Height is unchanged — three rows of a tall
   vertical card and six horizontal ones come out within 60px of each other. */
.leadgrid{display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,26px)}
.person{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--hull);display:flex;flex-direction:column;
  transition:border-color var(--t-base),transform var(--t-base),box-shadow var(--t-base)}
.person:hover{border-color:var(--line-signal);transform:translateY(-4px);
  box-shadow:0 24px 60px rgba(2,14,26,.45)}
.person:hover .shot::after{opacity:0}
.person:hover .shot img{filter:brightness(1) contrast(1.06);transform:scale(1.03)}
/* NB: aspect-ratio + max-height shrinks the WIDTH too, leaving a gap beside
   the portrait. Fix the height and let object-fit crop instead — safe here
   because every crop is face-anchored with the eyeline at 38%. */
.person{flex-direction:row}
.person .shot{flex:none;width:clamp(190px,23%,290px);aspect-ratio:4/5;height:auto}
/* No object-position here any more, and none needed: the box is the file's
   own 4/5, so there is no overflow to position. The old value solved for an
   eyeline inside a crop that no longer happens. */
/* ONE column of body text, not two. The card used to split into a bullet
   CV on the left and a one-line hook on the right; the migrated page has
   neither — it has the bio in full, which is prose and wants a single
   measure.

   THAT MEASURE IS GONE (James, 28 Aug 2026: "make all of the descriptions
   go fully across the box"). The bios were capped at 74ch, which drew them
   at 545px inside an 889px column — the text stopped visibly short of the
   card's right edge and the card read as half empty. They now run the full
   width of the body, so a line is ~120 characters. That is well past the
   65-75 a measure is usually set for, and it is the deliberate trade: the
   filled box is what was asked for. line-height stays at 1.7, which is what
   keeps a line that long trackable — do not tighten it. If the length ever
   does become the complaint, the fix is a wider portrait or a two-column
   grid of narrower cards, not a cap put back on the paragraph.

   The expanding-bio machinery (.more / .bio-t) and the .li glyph went with
   them: the live site sets each bio out in full, and a disclosure control
   would decide for the reader which half of it matters. Leadership carried
   no LinkedIn link there — the advisors did, and theirs is .adv-li below.

   min-width:0 stays. Without it a long unbroken string in the bio sets the
   column's floor and pushes the layout wider than the card. */
.person .body{min-width:0;padding:clamp(22px,2.6vw,32px);
  display:flex;flex-direction:column;flex:1}
.person .role{font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--current-lift);margin-bottom:10px}
.person .name{margin-bottom:16px}
.person .body p{margin:0;max-width:none;font-size:.92rem;line-height:1.7;color:var(--mist)}
.person .body p+p{margin-top:14px}

/* THE BAND BETWEEN THE HERO AND THE FIRST CARD (James, 28 Aug 2026:
   "reduce gap"). This section head carries an eyebrow and nothing else —
   no d2, no lede — so .sec's 104px top padding and .sechead's 48px below it
   were 186px of empty page holding one 19px line of type. The hero looked
   as though it had ended twice.

   Halved, near enough: ~70px above the eyebrow and ~26px below it.

   Scoped to #leadership on purpose. #advisors has the identical eyebrow-only
   head and therefore the identical 48px under it, and it was NOT flagged —
   it sits under the backers band rather than under the hero, where the same
   spacing does not read as a second ending. If that one is ever called out
   too, add it to these two selectors rather than loosening .sechead, which
   is shared with pages whose heads carry a heading and need the room. */
#leadership{padding-top:clamp(48px,7vh,72px)}
#leadership .sechead{margin-bottom:clamp(20px,2.4vh,26px)}

@media(max-width:860px){.leadgrid{grid-template-columns:1fr}}
/* The card's own stacking is handled by the 820px block further down, which
   was already here and still says the right thing — a capped 320px portrait
   rather than a full-width letterbox, for resolution reasons its own comment
   sets out. Nothing to add at this breakpoint. */

/* ═══ T3 · BACKERS ═══ */
.backers{border-block:1px solid var(--line);background:var(--hull);padding:30px 0}
.backers .wrap{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.backers .l{font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fog)}
.backers .logos{display:flex;align-items:center;gap:clamp(20px,3.4vw,44px);flex-wrap:wrap}
.backers img{height:24px;width:auto;opacity:.45;transition:opacity var(--t-fast)}
.backers img:hover{opacity:1}

/* Below this the two columns inside the card are narrower than the text
   wants, so it goes back to photo-above-body — and the photo is then the
   full card width, which is where the 4/5 ratio earns its keep a second
   time: it stays a portrait instead of becoming a letterbox again. */
@media(max-width:820px){
  .person{flex-direction:column}
  /* Capped, not full-bleed. Stacked, the photo would run the whole width of
     the card — 740px on a 820px screen — and an 880px file is x1.07 there,
     which is the same under-resolution this layout was changed to fix, just
     moved to a smaller screen. 320px keeps it at x2.75 on the same file,
     and a portrait that size sits better above the text than a huge one. */
  .person .shot{width:100%;max-width:320px;aspect-ratio:4/5}
}

/* ═══ T4 · ADVISORS — denser roster row, not full cards ═══ */
.advgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
/* A COLUMN, not a row. This was a 78px circle beside two clamped lines —
   a roster entry. It now carries the advisor's bio in full and a labelled
   LinkedIn link at the foot, which is a card, so the circle goes above the
   text and the card grows to its content. */
.adv{display:flex;flex-direction:column;gap:0;padding:26px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(255,255,255,.02);transition:border-color var(--t-base),background var(--t-base)}
.adv:hover{border-color:var(--line-signal);background:rgba(59,123,255,.06)}
.adv:hover .shot::after{opacity:0}
.adv:hover .shot img{filter:brightness(1) contrast(1.06)}
/* 132px, not 78. A circle crops a 4:5 file to its middle 80% and then cuts
   the corners off that, so it is the tightest frame on the page — and at
   78px a headshot that was shot close arrived as a face with no head
   around it. The crops are normalised to put brow-to-chin at ~42% of the
   frame, which fixes most of it; the rest is that the circle was simply
   too small to hold a portrait.

   Fixed rather than fluid, because the constraint is the CARD, not the
   viewport, and the card never gets narrower than the 392px it is at three
   columns — below 960px the grid drops to two and then to one, which makes
   it wider. 132 is a third of that 392. Nothing else in the card moves. */
.adv .shot{width:132px;height:132px;border-radius:50%;flex:none;margin-bottom:20px}
.adv .shot img{object-position:center 26%}   /* keep faces centred in the circle */
.adv .role{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--current-lift);margin-bottom:7px}
.adv .name{font-size:1.02rem;font-weight:500;letter-spacing:-.02em;margin-bottom:8px}
/* No margin-bottom and no clamp: the bio runs to whatever length it is,
   and the link below is pushed to the foot by its own margin-top:auto. */
.adv p{margin:0;font-size:.88rem;line-height:1.68;color:var(--mist);max-width:none}
.adv p+p{margin-top:12px}
.adv-credit{margin-top:14px;font-size:.74rem;color:var(--fog)}
/* "LinkedIn profile", set as the old page set it — a labelled link rather
   than a bare glyph. It is a large part of why the reader believes the
   name, so it is legible rather than decorative. */
.adv-li{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:9px;
  font-size:.82rem;color:var(--white);text-decoration:none;
  transition:color var(--t-fast) var(--ease-out)}
.adv-li svg{width:14px;height:14px;fill:currentColor;color:var(--current-lift);flex:none}
.adv-li:hover{color:var(--current-lift)}
.adv-li:focus-visible{outline:2px solid var(--current-lift);outline-offset:3px}
@media(max-width:960px){.advgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.advgrid{grid-template-columns:1fr}}

/* ═══ T5 · THE CREW GRID ═══ */
.crewhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(30px,5vh,50px)}
.crewhead .count{font-family:var(--instrument);font-size:.72rem;letter-spacing:.14em;color:var(--fog)}
/* FOUR ACROSS, CENTRED, AT THE WIDTH FIVE GAVE THEM (James, 28 Aug 2026:
   "can we make 4 x 4 and dont change the dimensions just centre the 4 x 4
   on the page"). There are sixteen people, so five per row left a row of
   five, five, five and then one card alone under a row of blanks. Four per
   row is 4x4 exactly — no orphan, whatever the reading order.

   The tracks are FIXED at 229px rather than 1fr, which is the whole point:
   1fr would have shared the 1240px wrap between four cards and drawn each
   one 57px wider, changing every portrait's size on the page. 229px is what
   a card measured at five-up, so the cards are untouched and the row is
   simply narrower than the wrap — justify-content:center puts the leftover
   126px either side of it instead of inside the cards.

   minmax(0,229px), not a bare 229px: below ~1100px the four tracks plus
   their gaps no longer fit the wrap, and the min of 0 lets them give way
   rather than overflow. The breakpoints below take over from there. */
.crewgrid{display:grid;grid-template-columns:repeat(4,minmax(0,229px));
  justify-content:center;gap:clamp(14px,1.8vw,24px)}
/* flex column + flex:1 on the caption so a two-line role doesn't leave the
   shorter cards with a ragged bottom edge */
.crew{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--hull);
  display:flex;flex-direction:column;
  transition:border-color var(--t-base),transform var(--t-base)}
.crew .cap{flex:1}
.crew:hover{border-color:var(--line-signal);transform:translateY(-4px)}
.crew:hover .shot::after{opacity:0}
.crew:hover .shot img{filter:brightness(1) contrast(1.06);transform:scale(1.04)}
.crew .shot{aspect-ratio:4/5}
.crew .cap{padding:14px 15px 16px}
.crew .n{font-size:.88rem;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.crew .r{font-size:.7rem;color:var(--fog);margin-top:5px;line-height:1.4}
/* Back to filling the row once the fixed tracks stop fitting: on a small
   screen the leftover is worth more as card than as margin. */
@media(max-width:1080px){.crewgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){.crewgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.crewgrid{grid-template-columns:repeat(2,1fr)}}

/* ═══ T6 · CAREERS ═══ */
.careers{position:relative;overflow:hidden;text-align:center;padding:clamp(100px,17vh,190px) 0;
  background:var(--abyss)}
.careers>img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;z-index:0;
  filter:grayscale(.12) brightness(.94);will-change:transform}
.careers .sc{position:absolute;inset:0;z-index:1;
  background:radial-gradient(85% 70% at 50% 50%,rgba(var(--abyss-rgb),.58),rgba(var(--abyss-rgb),.88))}
/* The wash over these photographs was lightened so the picture reads as a
   picture. Type that used to be carried by that wash is carried by its own
   shadow instead — the same trade the hero already makes, and it protects
   the words specifically rather than dimming the whole frame to reach them.
   It also holds while the parallax moves brighter water up behind them. */
.careers .wrap{position:relative;z-index:2}
.careers h2,.careers .eyebrow{text-shadow:0 2px 30px rgba(var(--abyss-rgb),.9),0 1px 6px rgba(var(--abyss-rgb),.6)}
.careers p{text-shadow:0 1px 18px rgba(var(--abyss-rgb),.95),0 1px 4px rgba(var(--abyss-rgb),.7)}
.careers .eyebrow{justify-content:center}
.careers p{margin:26px auto 0;color:var(--mist);max-width:50ch}
.careers .ctas{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}


/* ═══ REDUCED MOTION — team page ═════════════════════════════════════════
   site.css kills durations globally; the portrait treatment additionally
   drops its hover-lit state so the faces stay legible. */
@media(prefers-reduced-motion:reduce){
  .shot::after{opacity:.05}
  .shot img{filter:brightness(1) contrast(1.03)}
}

/* ═══ T6 · THE ASK LINE ═══
   "Are you ready to make Oceans of Energy?" — the lede above it is .careers
   p; this is the question, set larger and given its own room, matching the
   way /contact sets the same line. */
.tm-ask{margin-top:22px;font-size:clamp(1.05rem,1.7vw,1.28rem);font-weight:300;
  color:var(--white)}