.engagements {
	font-family: var(--bva-font-sans);
	color: var(--bva-black);
}

.engagements *,
.engagements *::before,
.engagements *::after { box-sizing: border-box; }

/* ── Shared ──────────────────────────────────────────────── */
.engagements > section + section {
	margin-top: 120px;
}
.engagements-label {
	margin: 0;
	font: var(--bva-t-label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bva-black);
}

/* ── Hero ────────────────────────────────────────────────── */
/* Header is position:fixed (80px); maquette places the eyebrow at y~207. */
.engagements-hero {
	padding-top: 207px;
	text-align: center;
}
.engagements-hero__title {
	max-width: 1080px;
	margin: 0 auto;
	font: var(--bva-t-header-xl);
}
.engagements-hero__label + .engagements-hero__title {
	margin-top: 32px;
}

/* ── Intro (eyebrow + heading + copy | image) ────────────── */
.engagements-intro__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 827px;
	border: 1px solid rgba(0, 0, 0, 0.12);
}
.engagements-intro__text {
	align-self: stretch;
	flex: 0 0 618px;
	padding: 46px 0 46px 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.engagements-intro__body {
	max-width: 448px;
	display: flex;
	flex-direction: column;
	gap: 37px;
}
.engagements-intro__title {
	margin: 0;
	font: var(--bva-t-header-l);
}
.engagements-intro__copy p {
	margin: 0 0 12px;
	font: var(--bva-t-paragraphe);
}
.engagements-intro__copy p:last-child { margin-bottom: 0; }
.engagements-intro__media {
	flex: 0 0 714px;
	align-self: stretch;
	background-color: var(--bva-img-bg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* ── Commitments (numbered accordion) ────────────────────── */
.engagement {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	padding-top: 16px;
}
.engagement + .engagement {
	margin-top: 64px;
}
.engagement__head {
	display: flex;
	align-items: center;
	padding: 8px 0;
	cursor: pointer;
	list-style: none;
}
.engagement__head::-webkit-details-marker { display: none; }
.engagement__num {
	flex: 0 0 344px;
	font: var(--bva-t-header-l);
}
.engagement__title {
	flex: 1 1 auto;
	font: var(--bva-t-header-l);
}
.engagement__toggle {
	position: relative;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-left: 24px;
}
.engagement__toggle::before,
.engagement__toggle::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--bva-black);
	transform: translate(-50%, -50%);
}
.engagement__toggle::before { width: 16px; height: 1.5px; }
.engagement__toggle::after  { width: 1.5px; height: 16px; transition: opacity 0.2s ease; }
.engagement[open] .engagement__toggle::after { opacity: 0; }

/* Panel — indented to align under the title; image + copy column. */
.engagement__panel {
	display: none;
	margin-top: 32px;
	margin-left: 344px;
}
.engagement[open] .engagement__panel {
	display: flex;
	align-items: flex-start;
	gap: 102px;
}
.engagement__media {
	flex: 0 0 328px;
	height: 387px;
	background-color: var(--bva-img-bg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.engagement__body {
	flex: 0 0 500px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.engagement__subtitle {
	margin: 0;
	font: var(--bva-t-header-s);
}
.engagement__text p {
	margin: 0 0 12px;
	font: var(--bva-t-paragraphe);
	color: rgba(21, 20, 18, 0.6);
}
.engagement__text p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════ *\
	MOBILE / TABLET — single-column stack
	Structure at 835px (matches .header-mobile + .shell breakpoint),
	mobile type scale at 560px (Figma Mobile/* variables).
\* ════════════════════════════════════════════════════════════ */
@media (max-width: 835px) {

	.engagements > section + section {
		margin-top: 80px;
	}

	/* ── Hero ── */
	.engagements-hero {
		padding-top: 46px; /* clear fixed .header-mobile */
		text-align: left;
	}
	.engagements-hero__title {
		max-width: none;
	}

	/* ── Intro — text, then image below (no border box) ── */
	.engagements-intro {
		padding: 0 12px;
	}
	.engagements-intro__inner {
		flex-direction: column;
		gap: 24px;
		min-height: 0;
		border: 0;
	}
	.engagements-intro__text {
		flex: 0 0 auto;
		padding: 0;
		gap: 24px;
	}
	.engagements-intro__body {
		max-width: none;
		gap: 24px;
	}
	.engagements-intro__media {
		flex: 0 0 auto;
		width: 100%;
		height: 400px;
		border-radius: 12px;
	}

	/* ── Commitments — number + title row, panel stacks below ── */
	.engagement + .engagement {
		margin-top: 32px;
	}
	.engagement__num {
		flex: 0 0 40px;
	}
	.engagement__panel {
		margin-left: 0;
		flex-direction: column;
		gap: 24px;
	}
	.engagement__media {
		flex: 0 0 auto;
		width: 100%;
		height: 320px;
	}
	.engagement__body {
		flex: 0 0 auto;
	}
}

/* ── Phone type scale (Figma Mobile/* variables), scoped to .engagements ── */
@media (max-width: 560px) {
	.engagements {
		--bva-t-header-xl: 500 36px/1.1 var(--bva-font-sans);
		--bva-t-header-l: 400 24px/1.12 var(--bva-font-sans);
		--bva-t-header-s: 500 18px/1.2 var(--bva-font-sans);
		--bva-t-paragraphe: 300 15px/1.32 var(--bva-font-sans);
		--bva-t-label: 300 11px/1.1 var(--bva-font-mono);
	}
}