/* ============================================================
   TEAMS — pill-shaped team cards with colored backgrounds
   ============================================================ */

.team-section{
  padding:80px 52px 100px;
  border-bottom:1px solid var(--rule);
}
.team-grid{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:56px;
}
.team-card{
  width:220px;
  height:456px;
  border-radius:110px;
  position:relative;
  overflow:hidden;
  transition:transform 0.4s ease, box-shadow 0.4s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.team-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
}

/* Card background colors */
.team-card:nth-child(1){ background: linear-gradient(180deg, #E8D990 0%, #C4A8D0 100%); }
.team-card:nth-child(2){ background: linear-gradient(180deg, #B8B8B8 0%, #888888 100%); }
.team-card:nth-child(3){ background: linear-gradient(180deg, #D6E4ED 0%, #4A4A4A 100%); }
.team-card:nth-child(4){ background: linear-gradient(180deg, #F5DDD0 0%, #E8C4B8 100%); }
/* Additional colors for more team members */
.team-card:nth-child(5){ background: linear-gradient(180deg, #C8E6C9 0%, #81C784 100%); }
.team-card:nth-child(6){ background: linear-gradient(180deg, #B3E5FC 0%, #4FC3F7 100%); }
.team-card:nth-child(7){ background: linear-gradient(180deg, #F8BBD9 0%, #F48FB1 100%); }
.team-card:nth-child(8){ background: linear-gradient(180deg, #D1C4E9 0%, #9575CD 100%); }

.team-info{
  padding:44px 20px 16px;
  text-align:center;
  z-index:1;
}
.team-name{
  font-family:var(--sans);
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:4px;
  color:#111;
}
.team-title{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#444;
  opacity:0.8;
}
.team-photo{
  width:218px;
  height:326px;
  object-fit:cover;
  object-position:center top;
  border-radius:200px;
  position:absolute;
  bottom:2px;
  transition:transform 0.4s ease;
}
.team-card:hover .team-photo{
  transform:scale(1.02);
}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .team-grid{gap:20px}
  .team-card{width:200px;height:380px;border-radius:100px}
  .team-photo{width:160px;height:240px;border-radius:80px}
}
@media(max-width:768px){
  .team-section{padding:48px 24px 60px}
  .team-grid{gap:16px;margin-top:32px}
  .team-card{width:170px;height:320px;border-radius:85px}
  .team-info{padding:20px 12px 12px}
  .team-name{font-size:16px}
  .team-title{font-size:9px}
  .team-photo{width:140px;height:200px;border-radius:70px}
}
@media(max-width:480px){
  .team-section{padding:32px 20px 48px}
  .team-grid{gap:12px}
  .team-card{width:150px;height:280px;border-radius:75px}
  .team-info{padding:16px 10px 10px}
  .team-name{font-size:14px}
  .team-title{font-size:8px}
  .team-photo{width:120px;height:170px;border-radius:60px}
}