/* ==========================================================================
   MSA People
   ========================================================================== */

.msa-team,
.msa-people-grid,
.msa-person-details {
	--msa-crimson: #C42031;
	--msa-black: #000000;
	--msa-white: #FFFFFF;
	--msa-ink: #1A1A1A;
	--msa-body-text: #4A4A4A;
	/* #8A8A85 failed WCAG AA as type on every surface; see msa-site.css. */
	--msa-muted: #616161;

	--msa-teal: #00B1BA;
	--msa-blue: #264398;
	--msa-yellow: #FFD508;
	--msa-purple: #A73C96;

	/* Text-safe variants: the brand colours fail WCAG AA as type on white. */
	--msa-crimson-text: #A81A29;
	--msa-teal-text: #00767C;
	--msa-blue-text: #264398;
	--msa-yellow-text: #6B5800;
	--msa-purple-text: #8A2F7C;

	--msa-hairline: rgba(0, 0, 0, 0.09);

	--msa-display: "Bebas Neue", Impact, sans-serif;
	--msa-body: "Roboto", Arial, sans-serif;

	--msa-radius: 10px;

	font-family: var(--msa-body);
	color: var(--msa-body-text);
}

.msa-team *,
.msa-team *::before,
.msa-team *::after,
.msa-people-grid *,
.msa-person-details * {
	box-sizing: border-box;
}

.elementor-widget-msa_people_team,
.elementor-widget-msa_people_grid {
	flex: 1 1 100%;
	width: 100%;
}

.msa-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.msa-accent--crimson { --msa-accent: var(--msa-crimson); --msa-accent-text: var(--msa-crimson-text); --msa-accent-soft: #F7DDE0; }
.msa-accent--teal    { --msa-accent: var(--msa-teal);    --msa-accent-text: var(--msa-teal-text);    --msa-accent-soft: #D2F0F2; }
.msa-accent--blue    { --msa-accent: var(--msa-blue);    --msa-accent-text: var(--msa-blue-text);    --msa-accent-soft: #DCE2F3; }
.msa-accent--yellow  { --msa-accent: var(--msa-yellow);  --msa-accent-text: var(--msa-yellow-text);  --msa-accent-soft: #FBF0C4; }
.msa-accent--purple  { --msa-accent: var(--msa-purple);  --msa-accent-text: var(--msa-purple-text);  --msa-accent-soft: #F0DBEC; }

/* --------------------------------------------------------- Section parts */

.msa-eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--msa-accent-text, var(--msa-blue-text));
}

.msa-section-heading {
	margin: 0;
	font-family: var(--msa-display);
	font-size: 48px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

.msa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 28px;
	border-radius: 999px;
	font-family: var(--msa-display);
	font-size: 18px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.msa-btn--crimson {
	background: var(--msa-crimson);
	color: var(--msa-white);
}

.msa-btn--crimson:hover {
	background: #A81A29;
	color: var(--msa-white);
}

.msa-people-empty {
	margin: 0;
	font-size: 15px;
	color: var(--msa-muted);
}

/* -------------------------------------------------------- Team section */

.msa-team__intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
	margin-bottom: 40px;
}

.msa-team__lead {
	margin: 18px 0 0;
	max-width: 460px;
	font-size: 15px;
	line-height: 1.68;
	color: var(--msa-body-text);
}

.msa-team__points {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.msa-team__points li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	border-radius: 999px;
	background: #F4F5F8;
	font-size: 15px;
	line-height: 1.45;
	color: var(--msa-ink);
}

.msa-team__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--msa-blue);
}

.msa-team__check svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--msa-white);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.msa-team__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px 28px;
	margin-top: 34px;
}

.msa-team__note {
	flex: 1 1 260px;
	margin: 0;
	max-width: 420px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--msa-muted);
}

/* -------------------------------------------------------- Person card */

.msa-people-grid {
	display: grid;
	gap: 24px;
}

.msa-people-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msa-people-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.msa-people-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The whole card is a tinted panel in the person's accent, not just the
   portrait block. Lifts on hover. */
.msa-person {
	display: flex;
	flex-direction: column;
	padding: 14px 14px 20px;
	border-radius: 14px;
	background: var(--msa-accent-soft, #E6E9F2);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.msa-person:hover,
.msa-person:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}

.msa-person__portrait {
	position: relative;
	overflow: hidden;
	border-radius: var(--msa-radius);
	background: transparent;
	aspect-ratio: 1 / 1;
}

.msa-person__portrait a {
	display: block;
	width: 100%;
	height: 100%;
}

.msa-person__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msa-person__placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.msa-person__placeholder svg {
	display: block;
	width: 100%;
	height: 100%;
}

.msa-person__placeholder-head,
.msa-person__placeholder-body {
	fill: var(--msa-accent, var(--msa-blue));
	opacity: 0.62;
	transition: opacity 0.22s ease;
}

.msa-person:hover .msa-person__placeholder-head,
.msa-person:hover .msa-person__placeholder-body {
	opacity: 0.78;
}

.msa-person__body {
	padding: 16px 4px 0;
}

.msa-person__name {
	margin: 0 0 3px;
	font-family: var(--msa-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--msa-ink);
}

.msa-person__name a {
	color: inherit;
	text-decoration: none;
}

.msa-person__name a:hover {
	color: var(--msa-crimson-text);
}

.msa-person__pronouns {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--msa-muted);
}

.msa-person__role {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--msa-accent-text, var(--msa-blue-text));
}

.msa-person__excerpt {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--msa-body-text);
}

.msa-person__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding-bottom: 2px;
	border-bottom: 2px solid var(--msa-accent, var(--msa-crimson));
	font-size: 13px;
	font-weight: 700;
	color: var(--msa-ink);
	text-decoration: none;
	transition: color 0.18s ease, gap 0.18s ease;
}

.msa-person__link:hover {
	color: var(--msa-crimson-text);
	gap: 11px;
}

/* ------------------------------------------------------ Details block */

.msa-person-details__role {
	margin: 0 0 4px;
	font-family: var(--msa-display);
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

.msa-person-details__pronouns,
.msa-person-details__term {
	margin: 0 0 6px;
	font-size: 14px;
	color: var(--msa-muted);
}

.msa-person-details__contact,
.msa-person-details__social {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.msa-person-details__contact a,
.msa-person-details__social a {
	font-size: 14px;
	font-weight: 500;
	color: var(--msa-accent-text, var(--msa-crimson-text));
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.msa-person-details__contact a:hover,
.msa-person-details__social a:hover {
	color: var(--msa-ink);
}

/* ------------------------------------------------------------- Focus */

.msa-team a:focus-visible,
.msa-people-grid a:focus-visible,
.msa-person-details a:focus-visible {
	outline: 2px solid var(--msa-crimson);
	outline-offset: 3px;
}

/* -------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
	.msa-section-heading {
		font-size: 40px;
	}

	.msa-people-grid--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.msa-team__intro {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.msa-people-grid--3,
	.msa-people-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.msa-section-heading {
		font-size: 34px;
	}

	.msa-people-grid--2,
	.msa-people-grid--3,
	.msa-people-grid--4 {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.msa-person {
		flex-direction: row;
		gap: 16px;
		align-items: center;
		padding: 14px;
	}

	.msa-person__portrait {
		flex: 0 0 104px;
	}

	.msa-person__body {
		padding-top: 0;
	}

	.msa-team__points li {
		border-radius: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msa-person,
	.msa-person__link,
	.msa-person__placeholder-head,
	.msa-person__placeholder-body,
	.msa-btn {
		transition: none;
	}

	.msa-person:hover,
	.msa-person:focus-within {
		transform: none;
	}
}