/* ==========================================================================
   Team blocks for the homepage. Inherit the band's ink like the other sets:
   add `tb-on-light` on a white or grey ground.
   Portraits use the design system's circular crop geometry.
   ========================================================================== */
.tb{--tb-ink:#fff;--tb-sub:rgba(255,255,255,.62);--tb-rule:rgba(255,255,255,.14);--tb-bg:var(--bg)}
.tb-on-light{--tb-ink:var(--to-ink,#191819);--tb-sub:var(--to-grey-700,#5b5c63);
  --tb-rule:rgba(25,24,25,.14);--tb-bg:var(--to-white,#fff)}
.tb-sec{background:var(--tb-bg);padding:clamp(56px,8vh,110px) 0}
.tb-wrap{width:calc(100% - (var(--gutter) * 2));max-width:var(--frame-max);margin-inline:auto;padding-inline:var(--pad)}
.tb-kick{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);margin-bottom:18px}
.tb h2{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(1.7rem,3.2vw,42px);line-height:1;margin:0 0 20px;max-width:20ch;color:var(--tb-ink)}
.tb p{font-size:clamp(15px,1.4vw,18px);line-height:1.62;color:var(--tb-sub);margin:0 0 16px;max-width:54ch}
.tb-more{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--tb-ink);text-decoration:underline;text-underline-offset:4px}

/* Square portrait, 1px rule like every other edge on the site. There were two
   box-shadow declarations here — the 1px one was dead and every portrait in the
   set drew a 2px border. One declaration now, so it cannot drift again.
   display:block so the class works on an <a> as well as a <div>. */
.tb-ph{display:block;position:relative;aspect-ratio:1/1;border-radius:0;overflow:hidden;
  background:none;box-shadow:inset 0 0 0 1px var(--tb-rule)}

/* A portrait can be the link to that person on the team page. Give it a hover, or a
   clickable face reads as decoration. First Light is the site's one highlight, so it
   is what the hover uses. An <a class="tb-ph"> needs its img to carry the person's
   name in alt — the image IS the link text, so it is no longer decorative. */
a.tb-ph{transition:box-shadow .18s}
a.tb-ph:hover,a.tb-ph:focus-visible{box-shadow:inset 0 0 0 1px var(--accent)}
.tb-ph img{position:absolute;left:0%;top:0%;width:100%;height:100%;
  object-fit:contain;object-position:top center;display:block}

/* ---- A · Portrait row. Compact strip, whole team at a glance. ---- */
.tb-row{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(14px,1.8vw,28px);margin-top:34px}
.tb-row .p{text-align:center}
.tb-row .nm{margin-top:14px;font-size:14px;font-weight:500;color:var(--tb-ink);line-height:1.3}
.tb-row .rl{margin-top:4px;font-family:var(--font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--tb-sub)}

/* ---- B · Statement + faces. The argument carries it; faces are proof. ---- */
.tb-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.tb-faces{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.tb-faces .nm{margin-top:10px;font-size:13px;color:var(--tb-ink);text-align:center;line-height:1.3}

/* ---- C · Roster. No photos. Works today, and reads as substance. ---- */
.tb-roster{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(32px,5vw,72px);margin-top:30px}
.tb-roster .r{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--tb-rule)}
.tb-roster .nm{font-size:17px;font-weight:500;color:var(--tb-ink)}
.tb-roster .rl{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--tb-sub);text-align:right;white-space:nowrap}

/* ---- D · Strip. Seven separate portraits on one line. Smallest footprint. ----
   Was an overlapping stack: 56px squares pulled -14px into each other, which sliced
   a quarter off six of the seven faces — overlap is a circle idiom and these crops
   are square. Seven discrete boxes now, each with its own 1px rule from .tb-ph, a
   real gap between them and no container background. */
.tb-stack{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:8px}
.tb-avatars{display:flex;gap:8px}
.tb-avatars .tb-ph{width:56px;flex:none}
.tb-stack .line{font-size:16px;color:var(--tb-sub);margin:0}
.tb-stack .line b{color:var(--tb-ink);font-weight:500}
/* 7 × 56 + 6 × 8px gap is 440px, and the column is ~280px at 375 — the last faces
   ran off the edge. Shrink rather than scroll: the strip is one line of evidence,
   not a gallery to swipe. 34px + 4px gap is 262px, which clears both wraps this
   block gets used in, .tb-wrap (vw − 96) and a page's own .sec (vw − 72). */
@media (max-width:560px){ .tb-avatars{gap:4px} .tb-avatars .tb-ph{width:34px} }

/* ---- E · Two leads. Founders large, the rest as a line beneath. ---- */
.tb-leads{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,56px);margin-top:32px;max-width:760px}
.tb-leads .l .nm{margin-top:18px;font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.2rem,2vw,26px);line-height:1;color:var(--tb-ink)}
.tb-leads .l .rl{margin-top:8px;font-family:var(--font-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--tb-sub)}
.tb-rest{margin-top:34px;padding-top:20px;border-top:1px solid var(--tb-rule);
  font-size:15px;line-height:1.7;color:var(--tb-sub);max-width:70ch}
.tb-rest b{color:var(--tb-ink);font-weight:500}

@media (max-width:1000px){ .tb-row{grid-template-columns:repeat(4,1fr)} }
@media (max-width:760px){
  .tb-wrap{padding-inline:24px}
  .tb-row{grid-template-columns:repeat(3,1fr)}
  .tb-split,.tb-roster,.tb-leads{grid-template-columns:1fr}
  .tb-faces{grid-template-columns:repeat(3,1fr)}
}

/* ---- F · Portrait + expertise. Ties the team to what they can help with. ---- */
.tb-exp{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--tb-rule);
  border:1px solid var(--tb-rule);margin-top:32px}
.tb-exp .c{background:var(--tb-bg);padding:24px;display:flex;flex-direction:column;gap:14px}
.tb-exp .top{display:flex;align-items:center;gap:16px}
.tb-exp .top .tb-ph{width:66px;flex:none}
.tb-exp .nm{font-size:17px;font-weight:500;color:var(--tb-ink);line-height:1.25}
.tb-exp .rl{margin-top:4px;font-family:var(--font-mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--tb-sub)}
.tb-tags{display:flex;flex-wrap:wrap;gap:6px}
.tb-tags span{font-size:12px;padding:5px 10px;border:1px solid var(--tb-rule);color:var(--tb-sub)}

/* ---- G · Routing. "If you're building X, talk to Y." ---- */
.tb-route{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);margin-top:32px}
.tb-route .r{border-top:1px solid var(--tb-rule);padding-top:22px;display:flex;flex-direction:column;gap:12px}
.tb-route .lbl{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--tb-sub)}
.tb-route h3{font-family:var(--font-body);font-weight:600;font-size:19px;line-height:1.25;margin:0;color:var(--tb-ink)}
.tb-route p{margin:0;font-size:14px;line-height:1.6;color:var(--tb-sub)}
.tb-route .who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px}
.tb-route .who .tb-ph{width:40px;flex:none}
.tb-route .who span{font-size:14px;color:var(--tb-ink)}

/* ---- H · Spotlight. One portrait, one line, attribution. ---- */
.tb-spot{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.tb-spot blockquote{margin:0;font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:0;font-size:clamp(1.5rem,3vw,40px);line-height:1.04;color:var(--tb-ink);max-width:22ch}
.tb-spot .attr{margin-top:22px;font-family:var(--font-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--tb-sub)}

@media (max-width:900px){ .tb-exp,.tb-route{grid-template-columns:1fr} .tb-spot{grid-template-columns:1fr} }