/* ==========================================================================
   About page
   --------------------------------------------------------------------------
   Loaded only on /about/. Uses only the existing type sizes, weights,
   spacing, radii, shadows and colours from main.css — no new values.
   Shared components used as-is: .section, .section-head, .status-badge,
   .pill, .btn.

   1. Intro
   2. Statement
   3. Our story → meet the team
   4. How we work
   5. Who we're for
   6. Why a small team
   7. Kind words
   8. Call to action
   ========================================================================== */


/* 1. Intro — three words
   ========================================================================== */

/* Same top offset as the home hero's headline. */
.about-intro {
	row-gap: var(--space-xxl); /* headline → the three columns */
	margin-top: calc(var(--space-xl) + var(--space-xxl));
}

.about-intro__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--space-l);
	width: 100%;
}

.about-intro__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--space-m);
}

.about-intro__title {
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: var(--size-display);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.about-intro__aside {
	display: flex;
	flex-direction: column;
	row-gap: var(--space-m);
	max-width: 380px;
}

.about-intro__text {
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
	opacity: 0.6;
}

.about-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
}

.about-intro__button {
	padding: 0 var(--space-m);
}

/* Three columns between hairlines: a big word, then that person's story. */
.about-intro__columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
}

.about-intro__column {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	padding: var(--space-l) var(--space-m);
	font-family: var(--font-sans);
	outline: none;
	transition: opacity 0.4s;
}

.about-intro__column + .about-intro__column {
	border-left: 1px solid var(--color-line);
}

.about-intro__word {
	color: var(--color-ink);
	font-size: var(--size-display);
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.1;
	transition: color 0.3s;
}

.about-intro__story {
	flex-grow: 1;
	color: var(--color-ink);
	font-size: 18px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.about-intro__who {
	display: flex;
	align-items: center;
	gap: var(--space-s);
}

.about-intro__face {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.about-intro__name {
	display: block;
	color: var(--color-ink);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.about-intro__ask {
	display: block;
	color: var(--color-ink);
	font-size: 12px;
	font-weight: 400;
	opacity: 0.6;
}

/* Hover / focus a column: the others step back, its word turns orange. */
.about-intro__columns:hover .about-intro__column:not(:hover),
.about-intro__columns:focus-within .about-intro__column:not(:focus-visible):not(:hover) {
	opacity: 0.35;
}

.about-intro__column:hover .about-intro__word,
.about-intro__column:focus-visible .about-intro__word {
	color: var(--color-orange);
}

@media (prefers-reduced-motion: reduce) {
	.about-intro__column,
	.about-intro__word {
		transition: none;
	}
}


/* 2. Statement
   ========================================================================== */

/* Extra room above and below so it reads as a section of its own. */
.about-statement {
	padding-block: var(--space-xxl);
}

/* One big centred sentence; the numbers are chips set into it. */
.about-statement__text {
	max-width: 1400px;
	margin: 0 auto;
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: var(--size-display);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.4;
	text-align: center;
}

.about-statement__chip {
	display: inline-flex;
	align-items: center;
	padding: 0 0.3em;
	border-radius: var(--radius-pill);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	rotate: -2deg;
	transition: rotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-statement__chip:nth-of-type(even) {
	rotate: 2deg;
}

.about-statement__chip:hover {
	rotate: 0deg;
}

.about-statement__chip--ink {
	background-color: var(--color-ink);
	box-shadow: var(--shadow-deep);
	color: var(--color-paper);
}

.about-statement__chip--orange {
	background-color: var(--color-orange);
	box-shadow: var(--shadow-deep);
	color: var(--color-ink);
}

.about-statement__chip--mist {
	background-color: var(--color-mist);
	box-shadow: var(--shadow-soft);
	color: var(--color-ink);
}

/* Odometer (about.js): each digit is a window one line tall, exactly as wide
   as its own digit (an invisible copy sizes it), so the chip is the same size
   as the plain number. The reel of digits behind it, centred, rolls up to
   the real one; wider digits passing by are trimmed at the window's sides. */
.about-odo {
	--odo-h: 1.2em;
	display: inline-flex;
}

.about-odo__char,
.about-odo__col {
	display: block;
	height: var(--odo-h);
	line-height: var(--odo-h);
}

.about-odo__col {
	position: relative;
	overflow: hidden;
}

.about-odo__sizer {
	display: block;
	visibility: hidden;
}

.about-odo__reel {
	position: absolute;
	top: 0;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	translate: -50% 0;
	transition: transform 1.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--n, 0) * 0.12s);
}

.about-odo__reel > span {
	display: block;
	height: var(--odo-h);
	text-align: center;
}

.is-rolled .about-odo__reel {
	transform: translateY(calc(var(--to) * var(--odo-h) * -1));
}

/* The full stop as an orange dot; it drops into the story below. */
.about-statement__dot {
	display: inline-block;
	width: 0.2em;
	height: 0.2em;
	margin-left: 0.04em;
	border-radius: 50%;
	background-color: var(--color-orange);
}

.about-statement__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* The falling dot (about.js) — a copy that travels between the two while
   the real ones are hidden. */
.about-drop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	border-radius: 50%;
	background-color: var(--color-orange);
	pointer-events: none;
	will-change: transform;
}

.about-statement__dot.is-gone,
.about-story__track.is-waiting .about-story__shape {
	visibility: hidden;
}

@media (max-width: 810px) {
	.about-statement {
		padding-block: var(--space-xl);
	}
}

@media (max-width: 478px) {
	.about-statement {
		padding-block: var(--space-l);
	}
}

@media (prefers-reduced-motion: reduce) {
	.about-statement__chip {
		transition: none;
	}
}


/* 3. Our story → meet the team
   ========================================================================== */

/* The scroll values come from about.js while the track scrolls past, set
   only on the few parts that move (the shape, the captions, the team's
   bands). They're registered as not inherited, so a scroll step doesn't
   make the browser recheck the ~150 elements inside the box: setting one
   inherited value on the track used to, and that made phones stutter.
   Without them (no JS / reduced motion): the last caption and the open box. */
@property --a { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --b { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --e { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --show { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --in { syntax: "<number>"; inherits: false; initial-value: 1; }

.about-story__track {
	width: 100%;
}

.about-story__track.is-scrub {
	height: 440vh;
}

/* Four phases along the scroll (p, worked out in about.js):
   a = dot → line (0–0.18), b = line → box (0.2–0.5),
   e = box → fills the screen (0.55–0.75), c = the team appears (0.76–0.96).
   Scrolling back up fades the team out first (whatever is open stays
   open), then the box shrinks. */
.about-story__stage {
	--page-w: min(1400px, calc(100vw - 2 * var(--gutter))); /* the box, first open */
	--page-h: min(640px, calc(100vh - 300px));
	--top: calc(var(--space-xl) + var(--space-s)); /* clear of the fixed header */
	--full-h: calc(100vh - var(--top) - var(--gutter)); /* the box, filling the screen */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.is-scrub .about-story__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	padding: var(--top) 0 var(--gutter);
}

/* The story, in four captions stacked on top of each other. */
.about-story__captions {
	display: grid;
	max-width: 560px;
	margin-bottom: var(--space-l);
	font-family: var(--font-sans);
	text-align: center;
}

/* As the box grows to fill the screen, the captions fold away so it can
   reach right up under the navigation. */
.is-scrub .about-story__captions {
	height: calc((1 - var(--e)) * 140px);
	margin-bottom: calc((1 - var(--e)) * var(--space-l));
	overflow: hidden;
}

.about-story__caption {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--space-s);
}

/* Without scrolling, only the last one ("Dot And Draft.") shows. */
.about-story__caption:not(:last-child) {
	visibility: hidden;
}

.about-story__word {
	display: flex;
	align-items: baseline;
	gap: var(--space-s);
	color: var(--color-ink);
	font-size: var(--size-title-lg);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.about-story__n {
	color: var(--color-orange);
	font-size: 12px;
	font-weight: 500;
}

.about-story__sub {
	color: var(--color-ink);
	font-size: 18px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
	opacity: 0.7;
}

/* While scrolling: each caption has its own stretch of the scroll and fades
   out before the next fades in (--show, from about.js). A dot. (dot) → A
   line. (line) → A draft. (box growing) → Dot And Draft. (box open, until it
   fills the screen). */
.is-scrub .about-story__caption {
	visibility: visible;
	translate: 0 calc((1 - var(--show)) * 10px);
	opacity: var(--show);
}


/* The shape: a dot, then a line, then the box — orange turning dark as
   it opens. */
.about-story__shape {
	width: 100%;
	max-width: var(--page-w);
	overflow: hidden;
	border-radius: var(--radius);
	background-color: var(--color-night);
	box-shadow: var(--shadow-deep);
}

/* Dot → line (a) → box (b) → the full width between the side margins and
   the full height under the navigation (e). */
.is-scrub .about-story__shape {
	flex-shrink: 0;
	width: calc(24px + var(--a) * (var(--page-w) - 24px) + var(--e) * (100% - var(--page-w)));
	max-width: none;
	height: calc(24px - var(--a) * 18px + var(--b) * (var(--page-h) - 6px) + var(--e) * (var(--full-h) - var(--page-h)));
	border-radius: calc((1 - var(--b)) * 50px + var(--b) * 15px);
	background-color: color-mix(in srgb, var(--color-orange) calc((1 - var(--b)) * 100%), var(--color-night));
}

/* Scroll-driven, where the browser can (Chrome / Android, Safari 26+):
   the same values come straight from the scroll position, worked out by the
   browser in the very frame the page moves (about.js adds .is-timeline and
   stops setting them itself). On phones, scroll events arrive a moment after
   the screen has scrolled, so the JavaScript-driven box kept catching up in
   little jumps; tied to the scroll timeline it moves with the page. The
   track is the timeline: its "contain" range runs from the stage pinning
   (p = 0) to it letting go (p = 1), so the percentages below are p. */
@keyframes about-story-on { from { --a: 0; } to { --a: 1; } }
@keyframes about-story-box { from { --b: 0; } to { --b: 1; } }
@keyframes about-story-full { from { --e: 0; } to { --e: 1; } }
@keyframes about-story-out { from { --show: 1; } to { --show: 0; } }
@keyframes about-story-span { 0% { --show: 0; } 25% { --show: 1; } 75% { --show: 1; } 100% { --show: 0; } }
@keyframes about-story-span4 { 0% { --show: 0; } 30.77% { --show: 1; } 69.23% { --show: 1; } 100% { --show: 0; } }
@keyframes about-story-in { from { --in: 0; } to { --in: 1; } }

@supports (animation-timeline: view()) {
	/* Inset 0: measured from the real top of the screen, not from inside the
	   page's scroll-padding (the room kept under the fixed header). */
	.is-scrub.is-timeline {
		view-timeline: --about-story block;
		view-timeline-inset: 0;
	}

	.is-scrub.is-timeline .about-story__shape {
		animation: about-story-on linear both, about-story-box linear both, about-story-full linear both;
		animation-timeline: --about-story;
		animation-range: contain 0% contain 18%, contain 20% contain 50%, contain 55% contain 75%;
	}

	.is-scrub.is-timeline .about-story__captions {
		animation: about-story-full linear both;
		animation-timeline: --about-story;
		animation-range: contain 55% contain 75%;
	}

	.is-scrub.is-timeline .about-story__caption {
		animation: about-story-span linear both;
		animation-timeline: --about-story;
	}

	.is-scrub.is-timeline .about-story__caption--1 {
		animation-name: about-story-out;
		animation-range: contain 10% contain 14%;
	}

	.is-scrub.is-timeline .about-story__caption--2 { animation-range: contain 15% contain 31%; }
	.is-scrub.is-timeline .about-story__caption--3 { animation-range: contain 32% contain 48%; }

	.is-scrub.is-timeline .about-story__caption--4 {
		animation-name: about-story-span4;
		animation-range: contain 49% contain 62%;
	}

	/* The team's bands, one after another once the box is full. */
	.is-scrub.is-timeline .about-story__band {
		animation: about-story-in linear both;
		animation-timeline: --about-story;
	}

	.is-scrub.is-timeline .about-story__top { animation-range: contain 76% contain 80.44%; }
	.is-scrub.is-timeline .about-story__heading { animation-range: contain 80.44% contain 84.89%; }
	.is-scrub.is-timeline .about-story__crew { animation-range: contain 84.89% contain 89.33%; }
}

/* Phones: while it grows (about.js), a light one-layer shadow instead of
   the deep nine-layer one, which a phone's graphics chip would redraw at a
   new size on every scroll step; the full shadow fades back in once the
   box is open. */
@media (max-width: 810px) {
	.is-scrub .about-story__shape {
		transition: box-shadow 0.5s;
	}

	.is-scrub .about-story__shape.is-growing {
		box-shadow: rgba(0, 0, 0, 0.28) 0 12px 24px -8px;
	}
}

/* The open box: meet the team. Text on the left, the three of you on the
   right. --photo-h is the height left for a photo once the box fills the
   screen, so the portraits scale down (rather than crop) on short screens. */
.about-story__page {
	--photo-h: calc(var(--full-h) - 230px);
	display: grid;
	grid-template-areas:
		"top   top"
		"title people";
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	grid-template-rows: auto 1fr;
	gap: var(--space-m) var(--space-xl);
	width: 100%;
	padding: var(--space-l);
	color: var(--color-paper);
	font-family: var(--font-sans);
}

.is-scrub .about-story__page {
	height: 100%;
}

/* Still growing (about.js): nothing in the box shows yet, so the browser
   skips laying it out. */
.is-scrub .about-story__page.is-asleep {
	content-visibility: hidden;
}

/* Bands fade up one after another as the box finishes opening (--in, from
   about.js; --o is each band's place in the queue). */
.is-scrub .about-story__band {
	opacity: var(--in);
	translate: 0 calc((1 - var(--in)) * 16px);
}

.about-story__top {
	display: flex;
	flex-wrap: wrap;
	grid-area: top;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-s) var(--space-m);
	padding-bottom: var(--space-s);
	border-bottom: 1px solid var(--color-line-light);
}

.about-story__label {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	opacity: 0.6;
}

.about-story__intro {
	font-size: 14px;
	font-weight: 300;
	letter-spacing: -0.5px;
	opacity: 0.7;
}

/* Heading (left), with a small hint under it. */
.about-story__heading {
	display: flex;
	flex-direction: column;
	grid-area: title;
	align-self: start;
	row-gap: var(--space-m);
}

.about-story__title {
	font-size: var(--size-title-lg);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.about-story__hint {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	opacity: 0.6;
}

.about-story__hint::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: var(--space-s);
	border-radius: 50%;
	background-color: var(--color-orange);
	vertical-align: 1px;
}

/* The three of you, in matching 3:4 portrait frames. The wrapper is a
   size container so the portraits can size themselves to its width. */
.about-story__crew {
	container-type: inline-size;
	grid-area: people;
	align-self: end;
	min-height: 0;
}

.about-story__people {
	/* Portrait width: as tall as there's room for, but three must fit. */
	--w: min(calc(var(--photo-h) * 0.75), calc((100cqw - 2 * var(--space-m)) / 3));
	--thumb: 88px; /* the small portraits at the side when someone is open */
	display: grid;
	grid-template-columns: repeat(3, var(--w));
	align-items: end;
	justify-content: end;
	gap: var(--space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-story__person {
	min-width: 0;
}

/* The portrait is a button: tap it to open that person's profile. */
.about-story__open {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.about-story__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius);
	box-shadow: var(--shadow-deep);
	object-fit: cover;
	object-position: center 15%;
	transform-origin: 0 0;
	transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-story__open:hover .about-story__photo,
.about-story__open:focus-visible .about-story__photo {
	translate: 0 -5px;
}

.about-story__open:focus-visible {
	outline: none;
}

.about-story__open:focus-visible .about-story__photo {
	outline: 2px solid var(--color-orange);
	outline-offset: 3px;
}

.about-story__who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs) var(--space-s);
}

.about-story__name {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.about-story__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Someone is open: their portrait first (same size), the profile beside
   it, the other two as small portraits stacked at the side. */
.about-story__people.has-open {
	grid-template-columns: var(--w) minmax(0, 1fr) var(--thumb);
	grid-template-rows: auto auto 1fr;
	align-items: start;
	justify-content: stretch;
	column-gap: var(--space-l);
	row-gap: var(--space-s);
}

.has-open .about-story__person.is-active {
	display: contents;
}

.has-open .is-active .about-story__open {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: end;
}

.has-open .is-active .about-story__who {
	display: none;
}

.has-open .about-story__person:not(.is-active) {
	grid-column: 3;
}

.has-open .about-story__person:not(.is-active) .about-story__who .pill {
	display: none;
}

.has-open .about-story__person:not(.is-active) .about-story__name {
	font-size: 12px;
}

.has-open .about-story__person:not(.is-active) .about-story__photo {
	filter: grayscale(0.4);
}

.has-open .about-story__person:not(.is-active) .about-story__open:hover .about-story__photo {
	filter: none;
}

/* The profile, hidden until its person is open. It only scrolls on
   phones; the padding gives hover lifts room so nothing pokes out. */
.about-story__profile {
	display: none;
	flex-direction: column;
	row-gap: var(--space-m);
	min-width: 0;
	padding: var(--space-s) var(--space-xs);
}

.has-open .is-active .about-story__profile {
	display: flex;
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: end;
	animation: about-profile-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes about-profile-in {
	from {
		opacity: 0;
		translate: var(--space-m) 0;
	}
}

.about-story__profile-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s);
	padding-bottom: var(--space-s);
	border-bottom: 1px solid var(--color-line-light);
}

.about-story__profile-name {
	font-size: var(--size-title-md);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.about-story__years {
	color: var(--color-orange);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
}

.about-story__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: auto;
	padding: 0;
	border: 1px solid var(--color-line-light);
	border-radius: 50%;
	background-color: transparent;
	color: var(--color-paper);
	font-size: 18px;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.about-story__close:hover,
.about-story__close:focus-visible {
	border-color: var(--color-paper);
	background-color: var(--color-paper);
	color: var(--color-ink);
}

.about-story__key {
	margin-bottom: var(--space-xs);
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	opacity: 0.6;
}

.about-story__does {
	font-size: 18px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.about-story__now {
	font-size: 15px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
	opacity: 0.8;
}

.about-story__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-story__tags li {
	padding: var(--space-xs) var(--space-s);
	border: 1px solid var(--color-line-light);
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -0.5px;
}

.about-story__links {
	display: flex;
	gap: var(--space-s);
	margin: 0;
	padding: 0;
}

/* On the dark box the usual soft (light-grey) shadow shows as a smudge, so
   use the dark one. */
.about-story__links .social-button {
	box-shadow: var(--shadow-deep);
}

/* Without scrolling (no JS / reduced motion): fixed-size portraits. */
.about-story__track:not(.is-scrub) .about-story__people {
	--photo-h: 400px;
}

@media (prefers-reduced-motion: reduce) {
	.about-story__photo,
	.about-story__close {
		transition: none;
	}

	.has-open .is-active .about-story__profile {
		animation: none;
	}
}

@media (max-width: 1200px) {
	/* Tablets: heading above the portraits, so they get the full width. */
	.about-story__page {
		--photo-h: calc(var(--full-h) - 330px);
		grid-template-areas:
			"top"
			"title"
			"people";
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		gap: var(--space-m);
		padding: var(--space-m) var(--space-l);
	}

	.about-story__people {
		--thumb: 64px;
	}

	.about-story__people.has-open {
		column-gap: var(--space-m);
	}

	.about-story__profile {
		row-gap: var(--space-s);
	}

	.about-story__does {
		font-size: 15px;
	}
}

/* Short screens (small laptops): a more compact box so it all fits. */
@media (max-height: 720px) and (min-width: 811px) {
	.about-story__page {
		--photo-h: calc(var(--full-h) - 170px);
		gap: var(--space-s) var(--space-l);
		padding: var(--space-m) var(--space-l);
	}

	.about-story__title {
		font-size: var(--size-title-md);
	}

	.about-story__profile {
		row-gap: var(--space-s);
	}

	.about-story__does {
		font-size: 15px;
	}
}

/* Phones: text on top, the three portraits side by side underneath. */
@media (max-width: 810px) {
	.about-story__stage {
		--page-h: 460px;
	}

	.about-story__sub {
		font-size: 15px;
	}

	.about-story__page {
		grid-template-areas:
			"top"
			"title"
			"people";
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		gap: var(--space-m);
		padding: var(--space-m);
	}

	.about-story__intro {
		display: none;
	}

	.about-story__title {
		font-size: var(--size-title-md);
	}

	/* The people fill the space left under the heading, so an open
	   profile scrolls inside the box instead of running past it. */
	.about-story__crew {
		align-self: stretch;
		min-height: 0;
	}

	/* Room at the bottom for the WhatsApp chat button. */
	.is-scrub .about-story__page {
		padding-bottom: var(--space-xl);
	}

	.about-story__people {
		--w: calc((100cqw - 2 * var(--space-s)) / 3);
		--thumb: 56px;
		justify-content: start;
		gap: var(--space-s);
	}

	/* Open: portrait + the two small ones in a row, the profile below
	   (filling the rest of the box and scrolling if it has to). */
	.about-story__people.has-open {
		grid-template-columns: var(--w) var(--thumb) var(--thumb) minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		align-items: end;
		column-gap: var(--space-s);
		row-gap: var(--space-m);
		height: 100%;
	}

	.has-open .is-active .about-story__open {
		grid-row: 1;
	}

	.has-open .about-story__person:not(.is-active) {
		grid-column: auto;
		grid-row: 1;
	}

	/* The open portrait a little smaller; a long profile scrolls inside. */
	.about-story__people.has-open {
		--w: 84px;
	}

	.has-open .is-active .about-story__profile {
		grid-column: 1 / -1;
		grid-row: 2;
		align-self: stretch;
		min-height: 0;
		max-height: none;
		overflow-y: auto;
		scrollbar-gutter: stable; /* space kept, so no reflow when it appears */
		overscroll-behavior: contain;
	}

	.about-story__name {
		font-size: 16px;
	}

	/* Roles under the name on narrow cards. */
	.about-story__who {
		flex-direction: column;
		align-items: flex-start;
	}

	.about-story__profile-name {
		font-size: 21px;
	}

	.about-story__does,
	.about-story__now {
		font-size: 14px;
	}
}

@media (max-width: 478px) {
	.about-story__page {
		padding: var(--space-m) var(--space-s);
	}

	.is-scrub .about-story__page {
		padding-bottom: var(--space-xl);
	}

	.about-story__who .pill {
		font-size: 10px;
	}
}

/* Short phones (e.g. 320×568, 375×667): a compact box — tighter gaps,
   smaller heading and portraits — so an open profile still has room. The
   heading and the hint stay visible. */
@media (max-width: 810px) and (max-height: 700px) {
	.about-story__page {
		gap: var(--space-s);
	}

	.is-scrub .about-story__page {
		padding-top: var(--space-s);
		padding-bottom: 64px;
	}

	.about-story__top {
		padding-bottom: var(--space-xs);
	}

	.about-story__heading {
		row-gap: var(--space-xs);
	}

	.about-story__title {
		font-size: 21px;
	}

	.about-story__people.has-open {
		--w: 60px;
		--thumb: 44px;
		row-gap: var(--space-s);
	}

	.has-open .about-story__person:not(.is-active) .about-story__who {
		display: none;
	}

	.about-story__profile {
		row-gap: var(--space-s);
		padding-top: var(--space-xs);
	}

	.about-story__profile-name {
		font-size: 20px;
	}
}

/* Very narrow phones: names only under the portraits (roles are in the
   profiles). */
@media (max-width: 400px) {
	.about-story__who .pill {
		display: none;
	}
}


/* 4. How we work — stepper
   ========================================================================== */

/* Footnote under the steps. */
.about-process__note {
	max-width: 640px;
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
	opacity: 0.7;
}

.about-process__note span {
	color: var(--color-orange);
	font-weight: 500;
}


.about-process__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The line behind the dots. */
.about-process__steps::before {
	content: "";
	position: absolute;
	top: 24px;
	right: 10%;
	left: 10%;
	height: 2px;
	background-color: var(--color-line);
}

.about-process__btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-ink);
	font-family: var(--font-sans);
	text-align: center;
	cursor: pointer;
}

.about-process__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-l);
	height: var(--space-l);
	margin-bottom: var(--space-xs);
	border-radius: 50%;
	background-color: var(--color-paper);
	box-shadow: var(--shadow-soft);
	font-size: 15px;
	font-weight: 500;
	transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, scale 0.35s cubic-bezier(0.22, 1, 0.36, 1); /* smooth, no overshoot */
}

.about-process__btn:hover .about-process__dot {
	scale: 1.08;
}

.about-process__btn.is-active .about-process__dot {
	background-color: var(--color-orange);
	box-shadow: var(--shadow-deep);
	scale: 1.15;
}

.about-process__name {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.about-process__when {
	font-size: 12px;
	font-weight: 400;
	opacity: 0.6;
}

/* The chosen step's detail, in a dark panel. */
.about-process__panels {
	display: grid;
	width: 100%;
}

.about-process__panel {
	display: grid;
	grid-area: 1 / 1;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--space-xl);
	padding: var(--space-l);
	border-radius: var(--radius);
	background-color: var(--color-night);
	background-image: url("../images/ui/dark-light-rays.webp");
	background-position: right top;
	background-blend-mode: soft-light;
	box-shadow: var(--shadow-deep);
	color: var(--color-paper);
	font-family: var(--font-sans);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s, visibility 0s 0.4s;
}

.about-process__panel.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.about-process__count {
	color: var(--color-orange);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
}

.about-process__title {
	margin: var(--space-s) 0;
	font-size: var(--size-title-lg);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.about-process__text {
	font-size: 18px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
	opacity: 0.8;
}

.about-process__split {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-m);
	margin: 0;
}

.about-process__split div {
	padding-top: var(--space-s);
	border-top: 1px solid var(--color-line-light);
}

.about-process__split dt {
	margin-bottom: var(--space-xs);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	opacity: 0.6;
}

.about-process__split dd {
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

@media (max-width: 810px) {
	.about-process__name,
	.about-process__when {
		display: none;
	}

	.about-process__btn.is-active .about-process__name {
		display: block;
		font-size: 12px;
	}

	.about-process__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-m);
		padding: var(--space-m);
	}

	.about-process__text {
		font-size: 15px;
	}
}

@media (max-width: 478px) {
	.about-process__dot {
		width: 40px;
		height: 40px;
	}

	.about-process__steps::before {
		top: 19px;
	}

	.about-process__panel {
		padding: var(--space-m) var(--space-s);
	}
}

@media (prefers-reduced-motion: reduce) {
	.about-process__dot,
	.about-process__panel {
		transition: none;
	}
}


/* 5. Who we're for — two cards
   ========================================================================== */

/* List items with an orange tick (fit) or a cross (not a fit). */
.about-fit__item {
	position: relative;
	padding: var(--space-s) 0 var(--space-s) var(--space-l);
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.about-fit__item--yes::before {
	content: "";
	position: absolute;
	top: calc(var(--space-s) + 2px);
	left: 8px;
	width: 7px;
	height: 13px;
	border-right: 2px solid var(--color-orange);
	border-bottom: 2px solid var(--color-orange);
	rotate: 45deg;
}

.about-fit__item--no::before,
.about-fit__item--no::after {
	content: "";
	position: absolute;
	top: calc(var(--space-s) + 9px);
	left: 4px;
	width: 15px;
	height: 2px;
	background-color: currentColor;
	opacity: 0.5;
	rotate: 45deg;
}

.about-fit__item--no::after {
	rotate: -45deg;
}

@media (max-width: 810px) {
	.about-fit__item {
		font-size: 15px;
	}
}


.about-fit__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-s);
	width: 100%;
}

.about-fit__card {
	padding: var(--space-l);
	border-radius: var(--radius);
	font-family: var(--font-sans);
}

.about-fit__card--yes {
	background-color: var(--color-mist);
	box-shadow: var(--shadow-soft);
	color: var(--color-ink);
}

.about-fit__card--no {
	background-color: var(--color-ink);
	box-shadow: var(--shadow-deep);
	color: var(--color-paper);
}

.about-fit__title {
	margin-bottom: var(--space-m);
	font-size: var(--size-title-md);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.about-fit__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-fit__list li {
	border-top: 1px solid var(--color-line);
}

.about-fit__card--no .about-fit__list li {
	border-top-color: var(--color-line-light);
}

@media (max-width: 810px) {
	.about-fit__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-fit__card {
		padding: var(--space-m);
	}
}


/* 6. Why a small team — the sweet spot
   ========================================================================== */


.about-small__body {
	width: 100%;
	font-family: var(--font-sans);
	color: var(--color-ink);
}

.about-small__scale {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-m);
	margin-bottom: var(--space-l);
}

.about-small__end {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	opacity: 0.6;
}

.about-small__line {
	position: relative;
	height: 2px;
	background: linear-gradient(90deg, var(--color-line), var(--color-ink) 50%, var(--color-line));
}

.about-small__dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--space-m);
	height: var(--space-m);
	border-radius: 50%;
	background-color: var(--color-orange);
	box-shadow: var(--shadow-deep);
	translate: -50% -50%;
}

.about-small__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--color-orange);
	border-radius: 50%;
	animation: about-small-ring 2s ease-out infinite;
}

@keyframes about-small-ring {
	to {
		opacity: 0;
		scale: 2.4;
	}
}

/* The dot slides in from the left once in view. */
.is-armed:not(.is-in) .about-small__dot {
	left: 0;
}

.is-in .about-small__dot {
	transition: left 1.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.about-small__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: start;
	gap: var(--space-s);
}

.about-small__col {
	padding: var(--space-m);
	border-radius: var(--radius);
}

.about-small__col--left,
.about-small__col--right {
	opacity: 0.75;
}

.about-small__col--middle {
	background-color: var(--color-ink);
	box-shadow: var(--shadow-deep);
	color: var(--color-paper);
}

.about-small__title {
	margin-bottom: var(--space-s);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.about-small__col--middle .about-small__title {
	font-size: var(--size-title-md);
}

.about-small__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-small__list li {
	padding: var(--space-xs) 0;
	border-top: 1px solid var(--color-line);
	font-size: 15px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.about-small__col--middle .about-small__list li {
	border-top-color: var(--color-line-light);
}

/* Phones: the three are a slider (about.js), opening on "us" in the
   middle with the other two peeking in at the sides. The dot follows the
   swipe along the line; on either end card it turns red: not us. */
@media (max-width: 810px) {
	.about-small__cols {
		display: flex;
		gap: var(--space-s);
		margin: 0 calc(var(--gutter) * -1) -40px;
		/* Room for the dark card's shadow (it reaches ~57px below the card):
		   a slider clips what sticks out, and with less room the shadow
		   stopped in a hard line. The negative margin gives the space back. */
		padding: 4px var(--gutter) 70px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.about-small__cols::-webkit-scrollbar {
		display: none;
	}

	.about-small__col {
		flex: 0 0 84%;
		scroll-snap-align: center;
	}

	.about-small__cols:active,
	.is-dragging .about-small__cols {
		cursor: grabbing;
	}

	.is-dragging .about-small__cols {
		user-select: none;
	}

	/* The ends as cards too, so they read as slides. */
	.about-small__col--left,
	.about-small__col--right {
		border: 1px solid var(--color-line);
		background-color: rgba(255, 255, 255, 0.35);
	}

	.about-small__list li {
		font-size: 14px;
	}

	/* The scale is a handle too: drag the dot along the line, or tap an end
	   label, and the cards follow (about.js). Up-and-down still scrolls. */
	.about-small__scale {
		cursor: grab;
		touch-action: pan-y;
		user-select: none;
	}

	.is-dragging .about-small__scale {
		cursor: grabbing;
	}

	/* While swiping, the dot keeps up with the finger (instead of the slow,
	   springy slide-in it makes when the section first comes into view). */
	.is-driven .about-small__dot {
		transition: left 0.12s linear, background-color 0.3s;
	}

	.is-driven .about-small__dot::after {
		transition: border-color 0.3s;
	}

	.is-not-us .about-small__dot {
		background-color: #e5383b;
	}

	.is-not-us .about-small__dot::after {
		border-color: #e5383b;
	}
}


/* 7. Kind words — one big quote
   ========================================================================== */


.about-proof__stage {
	display: grid;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	font-family: var(--font-sans);
	color: var(--color-ink);
	text-align: center;
}

.about-proof__slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-m);
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	translate: 0 var(--space-s);
	transition: opacity 0.5s, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.5s;
}

.about-proof__slide.is-active {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition-delay: 0s;
}

.about-proof__logo {
	width: 64px;
	height: 64px;
	padding: 10px;
	border-radius: 50%;
	background-color: var(--color-mist);
	box-shadow: var(--shadow-soft);
	object-fit: contain;
}

.about-proof__text {
	margin: 0;
	font-size: var(--size-title-lg);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.about-proof__name {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.about-proof__what {
	font-size: 12px;
	font-weight: 400;
	opacity: 0.6;
}

.about-proof__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-m);
	width: 100%;
}

.about-proof__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-l);
	height: var(--space-l);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--color-paper);
	box-shadow: var(--shadow-soft);
	color: var(--color-ink);
	font-size: 20px;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s, translate 0.3s;
}

.about-proof__arrow:hover {
	background-color: var(--color-ink);
	color: var(--color-paper);
	translate: 0 -3px;
}

.about-proof__arrow--prev .icon {
	rotate: 180deg;
}

.about-proof__dots {
	display: flex;
	gap: var(--space-s);
}

.about-proof__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-line);
	cursor: pointer;
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s;
}

.about-proof__dot.is-active {
	width: var(--space-m);
	background-color: var(--color-orange);
}

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

	.about-proof__slide {
		transition: none;
	}
}


/* 8. Call to action
   ========================================================================== */

/* Dark card with the same light-rays texture as the stat cards. */
.about-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--space-m);
	width: 100%;
	margin-top: var(--space-l);
	padding: var(--space-xxl) var(--space-l);
	border-radius: var(--radius);
	background-color: var(--color-night);
	background-image: url("../images/ui/dark-light-rays.webp");
	background-position: right top;
	background-size: auto;
	background-blend-mode: soft-light;
	box-shadow: var(--shadow-deep);
}

.about-cta__title {
	color: var(--color-paper);
	font-family: var(--font-sans);
	font-size: var(--size-title-lg);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.about-cta__text {
	max-width: 520px;
	color: var(--color-paper);
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
	opacity: 0.6;
}

.about-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	margin-top: var(--space-s);
}

.about-cta__button {
	padding: 0 var(--space-m);
}


/* Responsive
   ========================================================================== */

@media (max-width: 1200px) {
	.about-intro {
		row-gap: var(--space-xl);
		margin-top: calc(var(--space-xl) + var(--space-l));
	}

	.about-intro__head {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-m);
	}

	/* Columns stack, hairlines between them. */
	.about-intro__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-intro__column {
		padding: var(--space-m) 0;
	}

	.about-intro__column + .about-intro__column {
		border-top: 1px solid var(--color-line);
		border-left: 0;
	}

}

@media (max-width: 810px) {
	.about-intro__story {
		font-size: 15px;
	}

	.about-intro__text,

	.about-cta {
		padding: var(--space-l) var(--space-m);
	}
}

@media (max-width: 478px) {
	.about-intro__actions {
		width: 100%;
	}

	.about-intro__button {
		width: 100%;
		height: 45px;
	}

	.about-intro {
		row-gap: var(--space-l);
		margin-top: var(--space-xxl);
	}

	.about-cta {
		padding: var(--space-l) var(--space-s);
	}

	.about-cta__actions {
		width: 100%;
	}

	.about-cta__button {
		width: 100%;
		height: 45px;
	}
}