/* ==========================================================================
   About page (page-about.php)
   1. Hero: typographic, light, with the facts ribbon
   2. The mark, its labels and leader lines
   3. How we work
   4. Founders
   5. Where we’ve worked
   6. Motion: the mark drawing itself, and the how-we-work stagger

   The logo strip, support band and closing CTA are shared: logos.css,
   support.css and closing.css. All motion for this page lives in section 6.
   ========================================================================== */

/* 1. Hero
   Light surface, no image and no keyhole: the headline is the centrepiece.
   ========================================================================== */

.about-hero {
	padding-top: var(--space-8);
	padding-bottom: var(--space-section);
	background-color: var(--surface);
}

/* Breadcrumb: eyebrow style, with a slash between crumbs. The light version
   of the landing pages' breadcrumb. */
.about-hero .breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-muted);
	list-style: none;
}

.about-hero .breadcrumb__item + .breadcrumb__item::before {
	content: "/" / "";
	margin-inline: var(--space-2);
}

.about-hero .breadcrumb a {
	color: var(--brand-blue);
	text-decoration: underline;
	text-decoration-color: var(--border-subtle);
	text-underline-offset: 0.3em;
}

.about-hero .breadcrumb a:hover {
	text-decoration-color: var(--accent-yellow);
}

/* Eyebrow with a thin yellow rule under it. */
.about-hero__eyebrow {
	margin-top: var(--space-7);
}

.about-hero__eyebrow::after {
	content: "";
	display: block;
	width: var(--space-7);
	height: 2px;
	margin-top: var(--space-3);
	background-color: var(--accent-yellow);
}

/* Larger than the h1 elsewhere: about 36px on phones, 96px at 1440px, so it
   spans most of the content width. Sized so "MARKETING" still fits 375px. */
.about-hero__title {
	margin-top: var(--space-5);
	font-size: clamp(2.25rem, 0.9rem + 5.6vw, 6rem);
	color: var(--brand-blue);
}

.about-hero__text {
	max-width: var(--measure);
	margin-top: var(--space-6);
	font-size: var(--text-lg);
	line-height: var(--leading-body);
}

.about-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-6);
	margin-top: var(--space-6);
}

/* The default hover (white) would vanish on the white hero, so darken to brand blue. */
.about-hero .button--primary:hover {
	color: var(--on-blue);
	background-color: var(--brand-blue-700);
}

/* As on the landing pages: a text link with a yellow underline. */
.about-hero__link {
	font-weight: var(--weight-semibold);
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.about-hero__link:hover {
	color: var(--brand-blue);
	text-decoration-color: var(--brand-blue);
}

/* Facts ribbon: the shared .stat, recoloured for a light background.
   Brand-blue numerals (yellow text fails contrast on white) with a short
   yellow underline. Two by two on phones and tablets, four across from 64em. */
.about-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6) var(--space-5);
	margin-top: var(--space-8);
}

.about-facts .stat {
	border-top-color: var(--border-subtle);
}

.about-facts .stat__number {
	color: var(--brand-blue);
}

.about-facts .stat__number::after {
	content: "";
	display: block;
	width: var(--space-6);
	height: 3px;
	margin-top: var(--space-3);
	background-color: var(--accent-yellow);
}

.about-facts .stat__label {
	font-weight: var(--weight-semibold);
}

@media (min-width: 64em) {
	.about-facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-6);
		margin-top: var(--space-9);
	}
}

/* 2. The mark
   Phones: the mark, then its two labels as a list. From 45em: the labels sit
   to the right of the mark on leader lines, on a fixed 608 x 382 figure (the
   leader lines' grid). Desktop (75em): the figure beside the heading and text.
   ========================================================================== */

.about-mark-section {
	padding-block: var(--space-section);
	background-color: var(--surface-100);
}

.about-mark-section__inner {
	display: grid;
	gap: var(--space-8);
}

.about-mark {
	position: relative;
	color: var(--brand-blue);
}

.about-mark__svg {
	width: 100%;
	max-width: 20rem;
	height: auto;
}

/* Scaled around its own centre when it opens (section 6). */
.about-mark .dh-mark__keyhole {
	transform-box: fill-box;
	transform-origin: center;
}

.about-mark__leaders {
	display: none;
}

.about-mark__labels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-6);
}

.about-mark__label {
	padding-top: var(--space-3);
	border-top: 1px solid var(--brand-blue);
}

.about-mark__term {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: 0.08em;
	color: var(--brand-blue);
}

.about-mark__meaning {
	display: block;
	margin-top: var(--space-1);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	color: var(--ink);
}

.about-mark-section__title {
	color: var(--brand-blue);
}

.about-mark-section__text {
	max-width: var(--measure);
	margin-top: var(--space-5);
	font-size: var(--text-lg);
}

@media (min-width: 45em) {
	.about-mark {
		width: 38rem;
		height: 23.875rem;
	}

	.about-mark__svg {
		max-width: none;
		width: 26.25rem;
	}

	.about-mark__leaders {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		overflow: visible;
		pointer-events: none;
	}

	.about-mark__casing,
	.about-mark__line {
		fill: none;
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
	}

	/* Pale casing so the line still reads where it crosses the blue bubble. */
	.about-mark__casing {
		stroke: var(--surface);
		stroke-width: 4;
	}

	.about-mark__line {
		stroke: var(--brand-blue);
		stroke-width: 1.25;
	}

	.about-mark__dot {
		fill: var(--brand-blue);
		stroke: var(--surface);
		stroke-width: 2;
	}

	/* Each label starts just past its line's end, level with it. */
	.about-mark__labels {
		display: block;
		margin: 0;
	}

	.about-mark__label {
		position: absolute;
		left: 27.75rem;
		width: max-content;
		padding-top: 0;
		border-top: 0;
		translate: 0 -50%;
	}

	.about-mark__label--keyhole {
		top: 8.625rem;
	}

	.about-mark__label--bubble {
		top: 19.0625rem;
	}
}

@media (min-width: 75em) {
	.about-mark-section__inner {
		/* The figure plus the longer label (it ends about 651px in), then at
		   least 96px before the heading. */
		grid-template-columns: 42rem minmax(0, 1fr);
		align-items: center;
		gap: var(--space-9);
	}
}

/* 3. How we work
   Three rows between hairlines: numeral, title, sentence. No cards, icons or
   hover fills. Phones: the title and sentence stacked beside the numeral.
   ========================================================================== */

.about-steps-section {
	padding-block: var(--space-section);
	background-color: var(--surface);
}

.about-steps-section__title {
	color: var(--brand-blue);
}

.about-steps {
	margin-top: var(--space-7);
	border-top: 1px solid var(--border-subtle);
}

.about-steps__item {
	display: grid;
	grid-template-columns: var(--space-9) minmax(0, 1fr);
	column-gap: var(--space-4);
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--border-subtle);
}

.about-steps__number {
	grid-row: span 2;
	font-size: var(--text-4xl);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-tight);
	color: var(--brand-blue);
}

.about-steps__title {
	font-size: var(--text-xl);
}

.about-steps__text {
	max-width: var(--measure);
	margin-top: var(--space-2);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
}

@media (min-width: 64em) {
	.about-steps__item {
		grid-template-columns: var(--space-10) minmax(0, 5fr) minmax(0, 6fr);
		align-items: baseline;
		column-gap: var(--space-6);
		padding-block: var(--space-7);
	}

	.about-steps__number {
		grid-row: auto;
	}

	.about-steps__title {
		font-size: var(--text-2xl);
	}

	.about-steps__text {
		margin-top: 0;
	}
}

/* 4. Founders
   Portraits bottom-aligned in 4:5 surface-100 panels. Two columns from 48em.
   ========================================================================== */

.about-founders {
	padding-block: var(--space-section);
	background-color: var(--surface);
	border-top: 1px solid var(--border-subtle);
}

.about-founders__title {
	color: var(--brand-blue);
}

.about-founders__list {
	display: grid;
	gap: var(--space-8);
	margin-top: var(--space-7);
}

.about-founder__portrait {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--surface-100);
	border-radius: var(--radius-md);
}

.about-founder__portrait img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
}

.about-founder__name {
	margin-top: var(--space-5);
	font-size: var(--text-2xl);
}

.about-founder__role {
	margin-top: var(--space-1);
	font-weight: var(--weight-semibold);
	color: var(--brand-blue);
}

.about-founder__bio {
	max-width: var(--measure);
	margin-top: var(--space-4);
}

.about-founder__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-5);
	font-weight: var(--weight-semibold);
	text-decoration-color: var(--accent-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.about-founder__link:hover {
	text-decoration-color: currentColor;
}

.about-founder__external {
	flex-shrink: 0;
	width: 0.875em;
	height: 0.875em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (min-width: 48em) {
	.about-founders__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-7);
	}
}

@media (min-width: 64em) {
	.about-founders__list {
		gap: var(--space-9);
	}
}

/* 5. Where we’ve worked
   The countries set large in extrabold caps, wrapping naturally, with a small
   yellow dot after each (decorative). The dot belongs to the name before it,
   so a wrapped line never starts with one.
   ========================================================================== */

.about-countries {
	padding-block: var(--space-section);
	background-color: var(--surface-100);
}

.about-countries__title {
	color: var(--brand-blue);
}

.about-countries__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) 0;
	margin-top: var(--space-7);
}

.about-countries__item {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-3xl);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-snug);
	white-space: nowrap;
}

.about-countries__dot {
	display: inline-block;
	width: 0.25em;
	height: 0.25em;
	margin-inline: 0.45em;
	background-color: var(--accent-yellow);
	border-radius: 50%;
}

/* 6. Motion
   The mark, once, when 40% in view. The head script in inc/about.php adds
   .has-mark-motion to <html> before anything renders, which holds the start
   state from the first paint (no flash of the finished mark).
   assets/js/about-mark.js then arms the bubble's stroke (.is-armed, once its
   length is measured) and adds .is-playing. One easing; about 2.4s in all:
     0 to 900ms      the bubble outline draws on
     900 to 1300ms   the bubble fills, the outline fades
     1300 to 1800ms  the keyhole cut-out opens from its centre
     1800 to 2050ms  the leader lines draw on
     2050 and 2200ms each label fades and rises 8px
   Transform, opacity and stroke-dashoffset only. Without JavaScript, or with
   reduced motion, the flag is never set and the finished mark shows.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.about-mark {
		--ease-mark: cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	/* Start state, from the first paint. The bubble is hidden until its stroke
	   is armed with the measured length. */
	.has-mark-motion .about-mark .dh-mark__bubble {
		fill-opacity: 0;
	}

	.has-mark-motion .about-mark.is-armed .dh-mark__bubble {
		stroke: currentColor;
		stroke-width: 3;
		stroke-dasharray: var(--bubble-length);
		stroke-dashoffset: var(--bubble-length);
	}

	.has-mark-motion .about-mark .dh-mark__keyhole {
		transform: scale(0);
	}

	.has-mark-motion .about-mark .about-mark__casing,
	.has-mark-motion .about-mark .about-mark__line {
		stroke-dashoffset: 1;
	}

	.has-mark-motion .about-mark .about-mark__dot {
		opacity: 0;
	}

	.has-mark-motion .about-mark .about-mark__label {
		opacity: 0;
		transform: translateY(0.5rem);
	}

	/* Playing: back to the finished state, step by step. */
	.has-mark-motion .about-mark.is-playing .dh-mark__bubble {
		fill-opacity: 1;
		stroke-opacity: 0;
		stroke-dashoffset: 0;
		transition:
			stroke-dashoffset 900ms var(--ease-mark),
			fill-opacity 400ms var(--ease-mark) 900ms,
			stroke-opacity 400ms var(--ease-mark) 900ms;
	}

	.has-mark-motion .about-mark.is-playing .dh-mark__keyhole {
		transform: scale(1);
		transition: transform 500ms var(--ease-mark) 1300ms;
	}

	.has-mark-motion .about-mark.is-playing .about-mark__casing,
	.has-mark-motion .about-mark.is-playing .about-mark__line {
		stroke-dashoffset: 0;
		transition: stroke-dashoffset 250ms var(--ease-mark) 1800ms;
	}

	.has-mark-motion .about-mark.is-playing .about-mark__dot {
		opacity: 1;
		transition: opacity 250ms var(--ease-mark) 1800ms;
	}

	.has-mark-motion .about-mark.is-playing .about-mark__label {
		opacity: 1;
		transform: none;
		transition:
			opacity 250ms var(--ease-mark) 2050ms,
			transform 250ms var(--ease-mark) 2050ms;
	}

	.has-mark-motion .about-mark.is-playing .about-mark__label--bubble {
		transition-delay: 2200ms;
	}

	/* How we work: the rows rise in a short stagger with the section reveal
	   (motion.js), 90ms apart, in reading order. */
	.reveal .about-steps__item {
		opacity: 0;
		transform: translateY(0.5rem);
		transition:
			opacity 0.4s ease-out,
			transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(0.1s + var(--i, 0) * 90ms);
	}

	.reveal.is-revealed .about-steps__item {
		opacity: 1;
		transform: none;
	}
}