/* ---------------------------------------------------------------------------
   Team page. Borrows the case-study stylesheet for the hero, section rhythm,
   results band, CTA and footer; everything here is prefixed tm- and only
   covers what that sheet doesn't.
--------------------------------------------------------------------------- */

.tm-hero{padding-bottom:84px}
.tm-hero h1{max-width:13ch}

/* ---- how we work ---------------------------------------------------------- */
.tm-principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;
  margin-top:56px}
.tm-principles article{border-top:1px solid #19301c40;padding-top:22px}
.tm-principles h3{font-size:21px;font-weight:500;letter-spacing:-.7px;margin:26px 0 12px}
.tm-principles p{font-size:16px;line-height:1.6;color:#5d695b;margin:0}

.tm-numbers .cs-h2{margin-bottom:56px}

/* ---- people --------------------------------------------------------------
   The portraits sit on the same sage (#d5ddcd-ish) they were generated on, so
   the frame and the picture read as one surface. Motion is three layers:
   a staggered rise on arrival, a slow idle drift, and a pointer tilt. */
.tm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;
  margin-top:56px}
.tm-card{opacity:0;transform:translateY(38px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.tm-card.in{opacity:1;transform:none}
.tm-card:nth-child(2){transition-delay:.12s}
.tm-card:nth-child(3){transition-delay:.24s}

.tm-portrait{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;
  background:#aebfa8;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
  box-shadow:0 26px 60px -30px #000000b0}
.tm-portrait img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:center top;transform:scale(1.04);
  animation:tm-drift 9s ease-in-out infinite alternate}
.tm-card:nth-child(2) .tm-portrait img{animation-delay:-3s}
@keyframes tm-drift{
  0%{transform:scale(1.04) translate3d(0,0,0)}
  100%{transform:scale(1.08) translate3d(0,-1.2%,0)}}

/* Orange light that follows the pointer, echoing the rim light in the art. */
.tm-portrait::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),#ef8b4840,transparent 55%);
  transition:opacity .4s ease}
.tm-portrait:hover::after{opacity:1}
.tm-portrait:hover{box-shadow:0 34px 70px -28px #000000c8}

.tm-portrait--empty{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#17241c 0 14px,#142019 14px 28px);
  border:1px dashed #ffffff26;box-shadow:none}
.tm-portrait--empty span{font-size:12px;letter-spacing:1.6px;color:#8d9a86;
  text-transform:uppercase}

.tm-info{border-top:1px solid #ffffff26;margin-top:24px;padding-top:20px}
.tm-info h3{font-size:25px;font-weight:500;letter-spacing:-.8px;margin:0}
.tm-role{font-size:13px;letter-spacing:.4px;color:var(--orange);margin:9px 0 16px}
.tm-bio{font-size:16px;line-height:1.6;color:var(--muted);margin:0;max-width:40ch}


@media(max-width:1000px){
  .tm-principles{grid-template-columns:1fr 1fr;gap:10px 30px}
}
@media(max-width:860px){
  .tm-hero{padding-bottom:56px}
  .tm-grid{grid-template-columns:1fr 1fr;gap:40px 24px;margin-top:38px}
}
@media(max-width:560px){
  .tm-principles{grid-template-columns:1fr;gap:0;margin-top:38px}
  .tm-principles article{padding-bottom:26px}
  .tm-grid{grid-template-columns:1fr;gap:48px}
  .tm-portrait{max-width:420px}
}
@media(prefers-reduced-motion:reduce){
  .tm-card{opacity:1;transform:none;transition:none}
  .tm-portrait{transform:none!important;transition:none}
}
.tm-numbers .cs-h2 span{color:#5a3a1f}
.tm-hero h1{max-width:14ch}
.tm-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;
  color:var(--paper);padding-bottom:5px;border-bottom:1px solid #ffffff35;transition:border-color .2s,color .2s}
.tm-link:hover{border-color:var(--orange);color:var(--orange)}
.tm-link .arr{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.tm-card:nth-child(3) .tm-portrait img{animation-delay:-6s}