@layer pages {
	/* ─── About Hero ─── */
	.hero--about {
		background-color: var(--uw-primary);
		align-items: center;
		justify-content: center;
	}

	.hero__inner-about {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.btn--about {
		position: absolute;
		bottom: var(--uw-space-10);
		left: 50%;
		transform: translateX(-50%);
		flex-direction: column;
		gap: var(--uw-space-3);
		border: none;
		z-index: 2;
	}

	.btn--about svg {
		animation: anchor-pulse 2.4s ease-in-out infinite;
	}

	@keyframes anchor-pulse {
		0%,
		100% {
			opacity: 1;
			transform: translateY(0);
		}
		50% {
			opacity: 0.5;
			transform: translateY(5px);
		}
	}

	/* ─── Story ─── */
	.story__quote {
		font-family: var(--uw-font-heading);
		font-size: var(--uw-text-3xl);
		font-style: italic;
		font-weight: 400;
		line-height: 1.2;
		color: var(--uw-fg);
		max-width: 22ch;
		text-align: center;
		margin-inline: auto;
		margin-block-end: var(--uw-space-16);
	}

	.story__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--uw-space-16);
		align-items: center;
	}

	.story__caption {
		position: absolute;
		display: block;
		font-family: var(--uw-font-heading);
		font-size: var(--uw-text-lg);
		font-style: italic;
		color: var(--uw-accent);
		margin-block-end: var(--uw-space-4);
		top: -12px;
		right: -40px;
		font-weight: 300;
		line-height: 1;
	}

	.story__heading-group {
		position: relative;
		width: fit-content;
		margin-block-end: var(--uw-space-6);
	}

	.story__heading {
		margin-block-end: 0;
	}

	.story__content p {
		margin-block-end: var(--uw-space-4);
		text-wrap: pretty;
		font-weight: 300;
	}

	.story__media {
		display: flex;
		flex-direction: column;
	}

	.story__img {
		display: block;
		width: 70%;
		aspect-ratio: 1/1;
		object-fit: cover;
		filter: grayscale(1);
	}

	.story__img:first-child {
		align-self: flex-start;
	}

	.story__img:last-child {
		align-self: flex-end;
		margin-block-start: -18%;
		position: relative;
		z-index: 1;
	}

	/* Desktop: quote reads as a larger centered lead, set apart from the
	   mission + images row below it. (Mobile is left untouched.) */
	@media (min-width: 769px) {
		.story__quote {
			font-size: var(--uw-text-4xl);
			max-width: 24ch;
			margin-block-end: var(--uw-space-20);
		}
	}

	.btn--about {
		flex-direction: column;
	}

	.btn--about svg {
		height: 20px;
		width: 20px;
	}

	/* ─── Values ─── */
	.values {
		background-color: var(--uw-fg);
		padding-block: var(--uw-space-20);
	}

	.values__header {
		margin-block-end: var(--uw-space-16);
	}

	.values__header .section-header__eyebrow {
		font-family: var(--uw-font-heading);
		font-style: italic;
		font-weight: 300;
		font-size: var(--uw-text-lg);
		text-transform: none;
		letter-spacing: 0;
		color: var(--uw-accent-light);
		line-height: 1;
	}

	.values__title {
		color: var(--uw-bg);
		max-width: 18ch;
	}

	.values__list {
		list-style: none;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		border-block-start: 1px solid rgba(245, 242, 236, 0.12);
	}

	.value-item {
		padding: var(--uw-space-8) var(--uw-space-6);
		border-inline-end: 1px solid rgba(245, 242, 236, 0.12);
		position: relative;
	}

	.value-item:last-child {
		border-inline-end: none;
	}

	.value-item__num {
		display: block;
		font-family: var(--uw-font-heading);
		font-style: italic;
		font-size: var(--uw-text-xl);
		color: var(--uw-accent-light);
		line-height: 1;
		width: fit-content;
		position: absolute;
		left: 12px;
		top: 12px;
		opacity: 0.5;
		text-shadow: 0 0 12px color-mix(in srgb, var(--uw-accent-light) 60%, transparent);
	}

	.value-item__title {
		color: var(--uw-bg);
		margin-block-end: var(--uw-space-2);
	}

	.value-item__body {
		font-size: var(--uw-text-sm);
		color: var(--uw-bg);
		opacity: 0.75;
		text-wrap: pretty;
	}

	/* ─── Team ─── */
	.team__header {
		margin-block-end: var(--uw-space-10);
	}

	.team__heading-group {
		position: relative;
		width: fit-content;
		margin-block-end: var(--uw-space-4);
	}

	.team__caption {
		position: absolute;
		top: -12px;
		right: -40px;
		font-family: var(--uw-font-heading);
		font-style: italic;
		font-weight: 300;
		font-size: var(--uw-text-lg);
		color: var(--uw-accent);
		line-height: 1;
	}

	.team__subline {
		font-size: var(--uw-text-base);
		font-weight: 300;
		text-wrap: pretty;
	}

	.team__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--uw-space-6);
	}

	@media (min-width: 769px) {
		.team__grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.team-member__photo {
		overflow: hidden;
		aspect-ratio: 4 / 5;
		background-color: rgba(14, 20, 24, 0.06);
		margin-block-end: var(--uw-space-4);
	}

	.team-member__photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(1);
	}

	.team-member__name {
		margin-block-end: var(--uw-space-1);
	}

	.team-member__role {
		font-family: var(--uw-font-body);
		font-size: var(--uw-text-sm);
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--uw-accent);
	}

	/* ─── Responsive ─── */
	@media (max-width: 768px) {
		.values__list {
			grid-template-columns: 1fr 1fr;
		}

		.value-item:nth-child(2) {
			border-inline-end: none;
		}

		.value-item:nth-child(3) {
			border-block-start: 1px solid rgba(245, 242, 236, 0.12);
		}

		.value-item:nth-child(4) {
			border-inline-end: none;
			border-block-start: 1px solid rgba(245, 242, 236, 0.12);
		}
	}

	@media (max-width: 768px) {
		.story__quote {
			font-size: var(--uw-text-2xl);
		}

		.story__grid {
			grid-template-columns: 1fr;
			gap: var(--uw-space-16);
		}

		/* Images sit above the mission on mobile */
		.story__media {
			order: -1;
		}

		.story__img {
			width: 65%;
		}
	}
}