/* ===== Team section (between "Who we are" and the 3D card) ===== */
.team {
  position: relative; z-index: 61; /* sits over the top of the 3D section that's tucked under it */
  background: var(--charcoal);
  color: var(--plaster);
  padding: 140px var(--margin) 40px; /* small gap down to the 3D section */
}
.team-inner { max-width: 1600px; margin: 0 auto; }

.team-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 64px;
}
.team-title {
  margin: 0;
  font: 600 40px/1 var(--display); letter-spacing: 0; text-transform: uppercase;
}
.team-lead {
  margin: 0; max-width: 30ch;
  font: 300 16px/1.1 var(--sans); letter-spacing: .02em;
  color: rgba(239,235,225,.6);
}

.team-grid {
  display: grid; grid-template-columns: 1fr; gap: 48px;
  list-style: none; margin: 0; padding: 0;
}
.team-photo {
  position: relative; aspect-ratio: 1 / 1.1; overflow: hidden;
  background: #22211c; /* shows while a photo is missing/loading */
  clip-path: inset(100% 0 0 0); /* masked: team.js wipes it open from the bottom */
}
.team-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 60%;
}
/* hover zoom only after GSAP's reveal is done (one animation system per property) */
.team-grid.is-revealed .team-photo img { transition: transform 1.2s cubic-bezier(.17,.84,.44,1); }
.team-grid.is-revealed .team-card:hover .team-photo img { transform: scale(1.04); }

.team-meta { display: flex; gap: 16px; align-items: baseline; padding-top: 20px; border-top: 1px solid rgba(239,235,225,.14); margin-top: 20px; }
.team-name { margin: 0 0 8px; font: 600 28px/1 var(--display); letter-spacing: 0; } /* sentence case: "Serhii" */
.team-role { margin: 0; font: 300 16px/1.1 var(--sans); letter-spacing: .02em; color: rgba(239,235,225,.6); }

@media (min-width: 800px) {
  .team { padding: 180px var(--margin) 50px; }
  .team-title { font-size: 76px; }
  .team-lead { font-size: 20px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
  .team-head { margin-bottom: 88px; }
}
@media (min-width: 1200px) {
  .team-name { font-size: 34px; }
  .team-role { font-size: 18px; }
}