/* ==========================================================================
   SECTIONS  -  per-section composition
   --------------------------------------------------------------------------
   One block per section, in narrative order. Each block only contains what is
   unique to that section; anything reused twice belongs in components.css.

   Naming: .section--{slug} for the frame, .{slug}__{element} for children.
   ========================================================================== */

/* ==========================================================================
   SECTION 01  -  HERO / INTRODUCTION            (navy)
   ========================================================================== */

.section--hero {
	position: relative;
	background-color: var(--color-navy);
}

/* Warm glow behind the visual plus a faint gold grid wash, matching the
   atmosphere of reference 01. Both are painted, not imaged - no extra request
   and nothing to go blurry on a high-density screen. */
.section--hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	background:
		radial-gradient(60% 55% at 78% 42%, rgba(69, 183, 232, 0.16), transparent 70%),
		radial-gradient(45% 40% at 12% 22%, rgba(37, 82, 143, 0.22), transparent 70%);
	pointer-events: none;
}

.hero {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
	width: 100%;
}

.hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

/* Headline ---------------------------------------------------------------- */

.hero__title {
	display: flex;
	flex-direction: column;
	gap: 0.05em;
	margin: 0;
	line-height: 0.95;
}

.hero__line {
	display: block;
	text-transform: uppercase;
}

.hero__line--sm {
	font-size: var(--text-2xl);
	font-weight: var(--weight-medium);
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.82);
}

.hero__line--lg {
	font-size: var(--text-5xl);
	font-weight: var(--weight-black);
	letter-spacing: -0.015em;
}

.hero__subtitle {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-medium);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.hero__intro {
	max-width: 34rem;
	font-size: var(--text-base);
	color: var(--ink-muted);
}

.hero__intro strong {
	color: var(--color-white);
	font-weight: var(--weight-semi);
}

.hero__actions {
	margin-top: var(--space-2xs);
}

/* Visual ------------------------------------------------------------------ */

.hero__visual {
	position: relative;
	min-width: 0;
}

.hero__image {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.hero__image-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	aspect-ratio: 3 / 2;
	padding: var(--space-lg);
	border: 1px dashed var(--hairline);
	border-radius: var(--radius-lg);
	color: var(--ink-muted);
	font-size: var(--text-sm);
	text-align: center;
}

/* The hero is the one section that reads better with the copy given more room
   than the visual, so it does not use the shared split grid. */
@media (min-width: 1024px) {
	.hero {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: var(--space-2xl);
	}

	.hero__visual {
		/* Let the composition bleed slightly past the content column, as the
		   reference does, without ever creating a horizontal scrollbar. */
		margin-right: calc(var(--gutter) * -0.5);
	}
}

/* ==========================================================================
   SECTION 02  -  WHO WE ARE                     (light)
   ========================================================================== */

.section--about {
	background-color: var(--color-white);
}

/* Warm gold wash rising from the lower left, as in the reference. */
.section--about::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	background:
		radial-gradient(46% 40% at 4% 92%, rgba(69, 183, 232, 0.2), transparent 72%),
		radial-gradient(40% 34% at 96% 8%, rgba(69, 183, 232, 0.07), transparent 70%);
	pointer-events: none;
}

.about {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
	width: 100%;
}

.about__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

.about__title {
	font-size: var(--text-4xl);
	font-weight: var(--weight-black);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	color: var(--color-text);
}

.about__subtitle {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--color-text);
}

.about__intro {
	max-width: 34rem;
	color: var(--ink-muted);
}

/* Visual ------------------------------------------------------------------ */

.about__visual {
	position: relative;
	min-width: 0;
}

/* The leaf cut: both deep corners sit on the left edge, opening space for
   the badges that overlap there. */
.about__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3.4;
	border-radius: clamp(2.5rem, 8vw, 7rem) var(--radius-md) var(--radius-md) clamp(2.5rem, 8vw, 7rem);
	background-color: var(--color-light-alt);
	box-shadow: var(--shadow-lg);
}

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

.about__image-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	height: 100%;
	padding: var(--space-lg);
	color: var(--color-text-light);
	font-size: var(--text-sm);
	text-align: center;
}

/* Badges ------------------------------------------------------------------
   Below the desktop breakpoint they form a plain row under the photograph.
   Floating them over a narrow image would cover the faces in it.
   -------------------------------------------------------------------------- */

.about__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

/* Decoration -------------------------------------------------------------- */

.about__hexes,
.about__dots {
	display: none;
}

@media (min-width: 1024px) {
	.about {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-2xl);
	}

	/* Badges ring the photograph. */
	.about__badges {
		position: absolute;
		inset: 0;
		display: block;
		margin-top: 0;
		pointer-events: none;
	}

	.about__badges .hex-badge {
		position: absolute;
		pointer-events: auto;
	}

	.about__badges .hex-badge:nth-child(1) { top: -4%;  left: -8%; }
	.about__badges .hex-badge:nth-child(2) { top: 52%;  left: -13%; }
	.about__badges .hex-badge:nth-child(3) { top: 74%;  left: 26%; }

	.about__hexes {
		display: block;
		position: absolute;
		top: 10%;
		left: -13%;
		width: clamp(2.5rem, 4vw, 3.75rem);
		height: auto;
		color: var(--color-sky);
		opacity: 0.45;
	}

	/* Dotted grid, painted rather than imaged. */
	.about__dots {
		display: block;
		position: absolute;
		bottom: -4%;
		left: -6%;
		width: 6rem;
		height: 4rem;
		background-image: radial-gradient(var(--color-sky) 1.5px, transparent 1.5px);
		background-size: 12px 12px;
		opacity: 0.5;
	}
}

/* On very wide screens the photo would otherwise outgrow the copy beside it. */
@media (min-width: 1440px) {
	.about__media {
		max-width: 40rem;
		margin-left: auto;
	}
}

/* ==========================================================================
   SECTION 03  -  WHAT WE DO                     (light)
   ========================================================================== */

.section--services {
	background-color: var(--color-white);
}

/* Gold wash from the lower left, carried over from section 02 so the two
   light screens read as one stretch of the story. */
.section--services::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	background: radial-gradient(42% 38% at 2% 88%, rgba(69, 183, 232, 0.18), transparent 72%);
	pointer-events: none;
}

.services {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
	width: 100%;
}

.services__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

.services__title {
	font-size: var(--text-3xl);
	font-weight: var(--weight-black);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	color: var(--color-text);
}

.services__lead {
	color: var(--ink-muted);
}

.services__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
}

/* Visual ------------------------------------------------------------------ */

.services__visual {
	position: relative;
	padding: clamp(var(--space-sm), 2.5vw, var(--space-lg));
	border-radius: var(--radius-lg);
	background:
		linear-gradient(135deg, rgba(59, 125, 216, 0.09), rgba(124, 92, 214, 0.07) 55%, rgba(69, 183, 232, 0.08));
}

.services__image {
	width: 100%;
	height: auto;
	max-height: clamp(10rem, 24vh, 17rem);
	object-fit: contain;
	border-radius: var(--radius-sm);
}

.services__image-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	aspect-ratio: 2.6 / 1;
	color: var(--color-text-light);
	font-size: var(--text-sm);
	text-align: center;
}

/* Floating chips: decoration, desktop only. */
.services__floats {
	display: none;
}

.services__float {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: var(--radius-pill);
	background-color: var(--color-white);
	color: var(--accent, var(--color-sky));
	box-shadow: var(--shadow-md);
}

/* Card grid --------------------------------------------------------------- */

.services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-sm);
}

@media (min-width: 1024px) {
	/* The copy column is deliberately narrow: the cards are the substance of
	   this screen, and the reference gives them roughly two thirds of it. */
	.services {
		grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
		gap: var(--space-2xl);
	}

	.services__floats {
		display: block;
	}

	.services__float {
		position: absolute;
	}

	.services__float:nth-child(1) { top: -6%;  left: 26%; }
	.services__float:nth-child(2) { top: 34%;  left: -5%; }
	.services__float:nth-child(3) { top: 44%;  right: -4%; }
	.services__float:nth-child(4) { bottom: -8%; right: 22%; }
}

/* ==========================================================================
   SECTION 04  -  HOW WE HELP                    (light, navy closing band)
   ========================================================================== */

.section--growth {
	background-color: var(--color-light);

	/* The closing band is flush with the foot of the section and supplies its
	   own padding, so the section keeps none of its own down there. */
	padding-bottom: 0;
}

.growth {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
	width: 100%;
}

.growth__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

.growth__title {
	font-size: var(--text-3xl);
	font-weight: var(--weight-black);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	color: var(--color-text);
}

.growth__lead {
	max-width: 32rem;
	color: var(--ink-muted);
}

.growth__figure {
	overflow: hidden;
	border-radius: var(--radius-md);
}

.growth__image {
	width: 100%;
	height: auto;
	max-height: 16rem;
	object-fit: cover;
}

.growth__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Process wheel
   Laid out as card / ring / card. On mobile the same markup stacks into a
   vertical stepper with no repositioning.
   -------------------------------------------------------------------------- */

.process {
	display: grid;
	gap: var(--space-sm);
	justify-items: center;
}

.process__ring {
	position: relative;
	width: min(100%, clamp(17rem, 80vw, 25rem));
	aspect-ratio: 1;
}

.process__wheel {
	width: 100%;
	height: 100%;
}

.process__arc--navy { fill: var(--color-navy); }
.process__arc--gold { fill: var(--color-sky); }

.process__centre {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3xs);
	/* The inner circle is 60% of the box; the text block stays inside it with a
	   margin, because a circle offers far less height at its edges than a
	   rectangle would. */
	width: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.process__centre-icon {
	color: var(--color-sky);
	line-height: 0;
}

/*
 * A circle offers far less height at its edges than a box does, so the centre
 * has a tight budget. On small screens the icon gives way - it is decorative,
 * and the same glyph appears on step 04 - which buys the statement the room it
 * needs to stay clear of the arcs.
 */
@media (max-width: 639px) {
	.process__centre-icon {
		display: none;
	}
}

.process__centre-title {
	font-family: var(--font-display);
	font-size: clamp(0.8125rem, 1.15vw, 1.0625rem);
	font-weight: var(--weight-bold);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--color-text);
	text-wrap: balance;
}

.process__centre-text {
	font-size: clamp(0.5625rem, 0.72vw, 0.6875rem);
	line-height: 1.3;
	color: var(--color-text-light);
	text-wrap: balance;
}

/* Step cards -------------------------------------------------------------- */

.process__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	width: 100%;
	padding: var(--space-sm);
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	box-shadow: var(--shadow-md);
}

.process__step-badge {
	margin-bottom: var(--space-3xs);
}

.process__step-number {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-black);
	line-height: 1;
	color: var(--color-sky);
}

.process__step-title {
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-text);
}

.process__step-text {
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-text-light);
}

/* Mobile stepper: a hairline runs between the cards so the four read as a
   sequence rather than a pile. */
@media (max-width: 1023px) {
	.process__step + .process__step::before {
		content: '';
		position: absolute;
		top: calc(var(--space-sm) * -1);
		left: 50%;
		width: 2px;
		height: var(--space-sm);
		background-color: var(--color-sky);
		opacity: 0.5;
	}
}

/* --------------------------------------------------------------------------
   Closing band
   -------------------------------------------------------------------------- */

/* Section 05 is navy too, and at --color-navy this band was the identical
   hex - so the two ran together into one field of navy with the quote
   stranded at the top of it, reading as section 05's opening line rather than
   section 04's closing one. The raised navy is one tonal step lighter, which
   is enough to draw the edge, and the hairline states it outright. */
.growth-quote {
	position: relative;
	overflow: hidden;
	margin-top: var(--space-xl);
	padding-block: var(--space-md);
	border-bottom: 1px solid var(--color-navy-line);
	background-color: var(--color-navy-soft);
	color: var(--color-white);
}

.growth-quote__inner {
	position: relative;
	z-index: var(--z-content);
}

.growth-quote__text {
	display: flex;
	flex-direction: column;
	max-width: 30rem;
	padding-left: var(--space-sm);
	border-left: 3px solid var(--color-sky);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	line-height: 1.35;
}

.growth-quote__wave {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(8rem, 22vw, 18rem);
	height: auto;
	color: var(--color-sky);
	opacity: 0.28;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.section--growth {
		flex-direction: column;
		align-items: stretch;
	}

	.section--growth > .section__inner {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.growth {
		grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
		gap: var(--space-2xl);
		align-items: start;
	}

	/* The photograph bleeds off the left edge and is cut on a diagonal, as the
	   reference has it. The section clips its overflow, so nothing escapes. */
	.growth__figure {
		margin-left: calc((var(--gutter) + 2rem) * -1);
		border-radius: 0;
		clip-path: polygon(0 0, 100% 14%, 100% 100%, 0 100%);
	}

	.growth__image {
		max-height: 18rem;
	}

	.process {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: var(--space-sm);
		align-items: center;
	}

	.process__ring {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: clamp(16rem, 25vw, 26rem);
	}

	.process__step--1 { grid-column: 1; grid-row: 1; }
	.process__step--2 { grid-column: 3; grid-row: 1; }
	.process__step--3 { grid-column: 3; grid-row: 2; }
	.process__step--4 { grid-column: 1; grid-row: 2; }

	/* Badges sit on the edge facing the wheel and overlap it slightly. */
	.process__step-badge {
		position: absolute;
		top: var(--space-sm);
		margin-bottom: 0;
	}

	.process__step--1 .process__step-badge,
	.process__step--4 .process__step-badge {
		right: calc(var(--space-md) * -1);
	}

	.process__step--2 .process__step-badge,
	.process__step--3 .process__step-badge {
		left: calc(var(--space-md) * -1);
	}

	/* Keep the copy clear of the badge that overlaps its edge. */
	.process__step--1,
	.process__step--4 { padding-right: var(--space-lg); }

	.process__step--2,
	.process__step--3 { padding-left: var(--space-lg); }

	.growth-quote {
		padding-block: var(--space-lg);
	}

	.growth-quote__text {
		font-size: var(--text-xl);
	}
}

/* ==========================================================================
   SECTION 05  -  OUR WORK                       (navy)
   ========================================================================== */

.section--portfolio {
	background-color: var(--color-navy);
}

.section--portfolio::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	background:
		radial-gradient(50% 45% at 82% 22%, rgba(37, 82, 143, 0.26), transparent 72%),
		radial-gradient(38% 34% at 6% 88%, rgba(69, 183, 232, 0.12), transparent 74%);
	pointer-events: none;
}

.portfolio {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
	width: 100%;
}

.portfolio__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

/* Sentence case here, unlike sections 02-04 - the reference softens the tone
   for the work itself. */
/* Sized to the column, not to the scale. The reference breaks this headline
   over two lines - "Ideas We Turn Into" / "Digital Experiences" - and at the
   3xl step the second line needs 447px against the 424px the copy column has,
   so it dropped to three with the accent starting mid-line. */
.portfolio__title {
	font-size: clamp(1.875rem, 2.9vw, 2.625rem);
	font-weight: var(--weight-bold);
	letter-spacing: -0.02em;
}

.portfolio__lead {
	max-width: 30rem;
	color: var(--ink-muted);
}



.portfolio__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Showcase
   -------------------------------------------------------------------------- */

.portfolio__stage {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.portfolio__panel {
	overflow: hidden;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	background-color: var(--surface);
	box-shadow: var(--shadow-lg);
}

/*
 * Only once JavaScript is running does the stack become a single-panel tab
 * view. Without it, every project stays on the page as a readable list.
 */
.js .portfolio__panel:not(.is-active) {
	display: none;
}

.portfolio__panel:focus-visible {
	outline: 2px solid var(--color-sky);
	outline-offset: 3px;
}

.portfolio__media {
	position: relative;
	background-color: rgba(255, 255, 255, 0.03);
}

.portfolio__image {
	width: 100%;
	height: auto;
	max-height: clamp(12rem, 34vh, 24rem);
	object-fit: cover;
	object-position: top center;
}

.portfolio__media-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	aspect-ratio: 16 / 7;
	max-height: clamp(12rem, 34vh, 24rem);
	color: var(--ink-muted);
	font-size: var(--text-sm);
	text-align: center;
}

.portfolio__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	border-top: 1px solid var(--hairline);
}

.portfolio__meta-icon {
	background-color: rgba(69, 183, 232, 0.12);
	color: var(--color-sky);
}

.portfolio__meta-body {
	flex: 1;
	min-width: 12rem;
}

.portfolio__name {
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
}

.portfolio__category {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-sky);
}

.portfolio__services {
	font-size: var(--text-sm);
	color: var(--ink-muted);
}

.portfolio__link {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Thumbnail carousel
   -------------------------------------------------------------------------- */

.portfolio__carousel {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}

.portfolio__step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	color: var(--ink);
	transition:
		border-color var(--transition-fast),
		color var(--transition-fast),
		transform var(--transition-fast);
}

.portfolio__step:hover {
	border-color: var(--color-sky);
	color: var(--color-sky);
	transform: scale(1.06);
}

/* One arrow glyph, flipped for the previous control. */
.portfolio__step[data-project-step='prev'] svg {
	transform: rotate(180deg);
}

/* The strip scrolls horizontally when the projects outnumber the space, which
   is the natural behaviour on a phone. */
.portfolio__thumbs {
	display: flex;
	gap: var(--space-2xs);
	flex: 1;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.portfolio__thumbs::-webkit-scrollbar {
	display: none;
}

.portfolio__thumb-item {
	flex: 0 0 auto;
	scroll-snap-align: center;
}

.portfolio__thumb {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	width: clamp(6.5rem, 12vw, 9.5rem);
	text-align: center;
}

.portfolio__thumb-media {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	background-color: var(--surface);
	transition:
		border-color var(--transition-fast),
		transform var(--transition-fast);
}

.portfolio__thumb-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portfolio__thumb-placeholder {
	color: var(--ink-muted);
}

.portfolio__thumb-label {
	font-size: var(--text-xs);
	line-height: 1.3;
	color: var(--ink-muted);
	transition: color var(--transition-fast);
}

.portfolio__thumb:hover .portfolio__thumb-media {
	border-color: rgba(69, 183, 232, 0.5);
	transform: translateY(-2px);
}

.portfolio__thumb.is-active .portfolio__thumb-media {
	border-color: var(--color-sky);
}

.portfolio__thumb.is-active .portfolio__thumb-label {
	color: var(--ink);
	font-weight: var(--weight-semi);
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.portfolio {
		grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
		gap: var(--space-2xl);
	}

	.portfolio__thumbs {
		overflow-x: visible;
	}

	.portfolio__thumb-item {
		flex: 1 1 0;
		min-width: 0;
	}

	.portfolio__thumb {
		width: 100%;
	}
}

/* ==========================================================================
   SECTION 06  -  INDUSTRIES                     (light + navy panel)
   --------------------------------------------------------------------------
   The one split section. Mobile stacks it: a navy card of copy above a light
   card grid. Desktop turns that card into a full-height navy panel bled to the
   left edge of the viewport and cut on a diagonal that points into the grid.
   ========================================================================== */

/* The dotted world map behind the card grid. A masked dot pattern rather than
   an image - it costs nothing and recolours with the ink token. */
.section--industries::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	background-image: radial-gradient(circle, rgba(27, 42, 58, 0.16) 1.2px, transparent 1.2px);
	background-size: 14px 14px;
	-webkit-mask-image: radial-gradient(46% 40% at 64% 10%, #000 0%, transparent 72%);
	mask-image: radial-gradient(46% 40% at 64% 10%, #000 0%, transparent 72%);
	pointer-events: none;
}

.industries {
	display: grid;
	gap: var(--space-xl);
	width: 100%;
}

/* --------------------------------------------------------------------------
   Navy panel
   Carries data-theme="dark" in the markup, so every token inside it - ink,
   surface, hairline - is already inverted. Nothing here needs a colour of its
   own beyond the ground itself.
   -------------------------------------------------------------------------- */

.industries__panel {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-md);
	min-width: 0;
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	background-color: var(--color-navy);
	color: var(--ink);
}

.industries__title {
	font-size: var(--text-3xl);
	font-weight: var(--weight-black);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	max-width: 14ch;
}

.industries__lead {
	max-width: 34ch;
	color: var(--ink-muted);
}

/* Approach card ------------------------------------------------------------ */

.industries__approach {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-md);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background-color: var(--surface);
}

.industries__approach-head {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.industries__approach-title {
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
}

.industries__approach-title::after {
	content: '';
	display: block;
	width: 3rem;
	height: 2px;
	margin-top: var(--space-2xs);
	background-color: var(--color-sky);
}

/* The reference sets the approach copy as separate short lines, not as a
   paragraph, so each line gets its own row. */
.industries__approach-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	font-size: var(--text-sm);
	color: var(--ink-muted);
}

/* Skyline and network decoration - desktop only, where the panel is tall
   enough to carry it without crowding the copy. */
.industries__decor {
	display: none;
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

.industries__main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-md);
	min-width: 0;
}

.industries__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-sm);
}

.industries__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	height: 100%;
	padding: var(--space-sm);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background-color: var(--surface);
	box-shadow: var(--shadow-sm);
	transition:
		transform var(--transition-normal),
		border-color var(--transition-normal),
		box-shadow var(--transition-normal);
}

@media (hover: hover) {
	.industries__card:hover {
		transform: translateY(-4px);
		border-color: var(--color-sky);
		box-shadow: var(--shadow-md);
	}
}

.industries__card-title {
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	line-height: 1.3;
}

.industries__card-rule {
	display: block;
	width: 2.25rem;
	height: 2px;
	background-color: var(--color-sky);
}

.industries__card-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	/* A wide strip while the cards are full-width. At one card per row a 16:10
	   crop is nearly as tall as the rest of the card put together, which reads
	   as an empty block and pushes the description off the screen. */
	aspect-ratio: 2.4 / 1;
	margin-top: var(--space-3xs);
	border-radius: var(--radius-xs);
	background-color: var(--color-light-alt);
	color: var(--ink-muted);
}

.industries__card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.industries__card-text {
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Closing banner
   -------------------------------------------------------------------------- */

.industries__banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	background-color: var(--surface);
	box-shadow: var(--shadow-md);
}

.industries__banner-body {
	flex: 1;
	min-width: 14rem;
}

.industries__banner-title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
}

.industries__banner-text {
	font-size: var(--text-sm);
	color: var(--ink-muted);
}

.industries__banner-cta {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Card counts.
   Two, then four - never three. Eight industries divide evenly into both, and
   a three-across grid would leave the last row two-thirds empty.
   -------------------------------------------------------------------------- */

@media (min-width: 480px) {
	.industries__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Reserve two lines so the accent rule and the image below it line up across a
	   row whether the name wraps or not. Only once cards sit side by side - in a
	   single column there is nothing to align to and it would just be a gap. */
	.industries__card-title {
		min-height: calc(2 * 1.3em);
	}

	/* Narrower cards can carry the reference's crop without dominating. */
	.industries__card-media {
		aspect-ratio: 16 / 10;
	}
}

/* Still stacked here, so the grid has the full width to itself and can reach
   the reference's four across well before the split arrives. */
@media (min-width: 900px) {
	.industries__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Desktop: the split.
   Held back to 1280 on purpose. Narrower than that, the panel would take a
   third of the width and squeeze the grid back down to two columns, doubling
   the section's height - stacked and four across is the shorter, calmer read.
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
	/* Stretch the content column to the full section box so the panel can be
	   measured against it - .section is a centring flex container by default. */
	.section--industries .section__inner {
		align-self: stretch;
	}

	/* The grid column split, and the gap, are what decide whether the two rows
	   of cards plus the banner clear one screen. At 0.36/0.64 the cards were
	   173px wide, which wrapped every description to four and five lines and
	   pushed the banner under the fixed scroll cue. 0.35/0.65 buys the cards
	   the width the reference gives them. */
	.industries {
		grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
		gap: var(--space-xl);
		align-items: stretch;
		height: 100%;
	}

	.industries__panel {
		padding: 0 var(--space-xl) 0 0;
		border-radius: 0;
		background-color: transparent;

		/* The panel is flush with the section's content box, so bleeding it back
		   to the section edges is exactly the section's own padding - the same
		   max() the frame uses, never a guessed value. */
		--panel-bleed-top: max(var(--section-padding-y), calc(var(--header-height) + var(--space-lg)));
		--panel-bleed-bottom: max(var(--section-padding-y), calc(var(--cue-height) + var(--space-lg)));
	}

	/* The navy ground: left to the viewport edge, top and bottom to the section
	   edges, and cut on the diagonal from the reference. Contained by the
	   section's own overflow: clip, so none of it reaches the scrollbar. */
	.industries__panel::before {
		content: '';
		position: absolute;
		z-index: -1;
		top: calc(var(--panel-bleed-top) * -1);
		right: 0;
		bottom: calc(var(--panel-bleed-bottom) * -1);
		left: -100vw;
		background-color: var(--color-navy);
		clip-path: polygon(
			0 0,
			calc(100% - 4rem) 0,
			100% 38%,
			calc(100% - 4.5rem) 74%,
			calc(100% - 4.5rem) 100%,
			0 100%
		);
	}

	.industries__decor {
		display: block;
		position: absolute;
		z-index: -1;

		/* Runs to the panel's own edge. Held 5rem short of it, the artwork had
		   394px to spread across where the navy has 474, and the skyline read
		   as a cropped strip in the corner rather than as the full-width
		   silhouette the reference draws under the network. */
		right: 0;
		bottom: calc(var(--panel-bleed-bottom) * -1);

		/* Reach the viewport's left edge exactly, not a guessed distance past it:
		   the panel starts one gutter inside the container, and the container is
		   centred once the viewport is wider than it. A blunt -50vw would push
		   most of the artwork off-screen and leave the visible navy bare. */
		left: calc(-1 * (max(0px, (100vw - var(--container)) / 2) + var(--gutter)));
		height: clamp(11rem, 30vh, 20rem);
		pointer-events: none;
	}

	.industries__decor svg {
		width: 100%;
		height: 100%;
	}

	.industries__skyline {
		fill: rgba(255, 255, 255, 0.05);
	}

	.industries__net {
		opacity: 0.45;
	}

	/* Lines are stroked, nodes are filled - the root fill="none" would otherwise
	   be inherited by both, or a fill on the group would flood the connectors. */
	.industries__net path {
		fill: none;
		stroke: var(--color-sky);
		stroke-width: 1;
	}

	.industries__net circle {
		fill: var(--color-sky);
		stroke: none;
	}

	/* Sized to the panel, not to the type scale. The reference breaks this
	   headline over exactly two lines - "Powering Growth" / "Across Industries"
	   - and --text-4xl overflows the panel's 353px measure, dropping it to four.
	   The ceiling is the widest of the two lines at the panel's narrowest. */
	.industries__title {
		font-size: clamp(2.125rem, 2.9vw, 2.625rem);
		max-width: 18ch;
	}

	/* Once the split is on, two rows of cards plus the banner have to sit inside
	   one screen, so the image height follows the viewport rather than the card
	   width - which is what keeps the section close to 100vh at 1440. */
	.industries__card-media {
		aspect-ratio: auto;
		height: clamp(4.25rem, 8vh, 6rem);
	}

	/* Trim the side padding only. The cards are the narrowest thing in the
	   section, so every pixel returned here is a pixel the description does not
	   have to wrap on. */
	.industries__card {
		padding: var(--space-sm) var(--space-xs);
	}

	/* Grid to the top of the section, banner to the foot, as the reference sets
	   them. Centred - the default the column inherits - the two were treated as
	   one block and the leftover height was split above and below it, dropping
	   the first row of cards a hundred pixels clear of the header and opening a
	   gap between the logo and the grid that reads as a mistake. */
	.industries__main {
		justify-content: space-between;
	}

	/* The panel's right edge is not straight - the diagonal cuts back to a 4.5rem
	   inset from 74% of the height down, which is exactly where this card sits.
	   The padding that clears the headline higher up is not enough down here, so
	   the card crossed the cut and sat with its corner on the light ground. The
	   reference draws it narrower than the headline for the same reason. */
	.industries__approach {
		margin-inline-end: var(--space-xl);
	}

	/* Closing banner -------------------------------------------------------
	   The banner is one line in the reference. At --text-lg the sentence needs
	   481px against the 418px the row can spare, so it breaks in two and the
	   banner grows by a line's height - the difference between clearing the
	   fold and sitting under the scroll cue. --text-base is also what the
	   reference's own ratio works out to at this width. */
	.industries__banner {
		gap: var(--space-sm);
		padding: var(--space-xs) var(--space-md);
	}

	.industries__banner-title {
		font-size: var(--text-base);
	}

	.industries__banner .icon-badge--lg {
		width: 3.25rem;
		height: 3.25rem;
	}
}

/* ==========================================================================
   SECTION 07  -  WHY CHOOSE US                  (light, navy pledge bar)
   --------------------------------------------------------------------------
   Copy and an image down the left, six reason cards on the right, and a navy
   pledge bar spanning the full width beneath both. Mobile stacks the three in
   that order; the bar is the only part that changes shape rather than just
   reflowing, since its divided row of points has to become a column.
   ========================================================================== */

/* Soft light disc behind the heading, and the navy wedge in the bottom-left
   corner - both from the reference, both cheap gradients rather than images. */
.section--why-us::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	background:
		radial-gradient(38% 42% at 14% 22%, rgba(255, 255, 255, 0.9), transparent 70%),
		radial-gradient(30% 30% at 96% 6%, rgba(226, 231, 238, 0.55), transparent 72%);
	pointer-events: none;
}

/* The navy quarter-round in the bottom-left corner of the reference, with the
   drawn contour lines running out of the opposite one. Desktop only: below the
   split the pledge bar reaches the foot of the section and the wedge would sit
   under it rather than beside it. */
@media (min-width: 1024px) {
	.section--why-us::after {
		content: '';
		position: absolute;
		z-index: var(--z-base);
		bottom: 0;
		left: 0;
		width: clamp(8rem, 14vw, 13rem);
		aspect-ratio: 1;
		border-top-right-radius: 100%;
		background-color: var(--color-navy);
		opacity: 0.9;
		pointer-events: none;
	}
}

.why {
	display: grid;
	gap: var(--space-xl);
	width: 100%;
}

/* --------------------------------------------------------------------------
   Left column
   -------------------------------------------------------------------------- */

.why__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

.why__title {
	font-size: var(--text-3xl);
	font-weight: var(--weight-black);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	max-width: 16ch;
}

.why__lead {
	max-width: 38ch;
	color: var(--ink-muted);
}

.why__media {
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-navy);
	box-shadow: var(--shadow-lg);
}

.why__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.why__media-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	aspect-ratio: 16 / 10;
	padding: var(--space-md);
	color: var(--color-text-muted-invert);
	font-size: var(--text-sm);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Reason cards
   -------------------------------------------------------------------------- */

.why__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-sm);
	min-width: 0;
}

.why__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	height: 100%;
	padding: var(--space-md);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background-color: var(--surface);
	box-shadow: var(--shadow-sm);
	transition:
		transform var(--transition-normal),
		border-color var(--transition-normal),
		box-shadow var(--transition-normal);
}

@media (hover: hover) {
	.why__card:hover {
		transform: translateY(-4px);
		border-color: var(--color-sky);
		box-shadow: var(--shadow-lg);
	}
}

/* The reference centres the badge over left-aligned copy - it is what stops
   six near-identical cards reading as a table. */
.why__badge {
	align-self: center;
	margin-bottom: var(--space-2xs);
}

/* The white badge sits on a white card, where the component's soft shadow alone
   leaves it as a floating glyph. A hairline gives it its edge back without
   touching the component, which reads fine everywhere else. */
.why__badge.icon-badge--white {
	border: 1px solid var(--hairline);
}

.why__number {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	line-height: 1;
	color: var(--color-sky);
	font-variant-numeric: tabular-nums;
}

.why__card-title {
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	line-height: 1.3;
}

.why__card-rule {
	display: block;
	width: 2.25rem;
	height: 2px;
	background-color: var(--color-sky);
}

.why__card-text {
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Pledge bar
   Carries data-theme="dark", so the tokens inside it are already inverted.
   -------------------------------------------------------------------------- */

.why__pledge {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	background-color: var(--color-navy);
	color: var(--ink);
}

.why__pledge-lead {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-width: 0;
}

.why__pledge-copy {
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--ink-muted);
}

.why__pledge-highlight {
	display: block;
	margin-top: var(--space-3xs);
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	color: var(--color-sky);
}

.why__points {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-sm);
	min-width: 0;
}

.why__point {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-width: 0;
}

.why__point-icon {
	flex-shrink: 0;
	color: var(--color-sky);
}

.why__point-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.why__point-title {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
}

.why__point-text {
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Two cards across as soon as there is room
   -------------------------------------------------------------------------- */

@media (min-width: 560px) {
	.why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Reserve two lines so the accent rule lines up across a row whether the
	   reason's name wraps or not. */
	.why__card-title {
		min-height: calc(2 * 1.3em);
	}
}

/* The pledge points can sit in a row well before the section splits, and the
   hairline dividers of the reference come with them. */
@media (min-width: 768px) {
	.why__points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
	}

	/* Top-aligned once they sit side by side, so the three titles line up
	   across the row however unevenly their sub text wraps.

	   The insets are deliberately tight: each point gets a third of two thirds
	   of the bar, and at --space-md the icon and the two gutters left the text
	   150px, which broke "We never compromise on quality." over three lines
	   against the reference's two and grew the bar by a line. */
	.why__point {
		align-items: flex-start;
		gap: var(--space-xs);
		padding-inline: var(--space-sm);
	}

	.why__point + .why__point {
		border-left: 1px solid var(--hairline);
	}
}

/* --------------------------------------------------------------------------
   Desktop: copy left, cards right, pledge bar across the foot
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.why {
		grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
		gap: var(--space-xl) var(--space-2xl);
		align-items: start;
	}

	.why__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Full width, under both columns. */
	.why__pledge {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		gap: var(--space-lg);
		padding: var(--space-md) var(--space-lg);
	}

	.why__pledge-lead {
		flex: 0 1 30%;
		padding-right: var(--space-lg);
		border-right: 1px solid var(--hairline);
	}

	.why__points {
		flex: 1;
	}

	.why__title {
		font-size: var(--text-4xl);
	}
}

/* ==========================================================================
   SECTION 08  -  OUR VALUED CLIENTS             (light, logo belts)
   --------------------------------------------------------------------------
   Reference 09. Centred head, two belts travelling opposite ways with the turn
   marked between them, and a navy figures bar across the foot.

   Nothing here sets a colour of its own: --accent-ink flips with the section
   theme, so the deeper step lands on this white ground and the bright one lands
   on the navy of 09 without either section naming a hex.
   ========================================================================== */

.section--clients {
	background-color: var(--color-white);
}

/* Dotted corners and the faint map wash of the reference, painted rather than
   imaged - nothing extra to request, nothing to blur on a dense screen. */
.section--clients::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	background-image:
		radial-gradient(var(--color-sky-tint) 1.6px, transparent 1.6px),
		radial-gradient(var(--color-sky-tint) 1.6px, transparent 1.6px),
		radial-gradient(52% 44% at 50% 30%, rgba(27, 143, 208, 0.05), transparent 70%);
	background-size: 14px 14px, 14px 14px, 100% 100%;
	background-position: 12% 12%, 88% 12%, 0 0;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* The dotted corners are 7x5 patches, not a full-bleed field. */
.section--clients::before {
	background-size: 14px 14px, 14px 14px, 100% 100%;
}

.clients {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
	width: 100%;
	text-align: center;
}

.clients__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	max-width: 46rem;
}

/* Trust pill -------------------------------------------------------------- */

.clients__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-2xs);
	border: 1px solid var(--color-sky-tint);
	border-radius: var(--radius-pill);
	background-color: var(--surface);
	box-shadow: var(--shadow-sm);
	font-size: var(--text-sm);
	font-weight: var(--weight-semi);
}

.clients__badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-pill);
	background-color: var(--color-sky-tint);
	color: var(--accent-ink);
}

.clients__badge .accent {
	color: var(--accent-ink);
}

/* On a phone the icon and the pill's own padding were taking 72px of a 320px
   line, which pushed "Proven By Results." onto a second row. Tightening the
   chrome and dropping to the smallest step keeps the sentence on one line down
   to about 350px; below that it wraps, which a centred pill does tidily. */
@media (max-width: 480px) {
	.clients__badge {
		gap: var(--space-3xs);
		padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-3xs);
		font-size: var(--text-xs);
	}

	.clients__badge-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.clients__badge-icon svg {
		width: 15px;
		height: 15px;
	}
}

/* Heading ----------------------------------------------------------------- */

.clients__title {
	font-size: var(--text-4xl);
	font-weight: var(--weight-black);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

.clients__title .accent {
	color: var(--accent-ink);
}

/* Tapered rule with three dots at its centre. A border cannot taper, so it is
   two gradient lines with the dots set between them. */
.clients__rule {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	width: min(24rem, 80%);
}

.clients__rule-line {
	flex: 1;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(to right, transparent, var(--color-sky));
}

.clients__rule-line:last-child {
	background: linear-gradient(to left, transparent, var(--color-sky));
}

.clients__rule-dots {
	display: flex;
	gap: 4px;
}

.clients__rule-dots i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--accent-ink);
}

.clients__lead {
	display: flex;
	flex-direction: column;
	color: var(--ink-muted);
}

/* Belts --------------------------------------------------------------------
   Each belt holds the same track twice. The animation moves the pair by half
   its width, so at the moment it resets the duplicate is sitting exactly where
   the original began and the seam is invisible.
   -------------------------------------------------------------------------- */

.clients__belts {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);

	/* Full bleed: the belts run off both edges rather than stopping at the
	   gutter, which is what makes them read as continuous rather than as rows. */
	width: 100vw;
	margin-left: calc(-1 * var(--bleed-inline));
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.clients__belt {
	display: flex;
	width: max-content;
	animation: yagas-belt 60s linear infinite;
}

.clients__belt[data-direction='left'] {
	animation-direction: reverse;
	animation-duration: 68s;
}

/* Pausing on hover is not a nicety - it is the only way a visitor can hold a
   logo still long enough to read it. */
@media (hover: hover) {
	.clients__belt:hover {
		animation-play-state: paused;
	}
}

@keyframes yagas-belt {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.clients__track {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-right: var(--space-sm);
}

.clients__item {
	flex: 0 0 auto;
}

.clients__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(9.5rem, 15vw, 12.5rem);
	height: clamp(5rem, 8vw, 6.5rem);
	padding: var(--space-sm);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background-color: var(--surface);
	box-shadow: var(--shadow-sm);
}

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

/* A client with no logo file is set as a wordmark. Tight leading and a little
   letter spacing keep it reading as a mark rather than as a line of copy. */
.clients__logo-name {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: 0.04em;
	line-height: 1.25;
	text-align: center;
	color: var(--color-text);
}

/* The turn between the two belts. */
.clients__turn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-ink);
}

.clients__turn::before,
.clients__turn::after {
	content: '';
	width: clamp(3rem, 8vw, 7rem);
	height: 1px;
	background-color: var(--color-sky);
}

.clients__turn svg {
	margin-inline: var(--space-3xs);
}

/* Figures bar --------------------------------------------------------------
   Carries data-theme="dark" in the markup, so the tokens inside are already
   inverted and nothing here needs a colour of its own beyond the ground.
   -------------------------------------------------------------------------- */

.clients__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--space-md);
	width: 100%;
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-lg);
	background-color: var(--color-navy);
	color: var(--ink);
	box-shadow: var(--shadow-lg);
}

.clients__stat {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-width: 0;
	text-align: left;
}

.clients__stat + .clients__stat {
	border-left: 1px solid var(--hairline);
	padding-left: var(--space-md);
}

.clients__stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--radius-pill);
	background-color: var(--color-white);
	color: var(--color-sky-deep);
}

.clients__stat-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.clients__stat-value {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-black);
	line-height: 1;
	color: var(--color-sky);
}

.clients__stat-label {
	font-size: var(--text-sm);
	color: var(--ink-muted);
}

/* The label sits over a short rule in the reference. */
.clients__stat-label::after {
	content: '';
	display: block;
	width: 2rem;
	height: 2px;
	margin-top: var(--space-3xs);
	background-color: var(--color-sky);
}

/* Stacked, the dividers would be vertical rules between full-width rows. */
@media (max-width: 900px) {
	.clients__stat + .clients__stat {
		border-left: 0;
		padding-left: 0;
	}
}

/* A marquee is exactly the motion this preference is about. Stopped, the belts
   become a scrollable row that still reads. */
@media (prefers-reduced-motion: reduce) {
	.clients__belt {
		width: 100%;
		overflow-x: auto;
		animation: none;
	}

	/* Without the animation the duplicate track is the same logos a second
	   time, so it is dropped rather than left sitting in the row. */
	.clients__belt .clients__track[aria-hidden='true'] {
		display: none;
	}

	.clients__belts {
		width: 100%;
		margin-left: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ==========================================================================
   SECTION 09  -  REAL RESULTS. REAL STORIES.    (navy, reel strip)
   --------------------------------------------------------------------------
   Reference 10. Centred head over a horizontal strip of portrait cards, each
   carrying a client's logo and line above the still.

   The reference closes on a figures bar; it is deliberately not built, because
   section 08 directly above already carries one.
   ========================================================================== */

.section--reels {
	background-color: var(--color-navy);
}

.section--reels::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	background:
		radial-gradient(50% 44% at 50% 6%, rgba(69, 183, 232, 0.13), transparent 70%),
		radial-gradient(40% 40% at 4% 88%, rgba(37, 82, 143, 0.3), transparent 72%);
	pointer-events: none;
}

.reels {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	width: 100%;
	text-align: center;
}

/* Uncapped, so the headline can take the one line the reference sets it on -
   "Real Results. Real Stories." measures 806px at the 4xl step and a 46rem head
   broke it in two. The intro keeps a measure of its own below, since that is
   the part a cap is actually for. */
.reels__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	width: 100%;
}

.reels__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-3xs) var(--space-md) var(--space-3xs) var(--space-3xs);
	border: 1px solid rgba(69, 183, 232, 0.4);
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	font-weight: var(--weight-semi);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.reels__badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;

	/* The glyph is an asymmetric triangle: centring its box leaves it looking
	   a shade left of centre, so the nudge is optical, not arithmetic. */
	padding-left: 2px;
	border-radius: var(--radius-pill);
	background-color: var(--accent-ink);
	color: var(--color-navy);
}

.reels__title {
	font-size: var(--text-4xl);
	font-weight: var(--weight-black);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

.reels__title .accent {
	color: var(--accent-ink);
}

.reels__lead {
	display: flex;
	flex-direction: column;
	max-width: 46rem;
	color: var(--ink-muted);
}

.reels__rule {
	width: 5rem;
	height: 3px;
	border-radius: 3px;
	background-color: var(--accent-ink);
}

/* Script aside - desktop only, where there is a margin for it to sit in. */
.reels__aside {
	display: none;
}

/* Divider with a caption set into it. */
.reels__divider {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	width: 100%;
	font-size: var(--text-xs);
	font-weight: var(--weight-semi);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.reels__divider::before,
.reels__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--hairline);
}

/* Strip --------------------------------------------------------------------
   Bled to the viewport edges so a card is always part-visible at the end,
   which is what tells a visitor the strip moves.
   -------------------------------------------------------------------------- */

.reels__strip {
	width: 100vw;
	margin-left: calc(-1 * var(--bleed-inline));
	padding-inline: var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--radius-md);

	/* Snap points are measured against the scrollport, which ignores padding.
	   Without this the browser lands on the first card's own left edge the
	   moment the page loads - scrolling the strip on its own and cutting the
	   first card in half before anyone has touched it. */
	scroll-padding-inline: var(--gutter);
}

.reels__strip::-webkit-scrollbar {
	display: none;
}

/* The container is focusable so it can be scrolled from the keyboard, so it
   must show a focus ring like anything else that takes focus. */
.reels__strip:focus-visible {
	outline: 2px solid var(--accent-ink);
	outline-offset: 4px;
}

.reels__track {
	display: flex;
	gap: var(--space-sm);
	padding-block: var(--space-2xs);
	width: max-content;
}

.reels__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.reels__card {
	display: flex;
	flex-direction: column;
	width: clamp(10rem, 44vw, 13.5rem);
	overflow: hidden;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);

	/* The card is a light plate on the navy, as the reference draws it - the
	   logo band and the still are one surface, not two. */
	background-color: var(--color-white);
	color: var(--color-text);
	text-decoration: none;
	transition:
		transform var(--transition-normal),
		border-color var(--transition-normal),
		box-shadow var(--transition-normal);
}

@media (hover: hover) {
	.reels__card:hover {
		transform: translateY(-5px);
		border-color: var(--accent-ink);
		box-shadow: var(--shadow-lg);
	}
}

.reels__card:focus-visible {
	outline: 2px solid var(--accent-ink);
	outline-offset: 3px;
}

/* Cover ------------------------------------------------------------------ */

/* Cover ------------------------------------------------------------------- */

.reels__cover {
	position: relative;
	display: block;
	overflow: hidden;

	/* The still is the card. With the client band gone the cover takes that
	   height back, and 9:16 is the shape the source material is actually shot
	   in - a reel is a portrait video, so any other ratio crops it. */
	aspect-ratio: 9 / 16;

	/* Covers are uploaded, so the tile has to hold its shape and still look
	   deliberate before one arrives. */
	background: linear-gradient(160deg, #223A54, #0E2036);
}

.reels__cover-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reels__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	transform: translate(-50%, -50%);
	padding-left: 3px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--radius-pill);
	background-color: rgba(7, 21, 38, 0.42);
	backdrop-filter: blur(3px);
	color: var(--color-white);
}

/* Footer ------------------------------------------------------------------ */

.reels__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs);
	padding: var(--space-2xs) var(--space-xs);
	font-size: var(--text-xs);
	color: var(--color-text-light);
}

.reels__views {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.reels__like {
	display: flex;
	color: var(--color-sky-deep);
}

/* Hint -------------------------------------------------------------------- */

.reels__hint {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--text-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.reels__hint-icon {
	display: flex;
	color: var(--accent-ink);
}

.reels__empty {
	padding: var(--space-lg);
	border: 1px dashed var(--hairline);
	border-radius: var(--radius-md);
	color: var(--ink-muted);
	text-align: center;
}

@media (min-width: 1024px) {
	/* The strip still bleeds off the left edge but stops short of the right:
	   the dot rail lives in the last 80px, and cards sliding under it made the
	   dots unreadable. The cut card at that boundary is still the affordance
	   that says the strip moves. */
	.reels__strip {
		width: calc(100vw - 5rem);
	}

	/* The handwritten aside from the reference, hung in the left margin beside
	   the head. Absolute so it cannot push the centred column off centre. */
	.reels__aside {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 5.5rem;
		left: 0;
		max-width: 10rem;
		font-family: var(--font-script);
		font-size: var(--text-xl);
		line-height: 1.15;
		text-align: left;
		color: var(--accent);
		transform: rotate(-6deg);
		pointer-events: none;
	}

	.reels__aside::after {
		content: '';
		width: 7rem;
		height: 10px;
		margin-top: var(--space-3xs);
		border-bottom: 2px solid var(--accent);
		border-radius: 0 0 60% 40%;
	}
}


/* ==========================================================================
   SECTION 10  -  LET'S CONNECT                  (light)
   --------------------------------------------------------------------------
   Copy and the service strip on the left, an angled photo beside it, the
   enquiry card on the right, and the contact details beneath. The form itself
   is the shared .form / .field component - only its icon treatment and the
   card around it belong here.
   ========================================================================== */

.section--contact {
	/* The last section carries the footer directly beneath it, so it does not
	   need the full 100vh treatment on desktop. */
	min-height: auto;
}

.section--contact::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	background: radial-gradient(34% 38% at 6% 14%, rgba(255, 255, 255, 0.9), transparent 70%);
	pointer-events: none;
}

.contact {
	display: grid;
	gap: var(--space-xl);
	width: 100%;
}

.contact__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	min-width: 0;
}

.contact__copy {
	display: grid;
	gap: var(--space-lg);
	min-width: 0;
}

.contact__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

/* Deliberately held at the 3xl step and never bumped to 4xl on desktop. The
   closing statement reads as a confident line, not a shout - at 4xl it ran to
   four lines and swamped the form beside it. */
.contact__title {
	font-size: var(--text-3xl);
	font-weight: var(--weight-black);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	max-width: 18ch;
}

.contact__lead {
	max-width: 46ch;
	color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Service strip
   -------------------------------------------------------------------------- */

.contact__services {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* Flexible rather than fixed-width: the reference keeps all five on one line,
   and a fixed width sends the last two onto a second row as soon as the copy
   column narrows. They still wrap on a phone, which is where wrapping is right. */
.contact__service {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
	flex: 1 1 4.5rem;
	min-width: 4.5rem;
	max-width: 7rem;
	text-align: center;
}

/* The reference divides the strip with hairlines rather than spacing it out.
   Held back until the chips are guaranteed to share a row - once they wrap, a
   divider lands at the start of a line and reads as a stray mark. */
@media (min-width: 560px) {
	.contact__service + .contact__service::before {
		content: '';
		position: absolute;
		top: 10%;
		bottom: 10%;
		left: calc(var(--space-sm) / -2);
		width: 1px;
		background-color: var(--hairline);
	}
}

.contact__service-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-pill);
	background-color: var(--accent-soft);
	color: var(--accent);
}

.contact__service-label {
	font-size: var(--text-sm);
	font-weight: var(--weight-semi);
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Closing image
   -------------------------------------------------------------------------- */

.contact__media {
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-navy);
}

.contact__image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.contact__media-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	aspect-ratio: 4 / 3;
	padding: var(--space-md);
	color: var(--color-text-muted-invert);
	font-size: var(--text-sm);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Contact details
   -------------------------------------------------------------------------- */

.contact__details {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--hairline);
}

.contact__detail {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	min-width: 0;
}

.contact__detail-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--space-2xs);
	border-radius: var(--radius-pill);
	background-color: var(--accent);
	color: var(--color-white);
}

.contact__detail-title {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
}

.contact__detail-value {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--ink);
	overflow-wrap: break-word;
}

a.contact__detail-value:hover {
	color: var(--color-sky-deep);
}

.contact__detail-note {
	font-size: var(--text-sm);
	color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Enquiry card
   -------------------------------------------------------------------------- */

.contact__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-lg);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	background-color: var(--surface);
	box-shadow: var(--shadow-lg);
	min-width: 0;
}

.contact__panel-title {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
}

.contact__panel-title::after {
	content: '';
	display: block;
	width: 3.5rem;
	height: 3px;
	margin-top: var(--space-2xs);
	background-color: var(--color-sky);
}

.contact__panel-text {
	margin-bottom: var(--space-sm);
	font-size: var(--text-sm);
	color: var(--ink-muted);
}

/*
 * A <select> reports its longest option as its min-content width, and the
 * form's grid track sizes to that by default - at 320px the service dropdown
 * pushed the whole card past the viewport edge. The section's overflow: clip
 * hid the result rather than fixing it, so the track is pinned to minmax(0, 1fr)
 * and allowed to shrink instead.
 */
.contact__form {
	grid-template-columns: minmax(0, 1fr);

	/* Tighter than the shared .form default: with six fields stacked in a card
	   the standard rhythm left the column looking loose. */
	gap: var(--space-sm);
}

/* The error slot is always in the DOM so JS has somewhere to write, but while
   it is empty it should not add its own gap under every control. */
.contact__field .field__error:empty {
	display: none;
}

/* Icon inside the control, as the reference sets it. The label is visually
   hidden, so the control is the first laid-out child and the icon can be
   parked against the top of the field box. */
.contact__field {
	position: relative;
	min-width: 0;
}

.contact__field-icon {
	position: absolute;
	top: 0;
	left: var(--space-sm);
	display: flex;
	align-items: center;
	height: 52px;
	color: var(--ink-muted);
	pointer-events: none;
}

/* The card and the shared control both sit on --surface, so on a white card the
   fields had no edge of their own and the column read as one flat block. The
   reference fills them a step back from the card and keeps the border, which is
   what makes six stacked inputs legible as six inputs. */
.contact__field .field__control {
	padding-left: 3rem;
	border-color: var(--color-field-line);
	background-color: var(--color-field);
}

.contact__field .field__control:hover {
	border-color: var(--color-sky-deep);
}

/* On focus the field lifts to the card's own ground, so the active row is the
   one bright thing in the column. */
.contact__field .field__control:focus {
	background-color: var(--surface);
}

/* The chevron and the icon eat 3rem each; without a stop here the longest
   option ("Select Service Required *") runs under the chevron. */
.contact__field select.field__control {
	padding-right: 2.75rem;
	text-overflow: ellipsis;
}

.contact__field .field__control:focus + .field__error,
.contact__field .field__control:focus ~ .contact__field-icon {
	color: var(--color-sky);
}

.contact__submit {
	width: 100%;
	margin-top: var(--space-2xs);
}

/* --------------------------------------------------------------------------
   Details two across as soon as there is room
   -------------------------------------------------------------------------- */

@media (min-width: 560px) {
	.contact__details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-lg);
	}
}

/* --------------------------------------------------------------------------
   Tablet: the copy and the image sit side by side
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.contact__details {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* The image only moves alongside the copy once the enquiry card has stopped
   taking a third of the row. Splitting it earlier squeezed the copy column so
   hard that the five service chips broke onto a second line - which is what
   sets this breakpoint, not a round number.

   In the reference the closing image is not a block sitting in the copy row -
   it is a full-height plate cut to a point, hung off the top edge of the
   section with the enquiry card overlapping its right side. Held in the flow it
   can only ever be as tall as the copy beside it, so at this width it leaves
   the flow and is measured against the section box instead, exactly as the
   navy panel of section 06 is. The copy keeps its own column by reserving the
   plate's width as padding rather than by a grid track, so the text never runs
   underneath it. */
@media (min-width: 1400px) {
	.contact__copy {
		grid-template-columns: minmax(0, 1fr);
		padding-right: calc(30% + var(--space-xl));
	}

	.contact__media {
		position: absolute;

		/* Behind everything else in the section's content layer, so the enquiry
		   card overlaps its right edge as it does in the reference rather than
		   being covered by it. Same device as the navy panel of section 06. */
		z-index: -1;

		/* The same max() the section frame uses for its own top padding - the
		   plate reaches the section's edge, never a guessed offset. */
		top: calc(-1 * max(var(--section-padding-y), calc(var(--header-height) + var(--space-lg))));

		/* Runs under the enquiry card rather than stopping at it: the card's
		   column, less the overlap the reference shows. */
		right: calc(22rem - var(--space-lg));
		width: 30%;
		height: 62%;
		border-radius: 0;
	}

	/* The placeholder sizes itself from an aspect ratio while the plate is a
	   block in the flow. Once the plate is measured against the section it has
	   a height of its own, and the ratio would fight it. */
	.contact__media-placeholder,
	.contact__image {
		aspect-ratio: auto;
		height: 100%;
	}

	/*
	 * The header scrim fades content scrolling up behind the fixed chrome, and
	 * takes its colour from the active section's single ground. Once the plate
	 * bleeds to the top edge this section has two grounds like section 06 does,
	 * and the light scrim laid a haze across the navy. It is not "split" in the
	 * sense the header class means - the logo and the counter both sit on light
	 * - so rather than a class the scrim is simply cut away over the plate's
	 * span and left in place at both ends, where it is still doing its job.
	 */
	.profile-header[data-section='10']::before {
		-webkit-mask-image: linear-gradient(to right, #000 44%, transparent 47%, transparent 78%, #000 81%);
		mask-image: linear-gradient(to right, #000 44%, transparent 47%, transparent 78%, #000 81%);
	}
}

/* --------------------------------------------------------------------------
   Desktop: the enquiry card takes its own column
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.contact {
		grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
		gap: var(--space-2xl);

		/* Stretched, not start-aligned. The enquiry card is the taller of the
		   two columns, and with the body only as tall as its own content the
		   detail row stopped level with the card's middle and left the foot of
		   the section empty. */
		align-items: stretch;
	}

	/* Copy at the top, details on the baseline of the card beside them. */
	.contact__body {
		justify-content: space-between;
	}

	/* The angled crop from the reference. Kept to desktop, where the shape
	   reads as deliberate rather than as a broken corner on a narrow card. */
	.contact__media {
		border-radius: 0;
		clip-path: polygon(18% 0, 100% 0, 100% 100%, 18% 100%, 0 50%);
	}
}

/* Hero heading is the page h1 and carries the largest step of the scale. */
.section__title--hero {
	font-size: var(--text-5xl);
	max-width: 16ch;
}