/* About — loaded only on /about. */

/* ============================================================
   ABOUT
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.team-card {
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
}
.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--mint-bg);
  margin: 0 auto 1rem;
  overflow: hidden;
  border: 3px solid var(--teal);
}
.team-card h3 { color: var(--navy); margin-bottom: 0.25rem; }
.team-card .team-role { color: var(--teal); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.team-card p  { color: var(--muted); font-size: 0.88rem; margin-top: 0.75rem; }

.values-list { list-style: none; padding: 0; margin-top: 1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.values-list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.values-icon { color: var(--teal); font-size: 1.2rem; flex-shrink: 0; }
.values-text { color: var(--muted); font-size: 0.88rem; }

/* NOTE: the .team-* rules above style an About-page team section that was
   specified in the brief but never built. Either build it or delete them. */
@media (max-width: 768px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } }