/* ==========================================================================
   AGENZY — Team overview (/team/) · extends site.css (no new tokens)
   Layout: "The Line-up" — 4 tall 3:4 portraits in a staggered row,
   each moving at its own scroll speed; hovering one dims the others (spotlight).
   ========================================================================== */

/* ---------- Hero ---------- */
.t-hero{position:relative;overflow:hidden;padding-block:clamp(var(--s6),7vw,var(--s12)) calc(var(--s6) + 118px)}   /* v11: no +26vw reserve */
.t-hero .crop-sym{transform:rotate(calc(-14deg + var(--sr,0) * 1deg));will-change:transform}   /* size/position: shared peek rule (site.css) */
.t-hero__grid{position:relative;z-index:1;display:grid;gap:var(--s3)}
.t-hero .eyebrow{justify-self:start}
.t-hero__title{font-size:var(--t-hero);color:var(--midnight)}
.t-hero__sig{direction:ltr;text-align:right;font-weight:500;font-size:clamp(1.1562rem,1.77vw,1.5625rem);letter-spacing:-.03em;color:var(--blue)}
.t-hero__q{max-width:46ch;padding-inline-start:var(--s3);border-inline-start:3px solid var(--blue)}
.t-hero__qk{font-weight:600;color:var(--blue);margin-bottom:var(--s1)}
.t-hero__q blockquote p{font-size:0.9062rem;line-height:1.8;color:var(--midnight)}
.t-hero__lead{max-width:36ch;color:var(--deep)}

.t-roll{justify-self:start;display:inline-flex;align-items:center;gap:var(--s2);padding:8px;border-radius:999px;background:var(--mist);color:var(--midnight);font-weight:500;transition:background var(--d-fast),color var(--d-fast)}
.t-roll__faces{display:flex}
.t-roll__f{width:48px;height:48px;border-radius:50%;overflow:hidden;border:3px solid var(--mist);transition:transform var(--d-mid) var(--e-spark),border-color var(--d-fast)}
.t-roll__f + .t-roll__f{margin-inline-start:-14px}
.t-roll__f img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.t-roll__a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:var(--white)}
.t-roll__a svg{width:18px;height:18px}
@media (hover:hover){.t-roll:hover{background:var(--blue);color:var(--white)}
.t-roll:hover .t-roll__f{border-color:var(--blue);transform:translateY(-4px)}
.t-roll:hover .t-roll__f:nth-child(2){transition-delay:.04s}.t-roll:hover .t-roll__f:nth-child(3){transition-delay:.08s}.t-roll:hover .t-roll__f:nth-child(4){transition-delay:.12s}
.t-roll:hover .t-roll__a{background:var(--white);color:var(--blue)}}

/* ---------- The Line-up (team grid) ---------- */
.tgrid{display:grid;grid-template-columns:1fr;gap:clamp(var(--s6),8vw,var(--s10));list-style:none;padding:0;margin:0}
.tcard{width:86%;min-width:0;transition:opacity var(--d-mid) var(--e-out);translate:0 var(--py,0px)}
.tcard--1,.tcard--3{justify-self:end}
.tcard__link{display:block;border-radius:var(--radius);outline-offset:6px}
.tcard__media{aspect-ratio:3/4;border-radius:var(--radius);isolation:isolate;transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .6s var(--e-out)}
.tcard__media picture{position:absolute;inset:0}
.tcard__media img{object-position:50% 20%}
.tcard__main img{transition:transform 1s var(--e-out)}
.tcard__n{position:absolute;z-index:2;top:var(--s2);right:var(--s2);background:var(--white);color:var(--midnight);font-family:var(--f-lat);font-weight:500;font-size:0.7188rem;padding:6px 12px;border-radius:999px}
.tcard__go{position:absolute;z-index:2;bottom:var(--s2);left:var(--s2);width:56px;height:56px;border-radius:50%;background:var(--white);color:var(--blue);display:grid;place-items:center;transform:scale(.82);transition:transform .45s var(--e-spark),background var(--d-fast),color var(--d-fast)}
.tcard__go svg{width:22px;height:22px}
.tcard__meta{padding-top:var(--s2)}
.tcard__name{font-size:clamp(1.2031rem,1.52vw,1.4062rem);font-weight:600;line-height:1.35;color:var(--midnight)}
.tcard__wipe{position:relative;display:inline-block;padding-bottom:4px;transition:color var(--d-mid),transform var(--d-mid) var(--e-shift)}
.tcard__wipe::after{content:"";position:absolute;right:0;left:0;bottom:0;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--e-shift)}
.tcard__role{margin-top:2px;font-size:var(--t-small);color:var(--deep);line-height:1.8;text-align:right;letter-spacing:.02em}
.tcard__link:focus-visible .tcard__go{transform:scale(1);background:var(--blue);color:var(--white)}
.tcard__link:focus-visible .tcard__wipe::after{transform:scaleX(1)}
@media (hover:hover){
  .tcard__link:hover .tcard__main img{transform:scale(1.06)}
  .tcard__link:hover .tcard__go{transform:scale(1) rotate(-8deg);background:var(--blue);color:var(--white)}
  .tcard__link:hover .tcard__wipe{color:var(--blue);transform:translateX(-8px)}
  .tcard__link:hover .tcard__wipe::after{transform:scaleX(1)}
  /* spotlight: others step back */
  .tgrid:has(.tcard__link:hover) .tcard:not(:has(.tcard__link:hover)){opacity:.35}
}
.tgrid:has(.tcard__link:focus-visible) .tcard:not(:has(.tcard__link:focus-visible)){opacity:.35}

/* ---------- Values ---------- */
.t-vals{list-style:none;padding:0;margin:0}
.t-val{grid-template-columns:auto 1fr;row-gap:6px;align-items:baseline}
.t-val .ix{grid-row:1/span 2}
.t-val__t strong{display:block;font-size:clamp(1.1562rem,1.8vw,1.5rem);font-weight:600;line-height:1.3}
.t-val__t .lat{display:block;direction:ltr;text-align:right;font-size:var(--t-small);font-weight:500;color:var(--blue);margin-top:2px}
.t-val__d{grid-column:2;color:var(--midnight);font-size:0.9062rem;line-height:1.8;max-width:44ch}

/* ---------- Join ---------- */

/* ---------- Breakpoints ---------- */
@media (min-width:640px){
  .tgrid{grid-template-columns:repeat(2,1fr);column-gap:var(--col-gap)}
  .tcard{width:auto;justify-self:stretch}
  .tcard--1,.tcard--3{margin-top:var(--s12)}
}
@media (min-width:1024px){
  .t-hero{padding-bottom:clamp(var(--s8),6vw,var(--s10))}
  .t-hero .crop-sym{top:clamp(24px,3vw,48px);bottom:auto}
  .t-hero__grid{grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);align-items:end}
  .t-hero .eyebrow,.t-hero__title{grid-column:1/-1}
  .t-hero__sig{grid-column:1/7;grid-row:3}
  .t-hero__lead{grid-column:1/6;grid-row:4}
  .t-roll{grid-column:1/7;grid-row:5}
  .t-hero__q{grid-column:8/-1;grid-row:3/span 3;align-self:end}
  .tgrid{grid-template-columns:repeat(4,1fr);align-items:start}
  .tcard--1{margin-top:var(--s12)}
  .tcard--2{margin-top:var(--s5)}
  .tcard--3{margin-top:var(--s16)}
  .t-val{grid-template-columns:auto minmax(0,1fr) minmax(0,1.2fr);align-items:center}
  .t-val .ix{grid-row:auto}
  .t-val__d{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .tcard{translate:none}
  .tcard__media{transform:none}
  .t-hero .crop-sym{transform:rotate(-14deg)}
}
@media (forced-colors:active){.tcard__wipe::after{background:Highlight}}

/* v3 · touch: the desktop hover motion plays when the card crosses the viewport centre (site.js "live") */
@media (hover:none){
  .tcard.is-live .tcard__main img{transform:scale(1.06)}
  .tcard.is-live .tcard__go{transform:scale(1) rotate(-8deg);background:var(--blue);color:var(--white)}
  .tcard.is-live .tcard__wipe{color:var(--blue);transform:translateX(-8px)}
  .tcard.is-live .tcard__wipe::after{transform:scaleX(1)}
  .t-roll.is-live .t-roll__f{border-color:var(--mist);transform:translateY(-4px)}
  .t-roll.is-live .t-roll__f:nth-child(2){transition-delay:.04s}.t-roll.is-live .t-roll__f:nth-child(3){transition-delay:.08s}.t-roll.is-live .t-roll__f:nth-child(4){transition-delay:.12s}
}