/* ==========================================================================
   Team (/team and /team/<slug>) — page layer over brand/hub.css (.bdh-*). Prefix .tm-.
   Shared components only: the person card, the monogram, the row of faces, the pills and the photograph grade.
   Section styles: assets/css/team/<id>.css · profiles: assets/css/team/profile.css.
   Tokens from core.css only; no new colours, no gradients except mask fades, no !important.
   ========================================================================== */

.tm{--tm-ring:0 0 0 2px var(--paper),0 0 0 4px var(--blue)}

/* ---------- a photograph in a frame: the site's restrained cool grade ------ */
.tm-ph{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);background:var(--paper-4);isolation:isolate}
.tm-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.03)}
.tm-ph::after{content:"";position:absolute;inset:0;z-index:1;background:var(--blue-wash);mix-blend-mode:multiply;opacity:.6;pointer-events:none}

/* ---------- values joined by a dot that never starts or ends a line (partials/team/lib.php tm_dots()) ----------
   each value is its own box; the dot sits in the gap before it, and the first value on every line has its dot clipped
   away by the container's edge */
.tm-dots{display:flex;flex-wrap:wrap;column-gap:1.1em;overflow:hidden}
.tm-dots>span{position:relative;min-width:0}
.tm-dots>span::before{content:"";position:absolute;top:.75em;right:100%;width:3px;height:3px;margin-right:calc(.55em - 1.5px);border-radius:50%;background:currentColor;opacity:.75;transform:translateY(-50%)}
.tm-dots>span:first-child::before{display:none}

/* ---------- small type roles --------------------------------------------- */
.tm-k{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:1.3}
.band--ink .tm-k{color:var(--on-ink-3)}
.tm-pill{display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border-radius:var(--r-pill);background:var(--paper-3);color:var(--txt);
  font-size:var(--t-xs);font-weight:500;line-height:1.3}
.band--ink .tm-pill{background:var(--on-ink-card);color:var(--on-ink-2);box-shadow:inset 0 0 0 1px var(--on-ink-line)}

/* ---------- monogram: a person without a portrait (their name is always written beside it) ---------- */
.tm-mono{position:absolute;inset:0;display:grid;place-items:center;background:var(--paper-3);overflow:hidden}
.tm-mono__dots{position:absolute;inset:0;background-size:14px 14px}   /* core .dots supplies the pattern */
.tm-mono__i{position:relative;font-family:var(--f-h);font-weight:500;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.03em;color:var(--muted)}

/* ---------- the person card ----------------------------------------------
   the name is the card's one link; the portrait repeats it for the pointer only (out of the tab order) */
.tm-card{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.tm-card__a{display:block;border-radius:var(--r-lg)}
.tm-card__pic{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-lg);background:var(--paper-4);isolation:isolate}
.tm-card__pic picture,.tm-card__img{display:block;width:100%;height:100%}
.tm-card__img{object-fit:cover;filter:saturate(.9) contrast(1.02);transition:transform .9s var(--e)}
.tm-card:hover a.tm-card__a .tm-card__img,.tm-card:focus-within a.tm-card__a .tm-card__img{transform:scale(1.035)}
.tm-card__b{display:flex;flex-direction:column;gap:4px;min-width:0}
.tm-card__n a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.tm-card__badge{align-self:flex-start;margin-bottom:4px;padding:4px 9px;border-radius:var(--r-pill);background:var(--blue-wash);color:var(--blue-d);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.3}
.tm-card__n{font-family:var(--f-h);font-size:1.125rem;font-weight:500;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.tm-card__n a{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color var(--d1) var(--e-io)}
.tm-card__n a:hover{text-decoration-color:currentColor}
.tm-card__r{font-size:var(--t-sm);line-height:1.45;color:var(--txt)}
.tm-card__m{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);line-height:1.5}
/* the short bio and expertise, written in the card: always read out; on screen where nothing rises over the portrait */
.tm-card__x{display:flex;flex-direction:column;gap:10px;margin-top:6px;min-width:0}
.tm-card__s{font-size:var(--t-sm);line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tm-card__tl{display:flex;flex-wrap:wrap;gap:5px}
.tm-card__tl li{padding:3px 9px;border-radius:var(--r-pill);background:var(--paper-3);color:var(--txt);font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.04em;line-height:1.35}
.band--alt .tm-card__tl li{background:var(--paper)}
.tm-card--l .tm-card__n{font-size:1.375rem}

/* the detail that rises over the portrait on hover, or while the name link has focus (pointer screens) */
.tm-card__more{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--ink);color:var(--on-ink-2);
  transform:translateY(101%);transition:transform .55s var(--e)}
.tm-card__bio{font-size:var(--t-sm);line-height:1.55;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.tm-card__tags{display:flex;flex-wrap:wrap;gap:6px}
.tm-card__tag{padding:4px 9px;border-radius:var(--r-pill);background:var(--on-ink-card);box-shadow:inset 0 0 0 1px var(--on-ink-line);color:var(--on-ink);
  font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.06em;line-height:1.3}
.tm-card__go{display:inline-flex;align-items:center;gap:.5em;font-size:var(--t-sm);font-weight:500;color:var(--on-ink)}
.tm-card__go .i{color:var(--blue)}
@media (hover:hover){
  .tm-card--reveal:hover .tm-card__more,.tm-card--reveal:focus-within .tm-card__more{transform:none}
  .tm-card--reveal .tm-card__x{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media (hover:none){.tm-card__more{display:none}}

/* ---------- a row of faces ------------------------------------------------ */
.tm-faces{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tm-faces__a{position:relative;display:block;width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 2px var(--paper);transition:transform var(--d2) var(--e)}
a.tm-faces__a:hover{transform:translateY(-2px)}
a.tm-faces__a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tm-faces__pic{position:absolute;inset:0;overflow:hidden;border-radius:50%;background:var(--paper-3)}
.tm-faces__pic picture,.tm-faces__img{display:block;width:100%;height:100%;object-fit:cover}
.tm-faces__mono .tm-mono__i{font-size:.95rem}
.tm-faces__mono .tm-mono__dots{display:none}
.tm-faces__more{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:var(--r-pill);background:var(--paper-3);color:var(--ink);
  font-family:var(--f);font-size:var(--t-xs);font-weight:500}
.band--ink .tm-faces__a{box-shadow:0 0 0 2px var(--ink)}

/* ---------- a list of open roles (join, a practice) ----------------------- */
.tm-jobs>li+li{border-top:1px solid var(--line)}
.tm-jobs a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:16px 4px;min-height:44px;color:var(--ink)}
.tm-jobs a:hover .tm-jobs__t{text-decoration:underline;text-underline-offset:3px}
.tm-jobs__t{font-family:var(--f-h);font-size:1.0625rem;font-weight:500;line-height:1.3}
.tm-jobs__m{grid-column:1;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tm-jobs .i{grid-column:2;grid-row:1 / span 2;color:var(--blue)}

@media (prefers-reduced-motion:reduce){
  .tm-card__img,.tm-card__more,.tm-faces__a{transition:none}
  .tm-card:hover a.tm-card__a .tm-card__img,.tm-card:focus-within a.tm-card__a .tm-card__img{transform:none}
}

/* ---------- long button labels on the narrowest phones: wrap instead of running off the edge ---------- */
@media (max-width:420px){
  .tm .btn:not(.s22__go){max-width:100%;height:auto;min-height:46px;padding-block:12px;white-space:normal;text-align:left;line-height:1.3}
  .tm .btn--lg{min-height:54px}
}

/* touch screens (phones and tablets): 44px tap targets (integrator, responsive pass) */
@media (pointer:coarse){
  .tm-card__n a{display:inline-flex;align-items:center;min-height:44px}
}

/* the whole summary shows: the three-line clamp cut it on phones and tablets (integrator, responsive pass) */
.tm-card__s{display:block;overflow:visible;-webkit-line-clamp:unset}