/**
 * Section styles. Built out section by section from the Figma design.
 */

/* ==========================================================================
   Header / primary navigation
   ========================================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--z-header);
	transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.site-header.is-stuck {
	background-color: rgba(0, 23, 57, 0.92);
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

@media (max-width: 900px) {
	/* The frame's bar: rgba(0,20,59,0.75) at 50% opacity = 0.375 effective.
	   A little blur keeps the logo legible over the busy photo. */
	.site-header.is-stuck {
		background-color: rgba(0, 20, 59, 0.375);
		backdrop-filter: blur(6px);
		box-shadow: none;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: var(--header-h);
}

.site-header__logo {
	position: relative;
	z-index: 2; /* above the mobile menu overlay, which is a sibling */
	flex: 0 0 auto;
	color: var(--c-white);
	font-size: var(--fs-h4);
	font-weight: var(--fw-heavy);
}

.site-header__logo img {
	width: auto;
	height: 45px; /* 200x45 desktop, 230x51 mobile */
}

@media (max-width: 900px) {
	.site-header__inner {
		/* The frame's bar is 150px with the logo at y=55-106. A 150px fixed
		   header would eat a fifth of a phone screen, so this matches the
		   logo's own band instead. */
		min-height: 106px;
	}

	.nav-toggle {
		width: 46px; /* 46.11 in the frame */
	}

	.site-header__logo img {
		height: clamp(38px, 12vw, 51px);
	}
}

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(var(--sp-2), 1.6vw, var(--sp-4));
	list-style: none;
}

.primary-nav__list a {
	position: relative;
	display: inline-block;
	padding: var(--sp-1) 10px;
	color: var(--c-white);
	font-size: var(--fs-nav);
	font-weight: var(--fw-book);
	letter-spacing: -0.02em;
	line-height: 1.3;
	white-space: nowrap;
}

.primary-nav__list a::after {
	content: "";
	position: absolute;
	inset: auto 10px 0;
	height: 2px;
	background: var(--c-cyan);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

.primary-nav__list a:hover::after,
.primary-nav__list .is-active a::after,
.primary-nav__list .current-menu-item a::after {
	transform: scaleX(1);
}

.primary-nav__list a:hover,
.primary-nav__list .is-active a {
	color: var(--c-cyan);
}

/* ---- Mobile toggle ---- */

.nav-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	position: absolute;
	left: 50%;
	width: 26px;
	height: 2px;
	background: var(--c-white);
	transform: translateX(-50%);
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle__bar {
	top: 50%;
	margin-top: -1px;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	left: 0;
	transform: none;
}

.nav-toggle__bar::before { top: -8px; }
.nav-toggle__bar::after  { top: 8px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
	transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
	transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 900px) {
	.nav-toggle {
		display: block;
		position: relative;
		z-index: 2; /* above the overlay, so the X stays clickable */
	}

	/* Full-screen overlay, per "menu 1 Mobile" (#121:1947). Its own photo plus
	   two scrims: #121:1971 over the left 73.8%, and #121:1972 from 15.3% down.
	   Both are gradients, so only the photo ships as an asset. */
	.primary-nav {
		position: fixed;
		inset: 0;
		z-index: 1; /* below the logo and toggle, which are siblings */
		display: grid;
		place-items: start center;
		padding-top: 23.6dvh; /* the list starts at y=179 of 758 */
		background-color: var(--c-navy);
		background-image:
			linear-gradient(180deg,
				rgba(0, 23, 57, 0) 0%,
				rgba(0, 23, 57, 0.31) 20%,
				rgba(0, 23, 57, 0.61) 40%,
				rgba(0, 23, 57, 0.85) 60%,
				rgba(0, 23, 57, 0.84) 100%),
			/* #121:1971. In the frame it is a rectangle over the left 73.8%,
			   which would cut a hard vertical line, so it runs full width. */
			linear-gradient(180deg, rgba(5, 35, 89, 0) 0%, rgba(1, 24, 58, 0.85) 55%),
			url("../img/mobile/menu-bg.webp");
		background-position: left bottom, left top, center center;
		background-size: 100% 84.7%, 100% 100%, cover;
		background-repeat: no-repeat;
		visibility: hidden;
		opacity: 0;
		transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
	}

	.primary-nav.is-open {
		visibility: visible;
		opacity: 1;
	}

	.primary-nav__list {
		flex-direction: column;
		align-items: center;
		gap: 32px;
		padding: 0;
	}

	.primary-nav__list a {
		padding: 0;
		/* 36px Light, title-cased in the frame ("About Us"). capitalize leaves
		   existing capitals alone, so SUP-001 is untouched. */
		font-size: clamp(1.875rem, 8.6vw, 2.25rem);
		font-weight: var(--fw-light);
		line-height: 1.17;
		letter-spacing: 0;
		text-align: center;
		text-transform: capitalize;
	}

	.primary-nav__list a::after {
		display: none;
	}

	/* The overlay carries the hero image, so the bar itself stays clear. */
	.site-header.is-nav-open,
	.site-header.is-nav-open.is-stuck {
		background-color: transparent;
		backdrop-filter: none;
		box-shadow: none;
	}
}

/* ==========================================================================
   Hero band - the photo, the hero text and the About card
   All three are one 1440x1045 composition in the design.
   ========================================================================== */

.hero-band {
	position: relative;
	background-color: var(--c-navy);
	background-image: url("../img/hero-bg.png");
	background-image: image-set(
		url("../img/hero-bg.webp") type("image/webp"),
		url("../img/hero-bg.png") type("image/png")
	);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	/* The frame runs the photo 123px past the About card, then leaves 27px to
	   the next heading. Both halves are now the standard section pair instead,
	   so this gap is the same 170px as every other strip's (client QA
	   2026-09-08 #3) - the photo just ends a little higher. */
	padding-bottom: var(--section-y);
	isolation: isolate;
}

/* Veil #5:51 - starts 42.3% down (y=442 of 1045), never over the top of the photo. */
.hero-band::after {
	content: "";
	position: absolute;
	inset: 42.3% 0 0;
	z-index: -1;
	background: var(--g-hero-veil);
	pointer-events: none;
}

.section--hero {
	display: block;
	min-height: 0;
	/* Hero text starts at y=277 in the design. */
	padding-top: clamp(8rem, 19.24vw, 277px);
	padding-bottom: 0;
}

.hero__text {
	max-width: 53rem; /* 834px in the design */
}

.hero__kicker {
	margin-bottom: 26px; /* y=43 -> y=69 */
	color: var(--c-orange);
	font-size: var(--fs-kicker);
	font-weight: var(--fw-light);
	line-height: 1.19;
	letter-spacing: -0.02em;
}

.hero__heading-narrow {
	display: none;
}

.hero__heading {
	margin-bottom: 39px; /* y=189 -> y=228 */
	color: var(--c-white);
	font-size: var(--fs-hero);
	font-weight: var(--fw-book);
	line-height: var(--lh-hero);
}

@media (max-width: 900px) {
	/* The mobile frame has its own page gradient (#121:2855): four stops, not
	   three, peaking at 62% instead of 29%. That peak lands on Pipeline, which
	   is why the frame is bright blue there where the desktop ramp is long back
	   to navy. Stops remapped onto this band's Background -> Contact range. */
	.page-band {
		--g-page: linear-gradient(180deg,
			#001739 0%,
			#01477D 37.6%,
			#0162A4 56.3%,
			#001739 94.9%);
	}
}

@media (max-width: 900px) {
	/* The mobile frame has its own hero photo (#121:2853, 421x646 portrait) plus
	   a horizontal scrim (#121:2866) that darkens the left so the text reads
	   while the aggregates stay visible on the right. The scrim is a gradient,
	   so it is rebuilt in CSS rather than shipped as an image. */
	.hero-band {
		background-image:
			/* The frame's page gradient starts at 115.4vw and is opaque navy
			   there, hiding the photo's tail. Without it the photo shows
			   unveiled from 117vw to 152vw as a bright band. */
			linear-gradient(180deg, transparent 0 117.1vw, #01183A 117.1vw),
			linear-gradient(90deg,
				rgba(0, 24, 58, 0.85) 0%,
				rgba(0, 24, 58, 0.85) 30%,
				rgba(0, 24, 58, 0.77) 50%,
				rgba(0, 26, 70, 0.46) 70%,
				rgba(0, 26, 75, 0.23) 85%,
				rgba(0, 26, 75, 0) 100%),
			url("../img/mobile/hero-bg.webp");
		background-position: left top, left top, center top;
		background-size: 100% 100%, 100% 130.6vw, 100% auto;
		background-repeat: no-repeat, no-repeat, no-repeat;
		padding-bottom: var(--sp-5);
	}

	/* Veil sits over the photo only (y=81.79, h=413.84 of the 645.52 photo). */
	.hero-band::after {
		inset: 19.3vw 0 auto 0;
		height: 97.8vw;
	}

	.section--hero {
		/* The frame starts the hero text at y=237 of its 421 canvas (56.3vw).
		   It sat too close to the About card, so the text moves up by the same
		   amount the card's leading gap gains below - the card itself does not
		   move (client QA 2026-09-08, mobile #5). */
		padding-top: calc(56.3vw - var(--section-y));
	}

	.hero__text {
		max-width: none;
	}

	.hero__kicker {
		/* 28px / 1.23em in the frame, not the desktop ramp. */
		margin-bottom: 15px;
		font-size: clamp(1.5rem, 7.4vw, 1.75rem);
		line-height: 1.23;
	}

	.hero__heading {
		margin-bottom: 22px;
		/* 36px over the frame's 361px measure. Tied to the measure rather than
		   to the viewport: the gutter has a 30px floor, so on a narrower phone
		   a plain vw ramp left the type proportionally larger than the design
		   and pushed the designed lines into wrapping. */
		font-size: min(2.25rem, calc((100vw - 2 * var(--gutter)) / 10.03));
		line-height: 1.17;
		/* The headline's breaks come from the field's own newlines (see
		   section-hero.php), so nothing here may re-balance them; this only
		   keeps a long line from being split at the "Amyloid-Driven" hyphen. */
		text-wrap: normal;
		hyphens: manual;
	}

	.hero__heading-wide {
		display: none;
	}

	.hero__heading-narrow {
		display: inline;
	}
}

/* ==========================================================================
   Page band - the gradient behind everything below the hero (#5:50)
   ========================================================================== */

.page-band {
	position: relative;
	background-image: var(--g-page);
	isolation: isolate;
	overflow-x: clip; /* vertical stays visible so the bottom photo can bleed */
}

/* Hero22 2 (#5:57) - the second photo, page y 4247-5299. It ends 238px below
   the Contact block, so it hangs off the band's bottom edge and the footer sits
   over it with no background of its own. */
.page-band::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/* Ends on the page's last pixel, as in the design - reaching any further
	   would extend the scrollable area and leave dead space below the footer. */
	bottom: calc(-1 * var(--footer-h));
	z-index: -2;
	aspect-ratio: 1442 / 1052;
	background-image: url("../img/footer-bg.png");
	background-image: image-set(
		url("../img/footer-bg.webp") type("image/webp"),
		url("../img/footer-bg.png") type("image/png")
	);
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	/* The export has a hard alpha step at 20% - fully clear above, fully opaque
	   below - which rules a line across the page. It only shows on wide screens,
	   where the photo is tall enough to push that edge up into Team. Feather it. */
	-webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 34%);
	mask-image: linear-gradient(180deg, transparent 20%, #000 34%);
	pointer-events: none;
}

/* Dividers #5:53 and #5:52.
   Each is a translucent blue that fades IN downward and then stops square. That
   hard bottom edge is the section separator: the tint is darker than the page
   gradient beneath it, so brightness jumps back up the moment it ends.
   Both are anchored to the HEADING of the section they precede - the design
   places them 56px and 69px above it - so they cannot drift when a section's
   height changes. z-index -2 keeps them under the side crops, as in Figma. */
.section--sup001::after,
.section--pipeline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: -2;
	height: 315px;
	pointer-events: none;
}

/* Both bands stop a fixed distance above their heading, as in the frame:
   #5:53 ends at y=2025 against a 2081 heading, #5:52 at 3207 against 3276.
   Anchored to the heading rather than to the previous section's last element -
   sitting the edge on that element put the colour step through the bottom of
   the indication card, where the frame has it clear of the card in the gap. */
.section--sup001::after {
	bottom: calc(100% - var(--section-y-top) + 56px);
	background: var(--g-divider-1);
}

.section--pipeline::after {
	bottom: calc(100% - var(--section-y-top) + 69px);
	background: var(--g-divider-2);
}

.section--pipeline {
	position: relative;
}

/* ---- Decorative side images (#5:54-56) ----
   Aggregate crops that bleed off the page edges and deliberately straddle
   section boundaries, so each is anchored to the section it starts in. */

.section--background,
.section--sup001 {
	position: relative;
}

.section--background::before,
.section--sup001::before {
	content: "";
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

/* The crops are exported as rendered nodes, so their own alpha carries the
   falloff - no CSS feathering needed. */
.section--background::before {
}

.section--sup001::before {
}

/* #5:56 - right edge, starting 188px into the Background section. */
.section--background::before {
	top: 18%;
	right: 0;
	width: 32.6vw;
	aspect-ratio: 470 / 1156;
	background-image: url("../img/side-right.png");
	background-image: image-set(
		url("../img/side-right.webp") type("image/webp"),
		url("../img/side-right.png") type("image/png")
	);
	background-position: right top;
}

/* #5:55 - left edge, starting 177px into the SUP-001 section. */
.section--sup001::before {
	top: 17%;
	left: 0;
	width: 34.2vw;
	aspect-ratio: 493 / 1311;
	background-image: url("../img/side-left-a.png");
	background-image: image-set(
		url("../img/side-left-a.webp") type("image/webp"),
		url("../img/side-left-a.png") type("image/png")
	);
	background-position: left top;
}

/* ---- About: one rounded card over the tail of the hero photo ---- */

.section--about {
	/* Card top lands at y=678, i.e. 119px below the hero text. */
	padding-top: clamp(3rem, 8.26vw, 119px);
	padding-bottom: 0;
}

.about-card {
	display: grid;
	grid-template-columns: 544fr 502fr; /* the design's two columns */
	gap: clamp(var(--sp-3), 4.2vw, 51px);
	align-items: center;
	padding: clamp(var(--sp-4), 4.25vw, 51px) clamp(var(--sp-3), 4.8vw, 58px);
	border-radius: var(--radius);
	background: var(--g-card);
}

.about-card__lead {
	margin: 0;
	color: var(--c-white);
	font-size: var(--fs-h4);
	font-weight: var(--fw-light);
	line-height: 1.2;
	text-wrap: pretty;
}

.about-card__brand {
	color: var(--c-cyan);
	font-weight: var(--fw-heavy);
}

.about-card__body {
	color: var(--c-white);
	font-size: var(--fs-body);
	font-weight: var(--fw-light);
	line-height: 1.273; /* 28/22 */
}

@media (max-width: 900px) {
	/* The hero text is the previous "section"; the card repeats the same
	   leading gap every other strip uses (client QA 2026-09-08, mobile #5). */
	.section--about {
		padding-top: calc(var(--section-y) + var(--section-y-top));
	}

	/* Mobile stacks and centres, with the design's tighter 45px/15px padding. */
	.about-card {
		grid-template-columns: 1fr;
		gap: 15px;
		padding: 45px 15px;
		text-align: center;
		background: var(--g-card-mobile);
	}

	.about-card__lead {
		font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.625rem); /* 26px */
		line-height: 1.15;
	}

	.about-card__body {
		line-height: 1.17;
	}
}

/* ==========================================================================
   Shared section head - cyan title over a lighter subtitle (ts3 / ts4)
   ========================================================================== */

.section-head {
	margin-bottom: 20px;
	text-align: center;
}

.section-head__title {
	margin: 0;
	color: var(--c-cyan);
	font-size: var(--fs-display);
	font-weight: var(--fw-book);
	line-height: 1.273; /* 70/55 */
}

.section-head__sub {
	margin: 0;
	color: var(--c-white);
	font-size: var(--fs-h3);
	font-weight: var(--fw-light);
	line-height: 1.389; /* 50/36 */
}

.section-intro {
	max-width: 1129px; /* the design's narrower measure */
	margin: 0 auto clamp(var(--sp-4), 3.1vw, 45px);
	color: var(--c-white);
	font-size: var(--fs-label);
	font-weight: var(--fw-light);
	line-height: 1.167; /* 28/24 */
	text-align: center;
}

/* ==========================================================================
   Background
   ========================================================================== */

/* ---- Four-step process diagram ---- */

.flow {
	/* Step pitch is 301.37px and the visible hexagon is 204px wide, so the gap
	   is 97.37px - leaving ~27px either side of the 42.87px chevron. */
	--flow-gap: clamp(10px, 6.76vw, 97px);
	--arrow-w: clamp(10px, 2.98vw, 43px);

	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--flow-gap);
	margin: 0 0 clamp(var(--sp-4), 3.8vw, 55px);
	padding: 0;
	list-style: none;
}

.flow__step {
	position: relative;
	flex: 1 1 0;
	max-width: 204px;
	aspect-ratio: 204 / 175;
	display: grid;
	place-items: center;
	/* Labels size against the hexagon, not the viewport - that is what keeps
	   them inside the shape at every width. */
	container-type: inline-size;
}

/* The hexagon: one SVG, tinted per step. */
.flow__step::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--step-color);
	-webkit-mask: url("../img/shape-hex.svg") center / contain no-repeat;
	mask: url("../img/shape-hex.svg") center / contain no-repeat;
	transition: filter var(--dur) var(--ease);
}

.flow__step {
	transition: transform var(--dur) var(--ease);
}

/* Only where hover is a real input - avoids a stuck state on touch.
   The hexagon lightens and picks up a soft halo: brightness alone does nothing
   to the white end state in SUP-001, and drop-shadow follows the mask's alpha,
   so the halo hugs the hexagon rather than its image box. */
@media (hover: hover) {
	.flow__step:hover::before {
		filter: brightness(1.16) drop-shadow(0 4px 16px rgba(255, 255, 255, 0.28));
	}

	.flow__step:hover {
		transform: translateY(-3px);
	}
}

/* The chevron, sitting in the gap and inheriting the step's colour. */
.flow__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	width: var(--arrow-w);
	aspect-ratio: 43 / 86;
	margin-left: calc((var(--flow-gap) - var(--arrow-w)) / 2);
	transform: translateY(-50%);
	background-color: var(--step-color);
	-webkit-mask: url("../img/shape-arrow.svg") center / contain no-repeat;
	mask: url("../img/shape-arrow.svg") center / contain no-repeat;
}

.flow__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0; /* the design's label starts at the icon's lower edge */
	padding-inline: 9%;
	text-align: center;
}

.flow__icon {
	width: max(20px, 36cqw); /* 74px in a 204px hexagon */
	height: auto;
}

.flow__label {
	color: var(--step-text, var(--c-white));
	/* 24px at the 204px desktop hexagon, 11px at the mobile one - both are the
	   design's own values, so one expression covers both breakpoints. */
	font-size: max(10px, 11.76cqw);
	font-weight: var(--fw-book);
	line-height: 1.04;
	text-wrap: balance;
}


/* ---- "First indication" media card ---- */

.indication {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 597fr) minmax(0, 599fr);
	border-radius: var(--radius);
	overflow: hidden;
	background-color: #013361;
	isolation: isolate;
}

.indication__media {
	grid-area: 1 / 1 / 2 / 2;
}

.indication__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.indication::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--g-indication);
	pointer-events: none;
}

.indication__body {
	position: relative;
	z-index: 1;
	grid-area: 1 / 2 / 2 / 3;
	align-self: center;
	padding: clamp(var(--sp-3), 2.6vw, 38px) clamp(var(--sp-3), 2.6vw, 38px)
		clamp(var(--sp-3), 2.6vw, 38px) clamp(var(--sp-3), 3.5vw, 51px);
}

.indication__title {
	margin: 0 0 15px;
	color: var(--c-orange);
	font-size: var(--fs-h4);
	font-weight: var(--fw-book);
	line-height: 1.133; /* 34/30 */
}

.indication__text {
	color: var(--c-white);
	font-size: var(--fs-body);
	font-weight: var(--fw-light);
	line-height: 1.273;
}

.indication__text p {
	margin-bottom: 10px;
}

@media (max-width: 900px) {
	/* Hexagons are only ~60-70px wide here, so the desktop gap leaves the
	   labels no room. Tighten the gap and the inner padding to give the
	   longest word ("dysfunction") somewhere to sit. */
	.flow {
		/* The design's proportions: gap ~47% of the hexagon, chevron ~44% of
		   the gap. My earlier tightening left the chevron too small for the X
		   to sit over without hiding it completely. Now narrower again, but
		   only enough to widen the hexagons: at 9vw the longest labels
		   ("dysfunction", "aggregates") ran past the shape on a 375-402px
		   phone (client QA 2026-09-08, mobile #7). The chevron keeps its
		   width, so the X still has something to sit on. */
		--flow-gap: clamp(10px, 6.5vw, 97px);
		--arrow-w: clamp(10px, 4vw, 43px);
	}

	.flow__inner {
		padding-inline: 4%;
	}

	.flow__label {
		/* The desktop ratio (11.76cqw) bottoms out on a ~60px hexagon, so the
		   10px floor took over and the label stopped scaling with the shape.
		   14cqw keeps it tied to the hexagon at these sizes; the floor is only
		   a legibility backstop for the narrowest phones. */
		font-size: max(8px, 14cqw);
	}

	/* Card stacks: image on top, text below, matching the mobile frame. */
	.indication {
		grid-template-columns: 1fr;
	}

	.indication__media {
		grid-area: auto;
		aspect-ratio: 361 / 262;
	}

	.indication__body {
		grid-area: auto;
		padding: var(--sp-4) var(--sp-3);
		text-align: center;
	}

	.indication__title {
		margin-bottom: var(--sp-3);
	}

	/* The mobile frame runs these two paragraphs in the opposite order to
	   desktop ("With no approved therapies..." first). Visual order only -
	   the DOM order, and so the reading order, is unchanged. */
	.indication__text {
		display: flex;
		flex-direction: column-reverse;
	}

	.indication__text p {
		margin: 0 0 var(--sp-3);
	}

	.indication__text p:first-child {
		margin-bottom: 0;
	}

	/* The frame stacks a plain image over a solid panel here - no scrim over the
	   photo, and a darker card than the desktop one. */
	.indication::after {
		display: none;
	}

	.indication {
		background-color: #022547;
	}
}

/* ==========================================================================
   SUP-001
   ========================================================================== */

.sup001__statement {
	max-width: 1200px;
	margin: 0 auto clamp(var(--sp-4), 3.5vw, 50px);
	color: var(--c-white);
	font-size: var(--fs-h4);
	font-weight: var(--fw-light);
	line-height: 1.2; /* 36/30 */
	text-align: center;
	text-wrap: balance;
}

.sup001__statement strong {
	display: block;
	font-weight: var(--fw-heavy);
}

/* The accents hang off the third hexagon, so no wrapper geometry is needed. */
.flow-wrap {
	position: relative;
}

/* The X: 54x52 drawn content in the design, against a 42.87px chevron, sitting
   in the same gap. Anchored to the step so it tracks the chevron at any width. */
.flow__overlay {
	--overlay-w: calc(var(--arrow-w) * 1.26);

	position: absolute;
	top: 50%;
	left: 100%;
	z-index: 2;
	width: var(--overlay-w);
	height: auto;
	margin-left: calc((var(--flow-gap) - var(--overlay-w)) / 2);
	transform: translateY(-50%);
}

/* SUP-001 badge, centred under its hexagon (161.41 wide against a 204 hex). */
.flow__badge {
	position: absolute;
	top: calc(100% + 7%);
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6cqw;
	width: 79%;
	transform: translateX(-50%);
	color: var(--c-cyan);
	font-size: max(11px, 11.76cqw);
	font-weight: var(--fw-heavy);
	line-height: 1;
	text-align: center;
}

.flow__badge-icon {
	width: 26%;
	aspect-ratio: 42 / 43;
	background-color: #022547; /* the stroke colour in the design */
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

/* The badge hangs below the row, so the section needs room for it - but that
   is the only spacing needed here; Publications supplies the 46px after it. */
.section--sup001 .flow {
	margin-bottom: clamp(var(--sp-4), 6vw, 90px);
}

.section--sup001 {
	/* The badge hangs into the flow's own bottom margin, so this is genuinely
	   the whole trailing space - the same one every other strip has. */
	padding-bottom: var(--section-y);
}

@media (max-width: 900px) {
	/* Both accents are in the mobile frame too, at its own sizes:
	   X 29.4px (7vw) and badge 55.66px (13.2vw) with an 11px label. */
	/* Sized off the chevron, as on desktop, so the chevron's tips stay visible
	   above and below the X instead of being swallowed by it. */
	.flow__overlay {
		--overlay-w: calc(var(--arrow-w) * 1.26);
	}

	/* The third step is the frame's dark navy. Painted on the hexagon and its
	   chevron rather than through --step-color, which the step carries as an
	   inline style and so always won (client QA 2026-09-08, mobile #4). The
	   chevron takes it too: at #004487 it sat on a #01477D gradient at ~1.3:1
	   and simply vanished behind the X. */
	.flow--solution .flow__step:nth-child(3)::before,
	.flow--solution .flow__step:nth-child(3)::after {
		background-color: #022547;
	}

	.flow__badge {
		/* The frame tucks the T right under the hexagon's lower edge - 3px, not
		   the 10px this used to sit at (client QA, mobile). */
		top: calc(100% + 3px);
		width: 13.2vw;
		gap: 4px; /* 3.91 between the icon and the label in the frame */
		/* White here, cyan on desktop. */
		color: var(--c-white);
		font-size: 11px;
	}

	/* 14.35 of the 55.66 badge = 26%, but never so small the stem disappears.
	   White here: #022547 reads on the desktop's bright band, not on this one.
	   The desktop T is a 42x43 glyph with 2px strokes; at this size those fall
	   below a pixel and the mark reads as a hairline, so the frame's own
	   heavier 20%-stroke T is masked in instead. */
	.flow__badge-icon {
		width: max(12px, 26%);
		background-color: var(--c-white);
		-webkit-mask-image: url("../img/icon-sup001-mobile.svg");
		mask-image: url("../img/icon-sup001-mobile.svg");
	}

	.section--sup001 .flow {
		margin-bottom: clamp(var(--sp-4), 9vw, 38px);
	}
}

/* ==========================================================================
   Publications
   ========================================================================== */

/* This head is 36px over 30px, both white - not the 55px cyan pair. */
.section-head--plain .section-head__title {
	color: var(--c-white);
	font-size: var(--fs-h3);
	line-height: 1.389;
}

.section-head--plain .section-head__sub {
	font-size: var(--fs-h4);
	line-height: 1.667; /* 50/30 */
}

/* Was a bespoke 46px, which is what made this gap read shorter than the rest. */
.section--publications {
	padding-top: var(--section-y-top);
}

.papers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(var(--sp-3), 4.13vw, 59.4px); /* 59.4px in the design */
	margin: clamp(var(--sp-4), 3.2vw, 46px) 0 0;
	padding: 0;
	list-style: none;
}

.paper {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 316px;
	padding: 0 51px 29px 36px;
	border-radius: var(--radius);
	background: linear-gradient(180deg, #0088F5 0%, #022547 100%);
}

/* Notched into the top edge: square at the top, rounded below. */
.paper__type {
	align-self: flex-start;
	margin-bottom: 22px;
	padding: 8px 12px;
	border-radius: 0 0 8px 8px;
	background-color: #031139;
	color: #D9D9D9;
	font-size: var(--fs-nav);
	font-weight: var(--fw-book);
	line-height: 1.3;
}

.paper__date {
	margin: 0 0 10px;
	color: #022547;
	font-size: 1rem;
	font-weight: var(--fw-light);
	line-height: 1.3;
}

.paper__title {
	margin: 0;
	color: var(--c-white);
	font-size: var(--fs-body);
	font-weight: var(--fw-book);
	line-height: 1.182; /* 26/22 */
}

/* Pinned to the bottom so cards of unequal title length still line up. */
.paper__author {
	margin: var(--sp-3) 0 0;
	padding-top: var(--sp-2);
	color: rgba(255, 255, 255, 0.5);
	font-size: 1rem;
	font-weight: var(--fw-light);
	line-height: 1.25;
	margin-block-start: auto;
}

.paper__author a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.paper__author a:hover,
.paper__author a:focus-visible {
	color: var(--c-white);
}

/* Cards are the grid/carousel item's full height either way. */
.papers > li,
.papers-carousel .swiper-slide {
	display: flex;
}

.papers > li > .paper,
.papers-carousel .paper {
	width: 100%;
}

/* ---- Carousel (only rendered when there are more than three papers) ---- */

.papers-carousel {
	position: relative;
	/* Room for the arrows outside the cards, at both breakpoints. */
	margin-top: clamp(var(--sp-4), 3.2vw, 46px);
	padding-inline: clamp(40px, 4.4vw, 64px);
}

.papers-carousel .swiper {
	overflow: hidden;
}

.papers-carousel .swiper-slide {
	height: auto; /* let cards match the tallest, as the grid does */
}

.papers-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: clamp(28px, 2.6vw, 36px);
	aspect-ratio: 43 / 86;
	padding: 0;
	transform: translateY(-50%);
	background-color: var(--c-cyan);
	/* Reuses the design's own chevron rather than inventing an arrow. */
	-webkit-mask: url("../img/shape-arrow.svg") center / contain no-repeat;
	mask: url("../img/shape-arrow.svg") center / contain no-repeat;
	transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.papers-nav--prev {
	left: 0;
	scale: -1 1;
}

.papers-nav--next {
	right: 0;
}

.papers-nav:hover,
.papers-nav:focus-visible {
	background-color: var(--c-white);
}

.papers-nav.swiper-button-disabled {
	opacity: 0.3;
	pointer-events: none;
}

@media (max-width: 900px) {
	/* The frame insets the cards well past the gutter: 288.79 wide on a 421
	   canvas, so 66px of margin either side. With the 30px gutter above, this
	   width reproduces that exactly (client QA 2026-09-08, mobile #1). */
	.papers {
		grid-template-columns: 1fr;
		max-width: 289px;
		margin-inline: auto;
	}

	.paper {
		min-height: 0;
		padding: 0 var(--sp-3) var(--sp-4);
	}

	.papers-carousel .paper {
		min-height: 0;
		padding: 0 var(--sp-3) var(--sp-4);
	}
}

/* ==========================================================================
   Pipeline

   Stays a real table at every width. Only three things change on narrow
   screens: the column widths, where the bar starts, and which label shows.
   No display overrides - those are what broke the table's own layout.
   ========================================================================== */

.pipeline {
	position: relative;
	margin-top: clamp(var(--sp-4), 4.2vw, 61px);
	border-radius: var(--radius);
	background: linear-gradient(90deg, rgba(0, 16, 40, 0.65) 27%, rgba(2, 37, 71, 0.65) 100%);
	overflow: hidden;
}

/* Column rules, painted behind the rows because the bars span every column
   and a colspan would erase cell borders. Positions computed in the template. */
.pipeline::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--rules);
	pointer-events: none;
}

.pipeline__table {
	position: relative;
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.pipeline__col-program { width: var(--program-w); }
.pipeline__col-stage   { width: var(--w); }

/* Desktop shows three stages; "Ph 1/2" is mobile-only, and its column is
   emitted at zero width so the table still has one column per header cell. */
.pipeline__table th.is-narrow-only {
	display: none;
}

.pipeline__table th,
.pipeline__table td {
	padding: 0;
	text-align: left;
	vertical-align: middle;
}

.pipeline__table thead th {
	height: 77px; /* the design puts the rule at y=77 */
	padding-inline: var(--sp-2);
	border-bottom: 1px solid var(--c-rule);
	color: var(--c-cyan);
	font-size: var(--fs-label);
	font-weight: var(--fw-heavy);
	text-align: center;
	white-space: nowrap;
}

.pipeline__table thead th:first-child {
	padding-left: 5.67%; /* 68px of 1199 */
	text-align: left;
}

.pipeline__narrow {
	display: none;
}

.pipeline__table tbody td {
	padding-block: 11px;
}

/* Spacer rows, not padding on the first and last cells: the indication label is
   centred on its row box, so a padded cell drags its label off the bar. */
.pipeline__table .pipeline__gap td {
	height: var(--sp-3);
	padding: 0;
}

.pipeline__table .pipeline__gap--bottom td {
	height: clamp(var(--sp-3), 3vw, 38px);
}

/* The bar. Its cell spans the whole table, so the offset and width are what
   position it - on wide screens it begins at the stage columns. */
.pipeline__bar {
	display: block;
	min-height: 41px;
	margin-left: var(--program-w);
	width: var(--w-wide, 0%);
}

/* The arrow is clipped on this layer rather than on the bar itself: clip-path
   clips descendants too, so clipping the bar also cut away the label, which
   sits outside it in the first column. */
.pipeline__bar::before {
	content: "";
	display: block;
	min-height: inherit;
	background: linear-gradient(90deg, #BE4419 0%, #EF7A33 100%);
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

/* On wide screens the label sits in the first column, to the left of the bar. */
.pipeline__label {
	position: absolute;
	top: 50%;
	left: 5.67%;
	transform: translateY(-50%);
	max-width: calc(var(--program-w) - 8%);
	color: var(--c-white);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-light);
	line-height: 1.712; /* 44.5/26 */
}

.pipeline__table tbody tr {
	position: relative;
}

@media (max-width: 900px) {
	/* Equal columns, the programme name as the first heading, and the bar
	   starting at the table's left edge with its label sitting on it. */
	.pipeline__col-program,
	.pipeline__col-stage {
		width: var(--narrow-w);
	}

	.pipeline__table th.is-narrow-only {
		display: table-cell;
	}

	.pipeline::before {
		background-image: var(--rules-narrow);
	}

	.pipeline__wide {
		display: none;
	}

	.pipeline__narrow {
		display: inline;
	}

	.pipeline__table thead th {
		height: 56px;
		padding-inline: 4px;
		/* One line each: "SUP-001" would otherwise break at its hyphen. */
		font-size: clamp(0.625rem, 3vw, 0.875rem);
		text-align: center;
	}

	.pipeline__table thead th:first-child {
		padding-left: 12px;
		color: var(--c-white);
	}

	/* The frame starts the bars straight under the rule here. */
	.pipeline__table .pipeline__gap--top td {
		height: 0;
	}

	.pipeline__table tbody td {
		padding-block: 16px;
	}

	/* Bar runs from the left edge, so it also covers the programme column -
	   convert the stage-relative percentage to a whole-table one. */
	.pipeline__bar {
		position: relative;
		display: flex;
		align-items: center;
		margin-left: 0;
		width: var(--w-narrow, 0%);
		min-height: 46px;
	}

	/* Here the label rides on the bar, so the shape layer stretches behind it. */
	.pipeline__bar::before {
		position: absolute;
		inset: 0;
		min-height: 0;
		clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
	}

	.pipeline__label {
		position: relative; /* above the shape layer */
		top: auto;
		left: auto;
		transform: none;
		max-width: none;
		padding: 6px 30px 6px 15px;
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.15;
		text-wrap: pretty;
	}
}

/* #5:54 - the last side crop, starting just above the Pipeline heading. */
.section--pipeline::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(var(--section-y-top) - 86px);
	left: 0;
	width: 42vw;
	aspect-ratio: 604 / 1057;
	background-image: url("../img/side-left-b.png");
	background-image: image-set(
		url("../img/side-left-b.webp") type("image/webp"),
		url("../img/side-left-b.png") type("image/png")
	);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

/* Mobile has its own crops at its own positions, so the desktop ones are
   replaced rather than rescaled. */
@media (max-width: 900px) {
	/* The frame's mobile heads: 40px over 30px, and 30px over 22px for the
	   plain variant - not the desktop 55/36 ramp scaled down. */
	.section-head__title {
		font-size: clamp(2rem, 9.5vw, 2.5rem);
		line-height: 1.15;
	}

	/* 22px Light is the mobile default (Pipeline, Background); SUP-001 is the
	   exception at 30px Roman, and Contact has its own 20px below. */
	.section-head__sub {
		/* Desktop gets its spacing from the title's line-height, since the two
		   are one text block there. On mobile they are separate nodes with a
		   15px gap - without it a wrapped title collides with the subtitle. */
		margin-top: 15px;
		font-size: clamp(1.125rem, 5.2vw, 1.375rem);
		font-weight: var(--fw-light);
		line-height: 1.17;
	}

	.section--sup001 .section-head__sub {
		font-size: clamp(1.5rem, 7.1vw, 1.875rem);
		font-weight: var(--fw-book);
	}

	.section-head--plain .section-head__title {
		font-size: clamp(1.5rem, 7.1vw, 1.875rem);
	}

	.section-head--plain .section-head__sub,
	.section-intro,
	.sup001__statement {
		font-size: clamp(1.125rem, 5.2vw, 1.375rem); /* 22px */
		line-height: 1.17;
	}
}

@media (max-width: 900px) {
	/* The mobile frame has no divider overlays - its background is one gradient
	   plus the crops - so the desktop dividers must go, or their hard bottom
	   edges show as colour steps between sections. */
	.section--sup001::after,
	.section--pipeline::after {
		display: none;
	}

	/* Mobile crops replace the desktop ones entirely: different assets, sides
	   and offsets. Each is placed relative to its section's heading. */
	.section--publications,
	.section--team {
		position: relative;
	}

	.section--background::before,
	.section--sup001::before,
	.section--publications::before,
	.section--pipeline::before,
	.section--team::before {
		content: "";
		position: absolute;
		z-index: -1;
		background-repeat: no-repeat;
		background-size: contain;
		-webkit-mask-image: none;
		mask-image: none;
		pointer-events: none;
	}

	.section--background::before {
		top: calc(var(--section-y) - 103.3vw);
		left: 0;
		right: auto;
		width: 86.5vw;
		aspect-ratio: 365.75 / 972.6;
		background-image: url("../img/mobile/side-about.webp");
		background-position: left top;
	}

	.section--sup001::before {
		top: calc(var(--section-y) - 84.1vw);
		left: auto;
		right: 0;
		width: 76.3vw;
		aspect-ratio: 322.62 / 564.58;
		background-image: url("../img/mobile/side-sup001.webp");
		background-position: right top;
	}

	.section--publications::before {
		top: calc(var(--section-y) - 93.2vw);
		left: 0;
		width: 99.8vw;
		aspect-ratio: 422 / 1446.41;
		background-image: url("../img/mobile/side-publications.webp");
		background-position: left top;
	}

	.section--pipeline::before {
		top: calc(var(--section-y) - 81.3vw);
		left: auto;
		right: 0;
		width: 77vw;
		aspect-ratio: 325.77 / 685.62;
		background-image: url("../img/mobile/side-pipeline.webp");
		background-position: right top;
	}

	.section--team::before {
		top: calc(var(--section-y) - 38.3vw);
		left: 0;
		width: 67.7vw;
		aspect-ratio: 286.39 / 501.18;
		background-image: url("../img/mobile/side-team.webp");
		background-position: left top;
	}
}


/* ==========================================================================
   Team
   ========================================================================== */

.team {
	max-width: 1030px; /* the design's block, inset 85px in the 1200 container */
	margin-inline: auto;
}

.team__lead,
.team__row {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.team__lead {
	justify-content: center;
	margin-bottom: clamp(var(--sp-4), 4.1vw, 59px); /* 400 - 341 in the design */
}

/* Four across at a 280px pitch: 4 x 190 + 3 x 90 = 1030. */
.team__row {
	grid-template-columns: repeat(var(--per-row, 4), 190px);
	justify-content: space-between;
	gap: 40px 90px;
}

.member {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 190px;
	gap: 24px;
	text-align: center;
}

/* The photos are hexagons in their alpha channel, so box-shadow would trace the
   rectangular image box and show at the transparent corners. drop-shadow follows
   the alpha, so the shadow hugs the hexagon. */
.member__photo {
	width: 190px;
	height: 162px;
	object-fit: cover;
	filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.25));
	transition: transform var(--dur) var(--ease);
}

/* Hover zooms the portrait. The photo is a hexagon in its own alpha, so scaling
   the element scales the shape with it - no crop frame to escape. */
@media (hover: hover) {
	.member:hover .member__photo {
		transform: scale(1.07);
	}
}

/* Logos vary in width but all sit on a 35px line, unless a member overrides it. */
.member__logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--logo-h, 35px);
}

/* Marks supplied in their brand colours, which the design shows in white. */
.member__logo-wrap--white .member__logo {
	filter: brightness(0) invert(1);
}

.member__logo {
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}

.member__text {
	/* Names and affiliations run wider than the 190px photo in the design, so
	   the block overhangs its card - but never past the container, which it
	   would do on a 320px screen at a flat 280px. */
	--text-w: min(280px, calc(100vw - var(--gutter) * 2));

	display: flex;
	flex-direction: column;
	gap: 5px;
	width: var(--text-w);
	margin-inline: calc((190px - var(--text-w)) / 2);
}

.member__name {
	margin: 0;
	color: var(--c-cyan);
	font-size: 1.0625rem; /* 17px */
	font-weight: var(--fw-heavy);
	line-height: 1.176;
}

.member__title {
	margin: 0;
	color: var(--c-white);
	font-size: 1.0625rem;
	font-weight: var(--fw-book);
	line-height: 1.176;
}

.member__desc {
	margin: 1em 0 0;
	color: var(--c-white);
	font-size: 1rem;
	font-weight: var(--fw-light);
	line-height: 1.25;
}

.member__linkedin {
	display: block;
	width: 41px;
	aspect-ratio: 1;
	margin-top: -8px; /* the 24px flex gap already supplies most of it */
	background-image: url("../img/team/icon-linkedin.svg");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.member__linkedin:hover,
.member__linkedin:focus-visible {
	opacity: 0.8;
	transform: translateY(-2px);
}

@media (max-width: 900px) {
	/* The frame gives the badge a darker circle here: #00113C, not #0077C3. */
	.member__linkedin {
		background-image: url("../img/team/icon-linkedin-mobile.svg");
	}

	.team__row {
		grid-template-columns: 190px;
		justify-content: center;
		gap: 48px;
	}

	.team__lead {
		margin-bottom: 48px;
	}
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact__sep {
	margin-inline: 0.15em;
}

@media (max-width: 900px) {
	/* 40px over 20px in the mobile frame, rather than the desktop 55/36 ramp. */
	.section--contact .section-head__title {
		font-size: clamp(2rem, 9.5vw, 2.5rem);
	}

	.section--contact .section-head__sub {
		font-size: clamp(1.125rem, 4.8vw, 1.25rem);
		line-height: 1.17;
	}
}

/* The whole "name | address" line is the mail link. z-index keeps it above the
   decorative crops that straddle this section, so the click always lands. */
.contact__link {
	position: relative;
	z-index: 1;
	display: inline-block;
	color: inherit;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.contact__link:hover,
.contact__link:focus-visible {
	color: var(--c-cyan);
}

.contact__link:hover .contact__email,
.contact__link:focus-visible .contact__email {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	position: relative;
	/* No background of its own - the bottom photo shows through from the band. */
	padding-block: var(--footer-pad) var(--footer-pad);
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3) var(--sp-4);
}

.site-footer__logo img {
	width: auto;
	height: 34px; /* 152x34 in the design */
}

.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 clamp(var(--sp-2), 1.7vw, 24px);
	list-style: none;
}

.footer-nav__list a {
	display: inline-block;
	padding: 12px 10px;
	color: var(--c-white);
	font-size: 1rem;
	font-weight: var(--fw-book);
	letter-spacing: -0.02em;
	line-height: 1.625;
	white-space: nowrap;
}

.footer-nav__list a:hover,
.footer-nav__list a:focus-visible {
	color: var(--c-cyan);
}

.site-footer__credit {
	margin: 0;
	color: var(--c-white);
	font-size: 1rem;
	font-weight: var(--fw-light);
}

.site-footer__credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
	color: var(--c-cyan);
}

@media (max-width: 900px) {
	/* The mobile frame stacks the footer: a large centred logo, then the menu
	   in three columns filled top-to-bottom, then the credit. */
	.site-footer {
		padding-block: var(--footer-narrow-pad-t) var(--footer-narrow-pad-b);
	}

	.site-footer__inner {
		flex-direction: column;
		gap: 25px;
		text-align: center;
	}

	.site-footer__logo img {
		width: min(225px, 54vw); /* 225 of the 420 canvas */
		height: auto;
	}

	.footer-nav {
		width: 100%;
	}

	.footer-nav__list {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(2, auto);
		justify-content: center;
		gap: 10px clamp(var(--sp-2), 5vw, 34px);
	}

	.footer-nav__list a {
		padding: 4px 0;
	}

	/* The frame drops Home here - the logo and the header menu both cover it.
	   Targeted by link rather than position so a reordered menu still works. */
	.footer-nav__list li:has(a[href="#home"]) {
		display: none;
	}

	.site-footer__credit {
		margin-top: 6px;
	}

	/* The mobile frame has its own bottom photo - a 423x612 portrait crop
	   (#121:2863), not the desktop's 1442x1052 landscape one. It runs from
	   130px above the Contact block to the page's bottom edge, so it stays on
	   the band (where it sits behind the content) and bleeds down by exactly
	   the stacked footer's height. */
	.page-band::before {
		bottom: calc(-1 * var(--footer-narrow-h));
		aspect-ratio: 423 / 612;
		/* The mobile crop fades on its own. */
		-webkit-mask-image: none;
		mask-image: none;
		background-image: url("../img/footer-bg-mobile.png");
		background-image: image-set(
			url("../img/footer-bg-mobile.webp") type("image/webp"),
			url("../img/footer-bg-mobile.png") type("image/png")
		);
	}
}