/* Team: static four-card grid replacing the auto-scrolling marquee.
   Card typography, radius, photo and info panel styles stay the originals. */
.clutch-members { display: grid; grid-template-columns: repeat(4, 280px); gap: 20px; align-self: center; }
.clutch-members > .card {
  width: 280px;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 1px 2px rgba(22, 23, 29, .06), 0 14px 32px -18px rgba(22, 23, 29, .28);
  will-change: transform;
}
.clutch-members > .card .photo { transition: transform .7s cubic-bezier(.22, 1, .36, 1); transform-origin: 50% 35%; }
.clutch-members > .card .info { transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1); }
.clutch-members > .card:hover,
.clutch-members > .card:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 2px 4px rgba(22, 23, 29, .06), 0 28px 48px -20px rgba(22, 23, 29, .35);
}
.clutch-members > .card:hover .photo,
.clutch-members > .card:focus-visible .photo { transform: scale(1.05); }
.clutch-members > .card:hover .info,
.clutch-members > .card:focus-visible .info { transform: translateY(-4px); box-shadow: 0 10px 24px -14px rgba(22, 23, 29, .3); }
/* Entrance: cards rise in one after another when the section scrolls into view. */
.clutch-members[data-reveal="pending"] > .card { opacity: 0; transform: translateY(28px); }
/* "done" plays the entrance once; the script then clears the attribute so hover transforms apply again. */
.clutch-members[data-reveal="done"] > .card { animation: clutch-card-in .9s cubic-bezier(.22, 1, .36, 1) forwards; }
.clutch-members[data-reveal="done"] > .card:nth-child(2) { animation-delay: .12s; }
.clutch-members[data-reveal="done"] > .card:nth-child(3) { animation-delay: .24s; }
.clutch-members[data-reveal="done"] > .card:nth-child(4) { animation-delay: .36s; }
@keyframes clutch-card-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@media (width <= 768px) {
  .clutch-members { display: flex; align-self: stretch; gap: 12px; margin-right: calc(-1 * var(--section-padding-x)); padding-right: var(--section-padding-x); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .clutch-members::-webkit-scrollbar { display: none; }
  .clutch-members > .card { flex: none; width: 221px; }
}
@media (prefers-reduced-motion: reduce) {
  .clutch-members > .card, .clutch-members > .card .photo, .clutch-members > .card .info { transition: none; }
  .clutch-members[data-reveal="pending"] > .card { opacity: 1; transform: none; animation: none; }
}
/* Long titles stay on one line inside the 280px card (slightly tighter type, same colour/weight). */
.clutch-members > .card .role { white-space: nowrap; }
.clutch-members > .card .role.role-long { font-size: 11px; letter-spacing: 0; }