/*
 * FLO — Team: the Education & Care roles and the closing statement.
 * Values from design/source/team.dc.html.
 */

/* ---- Education & Care Team ---- */

.p-roles {
	padding: clamp(76px, 9vw, 108px) var(--gutter) clamp(76px, 9vw, 104px);
}

.p-roles .c-sec-head__title {
	font-size: clamp(26px, 3.4vw, 42px);
	letter-spacing: -.026em;
}

.p-roles .c-sec-head__lead {
	max-width: 58ch;
}

.p-roles__list {
	margin-top: clamp(32px, 4vw, 48px);
	border-top: 2px solid var(--navy);
}

.p-roles__row {
	display: grid;
	grid-template-columns: clamp(140px, 16vw, 220px) minmax(0, 1fr);
	gap: clamp(16px, 3vw, 40px);
	align-items: baseline;
	padding: clamp(20px, 2.4vw, 26px) 0;
	border-bottom: 1px solid #DFD7C6;
}

.p-roles__row:last-child {
	border-bottom: 0;
}

.p-roles__title {
	margin: 0;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 700;
	font-size: clamp(18px, 1.9vw, 22px);
	line-height: 1.14;
	letter-spacing: -.018em;
	color: var(--navy);
}

.p-roles__text {
	max-width: 56ch;
	margin: 0;
	font-size: 16px;
	line-height: 1.66;
	color: var(--text);
}

/* ---- Closing statement ---- */

.p-statement {
	overflow: hidden;
	padding: clamp(88px, 10vw, 124px) var(--gutter) clamp(92px, 10vw, 128px);
}

.p-statement .c-glow--top {
	top: -240px;
	width: 780px;
	height: 780px;
	background: radial-gradient(circle, rgba(245, 163, 4, .1), transparent 64%);
}

.p-statement__inner {
	position: relative;
	display: flex;
	gap: 24px;
}

.p-statement__text {
	max-width: 30ch;
	margin: 0;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: clamp(30px, 4.4vw, 56px);
	line-height: 1.08;
	letter-spacing: -.03em;
	color: var(--paper);
}

@media (max-width: 768px) {
	.p-roles__row {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}