/* ==========================================================================
   Fonts — self-hosted variable woff2, so one file covers every weight.
   font-display: swap keeps text visible while the font loads.
   ========================================================================== */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/montserrat-variable.woff2") format("woff2");
}

@font-face {
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/montserrat-variable-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-variable.woff2") format("woff2");
}

/* ==========================================================================
   VRankOne — Design Tokens
   ========================================================================== */

:root {
	/* Colors */
	--color-primary-red: #e2352e;
	--color-primary-red-dark: #c42821;
	--color-near-black: #16181d;
	--color-navy: #10182b;
	--color-cream: #faf9f7;
	--color-white: #ffffff;
	--color-off-white: #fafafa;
	--color-label-pill-bg: #f2a516;
	--color-label-pill-text: #2b1a00;
	--color-lavender: #ebe9fb;
	--color-border: #e7e3da;
	--color-text-muted: #5c6068;
	--color-success: #1a7f4b;

	/* Typography
	   Swap these two values to change the whole site's type.
	   --font-display drives headings and buttons, --font-base drives body. */
	--font-display: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	--font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.75rem;
	--font-size-2xl: 2.5rem;
	--font-size-3xl: 3.25rem;
	--line-height-tight: 1.15;
	--line-height-base: 1.6;

	/* Spacing */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;

	/* Layout */
	--container-max: 1320px;
	--radius-sm: 4px;
	--radius-md: 12px;
	--shadow-card: 0 10px 30px rgba(16, 24, 43, 0.08);
	/* Layered: tight contact shadow, mid falloff, broad ambient — reads as
	   real depth where a single large blur just looks like grey fog. */
	--shadow-lg:
		0 2px 6px rgba(16, 24, 43, 0.05),
		0 12px 24px rgba(16, 24, 43, 0.08),
		0 28px 56px rgba(16, 24, 43, 0.12),
		0 56px 96px rgba(16, 24, 43, 0.08);
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
}

/* Anchor targets stop below the sticky header instead of underneath it. */
[id] {
	scroll-margin-top: 90px;
}

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

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-near-black);
	background: var(--color-white);
}

/* Faint dot grid behind every content section, site-wide — first used on
   just the Metrics and Ecommerce Hero sections, now applied everywhere via
   this one shared rule instead of repeating it per section. Each section
   keeps its own background-color (white/cream/off-white); this only adds
   the texture on top; nothing here overrides which color a given section
   uses. Deliberately scoped to the bare `section` element rather than a
   shared class — every section template already renders one, and no
   non-section chrome (header/footer/modals) uses the tag, so this reaches
   every section on every page with no markup change anywhere. */
section {
	background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
	background-size: 22px 22px;
}

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

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

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4, p {
	margin: 0;
}

/* Headings and anything button-like use the display face; body copy
   inherits --font-base from <body>. */
h1, h2, h3, h4,
.btn,
.site-header__brand,
.site-footer__brand,
.case-card__metric,
.case-card__metric-inline,
.team-stat__number,
.services-card__title,
.cases__heading,
.testimonials__heading,
.team__heading,
.team-member__name,
.team-stat__heading {
	font-family: var(--font-display);
}

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-sm);
}

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

.page-content a[href^="mailto:"] {
	color: var(--color-primary-red);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.page-content a[href^="mailto:"]:hover {
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   Shared components
   ========================================================================== */

.btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background: var(--color-primary-red);
	color: var(--color-white);
	font-size: var(--font-size-sm);
	font-weight: 600;
	padding: 0.85em 1.75em;
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(226, 53, 46, 0.30);
	transition: color 0.25s ease 0.12s, background-color 0.2s ease,
		box-shadow 0.3s ease, transform 0.3s ease;
}

.btn__arrow {
	flex: none;
}

/* Wave hover — white fills the button from below with a curved leading edge,
   and the label inverts to red as it passes.

   The fill is a large ellipse on ::before at z-index -1. Negative z-index
   paints above the element's own background but below its text, which is what
   lets the wave cover the red without hiding the label. `isolation: isolate`
   keeps that -1 from escaping behind the header.

   Applied to .btn itself, so every button gets it — including any added later.
   The light variants opt out further down, since a white wave on a white
   button would be invisible. */
.btn::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 200%;
	height: 300%;
	background: var(--color-white);
	border-radius: 50%;
	transform: translate(-50%, 0);
	transition: transform 0.6s cubic-bezier(0.45, 0, 0.2, 1);
	z-index: -1;
}

.btn:hover,
.btn:focus-visible {
	background: var(--color-primary-red);
	color: var(--color-primary-red);
	box-shadow: 0 10px 26px rgba(226, 53, 46, 0.38);
	transform: translateY(-1px);
}

/* -75%, not -100%. The ellipse must end up roughly concentric with the button:
   travelling a full 100% of its own height carries its curved bottom edge up
   into the button, leaving a red crescent along the bottom. */
.btn:hover::before,
.btn:focus-visible::before {
	transform: translate(-50%, -75%);
}

@media (prefers-reduced-motion: reduce) {
	.btn,
	.btn::before {
		transition: none;
	}

	.btn:hover,
	.btn:focus-visible {
		transform: none;
	}
}

.pill {
	display: inline-block;
	background: var(--color-label-pill-bg);
	color: var(--color-label-pill-text);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.5em 1.1em;
	border-radius: 999px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Site header
   ========================================================================== */

/* Sticky. No ancestor may have overflow:hidden or this silently stops working. */
.site-header {
	background: var(--color-white);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.25s ease;
}

.site-header.is-stuck {
	box-shadow: 0 2px 16px rgba(16, 24, 43, 0.09);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	padding-block: var(--space-sm);
}

.site-header__brand {
	font-weight: 800;
	font-size: var(--font-size-lg);
	letter-spacing: -0.02em;
	margin-right: auto;
}

.site-header__logo {
	/* Kept smaller on mobile so the logo, CTA and toggle still fit one row.
	   max-width is a safety net for a wide (wordmark + icon) logo file — the
	   height cap alone can't stop a very elongated image from spanning most
	   of the header, so whichever constraint is tighter wins. */
	max-height: 42px;
	max-width: 160px;
	width: auto;
	height: auto;
}

/* Hamburger button — bars morph into a cross when expanded. */
.site-header__toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	order: 3;
	margin-right: calc(var(--space-xs) * -1);
	background: none;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.site-header__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-near-black);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.2s ease;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
	opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Collapsible panel. Animating grid-template-rows 0fr -> 1fr gives a smooth
   height transition without hard-coding a max-height. */
.site-header__nav {
	flex-basis: 100%;
	order: 4;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.site-header__nav.is-open {
	grid-template-rows: 1fr;
}

.site-header__nav-inner {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s linear 0.35s;
}

.site-header__nav.is-open .site-header__nav-inner {
	visibility: visible;
	transition-delay: 0s;
}

.site-header__menu {
	display: flex;
	flex-direction: column;
	padding-top: var(--space-xs);
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-xs);
}

.site-header__menu li + li {
	border-top: 1px solid var(--color-border);
}

.site-header__menu a {
	display: block;
	padding-block: 0.85rem;
	/* Display face so the nav matches the headings and buttons. */
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-near-black);
	transition: color 0.2s ease;
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible {
	color: var(--color-primary-red);
}

/* Section currently in view. */
.site-header__menu a.is-current {
	color: var(--color-primary-red);
	font-weight: 600;
}

/* CTA stays visible in the bar at every width; only the panel collapses. */
.site-header__cta {
	order: 2;
	padding: 0.7em 1.1em;
	font-size: 0.8125rem;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.site-header__nav,
	.site-header__toggle-bar,
	.testimonials__track,
	.testimonials__dot {
		transition: none;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	background-color: var(--color-cream);
	padding-block: var(--space-md) var(--space-lg);
	overflow: hidden;
}

.hero__inner {
	display: grid;
	gap: var(--space-md);
}

.hero__label {
	margin-bottom: var(--space-sm);
}

/* Scales with viewport on phones so the headline never eats the screen. */
.hero__title {
	font-size: clamp(1.9rem, 8.5vw, 2.6rem);
	line-height: 1.08;
	text-wrap: balance;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin-bottom: var(--space-sm);
}

.hero__title-line,
.hero__title-accent {
	display: block;
}

.hero__title-accent {
	color: var(--color-primary-red);
	font-style: italic;
}

.hero__subtext {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	max-width: 44ch;
	margin-bottom: var(--space-md);
}

/* Wide, shallow banner on mobile so it reads as a companion to the copy
   rather than a full-height block. */
.hero__media {
	position: relative;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
	padding-bottom: var(--space-sm);
}

/* Lavender block sits behind and below the white card, per the design. */
.hero__media::before {
	content: "";
	position: absolute;
	inset: 55% 10% 0 5%;
	background: var(--color-lavender);
	border-radius: var(--radius-md);
}

.hero__media-card {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--color-white);
	border-radius: 20px;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

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

/* Clickable hero image, with the label revealed on hover/focus. */
.hero__media-link {
	display: block;
	position: absolute;
	inset: 0;
}

.hero__media-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8, 12, 24, 0.55);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.hero__media-link:hover .hero__media-overlay,
.hero__media-link:focus-visible .hero__media-overlay {
	opacity: 1;
}

.hero__media-overlay-text {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-white);
	background: var(--color-primary-red);
	padding: 0.7em 1.3em;
	border-radius: var(--radius-sm);
	transform: translateY(6px);
	transition: transform 0.25s ease;
}

.hero__media-link:hover .hero__media-overlay-text,
.hero__media-link:focus-visible .hero__media-overlay-text {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.hero__media-overlay,
	.hero__media-overlay-text {
		transition: none;
	}
}

/* ==========================================================================
   Award — photo-left achievement card, Ecommerce SEO page
   ========================================================================== */

.award {
	background-color: var(--color-cream);
	padding-block: var(--space-md);
}

.award__card {
	display: grid;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.award__media {
	/* Matches the source photo's own proportions exactly, so cover fills the
	   box completely with zero cropping and zero letterbox padding — no
	   mismatch between box shape and image shape for either to compensate for. */
	aspect-ratio: 1186 / 1582;
	overflow: hidden;
	background: var(--color-white);
}

.award__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.award__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-xs);
	padding: var(--space-md);
}

.award__eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary-red);
}

.award__headline {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.award__achievement {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.award__highlight {
	color: var(--color-primary-red);
	font-weight: 700;
}

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

.award__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.award__badge svg {
	color: var(--color-primary-red);
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.award__card {
		/* A fixed, narrow first column — the photo is tall and portrait, so a
		   wide fr share (matching the text column) would leave dead white
		   space beside it even with no letterboxing inside the image itself. */
		grid-template-columns: 300px 1fr;
	}

	.award__body {
		padding: var(--space-lg) var(--space-xl);
	}
}

/* ==========================================================================
   Performance Metrics — heading + a manually-scrollable row of case-study
   result cards (native scroll-snap, no autoplay — see main.js for the
   arrow/dot controller, which drives the same native scroll rather than
   reinventing paging math).
   ========================================================================== */

.metrics {
	background-color: var(--color-white);
	padding-block: var(--space-xl);
}

.metrics__intro {
	text-align: center;
	/* Wide enough that the heading (~32 characters at this section's
	   font-size) stays on one line on tablet/desktop instead of wrapping —
	   same reasoning as .process__head. */
	max-width: 54rem;
	margin-inline: auto;
	margin-bottom: var(--space-lg);
}

.metrics__heading {
	font-size: clamp(1.9rem, 5vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 800;
	text-wrap: balance;
	margin-bottom: var(--space-sm);
}

.metrics__subtext {
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.metrics__viewport {
	overflow: hidden;
	/* Room for the card shadow so it doesn't get clipped by the track. */
	padding: 6px;
	margin: -6px;
	cursor: grab;
	/* Let the browser handle vertical scroll natively; horizontal drag is
	   handled in JS via pointer events — this stops the two from fighting
	   on touch. */
	touch-action: pan-y;
}

.metrics__viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.metrics__track {
	display: flex;
	gap: var(--space-md);
	will-change: transform;
}

.metrics__slide {
	flex: 0 0 min(340px, 82vw);
	display: flex;
}

.metrics-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.metrics-card__header {
	background: var(--color-primary-red);
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	padding: var(--space-sm) var(--space-md);
}

.metrics-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--space-md);
	padding: var(--space-md);
}

.metrics-card__eyebrow {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: 0.4rem;
}

.metrics-card__challenge {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--color-near-black);
}

.metrics-card__list {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	list-style: none;
}

.metrics-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--color-near-black);
}

.metrics-card__list-icon {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--color-success);
}

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

.metrics-card__stat {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-top: auto;
	padding-top: var(--space-sm);
}

.metrics-card__value {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-success);
	font-variant-numeric: tabular-nums;
}

.metrics-card__caption {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.metrics__controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.metrics__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	background: var(--color-primary-red);
	border: none;
	border-radius: 50%;
	color: var(--color-white);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.metrics__arrow:hover {
	background: var(--color-primary-red-dark);
}

.metrics__dots {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

@media (min-width: 768px) {
	.metrics__slide {
		flex-basis: min(360px, 45vw);
	}
}

/* ==========================================================================
   Comparison — problem card beside a "what we do" card
   ========================================================================== */

.comparison {
	background-color: var(--color-cream);
	padding-block: var(--space-lg);
}

.comparison__intro {
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: var(--space-md);
	text-align: center;
}

.comparison__heading {
	font-size: clamp(1.9rem, 5vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 800;
	text-wrap: balance;
	margin-bottom: var(--space-sm);
}

.comparison__subtext {
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.6;
	text-wrap: balance;
}

.comparison__grid {
	display: grid;
	gap: var(--space-md);
	align-items: stretch;
}

.comparison-card {
	border-radius: var(--radius-md);
	padding: var(--space-md);
	/* Same dot texture as the section behind it — the card's own tint was
	   fully opaque, so it was blocking the section's dots rather than
	   letting them read as "part of" the section like everywhere else. A
	   translucent-black dot rather than the section-level `--color-border`
	   one, same reasoning as .process__panel: not enough contrast against
	   either card's own tint to actually read as dots. */
	background-image: radial-gradient(rgba(22, 24, 29, 0.12) 1px, transparent 1px);
	background-size: 22px 22px;
}

/* Warm tint for the problem, cool for the fix — the contrast is what makes
   the two columns readable as opposites at a glance. */
.comparison-card--problem {
	background-color: rgba(226, 53, 46, 0.07);
	--comparison-accent: var(--color-primary-red);
}

.comparison-card--solution {
	background-color: var(--color-lavender);
	--comparison-accent: var(--color-navy);
}

.comparison-card__icon {
	display: inline-flex;
	color: var(--comparison-accent);
	margin-bottom: var(--space-sm);
}

.comparison-card__icon svg {
	width: 22px;
	height: 22px;
}

.comparison-card__heading {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-sm);
}

.comparison-card__list {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	list-style: none;
}

.comparison-card__item {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
}

/* Nudged down so the icon optically centres on the first line of text
   rather than sitting flush with its ascenders. */
.comparison-card__bullet {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--comparison-accent);
}

.comparison-card__bullet svg {
	width: 17px;
	height: 17px;
}

.comparison-card__text {
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--color-near-black);
}

@media (min-width: 768px) {
	.comparison__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}

	.comparison-card {
		padding: var(--space-md);
	}
}

/* ==========================================================================
   Service Tabs — vertical tab list beside a swapping content panel
   ========================================================================== */

.service-tabs {
	background-color: var(--color-white);
	padding-block: var(--space-xl);
}

.service-tabs__intro {
	margin-bottom: var(--space-lg);
	text-align: center;
}

.service-tabs__subtext {
	/* Only the subtext is width-capped, not the heading — the heading should
	   use the full container so it stays on one line at typical widths. */
	max-width: 640px;
	margin-inline: auto;
}

.service-tabs__heading {
	font-size: clamp(1.9rem, 5vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 800;
	text-wrap: balance;
	margin-bottom: var(--space-sm);
}

.service-tabs__subtext {
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* Desktop-only sidebar+panel card — hidden below 768px, where the
   accordion (further down) takes over instead. */
.service-tabs__card {
	display: none;
}

.service-tabs__sidebar {
	display: flex;
	flex-direction: column;
	padding: var(--space-sm);
	border-bottom: 1px solid var(--color-border);
}

.service-tabs__tab {
	text-align: left;
	padding: 0.55em 0.9em;
	margin: 0.05rem 0;
	background: none;
	border: none;
	border-left: 3px solid transparent;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	/* Display face, not inherit — buttons don't inherit body text's font by
	   default, and every other short UI label on the site (nav links, .btn)
	   is set in the display face too. inherit here was falling back to Inter
	   and reading as a mismatch next to the Montserrat panel heading. */
	font-family: var(--font-display);
	font-size: 0.82rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--color-near-black);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.service-tabs__tab:hover {
	background: var(--color-cream);
}

.service-tabs__tab.is-active {
	color: var(--color-primary-red);
	background: rgba(226, 53, 46, 0.06);
	border-left-color: var(--color-primary-red);
}

.service-tabs__more {
	padding: 0.7em 0.9em;
	font-size: 0.85rem;
	font-style: italic;
	color: var(--color-text-muted);
}

.service-tabs__panels {
	position: relative;
	padding: var(--space-lg);
}

.service-tabs__panel {
	transition: opacity 0.18s ease;
}

.service-tabs__panel-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: var(--space-sm);
}

.service-tabs__panel-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--color-primary-red);
}

.service-tabs__panel-icon svg {
	width: 24px;
	height: 24px;
}

.service-tabs__panel-heading {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-primary-red);
}

.service-tabs__panel-text {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin-bottom: var(--space-sm);
}

.service-tabs__panel-list {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	list-style: none;
}

.service-tabs__panel-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.9rem;
	color: var(--color-near-black);
}

.service-tabs__panel-list-icon {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--color-primary-red);
}

.service-tabs__panel-list-icon svg {
	width: 16px;
	height: 16px;
}

.service-tabs__calc {
	max-width: 360px;
	margin-top: var(--space-md);
	padding: var(--space-lg) var(--space-md);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	text-align: left;
}

.service-tabs__calc-title {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--color-near-black);
	margin-bottom: 0.5rem;
}

.service-tabs__calc-subtext {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}

.service-tabs__calc-field {
	display: block;
	text-align: left;
}

.service-tabs__calc-field-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-muted);
	margin-bottom: 0.4rem;
}

.service-tabs__calc-input {
	display: block;
	width: 100%;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 400;
	text-align: left;
	color: var(--color-near-black);
	padding: 0.75em 0.9em;
	background: var(--color-cream);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color 0.2s ease;
}

.service-tabs__calc-input:focus {
	outline: none;
	border-color: var(--color-primary-red);
}

.service-tabs__calc-result {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid rgba(16, 24, 43, 0.1);
}

.service-tabs__calc-result-label {
	font-size: 0.85rem;
	text-align: left;
	color: var(--color-text-muted);
}

.service-tabs__calc-result-value {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--color-primary-red);
}

.service-tabs__calc-cta {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: var(--space-md);
	position: relative;
}

/* Free-audit form variant — same box, a form instead of a static calculator.
   The result area has nothing to compute, so its text is a fixed sentence
   rather than the big price-style number the calculator shows. */
.service-tabs__calc--audit .service-tabs__calc-result {
	border-top: none;
	padding-top: 0;
	margin-top: var(--space-sm);
}

.service-tabs__calc-result-value--audit {
	font-family: var(--font-base);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text-muted);
}

.service-tabs__calc-input.has-error {
	border-color: var(--color-primary-red);
}

.service-tabs__calc-error {
	display: block;
	font-size: 0.72rem;
	color: var(--color-primary-red);
	margin-top: 0.3rem;
}

.service-tabs__calc-error:empty {
	display: none;
}

.service-tabs__calc-status {
	font-size: 0.8rem;
	line-height: 1.5;
	margin-top: var(--space-sm);
}

.service-tabs__calc-status:empty {
	display: none;
}

.service-tabs__calc-status.is-success {
	color: var(--color-success);
}

.service-tabs__calc-status.is-error {
	color: var(--color-primary-red);
}

/* Spinner sits inside the button while sending — same technique as
   .enquiry-form__submit.is-loading, kept local since this button's class is
   component-scoped rather than shared. */
.service-tabs__calc-cta.is-loading {
	color: transparent;
	pointer-events: none;
}

.service-tabs__calc-cta.is-loading[disabled] {
	opacity: 1;
}

.service-tabs__calc-cta.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--color-white);
	border-radius: 50%;
	animation: vrankone-spin 0.7s linear infinite;
}

.service-tabs__calc-cta[disabled]:not(.is-loading) {
	opacity: 0.6;
	cursor: default;
}

/* Mobile-only accordion — one open at a time. Same grid-template-rows
   0fr→1fr technique as the FAQ accordion, so the panel height animates
   without JS having to measure it. */
.service-tabs__accordion {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.service-tabs__accordion-item {
	overflow: hidden;
}

.service-tabs__accordion-item + .service-tabs__accordion-item {
	border-top: 1px solid var(--color-border);
}

.service-tabs__accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	width: 100%;
	padding: 1em 1.1em;
	background: none;
	border: none;
	border-left: 3px solid transparent;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-near-black);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.service-tabs__accordion-item.is-open .service-tabs__accordion-trigger {
	color: var(--color-primary-red);
	background: rgba(226, 53, 46, 0.06);
	border-left-color: var(--color-primary-red);
}

.service-tabs__accordion-icon {
	flex: none;
	display: flex;
	color: var(--color-primary-red);
	transition: transform 0.2s ease;
}

.service-tabs__accordion-item.is-open .service-tabs__accordion-icon {
	transform: rotate(180deg);
}

.service-tabs__accordion-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}

.service-tabs__accordion-item.is-open .service-tabs__accordion-panel {
	grid-template-rows: 1fr;
}

.service-tabs__accordion-panel-inner {
	overflow: hidden;
}

/* Padding lives here, one level deeper than the overflow:hidden wrapper —
   not on .accordion-panel-inner itself. That element is the direct child of
   the 0fr/1fr grid row, and grid tracks default to an "auto" minimum driven
   by their child's intrinsic size; padding on that child (even with no
   visible content) still counts toward that minimum, which was exactly the
   sliver of the collapsed panel peeking out. Padding one level further in
   doesn't feed into the row's own sizing. */
.service-tabs__accordion-panel-content {
	padding: 0 1.1em 1.1em;
}

.service-tabs__accordion .service-tabs__more {
	padding: 1em 1.1em;
}

@media (prefers-reduced-motion: reduce) {
	.service-tabs__accordion-panel,
	.service-tabs__accordion-icon {
		transition: none;
	}
}

@media (min-width: 768px) {
	.service-tabs__card {
		display: grid;
		grid-template-columns: 260px 1fr;
	}

	.service-tabs__sidebar {
		padding: var(--space-md);
		border-bottom: none;
		border-right: 1px solid var(--color-border);
	}

	.service-tabs__panels {
		padding: var(--space-xl);
	}

	.service-tabs__accordion {
		display: none;
	}
}

/* Copy beside calculator, not stacked above it — only once the panel
   (sidebar-width-adjusted) has room for a 360px card next to readable text.
   Below this, --split falls back to the default block stacking so the card
   isn't squeezed. */
@media (min-width: 1200px) {
	.service-tabs__panel-body--split {
		display: grid;
		grid-template-columns: 1fr 360px;
		gap: var(--space-xl);
		align-items: start;
	}

	.service-tabs__panel-calc-col .service-tabs__calc {
		margin-top: 0;
	}
}

/* ==========================================================================
   Environment — headline + subtext beside a labeled platform list
   ========================================================================== */

.environment {
	background-color: var(--color-off-white);
	padding-block: var(--space-xl);
}

.environment__inner {
	display: grid;
	gap: var(--space-lg);
}

.environment__heading {
	font-size: clamp(2rem, 6vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: var(--color-primary-red);
	text-wrap: balance;
}

.environment__rule {
	display: block;
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--color-label-pill-bg);
	margin-block: var(--space-sm);
}

.environment__subtext {
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 42ch;
}

.environment__group-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-sm);
}

.environment__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	list-style: none;
}

.environment__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.environment__item-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
}

.environment__item-logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.environment__item-name {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--color-near-black);
}

@media (min-width: 768px) {
	.environment__inner {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--space-2xl);
		align-items: center;
	}
}

/* ==========================================================================
   Team showcase (tabs: Expertise / Technology / Adaptability, etc.)
   ========================================================================== */

.team-showcase {
	background-color: var(--color-white);
	padding-block: var(--space-lg);
}

/* Two Team Showcase sections back-to-back would otherwise stack their top
   AND bottom padding into one oversized gap. Higher specificity than the
   padding-block shorthand above (and its --space-xl override at 768px), so
   this wins at every breakpoint without needing a duplicate media rule. */
.team-showcase + .team-showcase {
	padding-block-start: 0;
}

.team-showcase__heading {
	text-align: center;
	font-size: clamp(1.6rem, 6vw, 2.1rem);
	line-height: 1.2;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin-bottom: var(--space-sm);
}

.team-showcase__intro {
	text-align: center;
	max-width: 62ch;
	margin-inline: auto;
	color: var(--color-text-muted);
}

.team-showcase__tabs {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin-block: var(--space-lg);
}

/* One shared pill, moved and resized by JS to sit behind whichever tab is
   active — rather than each button carrying its own background — so the
   highlight glides between tabs instead of jumping straight to the click. */
.team-showcase__tab-highlight {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	opacity: 0;
	border-radius: var(--radius-md);
	background: rgba(242, 165, 22, 0.16);
	transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.15s ease;
	pointer-events: none;
}

.team-showcase__tab-highlight.is-ready {
	opacity: 1;
}

.team-showcase__tab {
	position: relative;
	z-index: 1;
	background: transparent;
	border: none;
	border-radius: var(--radius-md);
	padding: 1em 1.25em;
	font-family: var(--font-display);
	font-size: var(--font-size-base);
	font-weight: 700;
	color: var(--color-text-muted);
	text-align: left;
	cursor: pointer;
	transition: color 0.2s ease;
}

/* Tint pulled from the logo's amber arrow, not the lavender token — lavender
   is a decorative one-off on the hero and isn't a brand color. */
.team-showcase__tab.is-active {
	color: var(--color-primary-red);
}

@media (prefers-reduced-motion: reduce) {
	.team-showcase__tab-highlight {
		transition: none;
	}
}

/* Card wraps both the (shared, non-swapping) image and the tab panels. */
.team-showcase__body {
	background: rgba(242, 165, 22, 0.1);
	border-radius: var(--radius-md);
	padding: var(--space-lg) var(--space-md);
	display: grid;
	gap: var(--space-lg);
}

.team-showcase__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.team-showcase__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Biased toward the top — these are people photos, and centering the
	   crop on a tall portrait shot cuts the face off instead of the feet. */
	object-position: 50% 15%;
}

/* One panel visible at a time. `hidden` alone isn't enough — an author
   stylesheet rule of equal specificity beats the UA stylesheet's
   [hidden]{display:none}, so visibility must be driven by .is-active here,
   not left to the attribute. */
.team-showcase__panel {
	display: none;
	opacity: 1;
	transition: opacity 0.18s ease;
}

.team-showcase__panel.is-active {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.team-showcase__panel {
		transition: none;
	}
}

.team-showcase__content-heading {
	font-size: 1.4rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 800;
	margin-bottom: var(--space-sm);
}

.team-showcase__content-text {
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}

/* Same checklist language as .services-list — red check-circle marker,
   flex-aligned so multi-line bullets keep their text lined up under the
   first word instead of wrapping under the icon. */
.team-showcase__list {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin-bottom: var(--space-md);
}

.team-showcase__list-item {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.95rem;
	font-weight: 600;
}

.team-showcase__list-icon {
	flex: none;
	display: flex;
	margin-top: 3px;
	color: var(--color-primary-red);
}

/* ==========================================================================
   About story
   ========================================================================== */

.about-story {
	background-color: var(--color-white);
	padding-block: var(--space-lg);
}

.about-story__inner {
	display: grid;
	gap: var(--space-lg);
	align-items: center;
}

.about-story__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary-red);
	margin-bottom: var(--space-sm);
}

.about-story__heading {
	font-size: clamp(1.9rem, 8vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin-bottom: var(--space-md);
}

/* No max-width — the grid column (below) is already the real width
   constraint. A ch-based cap on top of that just left dead space between
   the text and the image at wide viewports. */
.about-story__text {
	color: var(--color-text-muted);
	font-size: 0.95rem;
}

/* space-between with `gap` as a floor, not a ceiling — modern flexbox
   treats gap as the minimum distance under space-between, so items never
   crowd together, but the last one still pushes out to the right edge
   when there's room (2 items) rather than everything getting stretched
   apart evenly regardless of count (3+ items). */
.about-story__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* Narrower than it looks — this row lives inside the text column
	   (~630px wide at desktop), not the full page. With nowrap labels, a
	   wide gap was the difference between three items fitting on one row
	   and the third one wrapping. */
	gap: var(--space-md) var(--space-lg);
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.about-story__stat {
	display: flex;
	flex-direction: column;
	flex: none;
	gap: 2px;
}

.about-story__stat-number {
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-primary-red);
}

.about-story__stat-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	/* Single line, full stop — no max-width, since capping the width while
	   forbidding wrap would just push text past the box edge instead of
	   wrapping it. If the row runs out of room, the whole stat block wraps
	   to its own row rather than the label wrapping mid-text. */
	white-space: nowrap;
}

/* Centers the card when it's narrower than the column — a tall portrait
   photo capped by height (below) no longer spans the full column width. */
.about-story__media {
	display: flex;
	justify-content: center;
}

.about-story__media-card {
	position: relative;
	display: inline-block;
	max-width: 100%;
	background: var(--color-off-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

/* Only the empty placeholder needs a forced ratio/width to keep some size —
   a real photo sizes the card itself (below), so nothing crops. */
.about-story__media-card--empty {
	display: block;
	width: 100%;
	aspect-ratio: 6 / 5;
}

/* Capped by height, not width — a tall portrait photo would otherwise
   render at the full column width and run far taller than the text beside
   it. Auto width lets the browser scale it down keeping its own ratio. */
.about-story__media-card img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 480px;
}

/* Always-visible chip, unlike .hero__media-overlay-text which only reveals
   on hover — this section has no click-through link to gate it behind. */
.about-story__caption {
	position: absolute;
	left: var(--space-sm);
	bottom: var(--space-sm);
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-white);
	background: rgba(8, 12, 24, 0.65);
	backdrop-filter: blur(2px);
	padding: 0.6em 1.1em;
	border-radius: var(--radius-sm);
	max-width: calc(100% - var(--space-md));
}

/* ==========================================================================
   Approach
   ========================================================================== */

.approach {
	background-color: var(--color-off-white);
	padding-block: var(--space-lg);
}

.approach__head {
	text-align: center;
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: var(--space-lg);
}

.approach__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary-red);
	margin-bottom: var(--space-sm);
}

.approach__heading {
	font-size: clamp(1.7rem, 7vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	font-weight: 800;
}

/* Grid by default — the mobile carousel is layered on top by the .is-slider
   class (added by JS), so this degrades to a plain stack without JS. */
.approach__track {
	display: grid;
	gap: var(--space-md);
}

.approach__slide {
	display: flex;
	min-width: 0;
}

.approach__slide > .approach-card {
	flex: 1;
}

/* Slider mode (mobile only, added by JS). */
.approach__carousel.is-slider .approach__viewport {
	overflow: hidden;
	/* Padding keeps the card shadow from being clipped by overflow. */
	padding: 6px;
	margin: -6px;
	cursor: grab;
	touch-action: pan-y;
}

.approach__carousel.is-slider .approach__viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.approach__carousel.is-slider .approach__track {
	display: flex;
	gap: 0;
	transition: transform 0.45s ease;
}

.approach__carousel.is-slider .approach__slide {
	flex: 0 0 100%;
}

.approach__controls {
	display: none;
}

.approach__carousel.is-slider .approach__controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.approach__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 50%;
	color: var(--color-near-black);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.approach__arrow:hover:not(:disabled) {
	background: var(--color-border);
}

.approach__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.approach__dots {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.approach-card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--space-lg) var(--space-md);
}

.approach-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-md);
}

.approach-card__icon--red {
	background: rgba(226, 53, 46, 0.1);
	color: var(--color-primary-red);
}

.approach-card__icon--amber {
	background: rgba(242, 165, 22, 0.16);
	color: var(--color-label-pill-bg);
}

.approach-card__title {
	font-size: 1.1rem;
	font-weight: 800;
	margin-bottom: var(--space-xs);
}

.approach-card__text {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

/* ==========================================================================
   Why Us
   ========================================================================== */

.why-us {
	background-color: var(--color-off-white);
	padding-block: var(--space-lg);
}

.why-us__label {
	text-align: center;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary-red);
	margin-bottom: var(--space-sm);
}

.why-us__heading {
	font-size: clamp(1.7rem, 7vw, 2.25rem);
	line-height: 1.2;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin-bottom: var(--space-lg);
}

.why-us__grid {
	display: grid;
	gap: var(--space-md);
}

.why-us-card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--space-md) var(--space-lg);
}

.why-us-card__icon {
	display: block;
	width: 36px;
	height: 36px;
	margin-bottom: var(--space-sm);
}

.why-us-card__icon--square-lavender {
	background: var(--color-lavender);
	border-radius: 10px;
}

.why-us-card__icon--square-grey {
	background: var(--color-off-white);
	border: 1px solid var(--color-border);
	border-radius: 10px;
}

.why-us-card__icon--triangle-grey {
	width: 0;
	height: 0;
	background: none;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-bottom: 32px solid var(--color-border);
}

.why-us-card__title {
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: var(--space-xs);
}

.why-us-card__text {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

/* ==========================================================================
   Process — "How we do things differently"
   Same tab/panel mechanism as Team Showcase (shared sliding highlight, one
   panel visible at a time) — see that JS controller, generalized to also
   bind `.process`. Panels carry their own icon visual instead of a shared
   photo, so no `--mirror` variant is needed.
   ========================================================================== */

.process {
	background-color: var(--color-white);
	padding-block: var(--space-lg);
}

.process__head {
	text-align: center;
	/* Wide enough that the heading (up to ~36 characters at this section's
	   font-size, e.g. the Ecommerce process heading) stays on one line on
	   tablet/desktop instead of wrapping — unlike other __head blocks, this
	   one holds no subtext paragraph, so there's no reading-width to cap. */
	max-width: 64rem;
	margin-inline: auto;
	margin-bottom: var(--space-lg);
}

.process__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary-red);
	margin-bottom: var(--space-sm);
}

.process__heading {
	font-size: clamp(1.7rem, 7vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	font-weight: 800;
}

/* Desktop-only: tab row + shared-highlight/single-panel. The mobile-only
   accordion below is the <768px equivalent — see the media query further
   down for the display swap. */
.process__desktop {
	display: none;
}

.process__tabs {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin-bottom: var(--space-md);
}

/* Same shared, JS-positioned highlight as Team Showcase — see that block's
   comment for why it's one element instead of a per-tab background. */
.process__tab-highlight {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	opacity: 0;
	border-radius: var(--radius-md);
	background: rgba(226, 53, 46, 0.08);
	transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.15s ease;
	pointer-events: none;
}

.process__tab-highlight.is-ready {
	opacity: 1;
}

.process__tab {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.85em;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 0.9em 1.1em;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.process__tab.is-active {
	border-color: transparent;
}

.process__tab-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--color-off-white);
	color: var(--color-text-muted);
	transition: background 0.25s ease, color 0.25s ease;
}

.process__tab-icon svg {
	width: 18px;
	height: 18px;
}

.process__tab.is-active .process__tab-icon {
	background: var(--color-primary-red);
	color: var(--color-white);
}

.process__tab-copy {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

.process__tab-title {
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-text-muted);
	line-height: 1.3;
	transition: color 0.2s ease;
}

.process__tab.is-active .process__tab-title {
	color: var(--color-near-black);
}

.process__tab-step {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.process__tab-highlight,
	.process__tab,
	.process__tab-icon,
	.process__tab-title {
		transition: none;
	}
}

/* Same visibility technique as `.team-showcase__panel` — see that rule's
   comment for why `.is-active` drives display instead of `[hidden]` alone. */
.process__panel {
	display: none;
	opacity: 1;
	background-color: var(--color-off-white);
	/* Same dot texture as the section behind it — see the equivalent
	   comment on .comparison-card. A translucent-black dot instead of the
	   section-level `--color-border` one: that hex only has enough contrast
	   against a plain white section background — against this panel's own
	   tinted fill it was too close in value to read as dots at all. */
	background-image: radial-gradient(rgba(22, 24, 29, 0.12) 1px, transparent 1px);
	background-size: 22px 22px;
	border-radius: var(--radius-md);
	padding: var(--space-lg) var(--space-md);
	transition: opacity 0.18s ease;
}

.process__panel.is-active {
	display: grid;
	gap: var(--space-lg);
}

@media (prefers-reduced-motion: reduce) {
	.process__panel {
		transition: none;
	}
}

.process__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: rgba(226, 53, 46, 0.08);
	color: var(--color-primary-red);
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.4em 0.8em;
	border-radius: 999px;
	margin-bottom: var(--space-sm);
}

.process__pill-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary-red);
}

@media (prefers-reduced-motion: no-preference) {
	.process__pill-dot {
		animation: process-pulse 1.8s ease-in-out infinite;
	}
}

@keyframes process-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.process__panel-heading {
	font-size: 1.4rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 800;
	margin-bottom: var(--space-sm);
}

.process__panel-text {
	color: var(--color-text-muted);
}

/* Capped at 220px and centered in its grid cell — the panel has no
   checklist to balance against, so artwork stretched to the full column
   width would tower over one short paragraph and inflate the row height.
   No background/padding here: each supplied image is already its own
   rounded-square card (icon + soft backdrop baked in), so this is just a
   clipping frame, not a second backdrop stacked under the first. */
.process__panel-media {
	aspect-ratio: 1;
	width: 100%;
	max-width: 220px;
	justify-self: center;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.process__panel-icon-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Mobile-only accordion — one open at a time. Same grid-template-rows
   0fr→1fr technique as Service Tabs' mobile accordion, padding kept one
   level deeper than the overflow:hidden wrapper so it doesn't feed into
   the collapsed row's own "auto" minimum (see that block's comment). */
.process__accordion {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.process__accordion-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.process__accordion-trigger {
	display: flex;
	align-items: center;
	gap: 0.85em;
	width: 100%;
	padding: 0.9em 1.1em;
	background: transparent;
	border: none;
	text-align: left;
	cursor: pointer;
}

.process__accordion-trigger-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--color-off-white);
	color: var(--color-text-muted);
	transition: background 0.25s ease, color 0.25s ease;
}

.process__accordion-trigger-icon svg {
	width: 18px;
	height: 18px;
}

.process__accordion-item.is-open .process__accordion-trigger-icon {
	background: var(--color-primary-red);
	color: var(--color-white);
}

.process__accordion-item.is-open .process__tab-title {
	color: var(--color-near-black);
}

.process__accordion-chevron {
	flex: none;
	display: flex;
	margin-left: auto;
	color: var(--color-text-muted);
	transition: transform 0.2s ease;
}

.process__accordion-item.is-open .process__accordion-chevron {
	transform: rotate(180deg);
	color: var(--color-primary-red);
}

.process__accordion-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}

.process__accordion-item.is-open .process__accordion-panel {
	grid-template-rows: 1fr;
}

.process__accordion-panel-inner {
	overflow: hidden;
}

.process__accordion-panel-content {
	display: grid;
	gap: var(--space-md);
	padding: 0 1.1em 1.1em;
}

@media (prefers-reduced-motion: reduce) {
	.process__accordion-panel,
	.process__accordion-chevron,
	.process__accordion-trigger-icon {
		transition: none;
	}
}

@media (min-width: 768px) {
	.process__desktop {
		display: block;
	}

	.process__accordion {
		display: none;
	}
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
	background-color: var(--color-white);
	padding-block: var(--space-lg);
}

.faq__head {
	text-align: center;
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: var(--space-lg);
}

.faq__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary-red);
	margin-bottom: var(--space-sm);
}

.faq__heading {
	font-size: clamp(1.7rem, 7vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	font-weight: 800;
}

.faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 760px;
	margin-inline: auto;
}

.faq__item {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	width: 100%;
	padding: 1.1em 1.4em;
	background: transparent;
	border: none;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-near-black);
	text-align: left;
	cursor: pointer;
}

.faq__icon {
	flex: none;
	display: flex;
	color: var(--color-primary-red);
	transition: transform 0.2s ease;
}

.faq__item.is-open .faq__icon {
	transform: rotate(180deg);
}

/* Grid-rows trick — animates from 0fr to 1fr so the answer height doesn't
   need to be measured in JS, unlike a max-height-based approach. */
.faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}

.faq__item.is-open .faq__answer {
	grid-template-rows: 1fr;
}

.faq__answer-inner {
	overflow: hidden;
}

.faq__answer-inner p {
	padding: 0 1.4em 1.1em;
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.faq__answer-inner a {
	color: var(--color-primary-red);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.faq__answer-inner a:hover {
	text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.faq__answer,
	.faq__icon {
		transition: none;
	}
}

/* ==========================================================================
   Clientele marquee
   ========================================================================== */

.clients {
	background-color: var(--color-white);
	padding-block: var(--space-lg);
	overflow: hidden;
}

.clients__heading {
	font-size: clamp(1.1rem, 4vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--color-near-black);
	margin-bottom: var(--space-lg);
}

.clients__marquee {
	position: relative;
	/* Fades the logos out at both edges instead of cutting them off. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.clients__track {
	display: flex;
	align-items: center;
	width: max-content;
	/* Four identical runs, shifted by exactly one (-25%), so the frame at
	   100% is pixel-identical to the frame at 0% and the restart is invisible. */
	animation: clients-scroll var(--clients-speed, 40s) linear infinite;
}

@keyframes clients-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-25%);
	}
}

.clients__marquee:hover .clients__track {
	animation-play-state: paused;
}

/* Spacing must be margin, not the track's gap. `gap` is only applied *between*
   items, so the final item of each run has none — which makes one run narrower
   than the shift distance and produces a visible jump at the loop point. */
.clients__item {
	flex: none;
	display: flex;
	align-items: center;
	margin-right: var(--space-xl);
}

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

.clients__logo {
	height: 34px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	opacity: 0.55;
	transition: opacity 0.25s ease;
	/* Most client logos are JPEGs, which cannot hold transparency, so they
	   arrive with a white box baked in. multiply drops white to nothing
	   against this near-white section. It only works while the section
	   background stays light — on a dark background these would need real
	   transparent PNG/SVG files instead. */
	mix-blend-mode: multiply;
}

.clients__name {
	font-size: 1.1rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--color-text-muted);
	opacity: 0.55;
	transition: opacity 0.25s ease;
}

.clients__item:hover .clients__logo,
.clients__item:hover .clients__name,
.clients__link:focus-visible .clients__logo,
.clients__link:focus-visible .clients__name {
	opacity: 1;
}

/* No motion: stop the animation and let the row scroll by hand instead. */
@media (prefers-reduced-motion: reduce) {
	.clients__track {
		animation: none;
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
	}
}

/* ==========================================================================
   Services grid
   ========================================================================== */

.services {
	background-color: var(--color-white);
	padding-block: var(--space-lg);
}

.services__grid {
	display: grid;
	gap: var(--space-md);
}

.services-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--space-md);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.services-card--light {
	background: var(--color-white);
	border: 1px solid var(--color-border);
}

.services-card--dark {
	background: var(--color-near-black);
	color: var(--color-white);
}

.services-card--soft {
	background: #f2f1ef;
}

/* Faint decorative glyph in the top-right of the white card. */
.services-card__watermark {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	width: 48px;
	color: var(--color-primary-red);
	opacity: 0.18;
	pointer-events: none;
}

.services-card__watermark svg {
	width: 100%;
	height: auto;
}

.services-card__label {
	margin-bottom: var(--space-sm);
}

.pill--outline {
	background: transparent;
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, 0.35);
}

.services-card__title {
	font-size: 1.5rem;
	line-height: 1.18;
	letter-spacing: -0.02em;
	font-weight: 800;
	margin-bottom: var(--space-sm);
	max-width: 21ch;
}

.services-card__text {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	margin-bottom: var(--space-sm);
	max-width: 52ch;
}

.services-card--dark .services-card__text {
	color: rgba(255, 255, 255, 0.72);
}

/* Lists ------------------------------------------------------------------ */

.services-list {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin-bottom: var(--space-md);
}

.services-list__item {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
}

.services-list__icon {
	flex: none;
	display: flex;
	margin-top: 1px;
}

.services-list--check .services-list__icon {
	color: var(--color-primary-red);
}

.services-list__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.services-list__title {
	font-size: 0.9rem;
	font-weight: 600;
}

.services-list__desc {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	line-height: 1.45;
}

.services-card--dark .services-list__desc {
	color: rgba(255, 255, 255, 0.6);
}

/* Push the button to the bottom so both top cards align. */
.services-card__cta {
	margin-top: auto;
}

/* TEMPORARY: services CTAs hidden on request. Delete this block to restore
   them — the fields, links and markup are all still in place. */
.services-card__cta {
	display: none;
}

.services-card--light .services-list,
.services-card--dark .services-list,
.services-card--soft .services-list:last-child {
	margin-bottom: 0;
}

/* Tag pills -------------------------------------------------------------- */

.services-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.services-tags__item {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 0.5em 0.9em;
	border: 1px solid #e0c9a8;
	border-radius: 6px;
	color: var(--color-near-black);
}

/* Wide card media -------------------------------------------------------- */

/* Tag pills sit above the button, so they need to clear it. */
.services-tags {
	margin-bottom: var(--space-md);
}

/* ==========================================================================
   Case studies
   ========================================================================== */

.cases {
	background-color: var(--color-white);
	padding-block: var(--space-lg);
}

.cases__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-sm);
}

.cases__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary-red);
	margin-bottom: var(--space-xs);
}

.cases__heading {
	font-size: clamp(1.75rem, 6vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.cases__viewall {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-primary-red);
}

.cases__cta {
	margin-block: var(--space-md);
}

/* TEMPORARY: "View All Casestudies" CTA hidden on request — not enough case
   studies yet for a full page. Delete this block to restore it; the field,
   link and markup are all still in place. The margin-top below replaces the
   vertical gap the hidden button's own margin used to provide above the grid
   — remove it too if the button comes back. */
.cases__cta {
	display: none;
}

.cases__grid {
	margin-top: var(--space-lg);
	display: grid;
	gap: var(--space-md);
}

/* Shared card bits ------------------------------------------------------- */

.case-card {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.case-card__title {
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.case-card__summary {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--color-text-muted);
}

/* Large card — image with dark overlay ----------------------------------- */

.case-card--large {
	min-height: 340px;
	background: var(--color-navy);
	display: flex;
}

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

.case-card__overlay {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	padding: var(--space-md);
	color: var(--color-white);
	background: linear-gradient(
		to top,
		rgba(8, 12, 24, 0.92) 0%,
		rgba(8, 12, 24, 0.72) 38%,
		rgba(8, 12, 24, 0.15) 75%,
		rgba(8, 12, 24, 0.05) 100%
	);
}

.case-card__tag {
	display: inline-block;
	background: var(--color-primary-red);
	color: var(--color-white);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.35em 0.85em;
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-xs);
}

.case-card--large .case-card__title {
	font-size: 1.75rem;
	margin-bottom: var(--space-xs);
}

.case-card--large .case-card__summary {
	color: rgba(255, 255, 255, 0.78);
	max-width: 46ch;
	margin-bottom: var(--space-md);
}

.case-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-sm);
	width: 100%;
}

.case-card__metric-block {
	display: flex;
	flex-direction: column;
}

.case-card--large .case-card__metric {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--color-primary-red);
	line-height: 1.1;
}

.case-card__metric-desc {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

/* Small card — white with stat ------------------------------------------- */

.case-card--small {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--color-border);
}

.case-card__media {
	aspect-ratio: 16 / 10;
	background: #eeece8;
	overflow: hidden;
}

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

.case-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	padding: var(--space-md);
}

.case-card__cat {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary-red);
	margin-bottom: var(--space-xs);
}

.case-card--small .case-card__metric {
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--color-primary-red);
	line-height: 1.1;
	margin-block: 0.15em;
}

.case-card--small .case-card__summary {
	margin-bottom: var(--space-md);
}

.case-card--small .case-card__link {
	margin-top: auto;
	width: 100%;
	justify-content: center;
}

/* Compact card — flat, no image ------------------------------------------ */

.case-card--compact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: #eef1fb;
	padding: var(--space-md);
}

.case-card__compact-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
	width: 100%;
	margin-bottom: var(--space-xs);
}

.case-card__metric-inline {
	font-size: 0.85rem;
	font-weight: 800;
	color: var(--color-primary-red);
	flex: none;
}

.case-card--compact .case-card__summary {
	margin-bottom: var(--space-sm);
}

.case-card--compact .case-card__textlink {
	margin-top: auto;
}

.case-card__textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-primary-red);
}

/* Button variants used by the cards -------------------------------------- */

/* Light variants: no wave (white on white is invisible) and a neutral shadow
   rather than the red glow. */
.btn--white::before,
.btn--outline::before {
	content: none;
}

.btn--white,
.btn--outline {
	box-shadow: 0 4px 12px rgba(16, 24, 43, 0.10);
}

.btn--white {
	background: var(--color-white);
	color: var(--color-near-black);
}

.btn--white:hover,
.btn--white:focus-visible {
	background: #ececec;
	color: var(--color-near-black);
	box-shadow: 0 8px 20px rgba(16, 24, 43, 0.16);
}

.btn--outline {
	background: transparent;
	color: var(--color-near-black);
	border: 1px solid var(--color-border);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--color-cream);
	color: var(--color-near-black);
	box-shadow: 0 8px 20px rgba(16, 24, 43, 0.16);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials {
	background-color: var(--color-cream);
	padding-block: var(--space-lg);
}

.testimonials__inner {
	display: grid;
	gap: var(--space-md);
}

.testimonials__heading {
	font-size: clamp(1.5rem, 5.5vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-bottom: var(--space-xs);
	max-width: 12ch;
}

.testimonials__text {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--color-text-muted);
	max-width: 34ch;
}

/* Carousel ---------------------------------------------------------------- */

/* min-width:0 stops the flex track's intrinsic width from forcing this grid
   column wider than its fr share, which would squeeze the intro column. */
.testimonials__carousel {
	min-width: 0;
}

.testimonials__viewport {
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
}

.testimonials__viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.testimonials__track {
	display: flex;
	transition: transform 0.45s ease;
}

.testimonials__slide {
	display: flex;
	flex: 0 0 100%;
	min-width: 0;
}

.testimonials__slide > .testimonial-card {
	width: 100%;
}

.testimonials__controls {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.testimonials__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 50%;
	color: var(--color-near-black);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.testimonials__arrow:hover:not(:disabled) {
	background: var(--color-border);
}

.testimonials__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.testimonials__dots {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.testimonials__dot,
.team__dot,
.approach__dot,
.metrics__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: #d8d4cc;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.25s ease;
}

.testimonials__dot.is-active,
.team__dot.is-active,
.approach__dot.is-active,
.metrics__dot.is-active {
	width: 22px;
	background: var(--color-primary-red);
}

.testimonial-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--space-md);
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.testimonial-card__mark {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	width: 22px;
	color: var(--color-primary-red);
	line-height: 0;
}

.testimonial-card__mark svg {
	width: 100%;
	height: auto;
}

.testimonial-card__quote {
	margin: 0 0 var(--space-md);
	padding-right: var(--space-lg);
	font-size: 0.85rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-near-black);
}

.testimonial-card__person {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: auto;
}

.testimonial-card__avatar {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

/* Fallback when no photo is set: first initial on a neutral disc. */
.testimonial-card__avatar--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-border);
	color: var(--color-text-muted);
	font-size: 0.9rem;
	font-weight: 700;
}

.testimonial-card__meta {
	display: flex;
	flex-direction: column;
}

.testimonial-card__name {
	font-size: 0.78rem;
	font-weight: 700;
}

.testimonial-card__role {
	font-size: 0.7rem;
	color: var(--color-text-muted);
}

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

.team {
	background-color: var(--color-off-white);
	padding-block: var(--space-lg);
}

.team__heading {
	font-size: clamp(1.75rem, 6vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-bottom: var(--space-md);
}

.team__heading-accent {
	color: var(--color-primary-red);
}

.team__inner {
	display: grid;
	gap: var(--space-md);
}

/* Members column. Stacked by default — the mobile slider is layered on top
   by the .is-slider class, so it degrades to a plain stack without JS. */
.team__members {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.team__viewport {
	flex: 1;
}

.team__track {
	display: grid;
	gap: var(--space-md);
	height: 100%;
}

.team__slide {
	display: flex;
	min-width: 0;
}

.team__slide > .team-member {
	flex: 1;
}

/* Slider mode (mobile only, added by JS). */
.team__carousel.is-slider .team__viewport {
	overflow: hidden;
	/* Padding keeps the card shadow from being clipped by overflow. */
	padding: 6px;
	margin: -6px;
	cursor: grab;
	touch-action: pan-y;
}

.team__carousel.is-slider .team__viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.team__carousel.is-slider .team__track {
	display: flex;
	gap: 0;
	height: auto;
	transition: transform 0.5s ease;
}

.team__carousel.is-slider .team__slide {
	flex: 0 0 100%;
}

.team__controls {
	display: none;
}

.team__carousel.is-slider .team__controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.team__dots {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.team__playpause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	padding: 0;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 50%;
	color: var(--color-near-black);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.team__playpause:hover {
	background: var(--color-border);
}

.team__icon {
	display: inline-flex;
	line-height: 0;
}

/* Show pause while running, play once paused. */
.team__icon--play {
	display: none;
}

.team__playpause.is-paused .team__icon--pause {
	display: none;
}

.team__playpause.is-paused .team__icon--play {
	display: inline-flex;
}

/* Member row ------------------------------------------------------------- */

.team-member {
	display: grid;
	gap: var(--space-md);
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	box-shadow: var(--shadow-card);
}

/* Flex column so the LinkedIn icon can be pushed to the bottom. */
.team-member__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.team-member__photo {
	background: var(--color-border);
	border-radius: var(--radius-sm);
	aspect-ratio: 4 / 3;
	/* Stops the photo filling the screen on wide phone/tablet viewports. */
	max-height: 320px;
	overflow: hidden;
}

.team-member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Treatment is a CSS filter, so the uploaded photo is never modified. */
	filter: grayscale(1);
	transition: filter 0.35s ease;
}

.team--photos-colour .team-member__photo img {
	filter: none;
}

.team--photos-hover .team-member:hover .team-member__photo img,
.team--photos-hover .team-member:focus-within .team-member__photo img {
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.team-member__photo img {
		transition: none;
	}
}

.team-member__name {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.team-member__title {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary-red);
	margin-block: 0.35em var(--space-xs);
}

.team-member__bio {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* margin-top:auto drops the icon to the bottom of the card once the rows
   stretch to match the experience card. */
.team-member__linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 34px;
	height: 34px;
	margin-top: auto;
	padding-top: 0;
	color: #0a66c2;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.team-member__linkedin:hover,
.team-member__linkedin:focus-visible {
	background: #0a66c2;
	color: var(--color-white);
}

/* Experience card -------------------------------------------------------- */

.team-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--color-navy);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	color: var(--color-white);
}

.team-stat__number {
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: rgba(226, 53, 46, 0.45);
	margin-bottom: var(--space-sm);
}

.team-stat__heading {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: var(--space-md);
}

.team-stat__text {
	font-size: 0.8rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-bottom: var(--space-lg);
}

.team-stat__cta {
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: auto;
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
	background: var(--color-near-black);
	color: var(--color-white);
	padding-block: var(--space-lg);
}

.site-footer__inner {
	display: grid;
	gap: var(--space-lg);
}

.site-footer__brand {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

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

.site-footer__logo {
	width: auto;
	max-width: 190px;
	height: auto;
}

.site-footer__blurb {
	font-size: 0.8rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
	max-width: 36ch;
	margin-top: var(--space-sm);
}

.site-footer__copyright {
	font-size: 0.7rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.38);
	max-width: 36ch;
	margin-top: var(--space-md);
}

.site-footer__heading {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: var(--space-sm);
}

.site-footer__links li + li {
	margin-top: 0.65rem;
}

.site-footer__links a {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.85);
	transition: color 0.2s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
	color: var(--color-primary-red);
}

/* ==========================================================================
   Enquiry modal
   ========================================================================== */

.modal[hidden] {
	display: none;
}

.modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-sm);
	/* Animated in by .is-open, which JS adds a frame after [hidden] is
	   removed — you cannot transition out of display:none. */
	opacity: 0;
	transition: opacity 0.22s ease;
}

.modal.is-open {
	opacity: 1;
}

.modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(8, 12, 24, 0.55);
}

.modal__dialog {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--space-lg);
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: 0 24px 60px rgba(8, 12, 24, 0.28);
	transform: translateY(14px) scale(0.98);
	transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.is-open .modal__dialog {
	transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.modal,
	.modal__dialog {
		transition: none;
	}

	.modal__dialog {
		transform: none;
	}
}

/* Stops the page behind from scrolling while the modal is open. */
body.has-modal-open {
	overflow: hidden;
}

.modal__close {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
	color: var(--color-text-muted);
	cursor: pointer;
}

.modal__close:hover {
	background: var(--color-cream);
	color: var(--color-near-black);
}

.modal__title {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	padding-right: var(--space-lg);
}

.modal__intro {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin-top: var(--space-xs);
}

/* Form ------------------------------------------------------------------- */

.enquiry-form {
	margin-top: var(--space-md);
}

.enquiry-form__row {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--space-sm);
}

.enquiry-form__label {
	font-size: 0.78rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.enquiry-form__req {
	color: var(--color-primary-red);
}

.enquiry-form__optional {
	font-weight: 400;
	color: var(--color-text-muted);
}

.enquiry-form__input {
	font-family: inherit;
	font-size: 0.9rem;
	color: var(--color-near-black);
	padding: 0.7em 0.85em;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color 0.2s ease;
}

.enquiry-form__input:focus {
	outline: none;
	border-color: var(--color-near-black);
}

.enquiry-form__select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235c6068' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85em center;
	padding-right: 2.2em;
}

.enquiry-form__input.has-error {
	border-color: var(--color-primary-red);
}

.enquiry-form__error {
	font-size: 0.72rem;
	color: var(--color-primary-red);
	margin-top: 0.3rem;
}

.enquiry-form__error:empty {
	display: none;
}

.enquiry-form__checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.6rem;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	cursor: pointer;
}

.enquiry-form__checkbox input {
	width: 16px;
	height: 16px;
	accent-color: var(--color-primary-red);
	cursor: pointer;
}

.enquiry-form__submit {
	position: relative;
	width: 100%;
	justify-content: center;
	margin-top: var(--space-xs);
}

/* Spinner sits inside the button while sending. The label is made
   transparent rather than removed, so the button keeps its exact size and
   nothing shifts around it. */
.enquiry-form__submit.is-loading {
	color: transparent;
	pointer-events: none;
}

/* The button is disabled while sending, but the dimming meant for a normal
   disabled state would mute the spinner. */
.enquiry-form__submit.is-loading[disabled] {
	opacity: 1;
}

.enquiry-form__submit.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--color-white);
	border-radius: 50%;
	animation: vrankone-spin 0.7s linear infinite;
}

/* Hide the arrow icon too, if the button has one. */
.enquiry-form__submit.is-loading .btn__arrow {
	visibility: hidden;
}

@keyframes vrankone-spin {
	to {
		transform: rotate(360deg);
	}
}

.enquiry-form__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.enquiry-form__status {
	font-size: 0.82rem;
	line-height: 1.5;
	margin-top: var(--space-sm);
}

.enquiry-form__status:empty {
	display: none;
}

.enquiry-form__legal {
	font-size: 0.68rem;
	line-height: 1.5;
	color: var(--color-text-muted);
	margin-top: var(--space-sm);
}

.enquiry-form__legal a {
	text-decoration: underline;
}

.enquiry-form__status.is-success {
	color: var(--color-success);
}

.enquiry-form__status.is-error {
	color: var(--color-primary-red);
}

/* ==========================================================================
   Floating WhatsApp Button

   Fixed bottom-right on every page (see footer.php). The "Go to top" button
   (below) sits at the right-middle instead of stacking on this one, so the
   two never compete for the same corner.
   ========================================================================== */

.whatsapp-float {
	--whatsapp-float-size: 56px;
	--whatsapp-float-gap: 1rem;

	position: fixed;
	right: var(--whatsapp-float-gap);
	bottom: calc(var(--whatsapp-float-gap) + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--whatsapp-float-size);
	height: var(--whatsapp-float-size);
	border-radius: 50%;
	background: var(--color-white);
	/* --shadow-card's wide, soft blur reads fine on a big card surface but
	   nearly disappears on a small circular badge over white content — this
	   button needs a tighter, higher-contrast shadow so it stays legible
	   against any background it floats over. */
	box-shadow:
		0 2px 6px rgba(16, 24, 43, 0.16),
		0 8px 20px rgba(16, 24, 43, 0.18);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.whatsapp-float:hover {
	transform: scale(1.06);
	box-shadow:
		0 4px 10px rgba(16, 24, 43, 0.2),
		0 14px 28px rgba(16, 24, 43, 0.22);
}

.whatsapp-float__icon {
	width: 34px;
	height: 34px;
}

/* Hidden while the enquiry modal is open so the two floating elements never
   compete for attention at once. */
body.has-modal-open .whatsapp-float {
	display: none;
}

@media (max-width: 767px) {
	.whatsapp-float {
		--whatsapp-float-size: 50px;
	}

	.whatsapp-float__icon {
		width: 30px;
		height: 30px;
	}
}

/* ==========================================================================
   Floating "Go to top" Button

   Fixed at the right-middle of the viewport — deliberately not stacked on
   the WhatsApp button, which stays bottom-right. Visible by default (see
   template comment); main.js adds .is-hidden and toggles it on scroll, so
   it only emerges once the visitor has actually scrolled down.
   ========================================================================== */

.gototop-float {
	--gototop-float-size: 48px;

	position: fixed;
	top: 50%;
	right: 1rem;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--gototop-float-size);
	height: var(--gototop-float-size);
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-near-black);
	box-shadow:
		0 2px 6px rgba(16, 24, 43, 0.16),
		0 8px 20px rgba(16, 24, 43, 0.18);
	opacity: 1;
	transform: translateY(-50%);
	transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.18s ease;
}

.gototop-float:hover {
	box-shadow:
		0 4px 10px rgba(16, 24, 43, 0.2),
		0 14px 28px rgba(16, 24, 43, 0.22);
}

.gototop-float.is-hidden {
	opacity: 0;
	transform: translateY(-50%) translateX(12px);
	pointer-events: none;
}

.gototop-float__icon {
	display: flex;
	/* Reuses the chevron-down icon, flipped, instead of a dedicated "up"
	   glyph — same shape, half the icon set. */
	transform: rotate(180deg);
}

/* Hidden while the enquiry modal is open, same reasoning as the WhatsApp
   button — no floating UI competing with it for attention. */
body.has-modal-open .gototop-float {
	display: none;
}

@media (max-width: 767px) {
	.gototop-float {
		--gototop-float-size: 42px;
	}
}

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

.contact-page {
	background-color: var(--color-cream);
	padding-block: var(--space-lg) var(--space-xl);
}

.contact-page__intro {
	max-width: 640px;
	margin-bottom: var(--space-lg);
}

.contact-page__label {
	margin-bottom: var(--space-sm);
}

.contact-page__heading {
	font-size: clamp(1.9rem, 8vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin-bottom: var(--space-sm);
}

.contact-page__subtext {
	color: var(--color-text-muted);
	font-size: 0.95rem;
}

.contact-page__grid {
	display: grid;
	gap: var(--space-md);
	align-items: start;
}

.contact-form {
	padding: var(--space-md);
}

.enquiry-form__textarea {
	display: block;
	width: 100%;
	resize: vertical;
	min-height: 8em;
	font-family: inherit;
}

.contact-page__sidebar {
	display: grid;
	gap: var(--space-md);
	/* Stretches items so the navy CTA card doesn't sit shorter than its
	   siblings when the sidebar is a column beside a taller form. */
	align-content: start;
}

.contact-info {
	padding: var(--space-md);
}

.contact-info__heading {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: var(--space-xs);
}

.contact-info__value {
	display: block;
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

/* The email address is a mailto: link — styled distinctly from the plain
   text values (like Working Hours) so it visibly reads as clickable. */
a.contact-info__value {
	color: var(--color-primary-red);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a.contact-info__value:hover,
a.contact-info__value:focus-visible {
	color: var(--color-primary-red-dark);
}

.contact-info__text {
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.contact-cta {
	background: var(--color-navy);
	color: var(--color-white);
	border-radius: var(--radius-md);
	padding: var(--space-md);
}

.contact-cta__heading {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: var(--space-xs);
}

.contact-cta__text {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: var(--space-sm);
}

.contact-cta__link {
	width: 100%;
	justify-content: center;
}

@media (min-width: 768px) {
	.contact-page {
		padding-block: var(--space-xl);
	}

	.contact-form,
	.contact-info,
	.contact-cta {
		padding: var(--space-lg);
	}

	/* Pair Full name/Work email and Phone/Website into two columns. Unlike
	   the ecom-hero form, this one isn't squeezed into a narrow hero column,
	   so it has room to split well before the 1200px page-grid breakpoint. */
	.contact-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-md);
	}

	.contact-form > * {
		grid-column: 1 / -1;
	}

	.contact-form__row--half {
		grid-column: span 1;
	}
}

@media (min-width: 1200px) {
	.contact-page__grid {
		grid-template-columns: 1.5fr 1fr;
		gap: var(--space-xl);
	}
}

/* ==========================================================================
   Ecommerce Hero — landing page
   ========================================================================== */

.ecom-hero {
	background-color: var(--color-white);
	padding-block: var(--space-xl) var(--space-2xl);
	overflow: hidden;
}

.ecom-hero__inner {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}

.ecom-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-base);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary-red);
	margin-bottom: var(--space-md);
}

.ecom-hero__eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary-red);
	flex-shrink: 0;
}

/* Matches the homepage hero's size exactly (clamp value + breakpoint), so
   the two pages' headlines read as the same visual weight. */
.ecom-hero__title {
	font-size: clamp(1.9rem, 8.5vw, 2.6rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 800;
	text-wrap: balance;
	margin-bottom: var(--space-md);
}

.ecom-hero__title-line,
.ecom-hero__title-accent {
	display: block;
}

.ecom-hero__title-accent {
	color: var(--color-primary-red);
	font-style: italic;
}

.ecom-hero__desc {
	border-left: 3px solid var(--color-primary-red);
	padding-left: var(--space-sm);
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 46ch;
	margin-bottom: var(--space-lg);
}

.ecom-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
}

.ecom-hero__stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ecom-hero__stat-value {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--color-primary-red);
	line-height: 1;
}

.ecom-hero__stat-label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.ecom-hero__clients {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.ecom-hero__clients-label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-sm);
}

.ecom-hero__clients-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-lg);
	list-style: none;
}

.ecom-hero__clients-item img {
	display: block;
	height: 46px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

.ecom-hero__clients-name {
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-text-muted);
}

.ecom-hero__form-wrap {
	position: relative;
	border-top: 4px solid var(--color-primary-red);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-lg);
}

.ecom-hero__form-heading {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 0.35rem;
}

.ecom-hero__form-subtext {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-sm);
}

.ecom-hero__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	color: var(--color-text-muted);
	margin-top: var(--space-sm);
}

.ecom-hero__trust svg {
	flex-shrink: 0;
	color: var(--color-text-muted);
}

@media (min-width: 768px) {
	.ecom-hero__title {
		font-size: clamp(2rem, 3.4vw, 3rem);
	}

	.ecom-hero__form-wrap {
		padding: var(--space-xl);
	}
}

@media (min-width: 1200px) {
	.ecom-hero__inner {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--space-2xl);
	}

	/* Pair Name/Email and Phone/Website into two columns so the card is
	   shorter and the submit button clears the fold without scrolling. */
	.ecom-hero__form-wrap {
		padding-block: var(--space-md);
	}

	.ecom-hero__form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-sm);
	}

	.ecom-hero__form > * {
		grid-column: 1 / -1;
	}

	.ecom-hero__form-row--half {
		grid-column: span 1;
	}
}

/* ==========================================================================
   Reporting & KPIs — tag row beside an auto-cycling device mockup
   ========================================================================== */

.reporting-kpis {
	background-color: var(--color-white);
	padding-block: var(--space-lg);
}

.reporting-kpis__inner {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
}

.reporting-kpis__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary-red);
	margin-bottom: var(--space-sm);
}

.reporting-kpis__heading {
	font-size: clamp(1.9rem, 8vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 800;
	text-wrap: balance;
	margin-bottom: var(--space-md);
}

.reporting-kpis__subtext {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	max-width: 44ch;
	margin-bottom: var(--space-md);
}

.reporting-kpis__tags {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-lg);
	row-gap: var(--space-sm);
}

.reporting-kpis__tag {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-text-muted);
	border-bottom: 2px solid transparent;
	padding-bottom: 0.2em;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.reporting-kpis__tag:hover {
	color: var(--color-near-black);
	border-bottom-color: var(--color-border);
}

/* Every third tag reads as a standout metric — bold, near-black, underlined
   in the site's amber accent — breaking up what would otherwise be a flat
   wall of equally-weighted labels across 20+ tags. */
.reporting-kpis__tag:nth-child(3n + 1) {
	color: var(--color-near-black);
	font-weight: 800;
	border-bottom-color: var(--color-label-pill-bg);
}

.reporting-kpis__tag:nth-child(3n + 1):hover {
	border-bottom-color: var(--color-primary-red);
}

.reporting-kpis__media {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

/* Bezel, screen and stand are drawn in CSS — no device-frame image asset. */
.reporting-kpis__device {
	width: 100%;
	max-width: 480px;
}

.reporting-kpis__screen {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #d7dade;
	border: 1px solid #c3c7cd;
	border-radius: var(--radius-md);
	padding: 12px;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.reporting-kpis__screen--empty {
	background: var(--color-off-white);
	border: 1px dashed var(--color-border);
}

.reporting-kpis__slide {
	position: absolute;
	inset: 12px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	object-fit: cover;
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.reporting-kpis__slide.is-active {
	opacity: 1;
}

/* Slim monitor neck attaching the screen to its base. */
.reporting-kpis__stand {
	display: block;
	width: 10%;
	height: var(--space-lg);
	margin-inline: auto;
	background: linear-gradient(180deg, #c3c7cd, #9aa0aa);
}

.reporting-kpis__base {
	display: block;
	width: 34%;
	height: 10px;
	margin-inline: auto;
	background: #9aa0aa;
	border-radius: 999px;
}

@media (min-width: 768px) {
	.reporting-kpis {
		padding-block: var(--space-xl);
	}

	.reporting-kpis__inner {
		grid-template-columns: 1fr 0.9fr;
		gap: var(--space-xl);
	}

	.reporting-kpis__media {
		align-items: flex-end;
	}
}

/* ==========================================================================
   Responsive breakpoints
   Mobile-first; adjust at 768px (tablet) and 1200px (desktop)
   ========================================================================== */

@media (min-width: 768px) {
	:root {
		--font-size-2xl: 3rem;
		--font-size-3xl: 4rem;
	}

	.site-header__toggle {
		display: none;
	}

	.site-header__inner {
		gap: var(--space-sm);
	}

	.site-header__nav {
		flex-basis: auto;
		order: 1;
		margin-inline: auto;
		display: block;
		grid-template-rows: none;
	}

	.site-header__nav-inner {
		overflow: visible;
		visibility: visible;
		transition: none;
	}

	.site-header__menu {
		flex-direction: row;
		gap: var(--space-md);
		padding-top: 0;
		margin-top: 0;
		border-top: none;
	}

	.site-header__menu li + li {
		border-top: none;
	}

	.site-header__menu a {
		padding-block: 0;
		font-size: 0.95rem;
	}

	.site-header__cta {
		padding: 0.85em 1.75em;
		font-size: var(--font-size-sm);
	}

	/* Sized to sit level with the CTA button opposite it. */
	.site-header__logo {
		max-height: 56px;
		max-width: 220px;
	}

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

	.hero__inner {
		grid-template-columns: 1.15fr 1fr;
		align-items: center;
		gap: var(--space-xl);
	}

	/* Fluid so the type tracks the column width instead of jumping at the
	   breakpoint where the hero splits into two columns. */
	.hero__title {
		font-size: clamp(2rem, 3.4vw, 3rem);
		margin-bottom: var(--space-md);
	}

	.hero__label {
		margin-bottom: var(--space-md);
	}

	.hero__subtext {
		font-size: var(--font-size-base);
		margin-bottom: var(--space-md);
	}

	/* Full-bleed square again once the hero is side-by-side. */
	.hero__media {
		max-width: none;
		margin-inline: 0;
		padding-bottom: var(--space-lg);
	}

	.hero__media::before {
		inset: 45% 12% 0 4%;
	}

	.hero__media-card {
		aspect-ratio: 1 / 1;
	}

	.team-showcase {
		padding-block: var(--space-xl);
	}

	.team-showcase__tabs {
		flex-direction: row;
		justify-content: center;
	}

	/* align-items: start, not center — panels change height as their text
	   length varies between tabs; centering would re-center the row and make
	   the (deliberately fixed) image drift vertically on every click. */
	.team-showcase__body {
		grid-template-columns: 1fr 1.1fr;
		align-items: start;
		padding: var(--space-xl);
	}

	/* Same grid, just swap which side is wider and use `order` to flip which
	   renders first — DOM order (and tab order) stays media-then-panels. */
	.team-showcase--mirror .team-showcase__body {
		grid-template-columns: 1.1fr 1fr;
	}

	.team-showcase--mirror .team-showcase__media {
		order: 2;
	}

	.team-showcase--mirror .team-showcase__panels {
		order: 1;
	}

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

	.process__tabs {
		flex-direction: row;
		justify-content: center;
	}

	.process__tab {
		flex: 1;
	}

	.process__panel {
		grid-template-columns: 1.5fr 1fr;
		align-items: center;
		padding: var(--space-lg);
	}

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

	.about-story__inner {
		grid-template-columns: 1fr 0.9fr;
		gap: var(--space-lg);
	}

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

	.clients__logo {
		height: 42px;
		max-width: 190px;
	}

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

	.approach__track {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-lg);
	}

	.why-us {
		padding-block: var(--space-xl);
	}

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

	.why-us__grid {
		grid-template-columns: 1fr 1fr;
	}

	.services__grid {
		grid-template-columns: 1fr 1fr;
	}

	.services-card {
		padding: var(--space-lg);
	}

	/* Intro column beside the quote cards. */
	.testimonials__inner {
		grid-template-columns: minmax(220px, 0.9fr) 2.6fr;
		align-items: center;
		gap: var(--space-lg);
	}

	/* Two cards per slide; the negative track margin cancels the slide
	   gutters so the first and last cards stay flush with the viewport. */
	.testimonials__track {
		margin-inline: calc(var(--space-md) / -2);
	}

	.testimonials__slide {
		flex-basis: 50%;
		padding-inline: calc(var(--space-md) / 2);
	}

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

	/* Brand column on the left, link columns pushed to the right. Flex (not a
	   fixed grid) so the row still looks intentional whether 1 or 3 link
	   columns are configured in Site Settings. */
	.site-footer {
		padding-block: var(--space-xl);
	}

	.site-footer__inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--space-lg);
	}

	.site-footer__brand-col {
		flex: 1 1 320px;
		max-width: 420px;
	}

	.site-footer__col {
		flex: 0 0 160px;
	}

	/* Members on the left, experience card on the right. Both columns stretch
	   to the same height so their bottom edges line up. */
	.team__inner {
		grid-template-columns: 2fr 1fr;
		align-items: stretch;
		gap: var(--space-md);
	}

	/* Equal-height rows so the member cards fill the column exactly. */
	.team__track {
		grid-auto-rows: 1fr;
	}

	/* Photo beside the text, both vertically centred against each other. */
	.team-member {
		grid-template-columns: 200px 1fr;
		align-items: center;
	}

	/* Square crop: taller than the 4:3 it replaced, without stretching the
	   row far enough to drag the experience card out with it. */
	.team-member__photo {
		aspect-ratio: 1 / 1;
		max-height: none;
	}

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

	/* Two-column stage: large cards go full width, the rest pair up. */
	.cases__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.case-card--large {
		grid-column: span 2;
	}

	.case-card__overlay {
		padding: var(--space-lg);
	}

	.case-card__body {
		padding: var(--space-lg);
	}

	.case-card--compact {
		padding: var(--space-lg);
	}
}

@media (min-width: 1200px) {
	.container {
		padding-inline: var(--space-lg);
	}

	.services__grid {
		gap: var(--space-md);
	}

	.services-card {
		padding: var(--space-lg);
	}

	.services-card__title {
		font-size: 1.75rem;
	}

	/* Six-column stage reproduces the designed mixed-size layout:
	   large = 4 cols, small = 2, compact = 3. */
	.cases__grid {
		grid-template-columns: repeat(6, 1fr);
	}

	.case-card--large {
		grid-column: span 4;
		min-height: 380px;
	}

	.case-card--small {
		grid-column: span 2;
	}

	.case-card--compact {
		grid-column: span 3;
	}

	.case-card--large .case-card__title {
		font-size: 2rem;
	}

	.case-card--large .case-card__metric {
		font-size: 1.75rem;
	}
}

/* ==========================================================================
   SEO Audit test harness (page-seo-audit-test.php) — internal testing only,
   not styled to shipping quality; the real UI lives in the Contact-page flow
   once this is wired in for real.
   ========================================================================== */

.seo-audit-test {
	background: var(--color-cream);
	padding-block: var(--space-lg) var(--space-xl);
}

.seo-audit-test__intro {
	max-width: 640px;
	margin-bottom: var(--space-lg);
}

.seo-audit-test__heading {
	font-size: clamp(1.9rem, 8vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin-block: var(--space-sm);
}

.seo-audit-test__subtext {
	color: var(--color-text-muted);
	font-size: 0.95rem;
}

.seo-audit-test-form {
	max-width: 480px;
	padding: var(--space-md);
	margin-bottom: var(--space-lg);
}

.seo-audit-test-deliver {
	max-width: 480px;
	padding: var(--space-md);
	margin-bottom: var(--space-lg);
	background: var(--color-lavender);
}

.seo-audit-test-deliver__intro {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-sm);
}

.seo-audit-test__progress {
	margin-bottom: var(--space-lg);
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.seo-audit-test__results-heading {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 800;
	margin-bottom: var(--space-sm);
}

.seo-audit-test__summary {
	margin-bottom: var(--space-md);
	font-size: 0.95rem;
}

.seo-audit-test__summary p {
	margin-bottom: var(--space-xs);
}

.seo-audit-test__table-wrap {
	overflow-x: auto;
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.seo-audit-test__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}

.seo-audit-test__table th,
.seo-audit-test__table td {
	text-align: left;
	padding: var(--space-xs) var(--space-sm);
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
}

.seo-audit-test__table th {
	font-family: var(--font-display);
	font-weight: 700;
	white-space: nowrap;
}

.seo-audit-test__table td:first-child {
	max-width: 220px;
}

.seo-audit-test__table td:last-child {
	max-width: 420px;
	color: var(--color-text-muted);
}

.seo-audit-test__row--sub td:first-child {
	padding-left: var(--space-md);
	color: var(--color-text-muted);
}

.seo-audit-test__status {
	font-weight: 700;
	white-space: nowrap;
}

.seo-audit-test__status--pass {
	color: var(--color-success);
}

.seo-audit-test__status--issue {
	color: var(--color-primary-red);
}

.seo-audit-test__status--not_applicable,
.seo-audit-test__status--not_configured {
	color: var(--color-text-muted);
	font-weight: 400;
}

.seo-audit-test__status--error {
	color: var(--color-primary-red);
}