/* ============================================================
   Arenex Digital — main.css

   Desktop / base styles only. Every @media block lives in
   responsive.css (00 §5), which loads after this file.

   Tokens are ported verbatim from the source site — same names,
   same values (04 §7 step 3). Component rules read tokens only;
   there are no hardcoded hex or px values below the token block.

   A note on the .t-* classes: these are TYPE ROLE classes, part
   of the token layer described in 00 §4 ("font families per
   role", "H1-H3 use clamp()"). They are not utility classes and
   not framework classes — .t-display names a typographic role
   the same way --font-display does. Rule 2 is intact: there is
   no .mt-4, no .text-center, and no Bootstrap or Tailwind.
============================================================ */

/* ---------------------------------------------------- tokens */

:root {
	/* Colour — ported verbatim */
	--background: #070608;
	--surface: #0e0c10;
	--surface-2: #141117;
	--line: rgba(255, 240, 214, 0.1);
	--foreground: #f4efe6;
	--muted: #a39d92;
	--accent: #6ef36f;
	--accent-ink: #08160b;
	--glow: rgba(120, 245, 130, 0.28);

	/* Semantic aliases so component rules never name a raw colour */
	--primary-color: var(--accent);
	--secondary-color: var(--surface-2);
	--accent-color: var(--accent);
	--text-color: var(--foreground);
	--bg-color: var(--background);
	--border-color: var(--line);

	/* Typography */
	--font-display: "Google Sans Flex", system-ui, sans-serif;
	--font-body: "Google Sans Flex", system-ui, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;

	--display-size: clamp(2.75rem, 6vw, 4.5rem);
	--h1-size: var(--display-size);
	--h2-size: clamp(2rem, 4.2vw, 3rem);
	--h3-size: clamp(1.5rem, 2.6vw, 2rem);
	--h4-size: clamp(1.25rem, 1.8vw, 1.5rem);
	--lead-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
	--body-size: 1rem;
	--eyebrow-size: 0.6875rem;
	--small-size: 0.8125rem;

	/* Spacing — 8pt grid */
	--gap-xs: 0.5rem;
	--gap-sm: 1rem;
	--gap-md: 1.5rem;
	--gap-lg: 2rem;
	--gap-xl: 3rem;
	--gap-2xl: 4.5rem;
	--section-padding: clamp(4.5rem, 8vw, 9rem);

	/* Container */
	--container-max-width: 1400px;
	--container-padding: 2rem;

	/* Radius — cards/images 16px, buttons pill, inputs 12px */
	--radius-sm: 0.75rem;
	--radius-md: 1rem;
	--radius-lg: 1.25rem;
	--radius-pill: 999px;

	/* Chrome */
	--header-height: 4rem;
	--media-frame-height: clamp(420px, 46vw, 620px);
	--transition: 200ms ease;
}

/* ----------------------------------------------------- reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/*
	 * Deliberately auto, not smooth. On a 12,000px page a nav click would
	 * otherwise animate the whole way down, which reads as the page being
	 * stuck rather than as a transition. Ported from the source.
	 */
	scroll-behavior: auto;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--bg-color);
	color: var(--text-color);
	font-family: var(--font-body);
	font-size: var(--body-size);
	line-height: 1.5;
	font-variation-settings: "opsz" 18;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.has-nav-open {
	overflow: hidden;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

ul,
ol,
dl,
dd {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

figure {
	margin: 0;
}

blockquote {
	margin: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

::selection {
	background: var(--accent);
	color: var(--accent-ink);
}

/* Pre-Flight 1.3 — headings carry no bottom margin; sections own their rhythm. */
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

/* -------------------------------------------------- type roles */

.t-display {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 96, "wght" 580, "wdth" 108;
	font-size: var(--display-size);
	line-height: 1.04;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.t-h2 {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 72, "wght" 560, "wdth" 104;
	font-size: var(--h2-size);
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.t-h3 {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 48, "wght" 560, "wdth" 102;
	font-size: var(--h3-size);
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.t-h4 {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 36, "wght" 560, "wdth" 100;
	font-size: var(--h4-size);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.t-lead {
	font-size: var(--lead-size);
	line-height: 1.6;
	text-wrap: pretty;
	color: var(--muted);
}

.t-eyebrow {
	font-size: var(--eyebrow-size);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--muted);
}

.glow-text {
	text-shadow: 0 0 18px var(--glow), 0 0 70px rgba(255, 210, 140, 0.16);
}

.glow-soft {
	text-shadow: 0 0 26px rgba(255, 232, 190, 0.18);
}

/* ------------------------------------------------ a11y basics */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: var(--gap-xs);
	left: var(--gap-xs);
	z-index: 100;
	padding: var(--gap-xs) var(--gap-sm);
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: var(--accent-ink);
	font-size: var(--small-size);
	transform: translateY(-200%);
	transition: transform var(--transition);
}

.skip-link:focus {
	transform: translateY(0);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* -------------------------------------------------- containers */

.site-main {
	flex: 1 0 auto;
	padding-top: var(--header-height);
}

/* R4.5 — a sticky header needs scroll-margin on every anchor target. */
.site-main section[id] {
	scroll-margin-top: 5.5rem;
}

.site-main section {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 600ms ease, transform 600ms ease;
}

.site-main section.is-revealed {
	opacity: 1;
	transform: none;
}

/* ----------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-xs);
	/* 00 §23 — 44px minimum touch target. */
	min-height: 2.75rem;
	padding: 0.6875rem 1.375rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-size: 0.875rem;
	font-weight: 500;
	text-align: center;
	transition: transform var(--transition), background-color var(--transition),
		border-color var(--transition), color var(--transition);
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: scale(0.98);
}

.btn--primary {
	background: var(--accent);
	color: var(--accent-ink);
	box-shadow: 0 0 24px var(--glow);
}

.btn--ghost {
	border-color: var(--line);
	color: var(--foreground);
	background: transparent;
}

.btn--ghost:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.btn--quiet {
	padding-inline: 0;
	min-height: auto;
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.btn--quiet:hover {
	color: var(--foreground);
}

/* --------------------------------------------------- site header */

.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--background) 75%, transparent);
	backdrop-filter: blur(12px);
}

/* Pre-Flight 1.5 — clear the WP admin bar for logged-in users. */
.admin-bar .site-header {
	top: 32px;
}

.site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-lg);
	height: var(--header-height);
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.site-nav__brand {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

/*
 * R4.6 — the exported wordmark carries dead space on its artboard. The child
 * theme crops the viewBox to the ink (113.32 75.37 1235.5 177.11) and this
 * height is scaled by the same ratio (177.11 / 327.87) so the rendered size
 * does not change.
 */
.site-nav__logo {
	height: 1.0802rem;
	width: auto;
}

.site-nav__wordmark {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 36, "wght" 580, "wdth" 104;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}

.site-nav__links {
	display: flex;
	align-items: center;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--gap-lg);
}

.site-nav__list a {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--muted);
	text-underline-offset: 4px;
	transition: color var(--transition);
}

.site-nav__list a:hover {
	color: var(--foreground);
	text-decoration: underline;
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
	color: var(--foreground);
}

.site-nav__actions {
	display: flex;
	align-items: center;
	gap: var(--gap-xs);
}

.site-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 0.3125rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
}

.site-nav__toggle-bar {
	display: block;
	width: 1.125rem;
	height: 1.5px;
	background: var(--foreground);
	transition: transform var(--transition), opacity var(--transition);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:first-child {
	transform: translateY(3.5px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

.site-nav__panel {
	display: none;
	border-top: 1px solid var(--line);
	background: var(--background);
	padding: var(--gap-sm) var(--container-padding) var(--gap-md);
}

.site-nav__panel-list {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.site-nav__panel-list a {
	display: block;
	padding: 0.75rem;
	border-radius: var(--radius-md);
	font-size: 1rem;
	font-weight: 500;
	color: var(--muted);
}

.site-nav__panel-list a:hover {
	background: var(--surface);
	color: var(--foreground);
}

.site-nav__panel-cta {
	margin-top: var(--gap-xs);
	width: 100%;
}

/* ---------------------------------------------------------- hero */

.hero {
	position: relative;
	min-height: 100dvh;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.hero__wall {
	position: absolute;
	inset: 0;
	display: flex;
	gap: var(--gap-sm);
	padding: var(--gap-sm);
	opacity: 0.28;
	pointer-events: none;
	mask-image: radial-gradient(
		ellipse 64% 66% at 50% 46%,
		#000 22%,
		rgba(0, 0, 0, 0.92) 40%,
		rgba(0, 0, 0, 0.65) 56%,
		rgba(0, 0, 0, 0.28) 72%,
		transparent 86%
	);
}

.hero__wall-track {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	flex: 1 1 0;
	min-width: 0;
	animation: wall-scroll 44s linear infinite;
}

.hero__wall-item {
	flex: 0 0 auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.hero__wall-image {
	width: 100%;
	height: auto;
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: var(--gap-2xl) var(--container-padding);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-md);
}

.hero__heading {
	max-width: 20ch;
}

.hero__heading-accent {
	color: var(--accent);
}

.hero__lead {
	max-width: 52ch;
}

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

.hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-xl);
	margin-top: var(--gap-md);
}

.hero__stat-value {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 48, "wght" 580, "wdth" 102;
	font-size: var(--h3-size);
	line-height: 1.1;
}

.hero__stat-label {
	margin-top: 0.125rem;
	font-size: var(--small-size);
	color: var(--muted);
}

.hero__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap-sm);
}

.hero__reviews,
.hero__badge {
	font-size: var(--small-size);
	color: var(--muted);
}

.hero__badge {
	padding: 0.3125rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	color: var(--accent);
}

@keyframes wall-scroll {
	to {
		transform: translateY(-50%);
	}
}

/* --------------------------------------------------- film strip */

.film-strip {
	position: relative;
	overflow: hidden;
	padding-block: var(--section-padding);
}

.film-strip__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.film-strip__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap-lg);
	margin-bottom: var(--gap-lg);
}

.film-strip__eyebrow {
	margin-bottom: var(--gap-xs);
}

.film-strip__controls {
	display: flex;
	align-items: center;
	gap: var(--gap-md);
	flex-shrink: 0;
}

.film-strip__nav {
	display: flex;
	align-items: center;
	gap: var(--gap-xs);
}

.film-strip__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	color: var(--muted);
	transition: color var(--transition), border-color var(--transition);
}

.film-strip__arrow:hover {
	color: var(--accent);
	border-color: var(--accent);
}

.film-strip__counter {
	font-family: var(--font-mono);
	font-size: var(--small-size);
	color: var(--muted);
	min-width: 4ch;
	text-align: center;
}

.film-strip__counter-sep {
	opacity: 0.5;
	margin-inline: 0.125rem;
}

.film-strip__sprockets {
	height: 1.25rem;
	background-image: radial-gradient(circle at center, var(--background) 4px, transparent 4.5px);
	background-size: 26px 100%;
	background-repeat: repeat-x;
	border-block: 1px solid var(--line);
	background-color: var(--surface);
}

.film-strip__track {
	display: flex;
	gap: var(--gap-md);
	/* R4.2 — auto, never hidden. `hidden` kills the wheel and the component reads as broken. */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block: var(--gap-lg);
}

.film-strip__track::-webkit-scrollbar {
	display: none;
}

.film-strip__slide {
	flex: 0 0 clamp(280px, 34vw, 420px);
	scroll-snap-align: start;
}

/* -------------------------------------------------- project card */

.project-card {
	height: 100%;
}

.project-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	overflow: hidden;
	transition: border-color var(--transition), transform var(--transition);
}

.project-card__link:hover {
	border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
	transform: translateY(-2px);
}

.project-card__media {
	position: relative;
	aspect-ratio: 8 / 5;
	overflow: hidden;
}

.project-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.project-card__badge {
	position: absolute;
	top: var(--gap-xs);
	left: var(--gap-xs);
	padding: 0.25rem 0.625rem;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--background) 82%, transparent);
	border: 1px solid var(--line);
	font-size: 0.6875rem;
	color: var(--accent);
	backdrop-filter: blur(6px);
}

.project-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xs);
	padding: var(--gap-md);
	flex: 1 1 auto;
}

.project-card__summary {
	font-size: var(--small-size);
	line-height: 1.55;
	color: var(--muted);
}

.project-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.project-card__tag {
	padding: 0.1875rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 0.6875rem;
	color: var(--muted);
}

.project-card__metric {
	margin-top: auto;
	padding-top: var(--gap-sm);
	border-top: 1px solid var(--line);
}

.project-card__metric-value {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 36, "wght" 580, "wdth" 102;
	font-size: var(--h4-size);
	color: var(--accent);
}

.project-card__metric-label {
	font-size: var(--small-size);
	color: var(--muted);
}

.project-card__cta {
	font-size: var(--small-size);
	font-weight: 500;
	color: var(--foreground);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ------------------------------------------------------ services */

.services {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: var(--section-padding) var(--container-padding);
}

.services__heading {
	max-width: 24ch;
	margin-bottom: var(--gap-2xl);
}

.services__item {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--gap-xl);
	align-items: center;
	padding-block: var(--gap-2xl);
	border-top: 1px solid var(--line);
}

.services__number {
	font-family: var(--font-mono);
	font-size: var(--small-size);
	color: var(--accent);
	margin-bottom: var(--gap-xs);
}

.services__title {
	margin-bottom: var(--gap-sm);
}

.services__body {
	color: var(--muted);
	line-height: 1.65;
	max-width: 46ch;
}

.services__bullets {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: var(--gap-md);
}

.services__bullet {
	position: relative;
	padding-left: 1.25rem;
	font-size: var(--small-size);
	color: var(--muted);
}

.services__bullet::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--accent);
}

.services__frame-tabs,
.industries__tabs,
.before-after__tabs {
	display: flex;
	flex-wrap: wrap;
	/* R4.3 — gap matches the hit pad so targets touch but never overlap. */
	gap: var(--gap-xs);
	margin-bottom: var(--gap-sm);
}

.services__frame-tab,
.industries__tab,
.before-after__tab {
	padding: 0.4375rem 0.875rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--small-size);
	color: var(--muted);
	min-height: 2.25rem;
	transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.services__frame-tab:hover,
.industries__tab:hover,
.before-after__tab:hover {
	color: var(--foreground);
}

.services__frame-tab.is-active,
.industries__tab.is-active,
.before-after__tab.is-active {
	color: var(--accent-ink);
	background: var(--accent);
	border-color: var(--accent);
}

/* --------------------------------------------------- site frame */

.site-frame {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	/*
	 * R4.4 — no overflow:hidden here. Clipping the wrapper also clips controls
	 * that sit outside the frame; the image clips to its own radius instead.
	 */
}

.site-frame__chrome {
	display: flex;
	align-items: center;
	gap: var(--gap-xs);
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--line);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--surface-2);
}

.site-frame__dots {
	display: flex;
	gap: 0.25rem;
}

.site-frame__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--line);
}

.site-frame__label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.site-frame__viewport {
	height: var(--media-frame-height);
	overflow: hidden;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.site-frame--scroll .site-frame__viewport {
	/* R4.2 — auto so the wheel works. The browser chains to the page natively. */
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.site-frame--scroll .site-frame__viewport::-webkit-scrollbar {
	display: none;
}

.site-frame__shot {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.site-frame--scroll .site-frame__shot {
	height: auto;
	object-fit: unset;
}

.site-frame__hint {
	padding: 0.375rem 0.75rem 0;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	color: var(--muted);
	text-align: right;
}

.site-frame__caption,
.before-after__caption,
.seo-showcase__metrics {
	padding: var(--gap-xs) var(--gap-sm) var(--gap-sm);
	font-size: var(--small-size);
	color: var(--muted);
	line-height: 1.55;
}

/* ------------------------------------------------- seo showcase */

.seo-showcase {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

.seo-showcase__viewport {
	max-height: var(--media-frame-height);
	overflow: hidden;
}

.seo-showcase__image {
	width: 100%;
	object-fit: cover;
	object-position: center top;
}

.seo-showcase__panel {
	padding: var(--gap-sm);
	border-top: 1px solid var(--line);
}

.seo-showcase__panel-heading {
	font-size: var(--eyebrow-size);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--accent);
	margin-bottom: var(--gap-xs);
}

.seo-showcase__panel-body {
	font-size: var(--small-size);
	line-height: 1.6;
	color: var(--muted);
}

/* ------------------------------------------------- before/after */

.before-after__figure {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

.before-after__stage {
	position: relative;
	aspect-ratio: 8 / 5;
	overflow: hidden;
	touch-action: pan-y;
}

.before-after__before,
.before-after__after {
	position: absolute;
	inset: 0;
}

.before-after__before {
	clip-path: inset(0 50% 0 0);
}

.before-after__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.before-after__pill {
	position: absolute;
	bottom: var(--gap-xs);
	padding: 0.1875rem 0.5rem;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--background) 82%, transparent);
	border: 1px solid var(--line);
	font-size: 0.6875rem;
	color: var(--foreground);
	backdrop-filter: blur(6px);
}

.before-after__pill--before {
	left: var(--gap-xs);
}

.before-after__pill--after {
	right: var(--gap-xs);
}

.before-after__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	appearance: none;
	background: transparent;
}

.before-after__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--accent);
	transform: translateX(-1px);
	pointer-events: none;
	box-shadow: 0 0 12px var(--glow);
}

.before-after__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2rem;
	height: 2rem;
	transform: translate(-50%, -50%);
	border: 2px solid var(--accent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--background) 70%, transparent);
}

.before-after__hint {
	padding: 0.375rem 0.75rem 0;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	color: var(--muted);
	text-align: right;
}

/* ---------------------------------------------------- industries */

.industries {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-height: 100dvh;
	overflow: hidden;
	background: radial-gradient(50% 60% at 20% 40%, color-mix(in srgb, var(--accent) 6%, transparent), transparent);
}

.industries__copy {
	padding: var(--section-padding) var(--gap-xl);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--gap-md);
	max-width: 40rem;
	margin-left: auto;
}

.industries__lead {
	max-width: 44ch;
}

.industries__body {
	color: var(--muted);
	line-height: 1.65;
	max-width: 46ch;
}

.industries__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-lg);
	margin-top: var(--gap-md);
}

.industries__stat-value {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 36, "wght" 580, "wdth" 102;
	font-size: var(--h4-size);
	color: var(--accent);
}

.industries__stat-label {
	font-size: var(--small-size);
	color: var(--muted);
}

.industries__media {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--gap-md);
	padding: var(--section-padding) var(--gap-xl);
	border-left: 1px solid var(--line);
	background: var(--surface);
}

/* --------------------------------------------------- gather CTA */

.gather-cta {
	height: 200vh;
	position: relative;
}

.gather-cta__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-lg);
	padding-inline: var(--container-padding);
	text-align: center;
}

.gather-cta__words {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25em;
	max-width: 24ch;
	font-family: var(--font-display);
	font-variation-settings: "opsz" 96, "wght" 580, "wdth" 108;
	font-size: var(--display-size);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.gather-cta__word {
	color: color-mix(in srgb, var(--foreground) 22%, transparent);
	transition: color 400ms ease, text-shadow 400ms ease;
}

.gather-cta__word.is-lit {
	color: var(--foreground);
	text-shadow: 0 0 26px var(--glow);
}

/* ----------------------------------------------- process terminal */

.process-terminal {
	padding-block: var(--section-padding);
	border-block: 1px solid var(--line);
	background: var(--surface);
}

.process-terminal__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	display: flex;
	flex-direction: column;
	gap: var(--gap-xl);
}

.process-terminal__heading {
	max-width: 24ch;
}

.process-terminal__window {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--background);
	padding: var(--gap-lg);
}

.process-terminal__status {
	display: flex;
	align-items: center;
	gap: var(--gap-xs);
	font-family: var(--font-mono);
	font-size: var(--small-size);
	color: var(--accent);
	padding-bottom: var(--gap-md);
	border-bottom: 1px solid var(--line);
}

.process-terminal__caret {
	width: 0.5rem;
	height: 1em;
	background: var(--accent);
	animation: caret-blink 1.1s steps(2, start) infinite;
}

@keyframes caret-blink {
	to {
		opacity: 0;
	}
}

.process-terminal__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap-lg);
	margin-top: var(--gap-lg);
}

.process-terminal__step-index {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	color: var(--accent);
	margin-bottom: var(--gap-xs);
}

.process-terminal__step-body {
	margin-top: var(--gap-xs);
	font-size: var(--small-size);
	line-height: 1.6;
	color: var(--muted);
}

.process-terminal__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap-md);
}

.process-terminal__link {
	font-size: var(--small-size);
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.process-terminal__link:hover {
	color: var(--accent);
}

/* -------------------------------------------------- testimonials */

.testimonials {
	overflow: hidden;
	padding-block: var(--section-padding);
}

.testimonials__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.testimonials__eyebrow {
	margin-bottom: var(--gap-lg);
}

.testimonials__eyebrow-short {
	display: none;
}

.testimonials__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

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

.testimonials__track {
	display: flex;
	gap: var(--gap-md);
}

.testimonials__item {
	flex: 0 0 clamp(300px, 46vw, 560px);
	scroll-snap-align: center;
}

.testimonials__dots {
	display: flex;
	justify-content: center;
	/* R4.3 — 20px gap + 10px dot = 30px centres, matching the 30px pad below. */
	gap: 1.25rem;
	margin-top: var(--gap-lg);
}

.testimonials__dot {
	position: relative;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--line);
	transition: background-color var(--transition);
}

.testimonials__dot::after {
	content: "";
	position: absolute;
	/* Pad equals the gap, so targets touch and never overlap. */
	inset: -0.625rem;
}

.testimonials__dot.is-active {
	background: var(--accent);
}

/* --------------------------------------------------- review card */

.review-card {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	height: 100%;
	padding: var(--gap-lg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

.review-card__rating {
	color: var(--accent);
	font-size: var(--small-size);
	letter-spacing: 0.1em;
}

.review-card__text {
	font-size: var(--lead-size);
	line-height: 1.6;
	text-wrap: pretty;
}

.review-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem var(--gap-xs);
	margin-top: auto;
	font-size: var(--small-size);
	color: var(--muted);
}

.review-card__author {
	color: var(--foreground);
}

.review-card__project::before,
.review-card__context::before {
	content: "·";
	margin-right: var(--gap-xs);
	opacity: 0.6;
}

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

.marquee {
	overflow: hidden;
	border-top: 1px solid var(--line);
	padding-block: var(--gap-md);
}

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

.marquee__list {
	display: flex;
	align-items: center;
}

.marquee__item {
	display: flex;
	align-items: center;
	gap: var(--gap-md);
	padding-inline: var(--gap-md);
}

.marquee__word {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 48, "wght" 560, "wdth" 102;
	font-size: var(--h4-size);
	white-space: nowrap;
	color: var(--muted);
}

.marquee__separator {
	color: var(--accent);
}

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

/* --------------------------------------------------------- about */

.about {
	padding-block: var(--section-padding);
	border-top: 1px solid var(--line);
	background: var(--surface);
	background-image: radial-gradient(50% 50% at 50% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent);
}

.about__inner {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--gap-2xl);
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.about__eyebrow {
	margin-bottom: var(--gap-xs);
}

.about__heading {
	margin-bottom: var(--gap-md);
	max-width: 24ch;
}

.about__body {
	color: var(--muted);
	line-height: 1.7;
	max-width: 60ch;
}

.about__body + .about__body {
	margin-top: var(--gap-sm);
}

.about__facts {
	display: grid;
	gap: var(--gap-md);
	align-content: start;
}

.about__fact {
	padding-bottom: var(--gap-md);
	border-bottom: 1px solid var(--line);
}

.about__fact-value {
	margin-top: 0.25rem;
	font-size: var(--lead-size);
}

/* ----------------------------------------------------- field CTA */

.field-cta {
	position: relative;
	min-height: 92dvh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.field-cta__media,
.contact__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.field-cta__image,
.contact__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.32;
}

.field-cta__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: var(--section-padding) var(--container-padding);
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
}

.field-cta__heading {
	max-width: 22ch;
}

.field-cta__body {
	max-width: 52ch;
}

.field-cta__actions,
.case-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-xs);
	margin-top: var(--gap-xs);
}

/* ------------------------------------------------------- contact */

.contact {
	position: relative;
	overflow: hidden;
	padding-block: var(--section-padding);
	background-image: radial-gradient(50% 45% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent);
}

.contact__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap-2xl);
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.contact__heading {
	margin-bottom: var(--gap-sm);
}

.contact__lead {
	max-width: 44ch;
}

.contact__details {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xs);
	margin-top: var(--gap-lg);
}

.contact__link {
	color: var(--foreground);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.contact__link:hover {
	color: var(--accent);
}

.contact__detail--plain {
	color: var(--muted);
	font-size: var(--small-size);
}

.contact__form {
	padding: var(--gap-lg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

/* Form controls — Fluent Forms markup, styled to match. */
.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form input[type="url"],
.contact__form select,
.contact__form textarea {
	width: 100%;
	padding: 0.6875rem 0.875rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--background);
	color: var(--foreground);
	font: inherit;
	font-size: var(--small-size);
}

.contact__form label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: var(--small-size);
	color: var(--muted);
}

.contact__form textarea {
	min-height: 8rem;
	resize: vertical;
}

.contact__form button,
.contact__form input[type="submit"] {
	min-height: 2.75rem;
	padding: 0.6875rem 1.375rem;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 500;
	box-shadow: 0 0 24px var(--glow);
}

/* --------------------------------------------------- work index */

.work-index {
	padding-block: var(--section-padding);
}

.work-index__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.work-index__head {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	margin-bottom: var(--gap-xl);
}

.work-index__heading {
	max-width: 24ch;
}

.work-index__intro {
	max-width: 62ch;
}

.work-index__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-xs);
	margin-bottom: var(--gap-xl);
}

.work-index__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-xs);
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--small-size);
	color: var(--muted);
	transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.work-index__chip:hover {
	color: var(--foreground);
}

.work-index__chip.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.work-index__chip-count {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	opacity: 0.7;
}

.work-index__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap-lg);
}

.work-index__empty {
	margin-top: var(--gap-lg);
	color: var(--muted);
}

/* ----------------------------------------------------- case hero */

.case-hero {
	position: relative;
	min-height: 88dvh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.case-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.case-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	opacity: 0.34;
}

.case-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: var(--section-padding) var(--container-padding);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-sm);
}

.case-hero__back {
	font-size: var(--small-size);
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.case-hero__back:hover {
	color: var(--accent);
}

.case-hero__labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap-xs);
	margin-top: var(--gap-md);
}

.case-hero__badge {
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 0.6875rem;
	color: var(--accent);
}

.case-hero__title {
	max-width: 22ch;
}

.case-hero__summary {
	max-width: 62ch;
}

.case-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: var(--gap-xs);
}

.case-hero__tag {
	padding: 0.1875rem 0.625rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 0.6875rem;
	color: var(--muted);
}

.case-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-xs);
	margin-top: var(--gap-md);
}

/* ----------------------------------------- case body shared rhythm */

.case-study__body > section {
	padding-block: var(--section-padding);
}

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

.spec-list__grid,
.problem-block__inner,
.stat-grid__inner,
.media-block__inner,
.before-after-section__inner,
.comparison-table__inner,
.screenshot-scroll__inner,
.video-embed__inner,
.mobile-triptych__inner,
.feature-cards__inner,
.speed-comparison__inner,
.results-grid__inner,
.text-block__inner,
.checklist__inner,
.numbered-steps__inner,
.audit-list__inner,
.page-list__inner,
.design-system__inner,
.pillar-grid__inner,
.review-block__inner,
.disclosure__inner,
.case-cta__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* Section heads share one rhythm so the page reads consistently. */
.media-block__head,
.before-after-section__head,
.screenshot-scroll__head,
.video-embed__head,
.mobile-triptych__head,
.feature-cards__head,
.speed-comparison__head,
.results-grid__head,
.checklist__head,
.numbered-steps__head,
.audit-list__head,
.page-list__head,
.design-system__head,
.pillar-grid__head {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	margin-bottom: var(--gap-xl);
	max-width: 68ch;
}

.problem-block__eyebrow,
.text-block__eyebrow {
	margin-bottom: var(--gap-xs);
}

.problem-block__inner,
.text-block__inner {
	max-width: 72ch;
	margin-inline: auto;
}

.problem-block__heading,
.text-block__heading {
	margin-bottom: var(--gap-md);
}

.problem-block__body,
.text-block__body,
.speed-comparison__body,
.results-grid__body {
	color: var(--muted);
	line-height: 1.7;
}

.problem-block__body p + p,
.text-block__body p + p,
.results-grid__body p + p {
	margin-top: var(--gap-sm);
}

.text-block__heading-accent,
.case-cta__heading-accent {
	color: var(--accent);
}

/* --------------------------------------------------- spec list */

.spec-list__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap-lg);
}

.spec-list__item {
	padding-bottom: var(--gap-md);
	border-bottom: 1px solid var(--line);
}

.spec-list__value {
	margin-top: 0.375rem;
	color: var(--muted);
	line-height: 1.6;
	font-size: var(--small-size);
}

/* --------------------------------------------- stat / results grids */

.stat-grid__heading,
.comparison-table__heading {
	margin-bottom: var(--gap-lg);
	max-width: 30ch;
}

.stat-grid__items,
.results-grid__items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap-lg);
}

.stat-grid__item,
.results-grid__item {
	padding: var(--gap-md);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
}

.stat-grid__value,
.results-grid__value {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 60, "wght" 580, "wdth" 104;
	font-size: var(--h3-size);
	line-height: 1.05;
}

.stat-grid__item--good .stat-grid__value,
.results-grid__item--good .results-grid__value {
	color: var(--accent);
}

.stat-grid__item--bad .stat-grid__value,
.results-grid__item--bad .results-grid__value {
	color: color-mix(in srgb, #ff8a7a 82%, var(--foreground));
}

.stat-grid__label,
.results-grid__label {
	margin-top: 0.375rem;
	font-size: var(--small-size);
	line-height: 1.5;
	color: var(--muted);
}

.stat-grid__caption,
.results-grid__caption,
.speed-comparison__caption,
.comparison-table__caption {
	margin-top: var(--gap-md);
	font-size: var(--small-size);
	color: var(--muted);
}

.results-grid__items {
	margin-top: var(--gap-xl);
}

/* ----------------------------------------------- comparison table */

.comparison-table__scroll {
	/* Wide content scrolls inside its own container; the page never does. */
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}

.comparison-table__table {
	min-width: 34rem;
}

.comparison-table__th {
	padding: var(--gap-sm) var(--gap-md);
	text-align: left;
	font-size: var(--eyebrow-size);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--muted);
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
	font-weight: 500;
}

.comparison-table__cell {
	padding: var(--gap-sm) var(--gap-md);
	border-bottom: 1px solid var(--line);
	font-size: var(--small-size);
	line-height: 1.55;
	vertical-align: top;
}

.comparison-table__cell--before {
	color: var(--muted);
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent);
}

.comparison-table__cell--after {
	color: var(--accent);
}

.comparison-table__row:last-child .comparison-table__cell {
	border-bottom: 0;
}

/* ---------------------------------------------------- video embed */

.video-embed__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface);
}

.video-embed__poster,
.video-embed__iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.video-embed__play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-xs);
	background: color-mix(in srgb, var(--background) 40%, transparent);
	color: var(--foreground);
}

.video-embed__play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 1.25rem;
	box-shadow: 0 0 32px var(--glow);
}

.video-embed__play-label {
	font-size: var(--small-size);
}

.video-embed__caption {
	margin-top: var(--gap-sm);
	font-size: var(--small-size);
	color: var(--muted);
}

/* ------------------------------------------------ mobile triptych */

.mobile-triptych__screens {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap-lg);
	max-width: 62rem;
}

.mobile-triptych__phone {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface);
}

.mobile-triptych__image {
	width: 100%;
	aspect-ratio: 390 / 844;
	object-fit: cover;
	object-position: center top;
}

/* -------------------------------------------------- feature cards */

.feature-cards__grid,
.pillar-grid__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap-lg);
}

.feature-cards__card,
.pillar-grid__item,
.audit-list__item {
	padding: var(--gap-lg);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
}

.feature-cards__card-body,
.pillar-grid__item-body,
.audit-list__fix {
	margin-top: var(--gap-xs);
	font-size: var(--small-size);
	line-height: 1.65;
	color: var(--muted);
}

/* ----------------------------------------------- speed comparison */

.speed-comparison__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap-lg);
}

.speed-comparison__shot {
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--surface);
}

/* -------------------------------------------------------- checklist */

.checklist__items {
	display: grid;
	gap: var(--gap-sm);
	max-width: 72ch;
}

.checklist__item {
	display: flex;
	align-items: flex-start;
	gap: var(--gap-sm);
	padding-bottom: var(--gap-sm);
	border-bottom: 1px solid var(--line);
	line-height: 1.6;
}

.checklist__tick {
	flex-shrink: 0;
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	border: 1px solid var(--accent);
	border-radius: 50%;
}

.checklist__tick::after {
	content: "";
	position: absolute;
	top: 0.3125rem;
	left: 0.375rem;
	width: 0.375rem;
	height: 0.1875rem;
	border-left: 1.5px solid var(--accent);
	border-bottom: 1.5px solid var(--accent);
	transform: rotate(-45deg);
}

.checklist__text {
	color: var(--muted);
	font-size: var(--small-size);
}

.checklist__note,
.numbered-steps__note,
.page-list__note,
.design-system__note {
	margin-top: var(--gap-lg);
	max-width: 72ch;
	font-size: var(--small-size);
	line-height: 1.65;
	color: var(--muted);
	padding-left: var(--gap-md);
	border-left: 2px solid var(--line);
}

/* --------------------------------------------- numbered steps / pages */

.numbered-steps__list,
.page-list__items {
	display: grid;
	gap: var(--gap-lg);
}

.numbered-steps__step,
.page-list__item {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: var(--gap-md);
	padding-bottom: var(--gap-lg);
	border-bottom: 1px solid var(--line);
}

.numbered-steps__number,
.page-list__number {
	font-family: var(--font-mono);
	font-size: var(--small-size);
	color: var(--accent);
	padding-top: 0.25rem;
}

.numbered-steps__text,
.page-list__text {
	margin-top: var(--gap-xs);
	font-size: var(--small-size);
	line-height: 1.65;
	color: var(--muted);
	max-width: 68ch;
}

.page-list__url {
	margin-top: 0.25rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	color: var(--accent);
}

/* -------------------------------------------------------- audit list */

.audit-list__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap-lg);
}

/* ----------------------------------------------------- design system */

.design-system__group + .design-system__group {
	margin-top: var(--gap-xl);
}

.design-system__label {
	margin-bottom: var(--gap-md);
}

.design-system__fonts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap-lg);
}

.design-system__font {
	padding: var(--gap-lg);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
}

.design-system__font-role {
	margin-top: var(--gap-xs);
	font-size: var(--small-size);
	color: var(--muted);
}

.design-system__swatches {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap-md);
}

.design-system__swatch {
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
	padding: var(--gap-sm);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	font-size: var(--small-size);
}

.design-system__chip {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--swatch, var(--surface-2));
}

.design-system__swatch-hex {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	color: var(--muted);
}

/* --------------------------------------------------- pillar grid */

.pillar-grid__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--gap-sm);
	margin-bottom: var(--gap-lg);
	padding-bottom: var(--gap-sm);
	border-bottom: 1px solid var(--line);
}

.pillar-grid__sublabel {
	font-size: var(--small-size);
	color: var(--muted);
}

/* ---------------------------------------------------- disclosure */

.disclosure__inner {
	max-width: 72ch;
}

.disclosure__body {
	padding: var(--gap-md);
	border: 1px dashed var(--line);
	border-radius: var(--radius-md);
	font-size: var(--small-size);
	line-height: 1.65;
	color: var(--muted);
}

/* ------------------------------------------------------- case CTA */

.case-cta {
	background: var(--surface);
	background-image: radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
}

.case-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-md);
}

.case-cta__heading {
	max-width: 24ch;
}

.case-cta__body {
	max-width: 56ch;
}

/* ---------------------------------------------------- next project */

.next-project {
	border-top: 1px solid var(--line);
}

.next-project__link {
	display: flex;
	align-items: center;
	gap: var(--gap-lg);
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: var(--gap-xl) var(--container-padding);
	transition: background-color var(--transition);
}

.next-project__link:hover {
	background: var(--surface);
}

.next-project__label {
	flex-shrink: 0;
}

.next-project__meta {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.next-project__eyebrow {
	font-size: var(--small-size);
	color: var(--muted);
}

.next-project__media {
	margin-left: auto;
	flex-shrink: 0;
	width: 8rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.next-project__image {
	width: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	object-position: center top;
}

/* ------------------------------------------------------ page body */

.page-body__inner {
	max-width: 72ch;
	margin-inline: auto;
	padding: var(--section-padding) var(--container-padding);
}

.page-body__title {
	margin-bottom: var(--gap-lg);
}

.page-body__content {
	color: var(--muted);
	line-height: 1.7;
}

.page-body__content p + p,
.page-body__content ul,
.page-body__content ol {
	margin-top: var(--gap-sm);
}

.page-body__content h2,
.page-body__content h3 {
	margin-top: var(--gap-xl);
	margin-bottom: var(--gap-sm);
	color: var(--foreground);
}

.page-body__content a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.notice-empty {
	max-width: 72ch;
	margin: var(--gap-2xl) auto;
	padding: var(--gap-lg);
	border: 1px dashed var(--line);
	border-radius: var(--radius-md);
	text-align: center;
	color: var(--muted);
}

/* --------------------------------------------------- site footer */

.site-footer {
	border-top: 1px solid var(--line);
	background: var(--surface);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
	gap: var(--gap-xl);
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: var(--gap-2xl) var(--container-padding);
}

.site-footer__wordmark {
	font-family: var(--font-display);
	font-variation-settings: "opsz" 48, "wght" 580, "wdth" 104;
	font-size: var(--h4-size);
	letter-spacing: -0.02em;
}

.site-footer__tagline {
	margin-top: var(--gap-xs);
	max-width: 40ch;
	font-size: var(--small-size);
	line-height: 1.6;
	color: var(--muted);
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xs);
}

.site-footer__list a {
	font-size: var(--small-size);
	color: var(--muted);
}

.site-footer__list a:hover {
	color: var(--foreground);
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-xs);
}

.site-footer__link {
	font-size: var(--small-size);
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.site-footer__link:hover {
	color: var(--accent);
}

.site-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
	margin-top: var(--gap-xs);
}

.site-footer__social-link {
	font-size: var(--small-size);
	color: var(--muted);
}

.site-footer__social-link:hover {
	color: var(--accent);
}

.site-footer__base {
	border-top: 1px solid var(--line);
}

.site-footer__copyright {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: var(--gap-md) var(--container-padding);
	font-size: var(--small-size);
	color: var(--muted);
}

.site-footer__note {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: 0 var(--container-padding) var(--gap-md);
	font-size: var(--small-size);
	color: var(--muted);
}

/* ------------------------------------------- whatsapp float + grain */

.whatsapp-float {
	position: fixed;
	right: var(--gap-md);
	bottom: var(--gap-md);
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
	box-shadow: 0 0 28px var(--glow);
	transition: transform var(--transition);
}

.whatsapp-float:hover {
	transform: translateY(-2px) scale(1.04);
}

.grain {
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   SECTION CORRECTIONS — ported 1:1 from the running source.

   These blocks come after the originals deliberately: the first
   pass rebuilt three sections from the wrong shape, and these
   are the measured values. Same specificity, later wins.
============================================================ */

/* ---------------------------------------------------- hero */

.hero {
	position: relative;
	min-height: 100dvh;
	overflow: hidden;
	display: block;
}

.hero__backdrop {
	position: absolute;
	inset: 0;
}

/* The tilted wall: right 62%, 124% tall, rotated 4deg, desktop only. */
.hero__wall {
	position: absolute;
	right: -8%;
	top: -12%;
	height: 124%;
	width: 62%;
	transform: rotate(4deg);
	display: none;
}

.hero__wall-columns {
	display: flex;
	height: 100%;
	gap: 1.25rem;
}

.hero__wall-column {
	flex: 1 1 0;
	overflow: hidden;
}

.hero__wall-track {
	animation-name: wall-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.hero__wall-track--reverse {
	animation-direction: reverse;
}

.hero__wall-tile {
	position: relative;
	margin-bottom: 1.25rem;
	height: 440px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 0.75rem;
}

.hero__wall-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.hero__ambience {
	position: absolute;
	inset: 0;
	background: radial-gradient(55% 50% at 75% 45%, rgba(110, 243, 111, 0.07), transparent 70%);
}

.hero__scrim {
	position: absolute;
}

.hero__scrim--left {
	inset: 0;
	background: linear-gradient(
		to right,
		var(--background) 20%,
		color-mix(in srgb, var(--background) 45%, transparent) 55%,
		transparent 85%
	);
}

.hero__scrim--top {
	inset-inline: 0;
	top: 0;
	height: 7rem;
	background: linear-gradient(to bottom, var(--background), transparent);
}

.hero__scrim--bottom {
	inset-inline: 0;
	bottom: 0;
	height: 11rem;
	background: linear-gradient(to top, var(--background), transparent);
}

.hero__scrim--right {
	inset-block: 0;
	right: 0;
	width: 7rem;
	background: linear-gradient(to left, var(--background), transparent);
	display: none;
}

/* pb reserves room for the absolutely-positioned stats bar. */
.hero__inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100dvh;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: 5rem 1rem 18rem;
}

.hero__copy {
	width: 100%;
	min-width: 0;
	max-width: 620px;
	display: block;
}

.hero__heading {
	max-width: none;
}

.hero__lead {
	margin-top: 1.5rem;
	max-width: 46ch;
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--muted);
}

.hero__actions {
	margin-top: 2.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.btn--lg {
	padding: 0.875rem 1.75rem;
	font-size: 1rem;
}

.btn--ghost.btn--lg {
	background: color-mix(in srgb, var(--background) 40%, transparent);
	backdrop-filter: blur(4px);
}

/* Mobile / tablet drifting strip. */
.hero__strip-wrap {
	display: block;
}

.hero__strip {
	display: flex;
	gap: 0.75rem;
	margin: 2.25rem -1rem 0;
	padding: 0 1rem 0.25rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

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

.hero__strip-item {
	flex-shrink: 0;
}

.hero__strip-link {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	width: 46vw;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 0.5rem;
	transition: border-color var(--transition);
}

.hero__strip-link:active {
	border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

.hero__strip-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* --------------------------------------------- hero stats bar */

.hero-stats {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 10;
	padding: 0 1rem 1.75rem;
}

.hero-stats__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
}

.hero-stats__bar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--background) 55%, transparent);
	backdrop-filter: blur(12px);
}

.hero-stats__item {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 1.25rem 0.75rem;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
	transition: flex-grow 900ms cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition);
}

.hero-stats__item:nth-child(-n + 2) {
	border-top: 0;
}

.hero-stats__item:nth-child(odd) {
	border-left: 0;
}

.hero-stats__item:hover {
	background: rgba(255, 255, 255, 0.02);
}

.hero-stats__item.is-active {
	background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.hero-stats__item.is-active::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--accent);
}

.hero-stats__value {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	font-size: 1.25rem;
	color: color-mix(in srgb, var(--foreground) 55%, transparent);
	transition: all 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-stats__item.is-active .hero-stats__value {
	font-size: 1.5rem;
	color: var(--accent);
	text-shadow: 0 0 26px rgba(255, 232, 190, 0.18);
}

.hero-stats__stars {
	flex-shrink: 0;
	color: var(--accent);
	font-size: 0.9375rem;
	letter-spacing: 0.05em;
}

.hero-stats__seal {
	flex-shrink: 0;
	display: flex;
	color: var(--accent);
}

.hero-stats__label {
	max-width: 100%;
	overflow: hidden;
	text-align: center;
	font-size: 0.6875rem;
	line-height: 1.375;
	color: var(--muted);
	transition: all 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------- film strip */

.film-strip {
	position: relative;
	overflow: hidden;
	padding-block: 4rem;
}

.film-strip__light {
	pointer-events: none;
	position: absolute;
	inset-inline: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.film-strip__tube {
	position: relative;
	margin-top: 2.5rem;
	width: min(86vw, 1040px);
}

.film-strip__tube-halo {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 2.25rem;
	width: 102%;
	transform: translate(-50%, -50%);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--accent) 25%, transparent);
	filter: blur(24px);
}

.film-strip__tube-bar {
	position: relative;
	height: 9px;
	width: 100%;
	border-radius: var(--radius-pill);
	background: linear-gradient(
		to bottom,
		rgba(190, 255, 196, 0.6),
		rgba(110, 243, 111, 0.98) 46%,
		rgba(74, 190, 86, 0.7)
	);
	box-shadow: 0 0 22px rgba(110, 243, 111, 0.75), 0 0 72px rgba(110, 243, 111, 0.4);
}

.film-strip__tube-filament {
	position: absolute;
	inset-inline: 0.75rem;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	border-radius: var(--radius-pill);
	background: rgba(226, 255, 228, 0.9);
}

.film-strip__tube-hotspot {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 1rem;
	width: 13rem;
	transform: translate(-50%, -50%);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.4);
	filter: blur(12px);
}

.film-strip__tube-cap {
	position: absolute;
	top: 50%;
	height: 15px;
	width: 0.625rem;
	border-radius: 3px;
	background: linear-gradient(to bottom, rgba(161, 161, 170, 0.8), rgba(63, 63, 70, 0.8));
}

.film-strip__tube-cap--left {
	left: 0;
	transform: translate(-3px, -50%);
}

.film-strip__tube-cap--right {
	right: 0;
	transform: translate(3px, -50%);
}

.film-strip__cone {
	margin-top: 2px;
	height: 720px;
	width: min(98vw, 1320px);
	background: radial-gradient(50% 100% at 50% 0%, rgba(110, 243, 111, 0.11), transparent 70%);
}

.film-strip__backdrop-word {
	pointer-events: none;
	position: absolute;
	right: 0.5rem;
	top: 5rem;
	display: none;
	user-select: none;
	font-family: var(--font-display);
	font-size: 19vw;
	font-style: italic;
	font-weight: 500;
	line-height: 1;
	color: color-mix(in srgb, var(--foreground) 3.5%, transparent);
}

.film-strip__inner {
	position: relative;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: 4rem 1rem 0;
}

.film-strip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0;
}

.film-strip__heading {
	margin-top: 1rem;
	max-width: 16ch;
}

.film-strip__archive {
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
}

.film-strip__spotlight {
	margin-top: 3.5rem;
}

.film-strip__slide {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 2.5rem;
}

.film-strip__counter {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--font-mono);
	font-size: 0.875rem;
	color: var(--muted);
}

.film-strip__counter-current {
	color: var(--accent);
}

.film-strip__counter-rule {
	height: 1px;
	width: 2rem;
	background: var(--line);
}

.film-strip__client-label {
	margin-top: 2rem;
	color: var(--accent);
}

.film-strip__client {
	margin-top: 0.5rem;
}

.film-strip__tags {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.film-strip__tag {
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--foreground) 85%, transparent);
}

.film-strip__metric {
	margin-top: 2rem;
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.film-strip__metric-value {
	font-family: var(--font-mono);
	font-size: 1.875rem;
	letter-spacing: -0.025em;
	color: var(--accent);
}

.film-strip__metric-label {
	font-size: 0.875rem;
	color: var(--muted);
}

.film-strip__cta {
	margin-top: 2.25rem;
	padding: 0.75rem 1.5rem;
	font-size: 0.875rem;
}

.film-strip__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(110, 243, 111, 0.08);
}

.film-strip__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.film-strip__controls {
	margin-top: 3rem;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.film-strip__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	color: var(--foreground);
	transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

.film-strip__arrow:hover {
	border-color: color-mix(in srgb, var(--accent) 60%, transparent);
	color: var(--accent);
}

.film-strip__arrow:active {
	transform: scale(0.96);
}

.film-strip__dots {
	margin-left: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.film-strip__dot {
	height: 0.5rem;
	width: 0.5rem;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--muted) 40%, transparent);
	transition: all var(--transition);
}

.film-strip__dot.is-active {
	width: 2rem;
	background: var(--accent);
}

/* ------------------------------------------------- services */

.services {
	position: relative;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: 4rem 1rem;
	background: radial-gradient(55% 40% at 85% 0%, rgba(110, 243, 111, 0.045), transparent 70%);
}

.services__heading {
	max-width: 18ch;
	margin-bottom: 0;
}

.services__list {
	margin-top: 4rem;
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

/* Zig-zag: media first in the DOM, odd rows move it to order 2. */
.services__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 2.5rem;
	padding-block: 0;
	border-top: 0;
}

.services__media {
	position: relative;
}

.services__floor-glow {
	pointer-events: none;
	position: absolute;
	inset: -1.5rem;
	background: radial-gradient(50% 60% at 50% 60%, rgba(110, 243, 111, 0.09), transparent 70%);
}

.services__copy {
	position: relative;
}

.services__ghost-number {
	pointer-events: none;
	position: absolute;
	left: -0.25rem;
	top: -1.75rem;
	font-family: var(--font-mono);
	font-size: 3.75rem;
	line-height: 1;
	color: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.services__title-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.services__rule {
	height: 2px;
	width: 1.75rem;
	flex-shrink: 0;
	background: var(--accent);
	box-shadow: 0 0 10px var(--glow);
}

.services__title {
	margin-bottom: 0;
}

.services__body {
	margin-top: 1rem;
	max-width: 46ch;
	color: var(--muted);
}

.services__bullets {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 1.25rem;
	row-gap: 0.625rem;
}

.services__bullet {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-left: 0;
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--foreground) 85%, transparent);
}

.services__bullet::before {
	content: none;
}

.services__check {
	flex-shrink: 0;
	display: flex;
	color: var(--accent);
}

/* Scrollable full-page preview inside the frame. */
.site-frame--scroll .site-frame__viewport {
	height: 380px;
	background: #fff;
	overflow-y: auto;
	outline: none;
}

.site-frame__shot--tall {
	display: block;
	width: 100%;
	height: auto;
	object-fit: unset;
}

.site-frame__live {
	margin-left: auto;
	flex-shrink: 0;
	display: none;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--muted);
	opacity: 0.6;
}

.seo-showcase__viewport {
	max-height: none;
	background: #fff;
}

.seo-showcase__image {
	width: 100%;
	height: auto;
	object-fit: unset;
}

/* ============================================================
   HARD RESETS — neutralise first-pass declarations that survive
   the corrections above because they set properties the
   corrections do not mention.

   The wall is the clearest case: the first pass used `inset: 0`,
   so `left: 0` and `bottom: 0` outlived an override that only
   set right/top/width/height. The wall therefore started at the
   left edge, and `opacity: .28` plus a radial mask made it look
   like a faint texture instead of a wall of client sites.
============================================================ */

.hero__wall {
	left: auto;
	bottom: auto;
	padding: 0;
	gap: 0;
	opacity: 1;
	mask-image: none;
	-webkit-mask-image: none;
	pointer-events: none;
}

/*
 * The `hidden` attribute must beat a component's own display value.
 * Without this, `.film-strip__slide { display: grid }` overrides
 * hidden and every slide renders at once — which is exactly what
 * the film strip, the services frames, the compare panels and the
 * industries panels were all doing.
 */
[hidden] {
	display: none !important;
}

/* ---------------------------------------- testimonials (re-ported) */

.testimonials {
	overflow: hidden;
	padding-block: 7rem;
}

.testimonials__inner {
	display: contents;
}

.testimonials__eyebrow {
	text-align: center;
	font-size: 0.875rem;
	color: var(--muted);
	text-transform: none;
	letter-spacing: normal;
	margin-bottom: 0;
}

.testimonials__eyebrow-accent {
	color: var(--accent);
}

.testimonials__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 880px;
	margin: 1.5rem auto 0;
	padding-inline: 1rem;
}

/* Fixed-height stage so a longer quote does not shift the machine below it. */
.testimonials__quotes {
	position: relative;
	z-index: 10;
	display: flex;
	width: 100%;
	min-height: 240px;
	align-items: flex-end;
	justify-content: center;
}

.testimonials__quote {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	text-align: center;
	opacity: 0;
	transform: translateY(120px) scale(0.82);
	filter: blur(8px);
	transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
		filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

.testimonials__quote.is-active {
	opacity: 1;
	transform: none;
	filter: blur(0);
	pointer-events: auto;
}

.testimonials__text {
	max-width: 34ch;
	margin-inline: auto;
}

.testimonials__meta {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: var(--muted);
}

.testimonials__context {
	display: block;
	color: color-mix(in srgb, var(--muted) 70%, transparent);
}

/* Light beam, clipped to a trapezium so it reads as a projection. */
.testimonials__beam {
	pointer-events: none;
	margin-top: -10rem;
	margin-bottom: -2.5rem;
	height: 16rem;
	width: min(70vw, 420px);
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--accent) 15%, transparent),
		color-mix(in srgb, var(--accent) 5%, transparent),
		transparent
	);
	clip-path: polygon(32% 100%, 68% 100%, 100% 0%, 0% 0%);
}

.testimonials__machine {
	position: relative;
	margin-top: -0.5rem;
	width: min(88vw, 540px);
	/*
	 * R4.1 — ONE multi-stop gradient, never composited masks. An unsupported
	 * mask-composite value drops the entire mask declaration and leaves a hard
	 * rectangle where the soft fade should be.
	 */
	mask-image: radial-gradient(ellipse 70% 62% at 50% 48%, #000 52%, transparent 76%);
	-webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 48%, #000 52%, transparent 76%);
}

.testimonials__machine-image {
	width: 100%;
	height: auto;
}

.testimonials__dots {
	position: relative;
	z-index: 10;
	margin-top: -1.5rem;
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.testimonials__dot {
	position: relative;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--muted) 40%, transparent);
	transition: all var(--transition);
}

.testimonials__dot::after {
	content: "";
	position: absolute;
	inset: -0.625rem;
}

.testimonials__dot.is-active {
	background: var(--accent);
	transform: scale(1.25);
}

/* ------------------------------------ process terminal (re-ported) */

.process-terminal {
	padding-block: 7rem;
	border-block: 1px solid var(--line);
	background: var(--surface);
}

.process-terminal__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: 1rem;
	display: block;
}

.process-terminal__heading {
	max-width: 22ch;
	margin-inline: auto;
	text-align: center;
}

.process-terminal__window {
	position: relative;
	max-width: 880px;
	margin: 3.5rem auto 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: linear-gradient(to bottom, var(--surface-2), var(--background));
	padding: 2rem;
	box-shadow: 0 0 120px rgba(255, 232, 190, 0.06);
}

.process-terminal__scanlines {
	pointer-events: none;
	position: absolute;
	inset: 0;
	opacity: 0.14;
	background-image: repeating-linear-gradient(
		0deg,
		rgba(255, 240, 214, 0.12) 0px,
		rgba(255, 240, 214, 0.12) 1px,
		transparent 1px,
		transparent 4px
	);
}

.process-terminal__screen-glow {
	pointer-events: none;
	position: absolute;
	top: -6rem;
	left: 50%;
	height: 12rem;
	width: 130%;
	transform: translateX(-50%);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	filter: blur(48px);
}

.process-terminal__status {
	position: relative;
	user-select: none;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--muted);
	filter: blur(1.5px);
	padding-bottom: 0;
	border-bottom: 0;
	display: block;
}

.process-terminal__steps {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2rem;
}

.process-terminal__step {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.25rem;
	border-top: 1px solid var(--line);
	padding-top: 1.25rem;
}

.process-terminal__step:first-child {
	border-top: 0;
	padding-top: 0;
}

.process-terminal__step-head {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.process-terminal__prompt-glyph {
	user-select: none;
	font-family: var(--font-mono);
	font-size: 0.875rem;
	color: var(--accent);
}

.process-terminal__step-title {
	color: var(--accent);
	margin-bottom: 0;
}

.process-terminal__step-body {
	margin-top: 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--muted);
}

.process-terminal__typed {
	position: relative;
	margin-top: 2.5rem;
	min-height: 2.6em;
	border-top: 1px solid var(--line);
	padding-top: 2rem;
}

.process-terminal__caret {
	display: none;
	width: 2px;
	height: 1em;
	margin-left: 0.25rem;
	background: var(--accent);
	vertical-align: middle;
	animation: caret-blink 1s steps(2, start) infinite;
}

.process-terminal__typed.is-typing .process-terminal__caret {
	display: inline-block;
}

.process-terminal__actions {
	position: relative;
	margin-top: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.process-terminal__pill {
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	min-height: 2.75rem;
}

.process-terminal__email {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.process-terminal__copy {
	gap: 0.5rem;
}

.process-terminal__copy-icon {
	display: flex;
}

.process-terminal__copied {
	font-size: 0.75rem;
	color: var(--accent);
}

/*
 * The source hero is a ROW flex with items-center: that centres the copy
 * vertically and leaves it hard against the left edge of the container. My
 * first pass used flex-direction: column, and that survived an override which
 * only re-declared display and align-items — so `align-items: center` started
 * centring the copy horizontally instead. Row restores the intended axis.
 */
.hero__inner {
	flex-direction: row;
	justify-content: flex-start;
	gap: 0;
	z-index: 1;
}

.hero__copy {
	margin-right: auto;
}

/* ---------------------------------------- hero padding (md+ parity) */
/* Source is px-4 md:px-8 — the correction hardcoded 1rem. */

/* --------------------------------------- industries (re-ported) */

.industries {
	display: block;
	grid-template-columns: none;
	min-height: 0;
	overflow: hidden;
	background: none;
}

.industries__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: none;
	margin-left: 0;
	padding: 6rem 1rem;
	gap: 0;
}

.industries__heading {
	max-width: 20ch;
	margin-bottom: 0;
}

.industries__lead {
	margin-top: 1.25rem;
	max-width: 46ch;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--muted);
}

/* An accordion, not a pill rail. */
.industries__accordion {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
}

.industries__row {
	display: block;
	width: 100%;
	border: 0;
	border-top: 1px solid var(--line);
	padding: 1.5rem 0;
	text-align: left;
	background: none;
	transition: color var(--transition);
}

.industries__row:first-child {
	border-top: 0;
}

.industries__row-title {
	display: block;
	color: color-mix(in srgb, var(--foreground) 60%, transparent);
	transition: all 300ms ease;
}

.industries__row:hover .industries__row-title {
	color: var(--foreground);
}

.industries__row.is-active .industries__row-title {
	color: var(--accent);
	text-shadow: 0 0 18px var(--glow), 0 0 70px rgba(255, 210, 140, 0.16);
}

/* Closed rows collapse to nothing; only the open one shows its body. */
.industries__row-body {
	display: block;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 300ms ease, opacity 300ms ease;
}

.industries__row.is-active .industries__row-body {
	max-height: 40rem;
	opacity: 1;
}

.industries__body {
	display: block;
	margin-top: 1rem;
	max-width: 48ch;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--muted);
}

.industries__stats {
	display: flex;
	gap: 3rem;
	margin-top: 1.5rem;
}

.industries__stat {
	display: block;
}

.industries__stat-value {
	display: block;
	font-family: var(--font-mono);
	font-size: 1.5rem;
	letter-spacing: -0.025em;
	color: var(--foreground);
}

.industries__stat-label {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: var(--muted);
}

.industries__media {
	position: relative;
	min-height: 60vh;
	overflow: hidden;
	border-left: 0;
	border-top: 0;
	padding: 0;
	background: none;
	display: block;
}

.industries__media-inner {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.industries__shot {
	width: 100%;
	max-width: 680px;
}

.industries__frame {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.industries__chrome {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	border-bottom: 1px solid var(--line);
	background: var(--surface-2);
	padding: 0.625rem 1rem;
}

.industries__domain {
	margin-left: 0.75rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--background) 70%, transparent);
	padding: 0.25rem 0.75rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	color: var(--muted);
}

.industries__frame-media {
	position: relative;
	aspect-ratio: 4 / 3;
}

.industries__frame-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Client switcher sits BELOW the review card, as the source does. */
.industries__clients {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.industries__client {
	min-height: 2.25rem;
	padding: 0.4375rem 0.875rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--small-size);
	color: var(--muted);
	transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.industries__client.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* Compact review card used beside a client's site. */
.review-card--compact {
	margin-top: 1rem;
	gap: 0.75rem;
	padding: 1rem;
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--surface) 60%, transparent);
	backdrop-filter: blur(4px);
	flex-direction: column;
}

.review-card--compact .review-card__rating {
	order: -1;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.review-card--compact .review-card__eyebrow {
	order: -1;
	display: inline-block;
}

.review-card--compact .review-card__text {
	font-size: 1rem;
	line-height: 1.6;
}

/* --------------------------------------- gather CTA (re-ported) */

.gather-cta__sticky {
	position: sticky;
	top: 0;
	display: flex;
	height: 100dvh;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0 1rem;
	gap: 0;
	flex-direction: column;
	text-align: center;
}

/* Giant blurred wordmark behind the statement. */
.gather-cta__backdrop {
	pointer-events: none;
	position: absolute;
	inset-inline: 0;
	top: 50%;
	transform: translateY(-50%);
	user-select: none;
	white-space: nowrap;
	text-align: center;
	font-family: var(--font-display);
	font-size: 13vw;
	font-weight: 500;
	line-height: 1;
	color: color-mix(in srgb, var(--foreground) 5%, transparent);
	filter: blur(2px);
}

.gather-cta__bloom {
	pointer-events: none;
	position: absolute;
	left: 50%;
	top: 50%;
	height: 60vmin;
	width: 60vmin;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 6%, transparent);
	filter: blur(64px);
}

.gather-cta__body {
	position: relative;
	max-width: 820px;
	text-align: center;
}

.gather-cta__words {
	display: block;
	max-width: none;
	font-family: var(--font-display);
	font-variation-settings: "opsz" 72, "wght" 560, "wdth" 104;
	font-size: var(--h2-size);
	line-height: 1.1;
	letter-spacing: -0.025em;
}

/* Each word starts dim and blurred, then resolves as the section scrolls. */
.gather-cta__word {
	display: inline-block;
	margin-inline: 0.18em;
	opacity: 0.25;
	filter: blur(3px);
	color: var(--foreground);
	will-change: transform, opacity, filter;
	transition: opacity 200ms linear, filter 200ms linear;
}

.gather-cta__word.is-lit {
	opacity: 1;
	filter: blur(0);
}

.gather-cta__actions {
	margin-top: 2.5rem;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 400ms ease, transform 400ms ease;
}

.gather-cta__actions.is-lit {
	opacity: 1;
	transform: none;
}

.gather-cta__actions .btn--primary {
	padding: 1rem 2rem;
	font-size: 1rem;
	box-shadow: 0 0 36px rgba(110, 243, 111, 0.3);
}

/* --------------------------------------- field CTA (re-ported) */

.field-cta {
	position: relative;
	min-height: 0;
	display: block;
	align-items: stretch;
	overflow: hidden;
}

.field-cta__image {
	opacity: 1;
}

.field-cta__scrim {
	position: absolute;
	inset-inline: 0;
	z-index: 0;
}

.field-cta__scrim--top {
	top: 0;
	height: 8rem;
	background: linear-gradient(to bottom, var(--background), transparent);
}

.field-cta__scrim--bottom {
	bottom: 0;
	height: 12rem;
	background: linear-gradient(to top, var(--background), transparent);
}

/* Content bottom-aligned over the photograph. */
.field-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 92dvh;
	max-width: var(--container-max-width);
	margin-inline: auto;
	gap: 2.5rem;
	padding: 7rem 1rem 4rem;
}

.field-cta__heading {
	max-width: 13ch;
	margin-bottom: 0;
}

.field-cta__heading-em {
	font-style: italic;
}

.field-cta__aside {
	display: flex;
	max-width: 440px;
	flex-direction: column;
	gap: 1.5rem;
}

.field-cta__body {
	max-width: none;
	font-size: 1rem;
	line-height: 1.625;
	color: color-mix(in srgb, var(--foreground) 90%, transparent);
}

.field-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0;
}

/* ----------------------------------------- contact (re-ported) */

.contact {
	position: relative;
	overflow: hidden;
	padding-block: 7rem;
	background-image: radial-gradient(50% 45% at 50% 100%, rgba(255, 232, 190, 0.06), transparent 70%);
}

.contact__inner {
	position: relative;
	z-index: 2;
	display: block;
	grid-template-columns: none;
	max-width: 880px;
	margin-inline: auto;
	padding-inline: 1rem;
	text-align: center;
	gap: 0;
}

.contact__heading {
	max-width: 18ch;
	margin-inline: auto;
	margin-bottom: 0;
}

.contact__lead {
	margin: 1.25rem auto 0;
	max-width: 50ch;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--muted);
}

.contact__pills {
	margin-top: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

.contact__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 0.875rem;
	color: var(--foreground);
	transition: border-color var(--transition), color var(--transition);
}

a.contact__pill:hover {
	border-color: color-mix(in srgb, var(--accent) 60%, transparent);
	color: var(--accent);
}

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

/* The keyboard, with the open-form button centred over it. */
.contact__stage {
	position: relative;
	margin-top: 3.5rem;
	min-height: clamp(320px, 40vw, 520px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.contact__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 1;
}

.contact__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		var(--background),
		color-mix(in srgb, var(--background) 30%, transparent) 40%,
		color-mix(in srgb, var(--background) 30%, transparent) 60%,
		var(--background)
	);
}

.contact__open {
	position: relative;
	z-index: 2;
	padding: 0.875rem 1.75rem;
	font-size: 1rem;
}

.contact__open-icon {
	display: flex;
}

/* The form is revealed on request, not shown by default. */
.contact__form {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: color-mix(in srgb, var(--background) 88%, transparent);
	backdrop-filter: blur(8px);
}

.contact__form-inner {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 86vh;
	overflow-y: auto;
	padding: 2rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

.contact__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-pill);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--muted);
}

.contact__close:hover {
	color: var(--foreground);
}

.contact__form-note {
	margin-bottom: var(--gap-md);
	font-size: var(--small-size);
	color: var(--muted);
}

/*
 * The gather words are transform-animated per frame from JS, so the CSS
 * transition must not fight it — only opacity/filter ease, never transform.
 * will-change keeps each word on its own layer during the scrub.
 */
.gather-cta__word {
	will-change: transform, opacity, filter;
	transition: none;
}

/* R4.3-adjacent: the dot pads must touch, never overlap. 10px dot + 20px gap
   = 30px centres, so a -10px inset gives exactly a 30px target. */
.testimonials__dots {
	gap: 1.25rem;
}

.testimonials__dot::after {
	inset: -0.625rem;
}

/*
 * Contact photograph must bleed into the page, not sit in a box with visible
 * edges. ONE multi-stop radial mask, never composited masks — R4.1: an
 * unsupported mask-composite value drops the whole declaration and leaves the
 * hard rectangle you were trying to avoid.
 */
.contact__media {
	mask-image: radial-gradient(
		ellipse 78% 74% at 50% 52%,
		#000 30%,
		rgba(0, 0, 0, 0.85) 48%,
		rgba(0, 0, 0, 0.5) 66%,
		rgba(0, 0, 0, 0.18) 82%,
		transparent 94%
	);
	-webkit-mask-image: radial-gradient(
		ellipse 78% 74% at 50% 52%,
		#000 30%,
		rgba(0, 0, 0, 0.85) 48%,
		rgba(0, 0, 0, 0.5) 66%,
		rgba(0, 0, 0, 0.18) 82%,
		transparent 94%
	);
}

/* With the mask doing the blending, the scrim only needs to seat top and bottom. */
.contact__scrim {
	background: linear-gradient(
		to bottom,
		var(--background) 0%,
		transparent 22%,
		transparent 78%,
		var(--background) 100%
	);
}

.contact__stage {
	/* Pull the stage up so the masked image overlaps the pills' airspace. */
	margin-top: 1.5rem;
}

/*
 * Work archive grid — the source is two-up in a 1200px container, not three-up
 * in the site's 1400px one. Wider cards means the screenshot is legible at a
 * glance, which is the whole job of the archive.
 */
.work-index__inner {
	max-width: 1200px;
}

.work-index__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

/* ============================================================
   Button padding reset — the dots' real bug.

   The base reset cleared background and border but not PADDING,
   so browsers' default `padding: 1px 6px` survived. With
   box-sizing: border-box a `width: 8px` dot cannot shrink below
   its own 12px of horizontal padding, so every round dot floored
   at 12x8 and rendered as an oval. Radius was never the problem.
============================================================ */

button {
	padding: 0;
}

/* Dots are fixed squares; flex must not squeeze them either. */
.testimonials__dot,
.film-strip__dot {
	flex: 0 0 auto;
	padding: 0;
}

.testimonials__dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
}

/* The film-strip active dot is a deliberate pill, so only the
   inactive ones need to be perfectly round. */
.film-strip__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--radius-pill);
}

.film-strip__dot.is-active {
	width: 2rem;
}

/* ---------------------------------------- contact: seat the image */

/*
 * Pull the stage into the section's bottom padding so the masked
 * photograph runs to the section edge instead of floating above a
 * band of empty background, and deepen the bottom fade so the last
 * of the image dissolves rather than stopping.
 */
.contact__stage {
	margin-bottom: -7rem;
	padding-bottom: 3rem;
}

.contact__scrim {
	background:
		linear-gradient(
			to bottom,
			var(--background) 0%,
			transparent 26%,
			transparent 62%,
			color-mix(in srgb, var(--background) 70%, transparent) 84%,
			var(--background) 100%
		),
		linear-gradient(
			to right,
			var(--background) 0%,
			transparent 14%,
			transparent 86%,
			var(--background) 100%
		);
}

/* ------------------------------------------- footer logo + copyright */

.site-footer__logo-link {
	display: inline-block;
}

/* Same ink-crop ratio as the header mark, one step larger. */
.site-footer__logo {
	height: 2.1rem;
	width: auto;
}

.site-footer__tagline {
	margin-top: var(--gap-sm);
}

.site-footer__copyright {
	text-align: center;
}

/* ============================================================
   Nav CTA + logo at narrow widths.

   The CTA was measured at 111x66 with white-space: normal —
   "Start Your Project" wrapped onto three lines and the pill
   ballooned. Buttons should never wrap.
============================================================ */

.btn {
	white-space: nowrap;
}

/* Desktop: full lockup, no icon. */
.site-nav__mark {
	display: none;
	height: 1.6rem;
	width: auto;
}

/* ---------------------------------- contact: size the stage to the asset */

/*
 * keyboard.jpg is 1520x848. Full-bleed at 100vw it was being upscaled past its
 * native width, which is what made it look pixelated — the file simply has no
 * more detail to give. The source keeps it inside the 880px content column, so
 * it renders at or below 1:1. Constraining it fixes the softness and closes the
 * dead band underneath at the same time.
 */
.contact__stage {
	max-width: 880px;
	margin-inline: auto;
	min-height: 0;
	margin-bottom: -3.5rem;
	padding-bottom: 0;
}

.contact__media {
	position: relative;
	inset: auto;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.contact__image {
	height: auto;
	aspect-ratio: 1520 / 848;
}

.contact__scrim {
	border-radius: var(--radius-lg);
}

/* The open button floats over the image rather than adding its own row. */
.contact__stage {
	display: grid;
	place-items: center;
}

.contact__media,
.contact__scrim {
	grid-area: 1 / 1;
	width: 100%;
}

.contact__open {
	grid-area: 1 / 1;
}

/* ------------------------ field CTA: readability scrim over the copy */

/*
 * The copy sits bottom-aligned over the photograph, so the bottom 30% carries
 * a dark gradient and the top stays clear. Fixed-height scrims broke down at
 * tall viewports — a percentage tracks the section instead.
 */
.field-cta__scrim--bottom {
	height: 30%;
	background: linear-gradient(
		to top,
		var(--background) 0%,
		color-mix(in srgb, var(--background) 88%, transparent) 30%,
		color-mix(in srgb, var(--background) 55%, transparent) 62%,
		transparent 100%
	);
}

.field-cta__scrim--top {
	height: 18%;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--background) 85%, transparent),
		transparent
	);
}

/* ------------------------------- pillar-grid: named items as chips */

.pillar-grid__names {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: var(--gap-sm);
}

.pillar-grid__name {
	padding: 0.1875rem 0.625rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: 0.6875rem;
	color: var(--muted);
}

.review-card__byline {
	color: var(--muted);
}

.review-card--compact .review-card__byline {
	color: var(--muted);
}

/* ============================================================
   Case-study rhythm.

   Measured: the WP page ran 10255px against the source's 8814
   — 1441px taller — with no extra content. The cause was
   structural, not visual: the source groups related blocks
   under one heading ("The challenge" is problem + stats + proof
   image as a single 1193px unit), whereas the section library
   renders each as its own full-padded section with a divider.

   Twelve blocks each carrying ~200px of vertical padding is the
   whole difference. Tightening the per-block rhythm and dropping
   the dividers gets the page back to the source's density while
   keeping every section independently movable, which is the
   point of the library.
============================================================ */

.case-study__body > section {
	padding-block: clamp(1.75rem, 2.6vw, 2.75rem);
}

/* The source has no rules between blocks — grouped content should
   read as one unit, and a divider every time breaks that. */
.case-study__body > section + section {
	border-top: 0;
}

/*
 * A block that opens with its own eyebrow starts a new thought, so it
 * gets the breathing room a section break used to provide. Blocks
 * without one are continuations of the block above — stats under a
 * problem statement, a proof image under a table — and stay tight.
 */
.case-study__body > section:has(> * > .problem-block__eyebrow),
.case-study__body > section:has(> * > .text-block__eyebrow),
.case-study__body > section:has(.media-block__head),
.case-study__body > section:has(.screenshot-scroll__head),
.case-study__body > section:has(.before-after-section__head),
.case-study__body > section:has(.video-embed__head),
.case-study__body > section:has(.mobile-triptych__head),
.case-study__body > section:has(.feature-cards__head),
.case-study__body > section:has(.speed-comparison__head),
.case-study__body > section:has(.results-grid__head),
.case-study__body > section:has(.checklist__head),
.case-study__body > section:has(.numbered-steps__head),
.case-study__body > section:has(.audit-list__head),
.case-study__body > section:has(.page-list__head),
.case-study__body > section:has(.pillar-grid__head),
.case-study__body > section:has(.design-system__head) {
	padding-top: clamp(3.5rem, 6vw, 6rem);
}

/* Section heads carried a full section's worth of margin on top of the
   section padding — double spacing wherever a block had a heading. */
.media-block__head,
.before-after-section__head,
.screenshot-scroll__head,
.video-embed__head,
.mobile-triptych__head,
.feature-cards__head,
.speed-comparison__head,
.results-grid__head,
.checklist__head,
.numbered-steps__head,
.audit-list__head,
.page-list__head,
.design-system__head,
.pillar-grid__head {
	margin-bottom: var(--gap-lg);
}

/* ------------------------------------------------ case hero height */

/*
 * Measured 748px against the source's 1112px. The source reserves room
 * for the full stack — back link, eyebrow, title, summary, tags, actions
 * — with generous top padding under the fixed header.
 */
.case-hero {
	min-height: 0;
}

.case-hero__inner {
	padding-top: clamp(9rem, 14vw, 13rem);
	padding-bottom: clamp(4rem, 7vw, 7rem);
	gap: var(--gap-md);
}

.case-hero__title {
	max-width: 26ch;
}

/* Case hero measured 848px against the source's 1112px — the stack needs
   real height under the fixed header, not just padding. */
.case-hero {
	min-height: 84vh;
}

.case-hero__inner {
	padding-top: clamp(9rem, 16vw, 15rem);
	padding-bottom: clamp(5rem, 8vw, 8rem);
}

/* Second pass on body rhythm: still 1043px over after the first trim. */
.case-study__body > section {
	padding-block: clamp(1.25rem, 1.8vw, 2rem);
}

/* ============================================================
   Case-study alignment + hero structure.

   Two structural errors, both visible against the source:

   1. Text blocks were centred in a 72ch column. The source uses
      the full container and caps the HEADING at 20ch and the
      BODY at 62ch, left-aligned — so the measure is controlled
      per element, not by centring a narrow column.

   2. The hero image was a full-bleed background with the title
      over it. The source places it BELOW the copy as its own
      framed element, which is why the title was colliding with
      the client's screenshot.
============================================================ */

/* --- 1. Left-aligned, per-element measure ------------------------------- */

.problem-block__inner,
.text-block__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	text-align: left;
}

.problem-block__heading,
.text-block__heading {
	max-width: 20ch;
	margin-bottom: 0;
}

.problem-block__eyebrow {
	color: var(--accent);
	margin-bottom: var(--gap-xs);
}

.problem-block__body,
.text-block__body {
	max-width: 62ch;
	margin-top: 1.25rem;
	font-size: var(--lead-size);
	line-height: 1.6;
}

/* Every case block shares the container, left-aligned. */
.stat-grid__inner,
.comparison-table__inner,
.results-grid__inner,
.checklist__inner,
.numbered-steps__inner,
.audit-list__inner,
.page-list__inner,
.pillar-grid__inner,
.design-system__inner,
.disclosure__inner,
.case-cta__inner {
	text-align: left;
}

.disclosure__inner {
	max-width: var(--container-max-width);
}

/* --- 2. Stat grid: one bordered, divided block ------------------------- */

/*
 * The source is a single rounded, bordered panel split by rules — not a row
 * of separate cards. Two columns on mobile, four from md.
 */
.stat-grid__items,
.results-grid__items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--surface) 30%, transparent);
	margin-top: 2.5rem;
}

.stat-grid__item,
.results-grid__item {
	padding: 2rem 1rem;
	text-align: center;
	border: 0;
	border-radius: 0;
	background: none;
	border-left: 1px solid var(--line);
	border-top: 1px solid var(--line);
}

.stat-grid__item:nth-child(-n + 2),
.results-grid__item:nth-child(-n + 2) {
	border-top: 0;
}

.stat-grid__item:nth-child(odd),
.results-grid__item:nth-child(odd) {
	border-left: 0;
}

.stat-grid__value,
.results-grid__value {
	font-family: var(--font-mono);
	font-size: 1.5rem;
	letter-spacing: -0.025em;
	color: var(--foreground);
	text-shadow: 0 0 26px rgba(255, 232, 190, 0.18);
}

/* The source uses a soft coral for the bad numbers. */
.stat-grid__item--bad .stat-grid__value,
.results-grid__item--bad .results-grid__value {
	color: #ff7a7a;
}

.stat-grid__item--good .stat-grid__value,
.results-grid__item--good .results-grid__value {
	color: var(--foreground);
}

.stat-grid__label,
.results-grid__label {
	margin-top: 0.5rem;
	font-size: 0.75rem;
}

/* --- 3. Hero: copy first, image below --------------------------------- */

.case-hero {
	display: block;
	min-height: 0;
	align-items: stretch;
}

.case-hero__inner {
	padding-top: clamp(6rem, 9vw, 8rem);
	padding-bottom: 0;
	gap: var(--gap-sm);
}

.case-hero__title {
	max-width: 20ch;
}

.case-hero__summary {
	max-width: 62ch;
	color: var(--muted);
}

/* No longer a backdrop — a framed plate under the copy. */
.case-hero__media {
	position: relative;
	inset: auto;
	z-index: 0;
	max-width: var(--container-max-width);
	margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
	padding-inline: var(--container-padding);
}

.case-hero__image {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center top;
	opacity: 1;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.case-hero__eyebrow {
	color: var(--muted);
	font-family: var(--font-mono);
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 0.875rem;
}

/* ------------------------- comparison table: match the source exactly */

.comparison-table__scroll {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	margin-top: 2.5rem;
}

.comparison-table__table {
	min-width: 0;
	table-layout: fixed;
}

.comparison-table__head {
	background: var(--surface-2);
}

.comparison-table__th {
	padding: 0.75rem 1.25rem;
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--muted);
	border-bottom: 1px solid var(--line);
}

.comparison-table__th + .comparison-table__th {
	border-left: 1px solid var(--line);
}

.comparison-table__cell {
	padding: 1rem 1.25rem;
	font-size: 0.875rem;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.comparison-table__cell + .comparison-table__cell {
	border-left: 1px solid var(--line);
}

/* The weak title reads as struck-through; the rewrite reads as the win. */
.comparison-table__cell--before {
	color: #ff9a9a;
	text-decoration: line-through;
	text-decoration-color: rgba(255, 154, 154, 0.4);
}

.comparison-table__cell--after {
	color: var(--accent);
	font-weight: 500;
	text-decoration: none;
}

.comparison-table__row:last-child .comparison-table__cell {
	border-bottom: 0;
}

.comparison-table__caption,
.stat-grid__caption {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--muted);
}

/* ============================================================
   Case-study container width + paired media.

   Two more source facts:

   1. Case studies use a 1200px container, not the site's 1400px.
   2. The "Screenshots" section places the scroll capture and the
      before/after wipe SIDE BY SIDE in a two-column grid. They
      are separate Flexible Content layouts here, so the body
      becomes the grid and an adjacent pair claims one column
      each — the editor still moves them independently.
============================================================ */

.case-study__body .spec-list__grid,
.case-study__body .problem-block__inner,
.case-study__body .stat-grid__inner,
.case-study__body .media-block__inner,
.case-study__body .before-after-section__inner,
.case-study__body .comparison-table__inner,
.case-study__body .screenshot-scroll__inner,
.case-study__body .video-embed__inner,
.case-study__body .mobile-triptych__inner,
.case-study__body .feature-cards__inner,
.case-study__body .speed-comparison__inner,
.case-study__body .results-grid__inner,
.case-study__body .text-block__inner,
.case-study__body .checklist__inner,
.case-study__body .numbered-steps__inner,
.case-study__body .audit-list__inner,
.case-study__body .page-list__inner,
.case-study__body .design-system__inner,
.case-study__body .pillar-grid__inner,
.case-study__body .review-block__inner,
.case-study__body .disclosure__inner,
.case-hero__inner,
.case-cta__inner,
.case-hero__media {
	max-width: 1200px;
}

/* ---------------------------- prev / next case study, both directions */

.next-project__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.next-project__link {
	display: flex;
	align-items: center;
	gap: var(--gap-md);
	padding-block: var(--gap-lg);
	max-width: none;
	margin-inline: 0;
	transition: background-color var(--transition);
}

.next-project__link + .next-project__link {
	border-top: 1px solid var(--line);
}

/* The "next" side reads right-to-left so the pair mirrors. */
.next-project__link--next {
	flex-direction: row-reverse;
	text-align: right;
}

.next-project__link--next .next-project__media {
	margin-left: 0;
	margin-right: auto;
}

.next-project__link--prev .next-project__media {
	margin-left: auto;
}

.next-project__label {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex-shrink: 0;
	color: var(--muted);
}

.next-project__arrow {
	color: var(--accent);
}

.next-project__media {
	width: 7rem;
	flex-shrink: 0;
}

/* ----------------------------------------- case CTA: centred block */

.case-cta__inner {
	align-items: center;
	text-align: center;
}

.case-cta__heading {
	max-width: 26ch;
	margin-inline: auto;
}

.case-cta__body {
	margin-inline: auto;
}

.case-cta__actions {
	justify-content: center;
}

/* Force the four-across stat rail — an earlier max-width rule was still
   winning inside the 768-1023 band. */
.case-study__body .stat-grid__items,
.case-study__body .results-grid__items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --------------------------- tag pills: match the source exactly */

/*
 * Source: rounded-full border border-line px-3 py-1 text-xs text-foreground/85
 * Mine was tighter and muted-grey. Same treatment on the hero and the cards so
 * a tag looks identical wherever it appears.
 */
.case-hero__tag,
.project-card__tag,
.film-strip__tag {
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--foreground) 85%, transparent);
	border-radius: var(--radius-pill);
	border: 1px solid var(--line);
}

.case-hero__tags {
	gap: 0.5rem;
	margin-top: 1.75rem;
}

/* ------------------------------ case CTA: source spacing exactly */

/*
 * Source: py-20 md:py-28, text-center, heading max-w-[20ch] centred,
 * body mt-5 max-w-[46ch] centred, actions mt-9 gap-4 justify-center.
 * Mine was inheriting a section-scale gap on top of its own padding, which
 * left a large dead band above the heading.
 */
.case-cta {
	padding-block: 5rem;
	border-top: 1px solid var(--line);
}

.case-cta__inner {
	display: block;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--container-padding);
	text-align: center;
	gap: 0;
}

.case-cta__heading {
	max-width: 20ch;
	margin-inline: auto;
	margin-bottom: 0;
}

.case-cta__body {
	margin: 1.25rem auto 0;
	max-width: 46ch;
}

.case-cta__actions {
	margin-top: 2.25rem;
	gap: 1rem;
	justify-content: center;
}

/* --------------------------- mobile triptych: crop, don't stack tall */

/*
 * The phones were rendering at their full 390:844 ratio, so three across made
 * the section 1072px against the source's 608px. The source crops each frame
 * to a fixed height and anchors the image to the top — you are meant to read
 * the top of each screen, not the whole page.
 */
.mobile-triptych__phone {
	height: clamp(320px, 34vw, 420px);
	overflow: hidden;
}

.mobile-triptych__image {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center top;
}

.mobile-triptych__head {
	margin-bottom: var(--gap-lg);
}

/* ------------------- prev / next: full-bleed, half the viewport each */

/*
 * The pair was capped at the 1200px content column, which left it looking
 * inset against the sections above. Full-bleed instead: each link fills half
 * the viewport, with the divider landing dead centre.
 */
.next-project__inner {
	max-width: none;
	padding-inline: 0;
}

.next-project__link {
	padding-inline: var(--container-padding);
	padding-block: var(--gap-xl);
}

.next-project__link:hover {
	background: var(--surface);
}

/* ============================================================
   Mobile triptych — matched to source.

   Source: a two-column section, copy left (0.85fr) and phones
   right (1.15fr), vertically centred. Phones are capped at 220px
   wide and shown WHOLE — my earlier fixed-height crop was the
   wrong fix for the height problem; the real constraint is the
   width cap, which is what keeps the section ~600px.

   Each phone is a 3px-bordered plate with a 1.6rem radius and a
   deep shadow, and the outer two sit 1rem lower than the middle.
============================================================ */

.mobile-triptych__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
}

.mobile-triptych__head {
	margin-bottom: 0;
	max-width: none;
	gap: 0;
}

.mobile-triptych__eyebrow {
	color: var(--accent);
}

.mobile-triptych__heading {
	margin-top: 0.75rem;
	max-width: 16ch;
	margin-bottom: 0;
}

.mobile-triptych__body {
	margin-top: 1.25rem;
	max-width: 42ch;
}

.mobile-triptych__screens {
	display: flex;
	justify-content: center;
	gap: 1rem;
	grid-template-columns: none;
}

/* Width cap, not a height crop — the whole screen is meant to be visible. */
.mobile-triptych__phone {
	flex: 0 1 33.3333%;
	max-width: 220px;
	height: auto;
	overflow: hidden;
	border: 3px solid var(--line);
	border-radius: 1.6rem;
	background: var(--background);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Outer two sit lower, so the row reads as three devices, not a strip. */
.mobile-triptych__phone:nth-child(odd) {
	transform: translateY(1rem);
}

.mobile-triptych__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: unset;
}

/* ============================================================
   Paired section: header full width, two media columns.

   display: contents flattens the two sections and the inner
   wrapper into the pair's own grid, so the header can genuinely
   span both columns — which is what the :has() attempt could not
   do. Only three items land in the grid, so auto-placement puts
   the header on row 1 and the two medias side by side on row 2.
============================================================ */

.case-pair {
	display: block;
}

.case-pair__inner > .screenshot-scroll,
.case-pair__inner > .before-after-section {
	padding-block: 0;
}

.case-pair .screenshot-scroll__head {
	margin-bottom: var(--gap-lg);
}

/* Both frames start at the top of the row rather than stretching. */
.case-pair .site-frame,
.case-pair .before-after__figure {
	height: auto;
}

/* --------------------------------- case hero back link, matched */

/*
 * Source: inline-flex items-center gap-2 text-sm text-muted, a left arrow
 * before the label, no underline, hover to full foreground. Mine was plain
 * underlined text with no icon and no room beneath it.
 */
.case-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--muted);
	text-decoration: none;
	margin-bottom: 2.5rem;
	transition: color var(--transition);
}

.case-hero__back:hover {
	color: var(--foreground);
	text-decoration: none;
}

.case-hero__back-icon {
	display: flex;
}

/* The eyebrow row already carries its own top margin — drop the duplicate. */
.case-hero__labels {
	margin-top: 0;
}

/* ------------------------- before/after: height, not a fixed ratio */

/*
 * An 8:5 ratio crops a full-page capture down to a sliver. These frames sit
 * beside the scroll preview, so they take the same height it does — the pair
 * lines up and you can actually read the comparison.
 */
.before-after__stage {
	aspect-ratio: auto;
	height: clamp(420px, 46vw, 560px);
}

.before-after__image {
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* ------------------ before/after: match the scroll frame's height */

/*
 * The wipe sat at a fixed 8:5 ratio, so beside a 420/560px scroll frame it
 * came out short and the client's page was barely legible. Same height as the
 * frame it pairs with instead — the comparison is the point, so it needs room.
 */
.before-after__stage {
	aspect-ratio: auto;
	height: clamp(420px, 46vw, 560px);
}

.before-after__image {
	object-position: center top;
}

/* ============================================================
   spec-list + checklist — matched to source.

   Neither appears on Singer, so neither had been compared until
   now. Both are used by all five other case studies.
============================================================ */

/* --- spec-list: a hairline grid, not bordered rows -------------------- */

/*
 * Source: gap-px over a bg-line container, so the 1px gaps ARE the dividers,
 * inside one rounded border. Two columns, accent labels, near-full-strength
 * values. Mine was a three-column list with bottom borders and muted text.
 */
.spec-list__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--line);
	max-width: 1200px;
	margin-inline: auto;
}

.spec-list__item {
	padding: 1.25rem;
	border-bottom: 0;
	background: var(--background);
}

.spec-list__label {
	color: var(--accent);
}

.spec-list__value {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: color-mix(in srgb, var(--foreground) 85%, transparent);
}

/* The spec list sits directly under the hero, so it opens tight. */
.case-study__body > .spec-list {
	padding-top: 1rem;
}

/* --- checklist: inline check marks, two columns ---------------------- */

.checklist__heading {
	max-width: 18ch;
	margin-bottom: 0;
}

.checklist__eyebrow {
	color: var(--accent);
}

.checklist__items {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-top: 1.5rem;
	max-width: none;
}

.checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* A glyph, not a bordered circle. */
.checklist__tick {
	display: flex;
	flex-shrink: 0;
	width: auto;
	height: auto;
	margin-top: 0.125rem;
	border: 0;
	border-radius: 0;
	color: var(--accent);
}

.checklist__tick::after {
	content: none;
}

.checklist__text {
	color: color-mix(in srgb, var(--foreground) 85%, transparent);
	font-size: 0.875rem;
}

/* ================= before/after: uncropped, source-styled ============ */

/*
 * The pair renders at FULL size. compare_pair (1200x750, hard crop) sliced a
 * tall page capture into a band which object-cover then magnified — the same
 * crop-then-upscale trap that softened the hero tiles and the services frames.
 */

.before-after__stage {
	height: clamp(420px, 52vw, 620px);
}

/* Pills sit in the TOP corners, as the source does, not along the bottom. */
.before-after__pill {
	top: 0.75rem;
	bottom: auto;
	padding: 0.3125rem 0.75rem;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: color-mix(in srgb, var(--background) 78%, transparent);
	backdrop-filter: blur(8px);
}

.before-after__pill--before {
	left: 0.75rem;
	color: var(--foreground);
}

.before-after__pill--after {
	right: 0.75rem;
	color: var(--accent);
}

/* A grabbable knob on the divider rather than a bare ring. */
.before-after__handle::after {
	content: none;
}

.before-after__knob {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 2px solid var(--accent);
	border-radius: 50%;
	background: var(--background);
	color: var(--accent);
	box-shadow: 0 0 24px var(--glow);
}

/* --------------------- results grid: good figures are accent green */

/*
 * Source marks the wins in accent (90 / 95 and 4.9★) and leaves neutral
 * figures cream. My --good modifier was setting foreground, so every value
 * looked the same and the section lost its read.
 */
.results-grid__item--good .results-grid__value,
.stat-grid__item--good .stat-grid__value {
	color: var(--accent);
}

/* Source: mt-10 between the copy and the rail, py-20 / md:py-28 section. */
.results-grid__items {
	margin-top: 2.5rem;
}

.results-grid__head {
	margin-bottom: 0;
	max-width: none;
}

.results-grid__heading {
	max-width: 20ch;
	margin-top: 0.75rem;
	margin-bottom: 0;
}

.results-grid__body {
	margin-top: 1.25rem;
	max-width: 62ch;
}

.results-grid__eyebrow {
	color: var(--accent);
}

/*
 * spec-list has no __inner wrapper — the grid IS the container — so it was
 * capped at 1200px but carried no side padding, leaving its border sitting
 * wider than every neighbouring section. The section supplies the gutter and
 * the grid centres inside it, matching the rest of the page.
 */
.case-study__body > .spec-list {
	padding-inline: var(--container-padding);
}

.spec-list__grid {
	max-width: 1200px;
	margin-inline: auto;
}

/* ============== numbered-steps: card variant (2x2 hairline grid) ====== */

/*
 * Two shapes share this layout. A SEQUENCE stays a numbered list. A set of
 * parallel decisions is a card grid — same hairline construction as spec-list:
 * gap-px over a bg-line container inside one rounded border, with a check
 * glyph instead of an index.
 */
.numbered-steps--cards .numbered-steps__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	margin-top: 3rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--line);
}

.numbered-steps--cards .numbered-steps__step {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	padding: 1.75rem;
	border-bottom: 0;
	background: var(--background);
}

.numbered-steps--cards .numbered-steps__number {
	display: flex;
	align-items: flex-start;
	padding-top: 0;
	margin-top: 3px;
	color: var(--accent);
}

/* Title sits beside the check, body runs full width beneath. */
.numbered-steps--cards .numbered-steps__step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.625rem;
	row-gap: 0.75rem;
	align-items: start;
}

.numbered-steps--cards .numbered-steps__content {
	display: contents;
}

.numbered-steps--cards .numbered-steps__title {
	grid-column: 2;
	margin-bottom: 0;
}

.numbered-steps--cards .numbered-steps__text {
	grid-column: 1 / -1;
	margin-top: 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--muted);
}

.numbered-steps__heading {
	max-width: 22ch;
	margin-top: 0.75rem;
	margin-bottom: 0;
}

.numbered-steps__eyebrow {
	color: var(--accent);
}

/* ============================================================
   spec-list + checklist — matched to source.

   Both appear on all five non-Singer case studies, so they were
   the highest-value pair left unchecked.
============================================================ */

/* --- spec-list: 2-up panel with hairline dividers ---------------------- */

/*
 * The source builds the dividers with gap-px over a line-coloured background:
 * the wrapper is --line, each cell is --background, and the 1px gap shows
 * through. Cleaner than bordering every cell and it never doubles up.
 */
.spec-list__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--line);
	max-width: 1200px;
	margin-inline: auto;
}

.spec-list__item {
	background: var(--background);
	padding: 1.25rem;
	border: 0;
	padding-bottom: 1.25rem;
}

.spec-list__label {
	color: var(--accent);
}

.spec-list__value {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: color-mix(in srgb, var(--foreground) 85%, transparent);
}

/* The spec list sits tight under the hero, not a full section away. */
.case-study__body > .spec-list:first-child {
	padding-top: 1rem;
}

/* --- checklist: copy left, ticked list right -------------------------- */

.checklist {
	border-block: 1px solid var(--line);
	background: color-mix(in srgb, var(--surface) 30%, transparent);
}

.checklist__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

.checklist__head {
	margin-bottom: 0;
	gap: 0;
	max-width: none;
}

.checklist__eyebrow {
	color: var(--accent);
}

.checklist__heading {
	margin-top: 0.75rem;
	max-width: 18ch;
	margin-bottom: 0;
}

.checklist__body {
	margin-top: 1.25rem;
}

.checklist__items {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	max-width: none;
	margin-top: 0;
}

/* A ticked line, not a bordered row. */
.checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--foreground) 85%, transparent);
}

.checklist__tick {
	position: relative;
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin-top: 0.125rem;
	border: 0;
	border-radius: 0;
	color: var(--accent);
}

/* Draw the check as a mark, not a circled glyph. */
.checklist__tick::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 2px;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(-45deg);
}

.checklist__text {
	color: inherit;
	font-size: inherit;
}

/*
 * The checklist's band was being cancelled by the blanket
 * `.case-study__body > section + section { border-top: 0 }` rule, which is more
 * specific than `.checklist`. Match that specificity so the band survives —
 * the source sets it deliberately (border-y + surface/30) to mark the section
 * off from the copy around it.
 */
.case-study__body > section.checklist,
.case-study__body > section.checklist + section.checklist {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--surface) 30%, transparent);
}

/* Consecutive checklists read as one band rather than a double rule. */
.case-study__body > section.checklist + section.checklist {
	border-top: 0;
}

/* ============================================================
   GP Coatings pass — the hairline-grid family, matched to source.

   The source builds almost every case block the same way: gap-px
   over a --line background inside one rounded border, so the 1px
   gaps ARE the dividers. spec-list and numbered-steps--cards were
   already converted; audit-list, numbered-steps--steps and
   pillar-grid were still bordered cards floating in a gap-lg grid,
   which reads as a different design language on the same page.
============================================================ */

/* ---------------------------------------- paired sections, shared shell */

/*
 * Both pair types now share one inner container, so the pair carries the
 * gutter and the sections inside it stop supplying their own. Without this
 * each half centred inside its own column instead of aligning to the page.
 */
.case-pair__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem;
	/* 1200px, like every other case section — NOT --container-max-width,
	   which is 1400 and left the pair sitting wider than its neighbours. */
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.case-pair .screenshot-scroll__inner,
.case-pair .before-after-section__inner,
.case-pair .checklist__inner,
.case-pair .review-block__inner,
.case-pair .results-grid__inner {
	max-width: none;
	padding-inline: 0;
}

/* The group owns the rhythm now; its members stop supplying their own. */
.case-pair__inner > section {
	padding-block: 0;
	border: 0;
	background: none;
}

/* An empty head still carried its bottom margin, leaving a phantom gap. */
.case-pair__inner .results-grid__head:empty {
	display: none;
}

/* --- mode: first two side by side, the rest full width beneath --------- */

@media (min-width: 1024px) {
	.case-pair--columns-then-full .case-pair__inner > :nth-child(n + 3) {
		grid-column: 1 / -1;
	}
}

/* --- mode: one column of copy, a stack of proof beside it -------------- */

@media (min-width: 1024px) {
	.case-pair--main-then-aside .case-pair__inner {
		grid-template-columns: 0.95fr 1.05fr;
		column-gap: 3rem;
		row-gap: 1rem;
		align-content: start;
	}

	.case-pair--main-then-aside .case-pair__inner > :nth-child(1) {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.case-pair--main-then-aside .case-pair__inner > :nth-child(2) {
		grid-column: 2;
		grid-row: 1;
	}

	.case-pair--main-then-aside .case-pair__inner > :nth-child(3) {
		grid-column: 2;
		grid-row: 2;
	}
}

/* The pair replaces the sections' own rhythm, so restore the section beat. */
.case-study__body > .case-pair {
	padding-block: var(--section-padding);
}

.case-study__body > section + .case-pair,
.case-study__body > .case-pair + section {
	border-top: 1px solid var(--line);
}

/* --- delivered / landed: one two-column band ------------------------- */

/*
 * Source pairs these as a single band: border-y + surface/30 around a
 * two-column grid. They were two stacked bands, each with copy left and
 * ticks right, so the page read the same content as four columns.
 */
.case-pair--checklist {
	border-block: 1px solid var(--line);
	background: color-mix(in srgb, var(--surface) 30%, transparent);
}

.case-study__body > .case-pair--checklist,
.case-study__body > section + .case-pair--checklist,
.case-study__body > .case-pair--checklist + section {
	border-top: 1px solid var(--line);
}

.case-pair--checklist > .case-pair__inner > .checklist {
	padding-block: 0;
	border: 0;
	background: none;
}

/* Stacked inside its column — the pair supplies the two columns now. */
.case-pair--checklist .checklist__inner {
	display: block;
}

.case-pair--checklist .checklist__items {
	margin-top: 1.5rem;
}

@media (min-width: 1024px) {
	.case-pair--checklist.case-pair--columns .case-pair__inner,
	.case-pair--checklist.case-pair--columns-then-full .case-pair__inner {
		column-gap: 4rem;
	}
}

/* The tick is an inline SVG in the markup; the drawn one doubled it. */
.checklist__tick::after {
	content: none;
}

/* ------------------------------------------- case hero: single rhythm */

/*
 * The column had gap:1rem AND per-child margins, so every step in the
 * stack was spaced twice — 56px under the back link where the source has
 * 40, 44 above the tags where it has 28. One source of spacing only.
 */
.case-hero__inner {
	gap: 0;
}

.case-hero__back {
	margin-bottom: 2.5rem;
}

.case-hero__title {
	margin-top: 1rem;
}

.case-hero__summary {
	margin-top: 1.5rem;
}

.case-hero__tags {
	margin-top: 1.75rem;
}

.case-hero__actions {
	margin-top: 2rem;
}

/* ------------------------------------- audit list: a two-column table */

/*
 * Source: one hairline panel, problem left in a soft red, fix right in
 * muted body copy — a table you read across. Mine was a 2-up grid of
 * bordered cards, which loses the problem/fix pairing entirely.
 */
.audit-list__head {
	margin-bottom: 3rem;
}

.audit-list__eyebrow {
	color: var(--accent);
}

.audit-list__heading {
	max-width: 24ch;
	margin-top: 0.75rem;
	margin-bottom: 0;
}

.audit-list__body {
	margin-top: 1.25rem;
	max-width: 64ch;
}

.audit-list__items {
	display: flex;
	flex-direction: column;
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--line);
}

.audit-list__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	padding: 1.5rem;
	border: 0;
	border-radius: 0;
	background: var(--background);
}

.audit-list__problem {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: #ff9a9a;
}

.audit-list__fix {
	margin-top: 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--muted);
}

@media (min-width: 768px) {
	.audit-list__item {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: 2.5rem;
		padding: 1.75rem;
	}

	.audit-list__problem {
		font-size: 1rem;
	}
}

/* --------------------------------- numbered steps: parallel workstreams */

/*
 * These are not a sequence, they are parallel decisions, and the source
 * lays them across in one hairline panel with the index as a quiet
 * watermark. A vertical list read as chronology it does not have.
 */
.numbered-steps__body {
	margin-top: 1.25rem;
	max-width: 62ch;
}

.numbered-steps--steps .numbered-steps__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	margin-top: 3rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--line);
}

.numbered-steps--steps .numbered-steps__step {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	padding: 1.75rem;
	border-bottom: 0;
	background: var(--background);
}

/* A watermark index, not an accent label in its own column. */
.numbered-steps--steps .numbered-steps__number {
	padding-top: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: color-mix(in srgb, var(--foreground) 25%, transparent);
}

.numbered-steps--steps .numbered-steps__content {
	display: contents;
}

.numbered-steps--steps .numbered-steps__title {
	margin-bottom: 0;
}

.numbered-steps--steps .numbered-steps__text {
	margin-top: 0;
	max-width: none;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--muted);
}

/* The source picks the column count per case study; follow the count. */
@media (min-width: 768px) {
	.numbered-steps--steps .numbered-steps__list[data-count="2"],
	.numbered-steps--steps .numbered-steps__list[data-count="4"],
	.numbered-steps--steps .numbered-steps__list[data-count="5"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.numbered-steps--steps .numbered-steps__list[data-count="3"],
	.numbered-steps--steps .numbered-steps__list[data-count="6"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.numbered-steps--steps .numbered-steps__step {
		padding: 2rem;
	}
}

@media (min-width: 1024px) {
	.numbered-steps--steps .numbered-steps__list[data-count="5"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ------------------------------------------- pillar grid: same panel */

.pillar-grid__head {
	margin-bottom: 3rem;
}

.pillar-grid__eyebrow {
	color: var(--accent);
}

.pillar-grid__heading {
	max-width: 22ch;
	margin-top: 0.75rem;
	margin-bottom: 0;
}

.pillar-grid__body {
	margin-top: 1.25rem;
	max-width: 62ch;
}

.pillar-grid__items {
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--line);
}

.pillar-grid__item {
	height: 100%;
	padding: 1.75rem;
	border: 0;
	border-radius: 0;
	background: var(--background);
}

/* Count in accent, noun beside it on a shared baseline. */
.pillar-grid__item-title {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0;
}

.pillar-grid__item-count {
	font-family: var(--font-mono);
	font-size: 1.5rem;
	color: var(--accent);
	text-shadow: 0 0 18px var(--glow);
}

.pillar-grid__item-body {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--muted);
}

.pillar-grid__names {
	margin-top: 1.25rem;
}

/* Descriptive names read as a ticked list; a taxonomy reads as pills. */
.pillar-grid__names--ticks {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pillar-grid__names--ticks .pillar-grid__name {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--foreground) 85%, transparent);
}

.pillar-grid__name-tick {
	display: flex;
	flex-shrink: 0;
	margin-top: 0.1875rem;
	color: var(--accent);
}

.pillar-grid__names--pills .pillar-grid__name {
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--foreground) 85%, transparent);
}

/* Two up by default; only a 3 or a 6 divides cleanly into thirds. */
@media (min-width: 640px) {
	.pillar-grid__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.pillar-grid__items[data-count="3"],
	.pillar-grid__items[data-count="6"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pillar-grid__item {
		padding: 2rem;
	}
}

/* ------------------------------------------------ eyebrows, in accent */

/*
 * Every section eyebrow in the source is accent. These two were still
 * inheriting the muted default, so the same label read two ways on one page.
 */
.text-block__eyebrow,
.before-after-section__eyebrow,
.screenshot-scroll__eyebrow,
.spec-list__label {
	color: var(--accent);
}

/* ============================================================
   Audit pass — type scale, heading measure, remaining panels.
============================================================ */

/* ---------------------------------------------- small copy is 14px */

/*
 * The source has no 13px step: small body copy is text-sm (0.875rem) and
 * labels are text-xs (0.75rem). --small-size sat between the two at 13px,
 * so every card body, list item and caption on the site ran a pixel light.
 * The handful of true 12px labels already set their own size.
 */
:root {
	--small-size: 0.875rem;
}

/* ------------------------------------- spec-list: no inner gutter */

/*
 * The grid inherits the shared __inner rule (max-width + 2rem padding),
 * but the SECTION already supplies the gutter — so the panel carried a
 * second 2rem inset and its --line background showed as a band down each
 * side, inside the border. The grid is the panel; it needs no padding.
 */
.spec-list__grid {
	padding-inline: 0;
}

/* ------------------------------------------ heading measure by role */

/*
 * The source sets a max-width per heading so each one breaks where it
 * reads best. It varies 16–24ch, but it is consistent per section type,
 * so these are the per-type values rather than one global 20ch.
 */
.case-hero__title {
	max-width: 18ch;
}

.problem-block__heading,
.before-after-section__heading,
.feature-cards__heading,
.page-list__heading {
	max-width: 22ch;
}

.text-block__heading,
.numbered-steps__heading {
	max-width: 24ch;
}

.mobile-triptych__heading,
.screenshot-scroll__heading,
.speed-comparison__heading,
.design-system__heading {
	max-width: 20ch;
}

/* ------------------------------- feature cards: the same hairline panel */

/*
 * The last block still using bordered cards floating in a gap-lg grid.
 * Source is the panel again, with a check leading the title.
 */
.feature-cards__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	margin-top: 3rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--line);
}

.feature-cards__card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	padding: 1.75rem;
	border: 0;
	border-radius: 0;
	background: var(--background);
}

.feature-cards__card-body {
	margin-top: 0;
	line-height: 1.625;
}

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

	.feature-cards__card {
		padding: 2rem;
	}
}

/* ------------------------------------------ stat band: the md step */

/* Source is text-2xl stepping to text-3xl from md; only the first was set. */
@media (min-width: 768px) {
	.stat-grid__value,
	.results-grid__value {
		font-size: 1.875rem;
	}
}

/* ------------------------------- stat band: columns follow the count */

/*
 * Source picks md:grid-cols-3 for three stats and md:grid-cols-4 otherwise,
 * so three never sits in a four-up grid with a hole in it. The dividers are
 * derived from the same count — a cell opening a row carries no left rule,
 * and the first row carries no top rule.
 */
.stat-grid__item,
.results-grid__item {
	border-left: 1px solid var(--line);
	border-top: 1px solid var(--line);
}

.stat-grid__item:nth-child(2n + 1),
.results-grid__item:nth-child(2n + 1) {
	border-left: 0;
}

.stat-grid__item:nth-child(-n + 2),
.results-grid__item:nth-child(-n + 2) {
	border-top: 0;
}

@media (min-width: 768px) {
	/* Four across: one row, so no horizontal rules at all. */
	.stat-grid__item,
	.results-grid__item {
		border-top: 0;
		border-left: 1px solid var(--line);
	}

	.stat-grid__items > .stat-grid__item:nth-child(4n + 1),
	.results-grid__items > .results-grid__item:nth-child(4n + 1) {
		border-left: 0;
	}

	/* responsive.css sets a blanket four-up from .case-study__body — match
	   that specificity so the three-up count actually wins. */
	.case-study__body .stat-grid__items[data-count="3"],
	.case-study__body .results-grid__items[data-count="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.stat-grid__items[data-count="3"] > .stat-grid__item:nth-child(3n + 1),
	.results-grid__items[data-count="3"] > .results-grid__item:nth-child(3n + 1) {
		border-left: 0;
	}
}

/* ============================================================
   Case-study rhythm, matched to source.
============================================================ */

/*
 * Source sections are py-20 / md:py-28 — a FIXED 80px then 112px. The theme
 * used clamp(4.5rem, 8vw, 9rem), which only crosses 112px at a 1400px
 * viewport: tighter than source on a laptop, and still growing to 144px on a
 * wide screen where source holds at 112. Same story on the gutter, where
 * source is px-4 / md:px-8 and the theme ran 2rem at every width.
 *
 * Re-declared on the case-study scope rather than :root, so the tokens land
 * on every case-study page without disturbing the homepage's own rhythm.
 */
.case-study {
	--section-padding: 5rem;
	--container-padding: 1rem;
}

@media (min-width: 768px) {
	.case-study {
		--section-padding: 7rem;
		--container-padding: 2rem;
	}
}

/* ------------------------------- page list: the hairline panel again */

/*
 * Source: the same gap-px panel, numbers as quiet watermarks, three across
 * from lg. This was the last block still rendering as a bordered rail.
 */
.page-list__items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	margin-top: 3rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--line);
}

.page-list__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	padding: 1.5rem;
	border-bottom: 0;
	background: var(--background);
}

.page-list__content {
	display: contents;
}

.page-list__number {
	padding-top: 0;
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--foreground) 25%, transparent);
}

.page-list__text {
	margin-top: 0;
	max-width: none;
	line-height: 1.625;
}

.page-list__heading {
	max-width: 24ch;
}

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

@media (min-width: 768px) {
	.page-list__item {
		padding: 1.75rem;
	}
}

@media (min-width: 1024px) {
	.page-list__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------- case body rhythm, on source values */

/*
 * An earlier pass compressed this to clamp(3.5rem, 6vw, 6rem) on a new
 * thought and clamp(1.25rem, 1.8vw, 2rem) everywhere else — 74px and 22px on
 * a laptop, against the source's flat 112px. The compression existed because
 * WordPress splits one source <Section> into sibling sections (stats under a
 * problem statement, a proof image under a table), so a flat 112px on each
 * would double up at every joint.
 *
 * The structure was right, the numbers were not. A block that opens with its
 * own head gets the source's full section break; a continuation gets the
 * source's INTERNAL gap (mt-10) as a margin, so the two never stack.
 */
.case-study__body > section {
	padding-block: 0;
}

.case-study__body > section + section {
	margin-top: 2.5rem;
}

.case-study__body > section:has(> * > .problem-block__eyebrow),
.case-study__body > section:has(> * > .text-block__eyebrow),
.case-study__body > section:has(.media-block__head),
.case-study__body > section:has(.screenshot-scroll__head),
.case-study__body > section:has(.before-after-section__head),
.case-study__body > section:has(.video-embed__head),
.case-study__body > section:has(.mobile-triptych__head),
.case-study__body > section:has(.feature-cards__head),
.case-study__body > section:has(.speed-comparison__head),
.case-study__body > section:has(.results-grid__head),
.case-study__body > section:has(.checklist__head),
.case-study__body > section:has(.numbered-steps__head),
.case-study__body > section:has(.audit-list__head),
.case-study__body > section:has(.page-list__head),
.case-study__body > section:has(.pillar-grid__head),
.case-study__body > section:has(.design-system__head) {
	margin-top: 0;
	padding-top: var(--section-padding);
}

/* The spec list rides directly under the hero, as source's !pt-4 does. */
.case-study__body > .spec-list:first-child {
	padding-top: 1rem;
}

/* Grouped pairs are always their own thought, top and bottom. */
.case-study__body > .case-pair {
	margin-top: 0;
	padding-block: var(--section-padding);
}

/* Nothing follows the last block, so it carries its own closing space. */
.case-study__body > :last-child {
	padding-bottom: var(--section-padding);
}

/* --------------------------- spec list: same content box as every section */

/*
 * Every other section is a 1200px container with a 32px gutter, so its
 * content box is 1136px. The spec list had no wrapper, so its 1200px cap
 * measured the PANEL — leaving it 64px wider than the hero frame above it
 * and every block below. Cap the content box, not the container.
 */
.case-study__body > .spec-list > .spec-list__grid {
	max-width: calc(1200px - var(--container-padding) * 2);
	margin-inline: auto;
}

/* ------------------------------ comparison table: the measurement shape */

/*
 * Source: one rounded panel, a surface-2 header row in small caps, values in
 * mono — the right-hand column in accent because it is the figure that
 * matters. The third column only exists when the content has one.
 */
.comparison-table__table--three .comparison-table__cell--mid {
	font-family: var(--font-mono);
	color: var(--muted);
}

.comparison-table__table--three .comparison-table__cell--after {
	font-family: var(--font-mono);
	color: var(--accent);
}

.comparison-table__table--three .comparison-table__cell--before {
	font-weight: 500;
	color: var(--foreground);
}

/* ------------------------------- numbered steps: one gap under the head */

/*
 * The head carried margin-bottom AND the list carried margin-top, so the
 * space under "Treated as a migration…" was 32 + 48 = 80px against the
 * source's mt-12. The list owns that gap; the head stops adding to it.
 */
.numbered-steps__head {
	margin-bottom: 0;
}

/* --------------------------- mobile triptych: copy wider than the phones */

/*
 * Source is lg:grid-cols-[1.1fr_0.9fr] — copy column WIDER than the screens.
 * The theme had 0.85fr / 1.15fr, the ratio inverted: the heading was forced
 * into three lines in a cramped column while the phones overflowed a column
 * too wide for them. Centred, as the source is.
 */
@media (min-width: 1024px) {
	.case-study__body .mobile-triptych__inner {
		grid-template-columns: 1.1fr 0.9fr;
		align-items: center;
	}
}

/* ------------------------------ hairline grids: complete the last row */

/*
 * Five items across three columns leaves a hole in the panel where the
 * --line background shows through. The source closes it with a filler cell
 * (FullMeasures' page grid does exactly this); a generated cell does the
 * same without touching the markup.
 */
.numbered-steps--steps .numbered-steps__list[data-count="5"]::after,
.pillar-grid__items[data-count="5"]::after {
	content: "";
	background: var(--background);
}

@media (max-width: 1023px) {
	.numbered-steps--steps .numbered-steps__list[data-count="5"]::after {
		display: none;
	}
}

@media (max-width: 639px) {
	.pillar-grid__items[data-count="5"]::after {
		display: none;
	}
}

/* ----------------------- a caption under a table reads as a caption */

/*
 * The source sets the note under the performance table as a plain muted
 * line (mt-4 text-sm). Standing alone it earns its quote rule; directly
 * under a table it is the table's caption.
 */
.comparison-table + .disclosure {
	margin-top: 1rem;
}

.comparison-table + .disclosure .disclosure__body {
	padding-left: 0;
	border-left: 0;
}

/* ------------------------------- mobile triptych: phones size themselves */

/*
 * A later rule set the figure to height:auto while the image kept
 * height:100% from the earlier fixed-height version. A percentage height
 * against an auto-height parent is indeterminate, so the figure collapsed
 * and the phones rendered outside it — overflowing the section's bottom
 * edge into the block below. The image carries its own ratio, as the
 * source does (block w-full, no fixed height), and the figure follows it.
 */
.mobile-triptych__phone {
	height: auto;
	align-self: start;
}

/*
 * No forced ratio: Star's captures are 390x844 and GP's are 756x1062, so any
 * single ratio crops one of them off at the sides. width:100% + height:auto
 * lets each image keep its own, which is what the source does — and with the
 * box matching the image there is nothing left to crop.
 */
.mobile-triptych__image {
	display: block;
	width: 100%;
	height: auto;
	/* `revert`, not `auto` — auto would beat the UA's
	   img[width][height] { aspect-ratio: attr(width)/attr(height) } and leave
	   lazy images reserving no height until they load, which is the collapse
	   this rule exists to fix. revert hands each image its own ratio back. */
	aspect-ratio: revert;
	object-fit: fill;
}

/* ---------------------------------------- case hero: source's top offset */

/*
 * Source clears the fixed header with pt-16 on the article and pt-8 on the
 * back-link row — a flat 96px to the top of "All work". The theme ran
 * clamp(6rem, 9vw, 8rem), which is 103px on a laptop and 128px on a wide
 * screen, leaving the hero floating well below the nav.
 */
/* The content wrapper already clears the fixed header, so this is only the
   source's pt-8 on the back-link row — 96px from the top of the page. */
.case-hero__inner {
	padding-top: 2rem;
}

/* -------------------- mobile triptych: the stagger must occupy space */

/*
 * The outer two phones sat lower via transform. A transform moves pixels but
 * reserves no height, so the row overflowed its section by exactly the 1rem
 * offset and the phones crossed the border rule of the block beneath. Margin
 * produces the same stagger and the container grows to contain it.
 */
.mobile-triptych__phone:nth-child(odd) {
	transform: none;
	margin-top: 1rem;
}

.mobile-triptych__screens {
	align-items: flex-start;
}