.zerodigital-about {
	padding: clamp(var(--wp--preset--spacing--lg, 2rem), 4vw, var(--wp--preset--spacing--2xl, 4rem)) var(--zd-section-gutter, var(--wp--preset--spacing--md, 1.5rem));
}

/* Wide with a background reads as a rounded card. A radius alone is not enough:
 * below the 1600px wide size a wide section fills the viewport, and the curve
 * would land on the screen edge. min() takes a gutter off the viewport there and
 * keeps the cap above it — the CTA Banner's boxed idiom.
 *
 * Only with a background. The card's gutter sits outside the section's own
 * padding, so the copy starts one gutter further in than every other section.
 * With nothing painted there is no card to justify that, and the copy stays on
 * the shared edge. (0,4,0) beats core's `.is-layout-constrained > .alignwide`
 * at (0,2,0), which prints after block CSS.
 *
 * Desktop only. On a phone the gutter would stack on the section's own inline
 * padding and squeeze the copy; there Wide stays edge to edge, as before. */
@media (min-width: 783px) {
	.zerodigital-about.zerodigital-about--has-bg.alignwide,
	.is-layout-constrained > .zerodigital-about.zerodigital-about--has-bg.alignwide {
		max-width: min(
			var(--wp--style--global--wide-size, 1600px),
			calc(100% - 2 * var(--wp--preset--spacing--md, 1.5rem))
		);
		margin-inline: auto;
		border-radius: var(--zd-card-radius, var(--wp--custom--radius--lg, 0.75rem));
	}
}

.zerodigital-about__inner {
	display: grid;
	gap: clamp(var(--wp--preset--spacing--md, 1.5rem), 4vw, var(--wp--preset--spacing--xl, 3rem));
	align-items: center;
	max-width: var(--zd-content-max, calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--wp--preset--spacing--md, 1.5rem)));
	margin-inline: auto;
	grid-template-columns: 1fr;
}

.zerodigital-about--image-left,
.zerodigital-about--image-right {
	grid-template-columns: 1fr 1fr;
}

.zerodigital-about--image-left .zerodigital-about__inner {
	direction: rtl;
}

.zerodigital-about--image-left .zerodigital-about__copy,
.zerodigital-about--image-left .zerodigital-about__media {
	direction: ltr;
}

.zerodigital-about--image-left .zerodigital-about__inner,
.zerodigital-about--image-right .zerodigital-about__inner {
	grid-template-columns: 1fr 1fr;
}

.zerodigital-about--copy-only .zerodigital-about__inner {
	max-width: 46rem;
}

/* Copy width follows the block's alignment — the one width control, set in the
 * editor toolbar or over MCP. None is the reading measure above; Wide and Full
 * widen the copy to match the section. This replaced a separate Content Width
 * field that reused the same three words for a second, independent setting,
 * and data migration 3 mapped every stored value onto the equivalent alignment.
 *
 * Two caps still have to move together, and the second is the one that matters:
 * the container is 46rem, but `.zerodigital-about__body` further down is capped
 * at 60ch — roughly 34rem — so the COPY is already well inside the container.
 * Widening only the container moves the heading and leaves the text exactly
 * where it was, which reads as a setting that does nothing.
 *
 * Specificity is (0,3,0), which beats both the (0,2,0) rule above and the
 * (0,1,0) body rule below on its own, so neither source order nor !important is
 * doing any work. */
.zerodigital-about--copy-only.alignwide .zerodigital-about__inner {
	max-width: 64rem;
}

.zerodigital-about--copy-only.alignfull .zerodigital-about__inner {
	max-width: var(--zd-content-max, calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--wp--preset--spacing--md, 1.5rem)));
}

.zerodigital-about--copy-only.alignwide .zerodigital-about__body,
.zerodigital-about--copy-only.alignfull .zerodigital-about__body {
	max-width: none;
}

.zerodigital-about__heading {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--zd-step-h2, clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem));
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0 0 var(--wp--preset--spacing--sm, 1rem);
}

/* The accent lead-in bar is retired. Every section carrying the same bar is
 * exactly what made the pages read as one template, and the accent is now
 * reserved for the spec tick and genuine state. The heading carries itself. */

.zerodigital-about__body {
	line-height: 1.65;
}

.zerodigital-about__stats {
	list-style: none;
	margin: var(--wp--preset--spacing--lg, 2rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--lg, 2rem);
}

/* Stats are the clearest "trust signal as spec" on the page — a measured
 * figure and its unit. Set in the utility face with tabular figures so a row
 * of them lines up on the decimal rather than drifting. */
.zerodigital-about__stat-number {
	display: block;
	font-family: var(--zd-mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--foreground, #16181b);
}

.zerodigital-about__stat-label {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--zd-mono);
	font-size: var(--zd-spec-size, 0.72rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--zd-spec-tracking, 0.14em);
}

.zerodigital-about__media {
	height: 100%;
}

/* Feature media (both heroes and About) shares one treatment: the large radius
 * and a hairline, no shadow. One device, not two — the hairline is what holds
 * the edge where a bright photo meets a near-white page, and a drop shadow on
 * top of it was belt-and-braces that read as dated. */
.zerodigital-about__media img {
	width: 100%;
	height: auto;
	border-radius: var(--zd-media-radius, var(--wp--custom--radius--lg, 0.75rem));
	border: var(--zd-border, 1px solid #e4e6e9);
	display: block;
}

/* On desktop the image stretches to the full height of the section so it reads
 * as a solid panel beside the copy rather than a floating thumbnail. The grid
 * row is sized by the taller column (usually the copy); align-items:stretch
 * lets the media cell fill it, and object-fit:cover crops without distortion. */
@media (min-width: 783px) {
	.zerodigital-about--image-left .zerodigital-about__inner,
	.zerodigital-about--image-right .zerodigital-about__inner {
		align-items: stretch;
	}

	.zerodigital-about--image-left .zerodigital-about__media img,
	.zerodigital-about--image-right .zerodigital-about__media img {
		height: 100%;
		object-fit: cover;
	}
}

/* Heading beside the text. The lede takes the left column; body and stats share
 * the right. The section widens to the content column, since a two-column spread
 * inside the 46rem or 64rem reading measure would squeeze both. (0,3,0) and after
 * the alignment rules above, so it wins at every alignment. */
@media (min-width: 783px) {
	.zerodigital-about.zerodigital-about--split .zerodigital-about__inner {
		max-width: var(--zd-content-max, calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--wp--preset--spacing--md, 1.5rem)));
	}

	.zerodigital-about--split .zerodigital-about__copy {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		column-gap: clamp(var(--wp--preset--spacing--lg, 2rem), 5vw, 5rem);
		align-items: start;
	}

	.zerodigital-about--split .zerodigital-about__lede {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.zerodigital-about--split .zerodigital-about__body,
	.zerodigital-about--split .zerodigital-about__stats {
		grid-column: 2;
	}

	.zerodigital-about--split .zerodigital-about__body {
		max-width: 68ch;
	}

	.zerodigital-about--split .zerodigital-about__body > :first-child,
	.zerodigital-about--split .zerodigital-about__heading {
		margin-top: 0;
	}
}

@media (max-width: 782px) {
	.zerodigital-about--image-left .zerodigital-about__inner,
	.zerodigital-about--image-right .zerodigital-about__inner {
		grid-template-columns: 1fr;
	}
}

/* --- default skin --- */
.zerodigital-about__body {
	max-width: 60ch;
}


.zerodigital-about__stats li {
	padding-left: 1rem;
	border-left: var(--zd-border, 1px solid #e4e6e9);
}

.zerodigital-about__stat-label {
	color: var(--wp--preset--color--muted, #5b6572);
}

/* Section background media (image/video). Sits behind the content with a scrim
 * so the copy stays legible over any upload; the copy itself is flipped to light
 * by `zd-bg-dark`, which the render adds alongside `--has-bg-media`. */
.zerodigital-about--has-bg-media {
	position: relative;
	/* `clip`, not `hidden`. Both crop the bleed identically, but `hidden`
	 * makes this a scroll container — it gains a scrollable overflow region,
	 * it simply is not user-scrollable — and that has a habit of quietly
	 * changing how descendants behave. It broke the scroll-driven version of
	 * the section entrance outright (see LESSONS); the entrance no longer
	 * works that way, but `clip` remains the honest property for "crop this,
	 * do not make it scrollable" and there is no reason to go back. */
	overflow: clip;
}

.zerodigital-about__bg-image,
.zerodigital-about__bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.zerodigital-about--has-bg-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(16, 24, 40, 0.55), rgba(16, 24, 40, 0.7));
}

.zerodigital-about--has-bg-media .zerodigital-about__inner {
	position: relative;
	z-index: 2;
}