/* ── TEAM PAGE ── */
.team-film { display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;background:var(--bg-alt); }
@media(max-width:640px){
 .team-film{grid-template-columns:repeat(3,1fr);}
}
/* ─── TEAM PAGE ───────────────────────────────────────────────────────────── */

.team-film-strip { display: flex; gap: var(--sp-sm); overflow-x: auto; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
.team-film-strip::-webkit-scrollbar { height: 4px; }
.team-film-strip::-webkit-scrollbar-thumb { background: var(--border); }
.team-film-strip__card {
  flex: 0 0 240px;
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 4px;
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-spring), border-color 0.4s;
}

.team-film-strip__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(59, 47, 47, 0.08);
  border-color: rgba(59, 47, 47, 0.15);
}

.team-film-strip__card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}

.team-film-strip__card:hover img {
  transform: scale(1.06);
}

/* Pastel pops alternating top borders */
.team-film-strip__card:nth-child(5n+1) { border-top: 4px solid var(--pastel-peach); }
.team-film-strip__card:nth-child(5n+2) { border-top: 4px solid var(--pastel-mint); }
.team-film-strip__card:nth-child(5n+3) { border-top: 4px solid var(--pastel-yellow); }
.team-film-strip__card:nth-child(5n+4) { border-top: 4px solid var(--pastel-blue); }
.team-film-strip__card:nth-child(5n+5) { border-top: 4px solid var(--pastel-pink); }

.team-film-strip__body { padding: 1rem; }
.team-film-strip__name { font-family: var(--serif); font-size: 1.05rem; color: var(--brown); }
.team-film-strip__role { font-family: var(--sans); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; }
.team-film-strip__location { font-size: .72rem; color: var(--olive); margin-top: .35rem; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-md); }