.about {

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

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

/* Section CSS appended below as each block is integrated */

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

/* ── Philosophy ──────────────────────────────────────────── */
/* Header is position:fixed (80px); maquette places the title at y=211 (~132px below the header) */
.about-philosophy {
	padding-top: 211px;
}
.about-philosophy__label {
	text-align: center;
}
.about-philosophy__title {
	max-width: 1144px;
	margin: 0 auto;
	font: var(--bva-t-header-xl);
	text-align: center;
}
.about-philosophy__label + .about-philosophy__title {
	margin-top: 32px;
}
.about-philosophy__media {
	height: 777px;
	width: calc(100% - 32px);
	max-width: 1408px;
	margin: 120px auto 0;
	border-radius: 12px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.about-philosophy__statement {
	max-width: 912px;
	margin: 120px auto 0;
	text-align: center;
}
.about-philosophy__statement p {
	margin: 0 0 16px;
	font: var(--bva-t-header-s);
}
.about-philosophy__statement p:last-child {
	margin-bottom: 0;
}

/* ── Promise ─────────────────────────────────────────────── */
.about-promise__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 827px;
	border: 1px solid rgba(0, 0, 0, 0.12);
}
.about-promise__text {
	align-self: stretch;
	flex: 0 0 618px;
	padding: 46px 0 46px 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.about-promise__body {
	max-width: 448px;
	display: flex;
	flex-direction: column;
	gap: 37px;
}
.about-promise__title {
	margin: 0;
	font: var(--bva-t-header-l);
}
.about-promise__copy p {
	margin: 0 0 12px;
	font: var(--bva-t-paragraphe);
}
.about-promise__copy p:last-child { margin-bottom: 0; }
.about-promise__media {
	flex: 0 0 714px;
	align-self: stretch;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* ── Stats ───────────────────────────────────────────────── */
.about-stats__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}
.about-stats__intro {
	flex: 0 0 448px;
}
.about-stats__intro p {
	margin: 0 0 16px;
	font: var(--bva-t-header-s);
}
.about-stats__intro p:last-child { margin-bottom: 0; }
.about-stats__figures {
	display: flex;
	gap: 16px;
	flex: 0 0 auto;
}
.about-stat {
	width: 215px;
	padding: 0 12px;
	border-left: 1px solid var(--bva-line);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.about-stat__value {
	margin: 0;
	font: var(--bva-t-header-l);
}
.about-stat__label {
	margin: 0;
	font: var(--bva-t-paragraphe);
	color: rgba(0, 0, 0, 0.6);
}

/* ── Manifesto ───────────────────────────────────────────── */
.about-manifesto {
	position: relative;
}
.about-manifesto__viewport {
	overflow: hidden;
}
.about-manifesto__track {
	display: flex;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.about-manifesto__slide {
	position: relative;
	flex: 0 0 100%;
	min-height: 812px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px 40px;
	background-color: var(--bva-dark-brown);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.about-manifesto__scrim {
	position: absolute;
	inset: 0;
	background: rgba(66, 20, 0, 0.4);
	pointer-events: none;
}
.about-manifesto__content {
	position: relative;
	z-index: 1;
	width: 902px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	color: var(--bva-white);
}
.about-manifesto__label {
	margin: 0;
	font: 500 12px/1.1 var(--bva-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.about-manifesto__text p {
	margin: 0 0 12px;
	font: var(--bva-t-header-l);
}
.about-manifesto__text p:last-child { margin-bottom: 0; }
.about-manifesto__progress {
	position: absolute;
	left: 50%;
	bottom: 90px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	width: 427px;
	max-width: calc(100% - 80px);
}
.about-manifesto__bar {
	flex: 1 1 0;
	height: 2px;
	padding: 0;
	border: 0;
	background: rgba(254, 254, 254, 0.3);
	cursor: pointer;
	transition: background 0.3s ease;
}
.about-manifesto__bar.is-active { background: var(--bva-white); }

/* ── Innovation ──────────────────────────────────────────── */
.about-innovation__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}
.about-innovation__media {
	flex: 0 0 671px;
	height: 671px;
	border-radius: 4px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.about-innovation__text {
	flex: 0 0 578px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.about-innovation__body {
	max-width: 448px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.about-innovation__title {
	margin: 0;
	font: var(--bva-t-header-l);
}
.about-innovation__copy {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.about-innovation__copy p {
	margin: 0;
	font: var(--bva-t-paragraphe);
}
.about-innovation__copy strong,
.about-innovation__copy b {
	font-weight: 700;
}
.about-innovation__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 448px;
	max-width: 100%;
	height: 40px;
	border: 1px solid rgba(21, 20, 18, 0.16);
	border-radius: 2px;
	font: 600 14px/1.3 var(--bva-font-sans);
	text-transform: uppercase;
	color: var(--bva-black);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.about-innovation__cta:hover {
	background: var(--bva-black);
	color: var(--bva-white);
}

/* ── Subscription ────────────────────────────────────────── */
.about-subscription__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	padding-left: 40px;
}
.about-subscription__text {
	flex: 0 0 584px;
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding-bottom: 40px;
}
.about-subscription__head {
	display: flex;
	flex-direction: column;
}
.about-subscription__title {
	margin: 24px 0 0;
	font: var(--bva-t-header-l);
}
.about-subscription__intro {
	margin-top: 37px;
}
.about-subscription__intro p {
	margin: 0 0 12px;
	font: var(--bva-t-paragraphe);
}
.about-subscription__intro p:last-child { margin-bottom: 0; }
.about-subscription__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 56px;
}
.about-subscription__item {
	display: flex;
	gap: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--bva-line);
}
.about-subscription__num {
	flex: 0 0 auto;
	font: var(--bva-t-label);
	text-transform: uppercase;
}
.about-subscription__item-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.about-subscription__item-title {
	margin: 0;
	font: var(--bva-t-header-s);
	text-transform: uppercase;
}
.about-subscription__item-text {
	margin: 0;
	font: var(--bva-t-paragraphe);
	color: rgba(0, 0, 0, 0.6);
}
.about-subscription__media {
	flex: 0 0 718px;
	align-self: stretch;
	min-height: 900px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* ── Club ────────────────────────────────────────────────── */
.about-club__head {
	max-width: 537px;
	padding-left: 40px;
	display: flex;
	flex-direction: column;
}
.about-club__title {
	margin: 24px 0 0;
	font: var(--bva-t-header-l);
}
.about-club__intro {
	margin: 24px 0 0;
	font: var(--bva-t-paragraphe);
}
.about-club__cards {
	margin-top: 56px;
	display: flex;
}
.about-club__card {
	flex: 1 1 0;
	min-height: 500px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
}
.about-club__card:nth-child(1) { background: #e7ded9; }
.about-club__card:nth-child(2) { background: #dfcfc7; }
.about-club__card:nth-child(3) { background: #dcc1b1; }
.about-club__num {
	font: var(--bva-t-label);
	text-transform: uppercase;
}
.about-club__card-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 280px;
}
.about-club__card-title {
	margin: 0;
	font: 500 24px/1.1 var(--bva-font-sans);
	text-transform: uppercase;
}
.about-club__card-text p {
	margin: 0;
	font: var(--bva-t-paragraphe);
	color: rgba(0, 0, 0, 0.6);
}

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

	/* ── Shared ── */
	.about > section + section {
		margin-top: 80px;
	}

	/* ── Philosophy — photo full-bleed ABOVE the title (Figma reorders) ── */
	.about-philosophy {
		padding-top: 46px; /* clear fixed .header-mobile */
		display: flex;
		flex-direction: column;
		gap: 80px;
	}
	.about-philosophy .shell {
		width: 100%;
	}
	.about-philosophy__media {
		order: -1;
		/* Full-bleed edge-to-edge: the base rule insets by 32px (width:calc(100% - 32px))
		   which, with margin:0, left-aligned the photo and left a gap on the right.
		   Containers carry no horizontal padding, so 100% reaches both screen edges. */
		width: 100%;
		max-width: none;
		margin: 0;
		height: 400px;
		border-radius: 0;
	}
	.about-philosophy__title {
		text-align: left;
	}
	.about-philosophy__statement {
		max-width: none;
		margin: 0;
		text-align: left;
	}

	/* ── Promise — text, then image below (no border box) ── */
	.about-promise {
		padding: 0 12px;
	}
	.about-promise__inner {
		flex-direction: column;
		gap: 24px;
		min-height: 0;
		border: 0;
	}
	.about-promise__text {
		flex: 0 0 auto;
		padding: 0;
		gap: 24px;
	}
	.about-promise__body {
		max-width: none;
		gap: 24px;
	}
	.about-promise__media {
		flex: 0 0 auto;
		width: 100%;
		height: 400px;
		border-radius: 12px;
	}

	/* ── Stats — intro, then figures stacked vertically ── */
	.about-stats__inner {
		flex-direction: column;
		gap: 40px;
	}
	.about-stats__intro {
		flex: 0 0 auto;
	}
	.about-stats__figures {
		flex-direction: column;
		gap: 20px;
	}
	.about-stat {
		width: 100%;
	}

	/* ── Manifesto — content left-aligned in lower third ── */
	.about-manifesto__slide {
		min-height: 700px;
		padding: 12px;
		align-items: flex-end;
		justify-content: flex-start;
	}
	.about-manifesto__content {
		width: 100%;
		max-width: none;
		align-items: flex-start;
		text-align: left;
		gap: 20px;
		padding-bottom: 90px;
	}
	.about-manifesto__progress {
		width: 191px;
		max-width: calc(100% - 24px);
		bottom: 40px;
	}

	/* ── Innovation — image on top (DOM already image-first), CTA full-width ── */
	.about-innovation__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}
	.about-innovation__media {
		flex: 0 0 auto;
		width: 100%;
		height: 400px;
	}
	.about-innovation__text {
		flex: 0 0 auto;
		gap: 24px;
	}
	.about-innovation__body {
		max-width: none;
		gap: 24px;
	}
	.about-innovation__copy {
		gap: 24px;
	}
	.about-innovation__cta {
		width: 100%;
	}

	/* ── Subscription — image ABOVE the text block (Figma reorders) ── */
	.about-subscription {
		padding: 0 12px;
	}
	.about-subscription__inner {
		flex-direction: column;
		gap: 40px;
		padding-left: 0;
	}
	.about-subscription__media {
		order: -1;
		flex: 0 0 auto;
		width: 100%;
		min-height: 0;
		height: 400px;
		border-radius: 12px;
	}
	.about-subscription__text {
		flex: 0 0 auto;
		padding-bottom: 0;
	}

	/* ── Club — head guttered, cards full-bleed stacked ── */
	.about-club__head {
		max-width: none;
		padding: 0 12px;
	}
	.about-club__cards {
		flex-direction: column;
		margin-top: 40px;
	}
	.about-club__card {
		min-height: 300px;
		padding: 24px 12px;
	}
	.about-club__card-body {
		max-width: none;
	}
}

/* ── Phone type scale (Figma Mobile/* variables), scoped to .about ── */
@media (max-width: 560px) {
	.about {
		--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);
	}
	/* hardcoded fonts not covered by tokens */
	.about-manifesto__label {
		font-size: 11px;
	}
	.about-club__card-title {
		font-size: 18px;
	}
}