@layer components {
	@scope (.about) {
		/* Hero */
		.about-hero {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 2);
		}

		.about-hero__grid {
			--grid-min-size: clamp(16rem, 40vw, 28rem);
			gap: calc(var(--gutter) * 2.5);
			align-items: start;
		}

		.about-hero h1 {
			max-inline-size: 600px;
		}

		.about-hero__intro {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 1.5);
			color: var(--color-text-muted);
		}

		/* Section with H2 + content side-by-side */
		.about-split {
			--grid-min-size: clamp(16rem, 40vw, 28rem);
			gap: calc(var(--gutter) * 2.5);
			align-items: start;
		}

		.about-split__heading {
			display: flex;
			flex-direction: column;
			gap: var(--gutter);
		}

		/* Darker sections invert H2 colour */
		section[style*="bg-dark"] h2 {
			color: var(--color-text-invert);
		}

		/* Section block (h2 + grid below) */
		.about-stack {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 4);
		}

		/* Partnerships */
		.about-partner-list {
			display: flex;
			flex-direction: column;
			gap: var(--gutter);
		}

		.about-partner-list__label {
			font-size: var(--font-size-xs);
			font-weight: var(--font-weight-medium);
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: var(--color-text-faint);
		}

		.about-partner-list > div {
			border-block-start: 1px solid var(--color-border);
			padding-block-start: var(--stack);
		}

		.about-partner-list p {
			font-size: var(--font-size-md);
			font-weight: 700;
		}

		/* Partner logo grid */
		.partner-logos {
			list-style: none;
			padding: 0;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
			gap: var(--gutter);
		}

		.partner-logo {
			display: grid;
			place-items: center;
			min-block-size: 5rem;
			padding: var(--gutter);
			background-color: var(--color-bg-2);
			border: 1px solid var(--color-border);
			border-radius: var(--border-radius-md);
		}

		.partner-logo img {
			max-block-size: 2.25rem;
			max-inline-size: 100%;
			inline-size: auto;
		}

		/* Text fallback for partners without a logo yet */
		.partner-logo span {
			font-size: var(--font-size-sm);
			font-weight: 700;
			text-align: center;
			color: var(--color-text-muted);
		}

		/* Leadership */
		.about-leadership__photo {
			inline-size: 100%;
			max-inline-size: 18rem;
			height: auto;
			border-radius: var(--border-radius-lg);
			margin-block-end: var(--gutter);
		}

		.about-leadership__bio {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 1.5);
		}

		.about-leadership__bio p {
			color: var(--color-text-muted-invert);
		}

		/* Offices */
		.about-office {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) / 4);
			border-block-start: 1px solid var(--color-border);
			padding-block-start: var(--stack);
		}

		.about-office > p:first-child {
			font-size: var(--font-size-md);
			font-weight: 700;
		}

		.about-office > p:last-child {
			font-size: var(--font-size-xs);
			color: var(--color-text-muted-invert);
		}
	}
}