/* Page sections. Each layout family appears once per page. */

/* ---------- Hero ---------- */

.hero {
	position: relative;
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-xl);
	isolation: isolate;
	/* clip, not hidden, so the glow cannot widen the document. */
	overflow: clip;
}

/* A cool wash rather than a glow. Fades to nothing so no box edge shows. */
.hero::before {
	content: '';
	position: absolute;
	inset: -30% -20% auto -20%;
	height: 150%;
	background:
		radial-gradient(ellipse 46% 42% at 74% 28%, rgba(19, 86, 227, 0.11), rgba(19, 86, 227, 0) 70%),
		linear-gradient(180deg, var(--surface), rgba(246, 248, 252, 0) 80%);
	pointer-events: none;
	z-index: -1;
}

/* A faint engineering grid: texture that reads as craft, not decoration. */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(8, 13, 24, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(8, 13, 24, 0.06) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: radial-gradient(ellipse 62% 74% at 22% 34%, #000, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse 62% 74% at 22% 34%, #000, transparent 72%);
	pointer-events: none;
	z-index: -1;
}

.hero__inner {
	display: grid;
	gap: var(--space-xl);
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	align-items: center;
}

.hero h1 {
	font-size: var(--step-6);
	max-width: 13ch;
}

.hero__sub {
	margin-top: var(--space-m);
	max-width: 42ch;
	font-size: var(--step-1);
	color: var(--text-muted);
}

.hero__cta {
	margin-top: var(--space-l);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.hero__panel {
	padding: 0;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.hero__panel .qualifier__title {
	padding: var(--space-l) var(--space-l) var(--space-s);
	margin-bottom: 0;
}

.hero__panel .qualifier {
	gap: 0;
}

.hero__panel .qualifier a {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
	padding: var(--space-m) var(--space-l);
}

.hero__panel .qualifier a:hover {
	background: var(--accent-soft);
	border-color: var(--line);
	transform: none;
}

.hero__media {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	aspect-ratio: 4 / 5;
}

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

/* The hero panel qualifies the visitor and routes them to a service. */
.qualifier__title {
	font-size: var(--step-1);
	font-weight: 600;
	letter-spacing: -0.025em;
	margin-bottom: var(--space-m);
}

.qualifier {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-xs);
}

.qualifier a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		'num label icon'
		'num text  icon';
	align-items: center;
	gap: 0.25em var(--space-s);
	padding: var(--space-s) var(--space-m);
	background: var(--surface-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
	text-decoration: none;
	transition:
		border-color var(--dur-fast) var(--ease),
		background var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.qualifier__num {
	grid-area: num;
	align-self: start;
	margin-top: 0.15em;
	font-family: var(--font-display);
	font-size: var(--step--1);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
	opacity: 0.5;
}

.qualifier a:hover {
	border-color: var(--accent);
	background: var(--surface-2);
	transform: translateX(3px);
}

.qualifier a .icon {
	grid-area: icon;
	color: var(--accent);
	transition: transform var(--dur) var(--ease);
}

.qualifier a:hover .icon {
	transform: translateX(3px);
}

.qualifier__label {
	grid-area: label;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.qualifier__text {
	grid-area: text;
	color: var(--text-muted);
	font-size: var(--step--1);
	line-height: 1.5;
}

@media (max-width: 900px) {
	.hero {
		padding-top: var(--space-xl);
		padding-bottom: var(--space-l);
	}

	.hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-l);
	}

	.hero h1 {
		max-width: 18ch;
	}
}

@media (max-width: 640px) {
	.hero {
		padding-top: 3.25rem;
		padding-bottom: 2.5rem;
	}

	.hero__cta {
		margin-top: var(--space-m);
	}

	.hero__panel .qualifier__title {
		padding: var(--space-m) var(--space-m) var(--space-s);
	}

	.hero__panel .qualifier a {
		padding: var(--space-s) var(--space-m);
	}

	.marquee {
		padding-block: 1.75rem;
	}

	.marquee__set {
		gap: var(--space-xl);
		padding-inline-end: var(--space-xl);
	}

	.marquee__logo {
		flex-basis: 6.25rem;
		width: 6.25rem;
		height: 2.35rem;
	}

	.marquee__logo--mark {
		flex-basis: 2.35rem;
		width: 2.35rem;
	}
}

/* ---------- Client marquee ---------- */

.marquee {
	width: min(100% - 2 * var(--space-m), var(--container));
	margin-inline: auto;
	padding-block: var(--space-xl);
	background: transparent;
	overflow: clip;
}

.marquee__viewport {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee 72s linear infinite;
}

.marquee:hover .marquee__track {
	animation-play-state: paused;
}

.marquee__set {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--space-2xl);
	padding-inline-end: var(--space-2xl);
}

/* Shared slot so wordmarks and compact marks read at a similar optical size. */
.marquee__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 7.25rem;
	width: 7.25rem;
	height: 2.75rem;
}

.marquee__logo--mark {
	flex-basis: 2.75rem;
	width: 2.75rem;
}

.marquee img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0.5;
	filter: brightness(0);
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none;
		width: 100%;
		justify-content: center;
	}

	.marquee__set {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-l);
		padding-inline-end: 0;
	}

	.marquee__set + .marquee__set {
		display: none;
	}

	.marquee__viewport {
		mask-image: none;
		-webkit-mask-image: none;
	}
}

/* ---------- Services bento ---------- */

/* Three services, three cells. The lead cell is wider, never a spare tile. */
.bento {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
}

.bento__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding: var(--space-l);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface-2);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
	transition:
		border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.bento__cell:hover {
	border-color: var(--accent-line);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

/* The lead cell carries a tint so the row is not three identical text cards. */
.bento__cell--lead {
	background:
		radial-gradient(ellipse 80% 90% at 96% 4%, rgba(19, 86, 227, 0.15), rgba(19, 86, 227, 0) 66%),
		var(--accent-soft);
	border-color: var(--accent-line);
}

/* A discreet index, set like a spec sheet rather than a watermark. */
.bento__ghost {
	position: absolute;
	top: var(--space-l);
	right: var(--space-l);
	font-size: var(--step--2);
	font-weight: 600;
	letter-spacing: var(--track-wide);
	font-variant-numeric: tabular-nums;
	color: var(--text-faint);
	pointer-events: none;
	user-select: none;
}

.bento__cell--lead .bento__ghost {
	color: var(--accent);
	opacity: 0.7;
}

.bento__cell--image {
	padding: 0;
	min-height: 260px;
}

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

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

.bento__cell p {
	color: var(--text-muted);
	font-size: var(--step--1);
	max-width: 46ch;
}

.bento__cell .card__link {
	margin-top: auto;
	padding-top: var(--space-s);
}

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

	.bento__cell--lead {
		grid-column: span 1;
	}
}

/* ---------- Case showcase ---------- */

.cases {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.case-card {
	position: relative;
	display: block;
	grid-column: span 2;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--surface-2);
	box-shadow: var(--shadow-xs);
	text-decoration: none;
	color: inherit;
	transition:
		border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.case-card[hidden] {
	display: none;
}

.cases__empty {
	margin-top: var(--space-m);
	color: var(--text-muted);
}

/* The first two cases get more room so the grid has rhythm. */
.case-card--feature {
	grid-column: span 3;
}

.case-card:hover {
	border-color: var(--accent-line);
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.case-card__media {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: var(--surface-3);
}

.case-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.case-card:hover .case-card__media img {
	transform: scale(1.04);
}

.case-card__media::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 40%;
	background: linear-gradient(transparent, rgba(8, 13, 24, 0.18));
	pointer-events: none;
}

.case-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-s);
	padding: var(--space-m);
	min-height: 7.25rem;
}

.case-card__body h3 {
	font-size: var(--step-1);
}

.case-card__body p {
	color: var(--text-muted);
	font-size: var(--step--1);
	margin-top: 0.25em;
}

.case-card__body .badges {
	margin-top: auto;
}

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

	.case-card__body {
		min-height: 0;
	}

	.case-card,
	.case-card--feature {
		grid-column: span 1;
	}
}

/* ---------- Case carousel. Centered photo slides, peek of neighbors. ---------- */

.story-carousel {
	--story-card-w: min(46rem, 58vw);
	outline: none;
}

@media (min-width: 1600px) {
	.story-carousel {
		--story-card-w: min(68rem, 80vw);
	}
}

.story-carousel__track {
	position: relative;
	display: flex;
	gap: var(--space-m);
	overflow-x: auto;
	overflow-anchor: none;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-inline: max(var(--space-m), calc((100% - var(--story-card-w)) / 2));
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.story-carousel__track::-webkit-scrollbar {
	display: none;
}

.story-carousel.is-dragging .story-carousel__track {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.story-carousel.is-dragging .story-card {
	cursor: grabbing;
}

.story-carousel.is-jumping .story-carousel__track {
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.story-carousel.is-jumping .story-card {
	scroll-snap-align: none;
}

.story-carousel.is-jumping .story-card::after,
.story-carousel.is-jumping .story-card__media img {
	transition: none;
}

.story-card {
	position: relative;
	flex: 0 0 var(--story-card-w);
	aspect-ratio: 18 / 11;
	scroll-snap-align: center;
	border-radius: 28px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: var(--ink);
	isolation: isolate;
	cursor: pointer;
	-webkit-user-drag: none;
}

.story-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(246, 248, 252, 0.42);
	opacity: 1;
	z-index: 1;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease);
}

.story-card.is-active::after {
	opacity: 0;
}

.story-card:hover,
.story-card:focus-visible {
	color: #fff;
}

.story-card:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.story-card__media {
	position: absolute;
	inset: 0;
}

.story-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
	transition: transform var(--dur-slow) var(--ease);
}

.story-card.is-active:hover .story-card__media img {
	transform: scale(1.04);
}

.story-carousel.is-dragging .story-card:hover .story-card__media img {
	transform: none;
}

.story-card__badges {
	position: absolute;
	inset: var(--space-m) auto auto var(--space-m);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	max-width: calc(100% - 2 * var(--space-m));
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.story-card__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.32em 0.72em;
	border: 1px solid var(--accent-line);
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--accent);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: var(--shadow-xs);
}

.story-card__copy {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	padding: var(--space-xl) var(--space-l) var(--space-l);
	background: linear-gradient(180deg, transparent, rgba(8, 13, 24, 0.78) 58%);
	pointer-events: none;
}

.story-card__quote {
	max-width: 32ch;
	font-size: var(--step-2);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--track-tight);
	text-wrap: balance;
}

.story-card__by {
	margin-top: var(--space-s);
	font-size: var(--step--1);
	color: rgba(242, 245, 250, 0.82);
}

.story-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: var(--space-s);
	font-size: var(--step--1);
	font-weight: 550;
	color: #fff;
}

.story-card__more .icon {
	transition: transform var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.story-card:hover .story-card__more .icon,
	.story-card:focus-visible .story-card__more .icon {
		transform: translateX(3px);
	}
}

.story-carousel__nav {
	display: flex;
	justify-content: center;
	gap: var(--space-s);
	margin-top: var(--space-l);
}

.story-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--surface-3);
	color: var(--text);
	cursor: pointer;
	transition:
		background var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.story-carousel__btn:hover {
	background: var(--line);
}

.story-carousel__btn:active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	.story-carousel__btn:hover {
		background: var(--line);
	}
}

@media (max-width: 700px) {
	.story-carousel {
		--story-card-w: min(20rem, calc(100vw - 5.5rem));
	}

	.story-card {
		aspect-ratio: 4 / 5;
		border-radius: 22px;
	}

	.story-card__badges {
		inset: var(--space-s) auto auto var(--space-s);
		max-width: calc(100% - 2 * var(--space-s));
	}

	.story-card__quote {
		font-size: var(--step-1);
		max-width: none;
	}

	.story-card__copy {
		padding: var(--space-l) var(--space-m) var(--space-m);
	}
}

@media (prefers-reduced-motion: reduce) {
	.story-carousel__track {
		scroll-behavior: auto;
	}

	.story-card {
		transition: none;
	}

	.story-card::after {
		transition: none;
	}

	.story-card.is-active:hover .story-card__media img {
		transform: none;
	}
}

/* ---------- Process. Vertical rail, no step numbering. ---------- */

.process {
	display: grid;
	gap: var(--space-xl);
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: start;
}

.process__head {
	position: sticky;
	top: calc(var(--header-h) + var(--space-l));
}

.process__head p {
	margin-top: var(--space-s);
	color: var(--text-muted);
	max-width: 40ch;
}

.process__head .btn {
	margin-top: var(--space-l);
}

.process__list {
	display: grid;
	gap: 0;
	counter-reset: none;
}

.process__item {
	position: relative;
	padding: var(--space-l) 0 var(--space-l) var(--space-xl);
	border-top: 1px solid var(--line);
}

.process__item:last-child {
	border-bottom: 1px solid var(--line);
}

/* The step number replaces the old timeline dot and carries the rhythm. */
.process__num {
	position: absolute;
	left: 0;
	top: calc(var(--space-l) - 0.06em);
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--track-tighter);
	font-variant-numeric: tabular-nums;
	color: var(--accent);
	opacity: 0.7;
}

.process__item h3 {
	font-size: var(--step-1);
}

.process__item p {
	margin-top: var(--space-2xs);
	color: var(--text-muted);
	font-size: var(--step--1);
	max-width: 56ch;
}

@media (max-width: 900px) {
	.process {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-l);
	}

	.process__head {
		position: static;
	}

	.process__head .btn {
		margin-top: var(--space-m);
	}
}

@media (max-width: 640px) {
	.process__item {
		padding: var(--space-m) 0 var(--space-m) 3.15rem;
	}

	.process__num {
		top: calc(var(--space-m) - 0.06em);
		font-size: var(--step-1);
	}
}

/* ---------- Testimonials. Featured voice plus two supporting, same grammar as the bento. ---------- */

.quotes {
	display: grid;
	gap: var(--space-m);
	align-items: stretch;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	grid-template-rows: 1fr 1fr;
}

.quote:first-child {
	grid-row: 1 / -1;
}

.quotes:has(.quote:only-child) {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	max-width: 42rem;
}

.quotes:has(.quote:nth-child(2):last-child) {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	grid-template-rows: auto;
}

.quotes:has(.quote:nth-child(2):last-child) .quote:first-child {
	grid-row: auto;
}

.quote {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	min-height: 0;
	padding: var(--space-l);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/* The lead quote is the one you read first. Tint matches the services lead cell. */
.quote--lead {
	gap: var(--space-m);
	background:
		radial-gradient(ellipse 80% 90% at 96% 4%, rgba(19, 86, 227, 0.15), rgba(19, 86, 227, 0) 66%),
		var(--accent-soft);
	border-color: var(--accent-line);
	box-shadow: var(--shadow-md);
}

.quote__mark {
	display: block;
	font-size: 2.35rem;
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: var(--track-display);
	font-variation-settings: 'opsz' var(--opsz-display);
	color: var(--accent);
	user-select: none;
}

.quote--lead .quote__mark {
	font-size: 3.15rem;
}

.quote blockquote {
	margin: 0;
}

.quote blockquote p {
	font-size: var(--step-0);
	line-height: 1.5;
	letter-spacing: -0.014em;
	color: var(--text);
	max-width: 42ch;
}

.quote--lead blockquote p {
	font-size: var(--step-2);
	font-weight: 500;
	line-height: 1.32;
	letter-spacing: var(--track-tight);
	max-width: 28ch;
}

.quote--article {
	padding: var(--space-xl);
}

.quote--article blockquote p {
	max-width: 42ch;
}

.quote--article.quote--lead blockquote p {
	max-width: 36ch;
}

.quote--article.quote--full blockquote p {
	font-size: var(--step-1);
	font-weight: 450;
	line-height: 1.45;
	letter-spacing: -0.018em;
	max-width: 54ch;
}

.quote__by {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 0.85em;
	padding-top: var(--space-m);
	border-top: 1px solid var(--line);
}

.quote--lead .quote__by {
	border-top-color: var(--accent-line);
}

.quote__by cite {
	display: grid;
	gap: 0.12em;
	font-style: normal;
	min-width: 0;
}

.quote__by img,
.quote__initials {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px var(--accent-line);
}

.quote__initials {
	display: grid;
	place-items: center;
	background: var(--accent-soft);
	color: var(--accent-ink);
	font-size: var(--step--2);
	font-weight: 650;
	letter-spacing: -0.02em;
}

.quote--lead .quote__by img,
.quote--lead .quote__initials {
	width: 3.25rem;
	height: 3.25rem;
	box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3.5px var(--accent);
}

.quote__name {
	font-weight: 650;
	font-size: var(--step--1);
	letter-spacing: -0.02em;
	color: var(--text);
}

.quote__role {
	color: var(--text-muted);
	font-size: var(--step--2);
	line-height: 1.35;
}

@media (max-width: 900px) {
	.quotes,
	.quotes:has(.quote:nth-child(2):last-child) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.quote:first-child {
		grid-row: auto;
	}

	.quote--lead blockquote p {
		font-size: var(--step-1);
		max-width: none;
	}

	.quote__mark {
		font-size: 2.1rem;
	}

	.quote--lead .quote__mark {
		font-size: 2.7rem;
	}
}

@media (max-width: 640px) {
	.quote,
	.quote--article {
		padding: var(--space-m);
	}

	.quote--lead .quote__mark {
		font-size: 2.2rem;
	}
}

/* ---------- Metrics ---------- */

.metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0;
}

.metrics > div {
	padding: var(--space-l) var(--space-xl) var(--space-l) 0;
	border-inline-end: 1px solid var(--line);
}

.metrics > div:last-child {
	border-inline-end: 0;
	padding-right: 0;
}

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

.metrics--1 > div {
	padding-right: 0;
}

.metric__value {
	font-family: var(--font-display);
	font-size: var(--step-4);
	font-weight: 750;
	letter-spacing: var(--track-tighter);
	font-variant-numeric: tabular-nums;
	color: var(--accent);
	line-height: 1;
}

.metric__label {
	margin-top: var(--space-xs);
	color: var(--text-muted);
	font-size: var(--step--1);
	max-width: 26ch;
}

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

	.metrics > div {
		padding: var(--space-m) 0;
		border-inline-end: 0;
		border-bottom: 1px solid var(--line);
	}

	.metrics > div:first-child {
		padding-top: 0;
	}

	.metrics > div:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

/* ---------- Closing call to action ---------- */

/*
 * White page around the dark card, equal on both sides. The previous
 * section must not add extra padding-bottom, and the footer must not add
 * margin-top, or those stack and the band sits too low.
 *
 * Process is the exception: it is a raised block, so its own padding-bottom
 * is breathing room inside that surface — not stacked white space above the
 * dark card. Stripping it leaves the last step flush with the section edge.
 */
.cta-band {
	padding-block: var(--space-2xl);
}

.section:has(+ .cta-band):not(:has(.process)) {
	padding-bottom: 0;
}

/*
 * The one dark block on the page. A deliberate closing moment, used once,
 * never as alternating theme inversion between sections.
 */
.cta {
	position: relative;
	padding: var(--space-3xl) var(--space-2xl);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(ellipse 58% 95% at 88% 6%, rgba(19, 86, 227, 0.55), rgba(19, 86, 227, 0) 62%),
		var(--ink);
	overflow: hidden;
	isolation: isolate;
}

/* The same grid as the hero, so the page opens and closes on one texture. */
.cta::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: radial-gradient(ellipse 70% 90% at 12% 20%, #000, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse 70% 90% at 12% 20%, #000, transparent 70%);
	pointer-events: none;
	z-index: -1;
}

/* Headline left, the ask on the right, both anchored to the same baseline. */
.cta {
	display: grid;
	gap: var(--space-xl);
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: end;
}

.cta h2 {
	font-size: var(--step-5);
	max-width: 16ch;
	color: var(--ink-text);
}

.cta h2 em {
	color: #9dbdff;
}

.cta p {
	color: var(--ink-muted);
	max-width: 40ch;
	font-size: var(--step-0);
}

.cta__actions {
	margin-top: var(--space-l);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-m);
}

.cta__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 550;
	color: var(--ink-text);
	text-decoration: none;
}

.cta__phone:hover {
	color: #9dbdff;
}

/* Inside the dark block the primary button inverts so it stays readable. */
.cta .btn--primary,
.cta a.btn.btn--primary,
.cta button.btn.btn--primary {
	background: var(--bg);
	color: var(--ink);
	-webkit-text-fill-color: var(--ink);
	box-shadow: none;
}

.cta .btn--primary:hover,
.cta a.btn.btn--primary:hover,
.cta button.btn.btn--primary:hover {
	background: var(--accent-soft);
	color: var(--ink);
	-webkit-text-fill-color: var(--ink);
}

@media (max-width: 900px) {
	.cta-band {
		padding-block: var(--space-l);
	}

	.cta {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: var(--space-l);
		padding: var(--space-xl) var(--space-l);
	}

	.cta h2 {
		max-width: 20ch;
	}

	.cta__actions {
		margin-top: var(--space-m);
	}
}

@media (max-width: 640px) {
	.cta-band {
		padding-block: var(--space-l);
	}

	.cta {
		padding: var(--space-l);
		border-radius: var(--radius);
	}
}

/* ---------- Page hero for interior pages ---------- */

.page-hero {
	padding-block: var(--space-2xl) var(--space-xl);
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.page-hero--tight {
	padding-block: var(--space-l) var(--space-s);
}

.page-hero--tight .breadcrumbs {
	margin-bottom: var(--space-xs);
}

.page-hero--tight .page-hero__sub {
	margin-top: var(--space-s);
}

.page-hero--tight .anchor-nav {
	margin-top: var(--space-m);
}

.page-hero--tight + .section {
	padding-top: var(--space-m);
}

@media (max-width: 900px) {
	.page-hero {
		padding-block: var(--space-xl) var(--space-l);
	}

	.page-hero--tight {
		padding-block: var(--space-m) var(--space-s);
	}

	.page-hero--contact {
		padding-block: var(--space-xl) var(--space-xl);
	}

	.page-hero__cta {
		margin-top: var(--space-m);
	}
}

@media (max-width: 640px) {
	.page-hero {
		padding-block: 2.75rem 2rem;
	}

	.page-hero h1 {
		max-width: none;
	}

	.page-hero__sub {
		margin-top: var(--space-s);
	}

	.breadcrumbs {
		margin-bottom: var(--space-s);
	}
}

.page-hero--contact {
	padding-block: var(--space-2xl) var(--space-2xl);
}

.page-hero--contact h1 {
	font-size: var(--step-3);
	max-width: none;
	text-wrap: balance;
}

.page-hero--contact .breadcrumbs {
	margin-bottom: var(--space-xs);
}

/*
 * Sized ellipse rather than a clipped circle: the transparent stop has to land
 * inside the box, or the tint ends on a hard edge. The mask does the same job
 * vertically, since the section clips whatever overflows its bottom.
 */
.page-hero::before {
	content: '';
	position: absolute;
	inset: 0 -15% auto -20%;
	height: 150%;
	background:
		radial-gradient(ellipse 46% 46% at 74% 26%, rgba(19, 86, 227, 0.1), rgba(19, 86, 227, 0) 70%),
		linear-gradient(180deg, var(--surface), rgba(246, 248, 252, 0) 72%);
	pointer-events: none;
	z-index: -1;
}

/* Same grid as the front page hero, so interior pages feel like one system. */
.page-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(8, 13, 24, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(8, 13, 24, 0.06) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: radial-gradient(ellipse 58% 80% at 20% 30%, #000, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse 58% 80% at 20% 30%, #000, transparent 70%);
	pointer-events: none;
	z-index: -1;
}

.page-hero h1 {
	max-width: 18ch;
}

.page-hero--doc h1 {
	font-size: var(--step-4);
	max-width: 22ch;
	line-height: 1.08;
}

.page-hero__sub {
	margin-top: var(--space-m);
	max-width: 58ch;
	font-size: var(--step-1);
	color: var(--text-muted);
}

.page-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: var(--space-l);
}

.breadcrumbs {
	display: flex;
	gap: 0.5em;
	align-items: center;
	font-size: var(--step--1);
	color: var(--text-faint);
	margin-bottom: var(--space-m);
}

.breadcrumbs a {
	color: var(--text-faint);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--text);
}

/* ---------- Framed media ---------- */

.media-frame {
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow-md);
}

.media-frame img {
	width: 100%;
	height: auto;
}

/* ---------- Case study ----------
 *
 * Hero sits on one centre axis (name, pills, quote). The screenshot is the
 * full container width. The story uses that same width, with large step
 * numbers in a left rail. Only the last customer quote sits in a card.
 */

.case-hero {
	padding: var(--space-xl) 0 0;
	background: var(--bg);
	text-align: center;
}

.case-hero .breadcrumbs {
	justify-content: center;
	margin: 0 0 var(--space-l);
}

.case-hero h1 {
	margin: 0;
	font-size: var(--step-6);
	font-weight: 700;
	letter-spacing: var(--track-display);
	line-height: 0.95;
}

.case-hero__type {
	margin: 0.7rem 0 0;
	color: var(--text-muted);
	font-size: var(--step-0);
	font-weight: 450;
}

.case-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.45rem;
	margin: 1.35rem 0 0;
	padding: 0;
	list-style: none;
}

.case-chips li {
	display: inline-flex;
	align-items: center;
	padding: 0.42em 0.95em;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	color: var(--text);
	font-size: var(--step--2);
	font-weight: 550;
	line-height: 1.25;
}

.case-lead {
	width: min(100%, 40rem);
	margin: 2.75rem auto 0;
}

.case-lead blockquote {
	margin: 0;
}

.case-lead blockquote p {
	margin: 0;
	font-size: var(--step-1);
	font-weight: 450;
	line-height: 1.45;
	letter-spacing: var(--track-tight);
	color: var(--text);
	text-wrap: pretty;
}

.case-lead blockquote p::before {
	content: '\201C';
}

.case-lead blockquote p::after {
	content: '\201D';
}

.case-lead figcaption {
	display: flex;
	justify-content: center;
	margin-top: 1.35rem;
}

.case-shot {
	width: 100%;
	margin: 3.25rem 0 0;
	border-radius: 1.75rem;
	overflow: hidden;
	background: var(--ink);
	box-shadow: var(--shadow-lg);
}

.case-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top center;
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.case-shot img {
			transform-origin: center;
			animation: case-shot-settle linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 40%;
		}
	}
}

@keyframes case-shot-settle {
	from {
		transform: scale(1.04);
	}
	to {
		transform: scale(1);
	}
}

.case-story {
	padding: var(--space-2xl) 0;
	background: var(--bg);
}

.case-read {
	--case-rail: 5.75rem;
	--case-gap: 7.5rem;
	display: grid;
	gap: var(--space-xl);
	width: min(100%, 58rem);
	margin-inline: auto;
}

.case-part,
.case-work {
	display: grid;
	gap: var(--space-s);
	width: 100%;
}

.case-part,
.case-step {
	display: grid;
	grid-template-columns: var(--case-rail) minmax(0, 1fr);
	column-gap: var(--case-gap);
	align-items: start;
}

.case-part .case-kicker,
.case-part .prose {
	grid-column: 2;
}

.case-work > .case-kicker {
	margin-left: calc(var(--case-rail) + var(--case-gap));
	width: auto;
}

.case-kicker {
	margin: 0;
	color: var(--accent);
	font-size: var(--step--1);
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.case-part .prose,
.case-step .prose {
	color: var(--text);
	max-width: none;
}

.case-part .prose p,
.case-step .prose p {
	font-size: var(--step-0);
	line-height: 1.7;
}

.case-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-xl);
	min-width: 0;
	width: 100%;
}

.case-step + .case-step {
	padding-top: var(--space-l);
	border-top: 1px solid var(--line);
}

.case-step__index {
	color: var(--accent);
	font-size: var(--step-5);
	font-weight: 700;
	letter-spacing: var(--track-display);
	line-height: 0.85;
	font-variant-numeric: tabular-nums;
	font-variation-settings: 'opsz' var(--opsz-display);
	padding-top: 0.06em;
}

.case-step__body {
	display: grid;
	gap: var(--space-s);
	min-width: 0;
	padding-top: 0.35em;
}

.case-step h2 {
	margin: 0;
	font-size: var(--step-2);
	font-weight: 650;
	letter-spacing: var(--track-tighter);
	line-height: 1.2;
	text-wrap: balance;
}

.case-voice {
	display: grid;
	gap: var(--space-s);
	width: auto;
	margin-left: calc(var(--case-rail) + var(--case-gap));
	padding: var(--space-l);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.case-voice .case-by__face + .case-by__face {
	box-shadow: 0 0 0 2px var(--surface);
}

.case-voice blockquote {
	margin: 0;
}

.case-voice blockquote p {
	margin: 0;
	font-size: var(--step-1);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: var(--track-tight);
	color: var(--text);
	text-wrap: pretty;
}

.case-voice blockquote p + p {
	margin-top: 0.85em;
}

.case-voice figcaption {
	margin-top: var(--space-m);
}

.case-by {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	text-align: left;
}

.case-by cite {
	display: grid;
	gap: 0.12em;
	font-style: normal;
	min-width: 0;
}

.case-by__faces {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.case-by__face {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--surface-2);
	box-shadow: 0 0 0 1px var(--line);
}

.case-by__face + .case-by__face {
	margin-left: -0.6rem;
	box-shadow: 0 0 0 2px var(--surface);
}

.case-hero .case-by__face + .case-by__face {
	box-shadow: 0 0 0 2px var(--bg);
}

.case-by__face--logo {
	display: grid;
	place-items: center;
	padding: 0.35rem;
	background: var(--surface-2);
	z-index: 1;
}

.case-by__face--logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.case-by__face--invert img {
	filter: invert(1);
}

.case-by__face--initials {
	display: grid;
	place-items: center;
	background: var(--accent-soft);
	color: var(--accent-ink);
	font-size: var(--step--2);
	font-weight: 650;
}

.case [data-reveal].will-reveal {
	opacity: 0;
	transform: translateY(12px);
}

.case [data-reveal].will-reveal.is-visible {
	animation: case-rise 600ms var(--ease) forwards;
}

@keyframes case-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.case + .section--raised {
	border-top: 1px solid var(--line);
}

.case + .section--raised .section__head h2 {
	font-size: var(--step-3);
}

@media (max-width: 800px) {
	.case-hero {
		padding-top: var(--space-l);
	}

	.case-hero h1 {
		font-size: var(--step-4);
	}

	.case-lead {
		margin-top: var(--space-l);
	}

	.case-shot {
		margin-top: var(--space-xl);
		border-radius: var(--radius-lg);
	}

	.case-shot img {
		aspect-ratio: 4 / 3;
	}

	.case-story {
		padding-block: var(--space-xl);
	}

	.case-read {
		--case-rail: 4.25rem;
		--case-gap: var(--space-m);
		width: 100%;
	}

	.case-part {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-s);
	}

	.case-part .case-kicker,
	.case-part .prose,
	.case-work > .case-kicker {
		grid-column: auto;
		margin-left: 0;
		width: auto;
	}

	.case-voice {
		margin-left: 0;
	}

	.case-step {
		column-gap: var(--space-m);
	}

	.case-step__index {
		font-size: var(--step-3);
	}

	.case-step h2 {
		font-size: var(--step-1);
	}

	.case-voice {
		padding: var(--space-m);
	}
}

@media (max-width: 640px) {
	.case-hero {
		padding-top: var(--space-m);
	}

	.case-shot {
		margin-top: var(--space-l);
	}

	.case-story {
		padding-block: 3.5rem;
	}

	.case-step {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-2xs);
	}

	.case-step__index {
		font-size: var(--step-2);
		padding-top: 0;
	}

	.case-step__body {
		padding-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.case [data-reveal].will-reveal,
	.case [data-reveal].will-reveal.is-visible {
		opacity: 1;
		transform: none;
		animation: none;
	}
}