.mfb-services {
	padding-block: var(--mfb-space-2xl);
	background: var(--mfb-section-bg, var(--mfb-color-paper));
	color: var(--mfb-section-text);
}

/* On wider screens the statement gets the screen to itself before the cards. */
@media (min-width: 64em) {
	.mfb-services__intro {
		display: grid;
		align-content: center;
		min-height: 100svh;
	}

	.mfb-services:has(> .mfb-services__intro) {
		padding-top: 0;
	}
}

/* Target of the "What we do" menu link. While the statement animates, it sits
   where the letters have settled, so the link lands on the finished statement. */
.mfb-services__intro {
	position: relative;
}

.mfb-services__anchor {
	position: absolute;
	top: 0;
	scroll-margin-top: 0;
}

.mfb-services__intro.is-scrolling .mfb-services__anchor {
	top: calc(var(--mfb-scroll) * 0.92 - (100svh - var(--mfb-stage)) / 2);
}

.mfb-services__statement {
	/* Narrow enough to set the statement in three or four lines. */
	max-width: 16em;
	margin-inline: auto;
	color: var(--mfb-section-heading, var(--mfb-color-forest));
	font-family: var(--mfb-font-display);
	font-size: var(--mfb-text-h1);
	font-weight: 600;
	line-height: var(--mfb-leading-heading);
	letter-spacing: var(--mfb-tracking-heading);
	text-align: center;
	text-wrap: balance;
}

/* Scroll-driven statement, enabled by services-statement.js: the statement is
   pinned in its final centred layout while its letters settle one by one. */
.mfb-services__intro.is-scrolling {
	--mfb-stage: 100svh;
	--mfb-scroll: 150svh;

	display: block;
	height: calc(var(--mfb-stage) + var(--mfb-scroll));
	min-height: 0;
}

.mfb-services__intro.is-scrolling .mfb-services__statement {
	position: sticky;
	top: calc((100svh - var(--mfb-stage)) / 2);
	display: grid;
	align-content: center;
	height: var(--mfb-stage);
	max-width: none;
	overflow: hidden;
}

.mfb-services__track {
	display: block;
	max-width: 16em;
	margin-inline: auto;
}

.mfb-services__word,
.mfb-services__char {
	display: inline-block;
}

@media (max-width: 47.999em) {
	/* A shorter stage and scroll, so the statement is not surrounded by empty screen. */
	.mfb-services__intro.is-scrolling {
		--mfb-stage: 70svh;
		--mfb-scroll: 100svh;
	}
}

.mfb-services__stage {
	margin-top: var(--mfb-space-2xl);
}

.mfb-services__label {
	margin-bottom: var(--mfb-space-lg);
	text-align: center;
}

.mfb-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
	gap: var(--mfb-space-sm);
}

.mfb-service-card {
	/* Cards keep their own colours whatever the section background. */
	--mfb-section-text: initial;
	--mfb-section-heading: initial;
	--mfb-section-muted: initial;
	display: block;
	overflow: hidden;
	aspect-ratio: 1024 / 1600;
	border-radius: var(--mfb-radius-md);
	background: var(--mfb-card-color);
	color: var(--mfb-color-text);
	box-shadow:
		0 1px 2px rgb(0 0 0 / 6%),
		0 0.75rem 1.5rem -0.5rem rgb(0 0 0 / 14%);
	transition: transform 0.4s var(--mfb-ease);
}

@media (hover: hover) {
	.mfb-service-card:hover {
		transform: translateY(-0.375rem);
	}
}

.mfb-service-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}