/* ==========================================================================
   Teams (/teams/). Leadership in four wider columns, then the team in five
   columns on the 1296 grid (20 people = 4 full rows), 3:4 portraits.
   ========================================================================== */

.team-hero { padding: max(calc(160 * var(--u)), calc(var(--header-h) + 56px)) 0 max(calc(100 * var(--u)), 56px); }
.team-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 964fr) minmax(0, 300fr);
	column-gap: 32px;
	align-items: end;
}
.team-hero .label { margin-bottom: calc(41 * var(--u) + 10px); }
.team-hero__intro { color: rgba(255, 255, 255, 0.86); padding-bottom: 6px; }
.team-hero__count { margin-top: 24px; color: var(--sky); }

.team-list { padding: calc(110 * var(--u)) 0 calc(150 * var(--u)); }
.team-list--leaders { padding-bottom: calc(40 * var(--u)); }
.team-list--people { padding-top: calc(80 * var(--u)); }
.team-list__head { display: flex; align-items: center; column-gap: 32px; margin-bottom: calc(48 * var(--u) + 8px); }
.team-list__title { flex: none; color: var(--navy); }
.team-list__rule { flex: 1; opacity: 0.5; }
.team-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: 32px;
	row-gap: calc(56 * var(--u) + 8px);
}
.team-grid--leaders { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-card { min-width: 0; color: var(--navy); }
.team-card--leader .team-card__name { margin-top: 22px; font-family: var(--serif); font-size: 22px; line-height: 28px; }
.team-card--leader .team-card__role { margin-top: 8px; max-width: 34ch; font-size: 13px; line-height: 20px; }
.team-card__role--soon { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 400; letter-spacing: 0.02em; }
.team-card__dot { width: 7px; height: 7px; border-radius: 50%; background: #5b8fe0; box-shadow: 0 0 0 0 rgba(91, 143, 224, 0.5); animation: team-pulse 2.4s ease-out infinite; }
@keyframes team-pulse { 0% { box-shadow: 0 0 0 0 rgba(91, 143, 224, 0.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(91, 143, 224, 0); } }
@media (prefers-reduced-motion: reduce) { .team-card__dot { animation: none; } }
.team-card__media { aspect-ratio: 3 / 4; background: #e8eef8; }
.team-card__media img { position: absolute; inset: 0; object-position: 50% 20%; }
.team-card__name { margin-top: 18px; color: var(--navy); font-weight: 400; overflow-wrap: break-word; }
.team-card__role { margin-top: 4px; color: rgba(24, 48, 102, 0.78); overflow-wrap: break-word; }

/* Monogram tile for people without a portrait. */
.team-card__media--mono { background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%); }
.team-mono {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--sky);
	transition: transform 1.4s var(--ease-out);
}
.team-mono::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(191, 217, 255, 0.22);
	border-radius: 4px;
}
.team-mono__initials {
	font-family: var(--serif);
	font-size: clamp(44px, calc(80 * var(--u)), 80px);
	line-height: 1;
	letter-spacing: 0.04em;
}
.team-mono__mark { position: absolute; left: 30px; bottom: 28px; width: 54px; color: rgba(191, 217, 255, 0.4); }
.team-mono__mark svg { width: 54px; height: auto; }
@media (hover: hover) { .team-card__media--mono:hover .team-mono { transform: scale(1.04); } }

@media (max-width: 1099px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .team-grid--leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
	.team-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.team-hero__aside { max-width: 540px; margin-top: 32px; }
	.team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
}
@media (max-width: 599px) {
	.team-list { padding: 48px 0 80px; }
	.team-list--leaders { padding-bottom: 16px; }
	.team-list--people { padding-top: 40px; }
	.team-list__head { column-gap: 20px; margin-bottom: 24px; }
	.team-card--leader .team-card__name { margin-top: 14px; font-size: 18px; line-height: 23px; }
	.team-card--leader .team-card__role { font-size: 12px; line-height: 18px; }
	.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 32px; }
	.team-card__name { margin-top: 12px; }
	.team-mono::before { inset: 8px; }
	.team-mono__mark { left: 16px; bottom: 14px; width: 36px; }
	.team-mono__mark svg { width: 36px; }
}