/* =============================================================================
   About Us — pixel-accurate port of Figma 28:1153 (desktop) / 28:4124 (mobile).

   The page body is a dark composition: black with a --color-grid (#1c1c1c)
   rounded-square grid, the same colour the card gradients run down to.
   The header and footer are the DEFAULT light chrome (not themed).
   ========================================================================== */

.page-about {
	background-color: var(--color-black);
	background-image: url(../../media/about/about-grid-tile.svg);
	background-size: 68px 68px;
	/* The fixed header floats over the dark hero; opt out of its body padding. */
	padding-top: 0;
}

/* The dark grid stops at the footer (which paints its own cream). */
.page-about .about-body {
	position: relative;
}

/* Section eyebrows: Label/Intermedio. The WHO cards' eyebrows are orange; the
   [OUR STORY], [OUR CLIENTS] and [WHERE ARE WE] section eyebrows are cream.

   The shared contact panel is included inside .about-body and uses .eyebrow
   too, so it is excluded — otherwise "[Get In Touch]" renders at 20px orange
   here and 13px carbon everywhere else. :where() keeps the exclusion at zero
   specificity, so the cream overrides below still win exactly as before. */
.page-about .eyebrow:where(:not(.contact-modal *)) {
	font: var(--label-int);
	letter-spacing: var(--ls-label);
	color: var(--color-orange);
}
.page-about .about-story__eyebrow,
.page-about .about-marquee__eyebrow,
.page-about .about-where__eyebrow {
	color: var(--color-cream);
}

/* --- 1. Hero ------------------------------------------------------------- */
/* Frame 28:4033 (986x501 @ y242): centred title + lead, four rounded photos
   scattered around them (absolute). */
.page-about .about-hero {
	padding-top: 242px;
}

.page-about .about-hero__inner {
	position: relative;
	width: 986px;
	height: 501px;
	margin-inline: auto;
}

.page-about .about-hero__copy {
	position: absolute;
	left: 106px;
	top: 82px;
	width: 818px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-shadow: 0 4px 4px color-mix(in srgb, var(--color-black) 25%, transparent);
}

.page-about .about-hero__title {
	margin: 0;
	font: 700 var(--text-display-l) / 1.05 var(--font-sans);
	letter-spacing: var(--ls-display);
	color: var(--color-cream);
}

.page-about .about-hero__title span {
	color: var(--color-orange);
}

.page-about .about-hero__lead {
	margin: 8px 0 0;
	width: 649px;
	font: 400 var(--text-lg) / 1.1 var(--font-sans);
	color: var(--color-cream);
}

/* Photos: absolute, rounded, object-cover. Each carries a 40% black fill in the
   frame — brightness(0.6) is the exact equivalent (img × 0.6). */
.page-about .about-hero__photo {
	position: absolute;
	object-fit: cover;
	border-radius: 20px;
	filter: brightness(0.6);
	/* They fade in progressively and slowly on load (staggered per photo), then
	   keep gently floating and breathing — moving and scaling in their own phase,
	   per the designer's note ("aparecen, se mueven, se agrandan y achican"). */
	opacity: 0;
	animation: about-hero-fade-in 1.5s ease var(--fade-delay, 0s) both,
		about-hero-float var(--float-dur, 7s) ease-in-out var(--float-delay, 0s) infinite;
}
.page-about .about-hero__photo--1 {
	--fade-delay: 0.15s;
	--float-dur: 7s;
	--float-delay: -0.5s;
}
.page-about .about-hero__photo--2 {
	--fade-delay: 0.45s;
	--float-dur: 8.5s;
	--float-delay: -3s;
}
.page-about .about-hero__photo--3 {
	--fade-delay: 0.75s;
	--float-dur: 7.6s;
	--float-delay: -1.6s;
}
.page-about .about-hero__photo--4 {
	--fade-delay: 1.05s;
	--float-dur: 9.2s;
	--float-delay: -4.3s;
}

@keyframes about-hero-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Subtle drift + breathe. Kept small so it reads as "alive", not busy. */
@keyframes about-hero-float {
	0% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-12px) scale(1.07);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-about .about-hero__photo {
		opacity: 1;
		animation: none;
	}
}
.page-about .about-hero__photo--1 {
	left: 0;
	top: 16px;
	width: 185px;
	height: 185px;
}
.page-about .about-hero__photo--2 {
	left: 706px;
	top: 0;
	width: 225px;
	height: 113px;
}
.page-about .about-hero__photo--3 {
	left: 201px;
	top: 340px;
	width: 322px;
	height: 161px;
}
.page-about .about-hero__photo--4 {
	left: 766px;
	top: 228px;
	width: 220px;
	height: 220px;
}

/* --- 2. Who we are / Who we work with ------------------------------------ */
/* Frame 28:3997: two 940-wide dark cards, gap 31.5, icon left / copy right. */
.page-about .about-who {
	width: 940px;
	margin: 123px auto 0;
	display: flex;
	flex-direction: column;
	gap: 31px;
}

.page-about .about-who__card {
	position: relative;
	min-height: 260px;
	display: flex;
	align-items: center;
	/* pl 318 leaves the icon zone; pt33 pr92 pb38. */
	padding: 33px 92px 38px 318px;
	background: linear-gradient(180deg, var(--color-black), var(--color-grid));
	border: 1.5px solid var(--color-sand);
	border-radius: 20px;
}

.page-about .about-who__icon {
	position: absolute;
	left: 96px;
	top: 69px;
	width: 123px;
	height: auto;
}
.page-about .about-who__icon--work {
	left: 89px;
	top: 63px;
	width: 137px;
}

/* Icon animation (designer note): the ring's dashes flow in one continuous
   current — one lap every 2s, never stopping — and the filled centre beats,
   growing 7% from its own centre every 3.4s. */
.page-about .about-who__ring {
	/* 2s cycle (designer). The offset shifts by -180 (30 dash+gap units) so the
	   loop is seamless and the flow lands at ~90px/s — well clear of the ~0.5
	   dash-patterns-per-frame stroboscopic point that made a full-perimeter shift
	   read as static. A continuous forward current that never stops. */
	animation: about-who-current 2s linear infinite;
}
@keyframes about-who-current {
	to {
		stroke-dashoffset: -180;
	}
}
.page-about .about-who__center {
	transform-box: fill-box;
	transform-origin: center;
	/* A more pronounced beat on this icon (per request). */
	--beat-scale: 1.13;
	animation: about-who-beat 3.4s ease-in-out infinite;
}
@keyframes about-who-beat {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(var(--beat-scale, 1.07));
	}
}
@media (prefers-reduced-motion: reduce) {
	.page-about .about-who__ring,
	.page-about .about-who__center {
		animation: none;
	}
}

/* WHO WE WORK WITH icon (designer note): the connector dashes flow forward as a
   continuous current — one cycle every 2.6s, a touch slower than the icon above;
   the four dots dim 100%->30% and back one after another (TL, TR, BL, BR); the
   centre beats 7% from its own centre every 3.2s. */
.page-about .about-work__line {
	/* -180 = 30 dash+gap units, so the loop is seamless; at 2.6s that is ~69px/s,
	   below the aliasing point and slower than the ring above (~90px/s). */
	animation: about-work-current 2.6s linear infinite;
}
@keyframes about-work-current {
	to {
		stroke-dashoffset: -180;
	}
}

.page-about .about-work__dot {
	animation: about-work-dot 3.2s ease-in-out infinite;
}
.page-about .about-work__dot--tl {
	animation-delay: 0s;
}
.page-about .about-work__dot--tr {
	animation-delay: 0.8s;
}
.page-about .about-work__dot--bl {
	animation-delay: 1.6s;
}
.page-about .about-work__dot--br {
	animation-delay: 2.4s;
}
@keyframes about-work-dot {
	0% {
		opacity: 1;
	}
	12.5% {
		opacity: 0.3;
	}
	25% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

.page-about .about-work__center {
	transform-box: fill-box;
	transform-origin: center;
	/* A more pronounced beat here too (per request). */
	--beat-scale: 1.13;
	animation: about-who-beat 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.page-about .about-work__line,
	.page-about .about-work__dot,
	.page-about .about-work__center {
		animation: none;
	}
}

.page-about .about-who__text {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.page-about .about-who__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	font: 400 var(--text-base) / 1.15 var(--font-sans);
	color: var(--color-cream);
}
.page-about .about-who__body p {
	margin: 0;
}
.page-about .about-who__body strong {
	font-weight: 700;
}

/* --- 3. Our story ------------------------------------------------------- */
/* Frame 28:3984. Header (centred), full-bleed photo row, an orange-bordered
   box overlapping the row's foot, then a closing line. */
.page-about .about-story {
	margin-top: 123px;
	overflow: hidden;
}

.page-about .about-story__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.page-about .about-story__title {
	margin: 0;
	max-width: 581px;
	font: 700 var(--text-display-s) / 1 var(--font-sans);
	letter-spacing: var(--ls-display);
	color: var(--color-cream);
}
.page-about .about-story__title span {
	color: var(--color-orange);
}

/* Continuous carousel (designer note). The photo row scrolls right-to-left; the
   two photos in the centre read at full strength and the sides fade to ~30%. The
   viewport is fixed, the track scrolls under an edge-darkening gradient, so a
   photo brightens as it reaches the centre and dims as it leaves — the opacity
   ramp is a consequence of position, not a per-photo animation. */
.page-about .about-story__carousel {
	position: relative;
	margin-top: 37px;
	overflow: hidden;
}
/* Edge mask: 70% black at both ends (a photo there sits at ~30% opacity over the
   black page) easing to clear across the centre, wide enough for two photos. */
.page-about .about-story__carousel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--color-black) 70%, transparent) 0%,
		transparent 20%,
		transparent 80%,
		color-mix(in srgb, var(--color-black) 70%, transparent) 100%
	);
}

/* The track holds the four photos twice; translateX(-50%) advances by exactly
   one set (each photo carries its own 18px trailing margin), so the loop is
   seamless — the fifth photo lands where the first began. */
.page-about .about-story__photos {
	display: flex;
	width: max-content;
	animation: about-story-scroll 24s linear infinite;
}
.page-about .about-story__photo {
	flex: none;
	width: 459px;
	height: 282px;
	margin-right: 18px;
	object-fit: cover;
	border-radius: 20px;
}

@keyframes about-story-scroll {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-about .about-story__photos {
		animation: none;
	}
}

/* The bordered box overlaps the bottom of the photo row. */
.page-about .about-story__box {
	position: relative;
	z-index: 1;
	width: 775px;
	margin: -46px auto 0;
	padding: 26px 34px;
	background: var(--color-black);
	border: 1.5px solid var(--color-orange);
	border-radius: 30px;
	text-align: center;
}
.page-about .about-story__box p {
	margin: 0;
	font: 400 var(--text-base) / 1.15 var(--font-sans);
	color: var(--color-cream);
}
.page-about .about-story__box strong {
	font-weight: 700;
}

.page-about .about-story__closing {
	width: 635px;
	margin: 22px auto 0;
	font: 400 var(--text-base) / 1.15 var(--font-sans);
	color: var(--color-cream);
	text-align: center;
}
.page-about .about-story__closing strong {
	font-weight: 700;
	color: var(--color-orange);
}

/* The alternating photo/paragraph column is mobile only (see the media query). */
.page-about .about-story__stack {
	display: none;
}

/* --- 4. Our clients (marquee) ------------------------------------------- */
.page-about .about-marquee {
	/* The shared component — components/marquee.css, at the site's one speed,
	   with the rows unoffset. */
	--marquee-offset: 0s;
	--marquee-gap: 50px;
	margin-top: 129px;
	overflow: hidden;
}
.page-about .about-marquee__eyebrow {
	margin: 0;
	text-align: center;
}
.page-about .about-marquee__viewport {
	margin-top: 40px;
}

/* --- 5. Case studies ---------------------------------------------------- */
/* Frame 28:3971 / 28:3960: dark case cards, image on the right. */
.page-about .about-cases {
	width: 1054px;
	margin: 117px auto 0;
	display: flex;
	flex-direction: column;
	gap: 33px;
}

.page-about .about-case {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 64px;
	min-height: 496px;
	padding: 48px 46px 48px 70px;
	background: var(--color-black);
	border: 1.5px solid var(--color-sand);
	border-radius: 30px;
	box-shadow: var(--shadow-card);
}

.page-about .about-case__body {
	flex: 1;
	min-width: 0;
	max-width: 474px;
	display: flex;
	flex-direction: column;
}
.page-about .about-case__head {
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.page-about .about-case__title {
	margin: 0;
	font: 700 var(--text-display-s) / 1 var(--font-sans);
	letter-spacing: var(--ls-display);
	color: var(--color-cream);
}
.page-about .about-case__labels {
	margin: 0;
	font: var(--label-m);
	letter-spacing: var(--ls-label);
	line-height: 1.3;
	color: var(--color-sand-soft);
}
.page-about .about-case__lead {
	margin: 0;
	max-width: 403px;
	font: 400 var(--text-base) / 1.15 var(--font-sans);
	color: var(--color-cream);
}
/* The same stat as Our Work's case card (.case-card__stat in
   pages/our-work.css), because it is the same card: the label sits on the
   number's baseline with a small gap. Without the gap "+4" ran into "YEARS OF"
   (staging review, 2026-09-28). */
.page-about .about-case__stat {
	margin: 24px 0 0;
	display: flex;
	align-items: flex-end;
	gap: var(--space-1);
	color: var(--color-orange);
}
.page-about .about-case__stat-value {
	font: var(--display-xl);
	letter-spacing: var(--ls-display);
}
.page-about .about-case__stat-label {
	color: var(--color-orange);
	max-width: 170px;
	font: var(--label-int);
	letter-spacing: var(--ls-label);
	padding-bottom: 0.35em;
}
/* UNUSED since 2026-09-25: the "Read Case Study" button was removed until
   case-study pages exist. Kept on purpose, for when it comes back. */
.page-about .about-case__cta {
	align-self: flex-start;
	/* 15px below the stat (Verve, 28:3971). */
	margin-top: 15px;
	padding-inline: var(--space-8);
}
/* With no stat the CTA drops 144px below the copy so it lands at the same height
   as the stat cards' CTA (Canada Go Green, 28:3960). */
.page-about .about-case--no-stat .about-case__cta {
	margin-top: 144px;
}
.page-about .about-case__media {
	flex: none;
	width: 400px;
	height: 400px;
}
.page-about .about-case__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 30px;
}

/* --- 6. Where are we ---------------------------------------------------- */
/* Frame 28:3171: pin + eyebrow, two photo cards with an orange city pill and a
   cream address chip overlaid near the foot. */
.page-about .about-where {
	width: 943px;
	margin: 117px auto 0;
}
.page-about .about-where__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}
.page-about .about-where__pin {
	width: 61px;
	height: 69px;
}
.page-about .about-where__eyebrow {
	margin: 0;
	text-align: center;
}

.page-about .about-where__cards {
	margin-top: 21px;
	display: flex;
	gap: 22px;
}
.page-about .about-where__card {
	position: relative;
	flex: 1;
}
.page-about .about-where__photo {
	display: block;
	width: 100%;
	height: 320px;
	object-fit: cover;
	border-radius: 20px;
}
/* Orange city pill, centred over the photo near the foot. */
.page-about .about-where__label {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 62px;
	display: inline-flex;
	align-items: center;
	height: 37px;
	padding: 0 12px;
	background: var(--color-orange);
	border-radius: 5px;
	box-shadow: 0 4px 2px color-mix(in srgb, var(--color-black) 15%, transparent);
	font: 700 var(--text-display-s) / 1 var(--font-sans);
	letter-spacing: var(--ls-display);
	color: var(--color-black);
}
/* Cream address chip, centred below the pill. */
.page-about .about-where__addr {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 25px;
	display: inline-flex;
	align-items: center;
	height: 37px;
	padding: 0 22px;
	background: var(--color-cream);
	border-radius: 5px;
	font: 400 var(--text-lg) / 1.1 var(--font-sans);
	color: var(--color-black);
	white-space: nowrap;
}

/* --- 7. Final CTA ------------------------------------------------------- */
/* The band is components/final-cta.css. 190px above it; the 190
   below is owned by the contact panel that follows it, so this section adds no
   bottom padding of its own — the two would stack. */
.page-about .final-cta {
	padding-top: 190px;
}

/* The collapsed contact panel sits flush under the band and carries the gap down
   to the footer (its margin collapses with the footer's own top margin, so this
   value is the gap). The shared 172px is the home page's figure; About is 190. */
.page-about .contact-modal:where(:not(.is-overlay)) {
	margin-bottom: 190px;
}

/* ==========================================================================
   Tablet (768–1100) — UNDESIGNED. Figma has only the 1440 desktop and the 392
   mobile frame, so this is a safety pass, not a ported layout: it keeps the
   fixed-width desktop composition from spilling past a 40px side margin. The
   fixed bands go fluid, the hero photos re-anchor to the edges, and the case
   cards stack (the 400px media has no room beside the copy below ~1000px).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1100px) {
	.page-about .about-who,
	.page-about .about-cases,
	.page-about .about-where {
		width: auto;
		margin-inline: 40px;
	}
	.page-about .about-story__box {
		width: auto;
		max-width: calc(100% - 80px);
	}

	/* Hero: fluid inner, copy centred, right-hand photos anchored to the right
	   edge so nothing crosses the margin. */
	.page-about .about-hero__inner {
		width: auto;
		margin-inline: 40px;
	}
	.page-about .about-hero__copy {
		left: 50%;
		width: min(818px, 100%);
		transform: translateX(-50%);
	}
	.page-about .about-hero__photo--1 {
		left: 0;
	}
	.page-about .about-hero__photo--3 {
		left: 6%;
	}
	.page-about .about-hero__photo--2 {
		left: auto;
		right: 5%;
	}
	.page-about .about-hero__photo--4 {
		left: auto;
		right: 0;
	}

	/* Case cards stack, media on top. */
	.page-about .about-case {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		gap: 32px;
		padding: 40px;
	}
	.page-about .about-case__media {
		order: 1;
		width: 100%;
		height: 380px;
	}
	.page-about .about-case__body {
		order: 2;
		max-width: none;
	}
	/* UNUSED since 2026-09-25: the "Read Case Study" button was removed until
	   case-study pages exist. Kept on purpose, for when it comes back. */
	.page-about .about-case__cta,
	.page-about .about-case--no-stat .about-case__cta {
		margin-top: 24px;
	}
}

/* ==========================================================================
   Mobile — frame 28:4124 (392 wide). The header, footer and chat teaser are
   shared and carry their own responsive rules; everything below reflows the
   page body. The desktop is a fixed-width composition, so this is a full set of
   overrides rather than a few tweaks.

   One deliberate difference from desktop: on this frame every section eyebrow is
   orange (on desktop the user set [OUR STORY]/[OUR CLIENTS]/[WHERE ARE WE] cream).
   ========================================================================== */
@media (max-width: 767px) {
	/* Section eyebrows are all orange here (28:5712, 28:4915, 28:5730). */
	.page-about .about-story__eyebrow,
	.page-about .about-marquee__eyebrow,
	.page-about .about-where__eyebrow {
		color: var(--color-orange);
	}

	/* --- 1. Hero (28:5761) ---------------------------------------------- */
	.page-about .about-hero {
		padding-top: 100px;
	}
	.page-about .about-hero__inner {
		width: 100%;
		height: 490px;
	}
	.page-about .about-hero__copy {
		left: 50%;
		top: 145px;
		transform: translateX(-50%);
		width: min(286px, calc(100% - 40px));
	}
	.page-about .about-hero__title {
		font: 700 var(--text-display-s) / 1 var(--font-sans); /* 32 */
	}
	.page-about .about-hero__lead {
		width: 100%;
		max-width: 265px;
		margin-top: 14px;
		font: 400 var(--text-sm) / 1.35 var(--font-sans); /* 14 */
	}
	/* Three photos on mobile; the wide pairing shot (photo 2) is dropped. No 40%
	   darkening here (the frame shows them at full strength), and the drift is
	   dropped — only the staggered fade-in stays. */
	.page-about .about-hero__photo {
		filter: none;
		border-radius: 15px;
		animation: about-hero-fade-in 1.2s ease var(--fade-delay, 0s) both;
	}
	.page-about .about-hero__photo--2 {
		display: none;
	}
	.page-about .about-hero__photo--1 {
		left: 13.7%;
		top: 40px;
		width: 84px;
		height: 84px;
	}
	.page-about .about-hero__photo--4 {
		left: auto;
		right: 14%;
		top: 0;
		width: 101px;
		height: 101px;
	}
	.page-about .about-hero__photo--3 {
		left: 19.3%;
		top: 414px;
		width: 152px;
		height: 76px;
	}

	/* --- 2. Who we are / Who we work with (28:4898 / 28:5740) ------------ */
	.page-about .about-who {
		width: auto;
		margin: 57px 37px 0;
		gap: 26px;
	}
	.page-about .about-who__card {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		gap: 33px;
		padding: 41px 25px;
	}
	/* Icon: static, pinned to the card's right edge, ~55px (28:4900). */
	.page-about .about-who__icon {
		position: static;
		align-self: flex-end;
		width: 55px;
	}
	.page-about .about-who__icon--work {
		width: 61px;
	}
	.page-about .about-who__eyebrow {
		font: var(--label-m); /* 15 Eurostile */
		letter-spacing: var(--ls-label);
	}
	.page-about .about-who__body {
		gap: 14px;
		font: 400 var(--text-sm) / 1.35 var(--font-sans); /* 14 */
	}

	/* --- 3. Our story (28:5710) ----------------------------------------- */
	.page-about .about-story {
		margin-top: 58px;
	}
	.page-about .about-story__head {
		max-width: 247px;
		margin-inline: auto;
		gap: 14px;
	}
	.page-about .about-story__title {
		max-width: none;
		font: 700 var(--text-lg) / 1.1 var(--font-sans); /* 20 */
		letter-spacing: 0;
	}
	/* Desktop carousel/box/closing off; the stack takes over. */
	.page-about .about-story__carousel,
	.page-about .about-story__box,
	.page-about .about-story__closing {
		display: none;
	}
	.page-about .about-story__stack {
		display: flex;
		flex-direction: column;
		gap: 25px;
		margin: 27px 47px 0;
	}
	.page-about .about-story__panel {
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 21px;
	}
	.page-about .about-story__panel img {
		width: 100%;
		height: auto;
		aspect-ratio: 292 / 179;
		object-fit: cover;
		border-radius: 20px;
	}
	.page-about .about-story__panel figcaption {
		font: 400 var(--text-sm) / 1.35 var(--font-sans); /* 14 */
		color: var(--color-cream);
	}
	.page-about .about-story__panel strong {
		font-weight: 700;
	}
	.page-about .about-story__panel .about-hl {
		font-weight: 700;
		color: var(--color-orange);
	}

	/* --- 4. Our clients (marquee, 28:4914) — same treatment as the home strip:
	   the whole row scales to 60% (zoom) rather than forcing a common logo height,
	   and the two rows sit 12px apart. */
	.page-about .about-marquee {
		margin-top: 62px;
	}
	.page-about .about-marquee__viewport {
		--marquee-row-gap: 12px;
		--marquee-gap: 30px; /* the desktop 50, scaled with the logos */
		--marquee-logo-scale: 0.6;
		margin-top: 32px;
	}

	/* --- 5. Case studies (28:5687 / 28:5700) ---------------------------- */
	.page-about .about-cases {
		width: auto;
		margin: 62px 26px 0;
		gap: 25px;
	}
	.page-about .about-case {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		gap: 21px;
		padding: 25px 28px;
	}
	/* Media on top, copy below. */
	.page-about .about-case__media {
		order: 1;
		width: 100%;
		height: auto;
		aspect-ratio: 264 / 190;
	}
	.page-about .about-case__media img {
		border-radius: 20px;
	}
	.page-about .about-case__body {
		order: 2;
		max-width: none;
		gap: 21px;
	}
	.page-about .about-case__head {
		gap: 9px;
	}
	.page-about .about-case__title {
		font: 700 var(--text-lg) / 1.1 var(--font-sans); /* 20 */
		letter-spacing: 0;
	}
	.page-about .about-case__labels {
		font: 700 var(--text-4xs) / 1.2 var(--font-label); /* 10 Eurostile */
		letter-spacing: var(--ls-label);
	}
	.page-about .about-case__lead {
		max-width: none;
		font: 400 var(--text-sm) / 1.35 var(--font-sans); /* 14 */
	}
	.page-about .about-case__stat {
		margin: 0;
	}
	.page-about .about-case__stat-value {
		font: 700 var(--text-display-s) / 1 var(--font-sans); /* 32 */
	}
	.page-about .about-case__stat-label {
		max-width: 100px;
		font: 700 var(--text-4xs) / 1.2 var(--font-label); /* 10 Eurostile */
		letter-spacing: var(--ls-label);
	}
	/* UNUSED since 2026-09-25: the "Read Case Study" button was removed until
	   case-study pages exist. Kept on purpose, for when it comes back. */
	.page-about .about-case__cta,
	.page-about .about-case--no-stat .about-case__cta {
		margin-top: 0;
	}

	/* --- 6. Where are we (28:5724) -------------------------------------- */
	.page-about .about-where {
		width: auto;
		margin: 62px 47px 0;
	}
	.page-about .about-where__head {
		gap: 18px;
	}
	.page-about .about-where__pin {
		width: 53px;
		height: 59px;
	}
	.page-about .about-where__cards {
		flex-direction: column;
		margin-top: 27px;
		gap: 22px;
	}
	.page-about .about-where__photo {
		height: 232px;
	}
	.page-about .about-where__label {
		font: 700 var(--text-lg) / 1.1 var(--font-sans); /* 20 */
		letter-spacing: 0;
	}
	.page-about .about-where__addr {
		bottom: 30px;
		font: 400 var(--text-base) / 1.15 var(--font-sans); /* 16 */
	}

	/* --- 7. Final CTA (28:4893) ----------------------------------------- */
	/* The 70px below the banner is the icon band's padding-top, so the section
	   adds none of its own — otherwise the two stack. */
	.page-about .final-cta {
		padding-top: 108px;
	}
}