/* =========================================================================
   AdTrendo — design system
   1. Tokens          5. Sections
   2. Reset/base      6. Forms
   3. Layout          7. Footer
   4. Header/hero     8. Responsive + motion
   ========================================================================= */

/* 1. Tokens ------------------------------------------------------------- */
:root {
	--bg: #0B0B0F;
	--bg-2: #121218;
	--card: #18181F;
	--text: #F5F5F2;
	--muted: #A7A7AD;
	--accent: #D2FF00;
	--accent-hover: #E2FF4D;
	/* The accent is far too light to sit on the bone panels — lime on bone is
	   1.06:1. This is the same hue darkened until it clears AA (5.8:1). */
	--accent-ink: #546600;
	--accent-2: #8B7CFF;
	--border: rgba(255, 255, 255, 0.10);
	--border-strong: rgba(255, 255, 255, 0.18);
	--success: #65D68A;

	--font: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display: var(--font);
	--font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

	--step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
	--step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
	--step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
	--step-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
	--step-4: clamp(2.6rem, 1.9rem + 3.4vw, 5rem);
	--step-5: clamp(3rem, 2rem + 5vw, 7rem);

	--gutter: clamp(1.25rem, 4vw, 4rem);
	--section-y: clamp(5rem, 9vw, 9rem);
	--maxw: 1360px;
	--radius: 6px;
	--radius-sm: 4px;
	--radius-lg: 12px;
	--radius-panel: clamp(12px, 2vw, 24px);
	--pill: 9999px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 0.7s;
	--header-h: 72px;
	/* Hero scroll distance. The sticky stage eats 100vh of this, so the
	   travel the visitor actually feels is this minus one viewport. */
	--hero-track: 240vh;
}

/* 2. Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	/* No overflow clipping on the root. `overflow-x: clip` here also clips the
	   Y axis (a `visible` axis computes to `clip` when its pair is `clip`),
	   which silently caps how far the document can scroll. `hidden` on body is
	   no better — it makes body the scroll container and breaks the sticky
	   hero. Anything that overflows sideways clips itself instead; see
	   `.marquee`. */
}

/* Native smooth scrolling, but only when the JS smooth scroll is not running.
   Lenis adds `.lenis` to the root and requires `scroll-behavior: auto`,
   otherwise the browser and the library animate the same jump at once. */
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--step-0);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
	margin: 0 0 0.5em;
	line-height: 1.04;
	letter-spacing: -0.035em;
	font-weight: 700;
	text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

ul, ol { margin: 0 0 1.2em; padding-left: 1.1em; }

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

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

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

.skip-link {
	position: absolute; left: 1rem; top: -100px; z-index: 999;
	background: var(--accent); color: #0B0B0F; padding: 0.7rem 1.1rem;
	border-radius: var(--pill); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* 3. Layout -------------------------------------------------------------- */
.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 6vw, 6rem); }
.section--alt { background: var(--bg-2); }

/* An inverted panel that floats on the dark page. Because every component
   reads from the tokens, redefining them here re-skins the whole section. */
.section--light {
	--bg: #F4F4F0;
	--bg-2: #EAEAE4;
	--card: #FFFFFF;
	--text: #0B0B0F;
	--muted: rgba(11, 11, 15, 0.6);
	--border: rgba(11, 11, 15, 0.12);
	--border-strong: rgba(11, 11, 15, 0.28);
	background: var(--bg);
	color: var(--text);
	border-radius: var(--radius-panel);
	margin-inline: clamp(0.5rem, 1.6vw, 1.75rem);
	overflow: hidden;
}
/* Swapping the token re-points the eyebrow rule, accent words, card rules
   and stat units in one move, instead of overriding each of them. */
.section--light { --accent: var(--accent-ink); }
.section--light .btn { --btn-ink: #F4F4F0; }
.section--light .btn--ghost { --btn-ink: var(--text); }
.section--light .btn--light { --btn-bg: var(--text); --btn-ink: #F4F4F0; }

.section__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
	font-size: 0.76rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1.2rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-weight: 500;
}
.eyebrow::before {
	content: "";
	width: 28px; height: 1px;
	background: var(--accent);
	flex: none;
}
.section__head--center .eyebrow { justify-content: center; }

.section__title { font-size: var(--step-3); }
.section__lede { color: var(--muted); font-size: var(--step-1); line-height: 1.5; max-width: 56ch; }
.section__head--center .section__lede { margin-inline: auto; }

.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; font-style: italic; }

.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* Buttons */
.btn {
	--btn-bg: var(--accent);
	--btn-ink: #0B0B0F;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1rem 1.9rem;
	background: var(--btn-bg);
	color: var(--btn-ink);
	border: 1px solid transparent;
	border-radius: var(--pill);
	font: inherit;
	font-weight: 600;
	font-size: var(--step--1);
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { --btn-bg: var(--accent-hover); transform: translateY(-1px); }
.btn--ghost {
	--btn-bg: transparent;
	--btn-ink: var(--text);
	border-color: var(--border-strong);
}
.btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.06); border-color: var(--text); }
.btn--light { --btn-bg: var(--text); --btn-ink: var(--bg); }
.btn--light:hover { --btn-bg: #fff; }
.btn--sm { padding: 0.6rem 1.1rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* 4. Header -------------------------------------------------------------- */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.site-header.is-solid {
	background: rgba(11, 11, 15, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: var(--border);
}
.site-header.is-hidden { transform: translateY(-100%); transition: transform 0.4s var(--ease); }

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

.brand {
	font-weight: 700;
	font-size: 1.12rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.brand__dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; flex: none; }
.brand img { max-height: 34px; width: auto; }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav a:not(.btn) {
	font-size: var(--step--1);
	font-weight: 500;
	text-decoration: none;
	color: var(--text);
	opacity: 0.82;
	position: relative;
	padding-block: 0.4rem;
	transition: opacity 0.25s var(--ease);
}
.nav a:not(.btn)::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--ease);
}
.nav a:not(.btn):hover, .nav .current-menu-item > a { opacity: 1; }
.nav a:not(.btn):hover::after, .nav .current-menu-item > a::after { transform: scaleX(1); }

.nav__toggle {
	display: none;
	background: none;
	border: 1px solid var(--border-strong);
	border-radius: var(--pill);
	width: 44px; height: 44px;
	padding: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.nav__toggle span {
	display: block;
	width: 18px; height: 1.5px;
	background: var(--text);
	position: relative;
	transition: background-color 0.2s var(--ease);
}
.nav__toggle span::before, .nav__toggle span::after {
	content: "";
	position: absolute; left: 0;
	width: 18px; height: 1.5px;
	background: var(--text);
	transition: transform 0.3s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* 5. Hero ---------------------------------------------------------------- */
.hero { position: relative; }
.hero__track { height: var(--hero-track); }
.hero__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero__media video { position: absolute; inset: 0; }

.hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	/* Light enough that the footage still reads as moving, heavy enough behind
	   the copy to hold contrast. Weighted to the side the text sits on. */
	/* Weighted to the left, where the copy sits, so the growth curve on the
	   right stays visible instead of being flattened into the background. */
	/* Tuned against the moving footage, not the still: the poster measured
	   4.70:1 behind the copy but the video runs brighter there, dropping the
	   lede to 4.28:1 mid-loop. Weighted left so the growth curve on the right
	   still reads at full strength. */
	background:
		linear-gradient(90deg, rgba(11, 11, 15, 0.94) 0%, rgba(11, 11, 15, 0.82) 32%, rgba(11, 11, 15, 0.34) 58%, rgba(11, 11, 15, 0.06) 100%),
		linear-gradient(180deg, rgba(11, 11, 15, 0.36) 0%, rgba(11, 11, 15, 0.06) 42%, rgba(11, 11, 15, 0.74) 100%);
}
.hero__grain {
	position: absolute; inset: 0; z-index: 2;
	opacity: 0.35;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 3px 3px;
}

.hero__panels { position: relative; z-index: 3; width: 100%; height: 100%; }

.hero__panel {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	padding: calc(var(--header-h) + 2rem) var(--gutter) 5rem;
	max-width: var(--maxw);
	margin-inline: auto;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
	pointer-events: none;
	visibility: hidden;
}
.hero__panel.is-active { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }

.hero__panel--intro { justify-items: start; }
.hero__panel--right { justify-items: end; text-align: right; }
.hero__panel--left { justify-items: start; }
.hero__panel--final { justify-items: center; text-align: center; }

.hero__label {
	font-size: var(--step--1);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1.4rem;
}
.hero__title {
	font-size: var(--step-5);
	max-width: 15ch;
	margin-bottom: 1.2rem;
	font-weight: 600;
}
.hero__text { color: var(--muted); font-size: var(--step-1); max-width: 46ch; margin-bottom: 2rem; }

.hero__statement {
	font-size: var(--step-4);
	max-width: 18ch;
	line-height: 1.1;
	margin: 0;
	font-weight: 500;
}
.hero__panel--right .hero__statement, .hero__panel--left .hero__statement { max-width: 14ch; }
.hero__statement em { font-family: var(--font-serif); font-style: italic; }

.hero__final-title { font-size: var(--step-4); max-width: 20ch; }

.hero__scrollcue {
	position: absolute;
	left: 50%; bottom: 2rem;
	transform: translateX(-50%);
	z-index: 4;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	transition: opacity 0.5s var(--ease);
}
.hero__scrollcue::after {
	content: "";
	width: 1px; height: 40px;
	background: linear-gradient(to bottom, var(--accent), transparent);
}
.hero.is-past-intro .hero__scrollcue { opacity: 0; }

.hero__progress {
	position: absolute;
	left: 0; bottom: 0;
	height: 2px;
	width: 100%;
	z-index: 5;
	background: rgba(255, 255, 255, 0.08);
}
.hero__progress span {
	display: block;
	height: 100%;
	width: var(--progress, 0%);
	background: var(--accent);
}

/* 6. Reveal utility ------------------------------------------------------ */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	transition-delay: var(--delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* 7. Services ------------------------------------------------------------ */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-height: 260px;
	position: relative;
	text-decoration: none;
	transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.card:hover { background: var(--bg-2); border-color: var(--border-strong); transform: translateY(-3px); }
.card__num {
	font-size: var(--step--1);
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	font-weight: 600;
}
.card__title { font-size: var(--step-1); margin: 0; }
.card__text { color: var(--muted); font-size: var(--step--1); line-height: 1.65; margin: 0; }
.card__more {
	margin-top: auto;
	padding-top: 1.2rem;
	font-size: var(--step--1);
	color: var(--accent);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.card:hover .card__more, .card:focus-visible .card__more { opacity: 1; transform: none; }

/* 8. Results ------------------------------------------------------------- */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	border-top: 1px solid var(--border);
	padding-top: clamp(2.5rem, 4vw, 4rem);
}
.stat__value {
	font-size: clamp(3rem, 6.5vw, 5rem);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1;
	margin: 0 0 0.5rem;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
.stat__value .stat__unit { color: var(--accent); }
.stat__label { color: var(--muted); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.stats__note {
	margin-top: 2.5rem;
	color: var(--muted);
	font-size: var(--step--1);
	max-width: 70ch;
	border-left: 2px solid var(--border-strong);
	padding-left: 1rem;
}

/* 9. Work ---------------------------------------------------------------- */
.work-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.work-card { text-decoration: none; display: block; position: relative; }
.work-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.work-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
	filter: saturate(0.85);
}
.work-card:hover .work-card__media img { transform: scale(1.04); filter: saturate(1); }
.work-card__overlay {
	position: absolute; inset: 0;
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, rgba(11, 11, 15, 0) 40%, rgba(11, 11, 15, 0.75));
	opacity: 0;
	transition: opacity 0.45s var(--ease);
}
.work-card:hover .work-card__overlay, .work-card:focus-visible .work-card__overlay { opacity: 1; }
.work-card__cue { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; }
.work-card__meta {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding-top: 1.1rem;
}
.work-card__title { font-size: var(--step-1); margin: 0; }
.work-card__industry { color: var(--muted); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.work-card__excerpt { color: var(--muted); font-size: var(--step--1); margin: 0.5rem 0 0; }

/* 10. Process ------------------------------------------------------------ */
.process { display: grid; gap: 0; border-top: 1px solid var(--border); }
.process__step {
	display: grid;
	grid-template-columns: 5rem minmax(0, 20ch) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 3rem);
	align-items: start;
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--border);
	transition: background-color 0.4s var(--ease);
}
.process__step:hover { background: var(--bg-2); }
.process__num { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.process__title { font-size: var(--step-2); margin: 0; }
.process__text { color: var(--muted); margin: 0; max-width: 52ch; }

/* 11. Why + industries --------------------------------------------------- */
.why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.why {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.75rem;
	transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
/* A drawn accent rule rather than a border, so it can animate on hover. */
.why::after {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0.18);
	transform-origin: left;
	transition: transform 0.45s var(--ease), opacity 0.35s var(--ease);
}
.why:hover::after { transform: scaleX(1); opacity: 1; }
.why:hover { background: var(--card); border-color: var(--border-strong); transform: translateY(-3px); }
/* The purple and green here predate the lime lock: every second and third card
   was drawing an off-brand top border. One accent, varied by weight instead. */
.why:nth-child(3n+2)::after { opacity: 0.65; }
.why:nth-child(3n)::after { opacity: 0.4; }
.why__title { font-size: var(--step-1); margin: 0 0 0.6rem; }
.why__text { color: var(--muted); font-size: var(--step--1); margin: 0; line-height: 1.65; }

.industries { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.industry {
	border: 1px solid var(--border);
	padding: 0.75rem 1.25rem;
	font-size: var(--step--1);
	letter-spacing: 0.02em;
	color: var(--muted);
	border-radius: 999px;
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.industry:hover { color: var(--text); border-color: var(--border-strong); background: var(--card); }

/* 12. Testimonials ------------------------------------------------------- */
.quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.quote {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.quote__text { font-size: var(--step-1); line-height: 1.5; margin: 0; }
.quote__mark { color: var(--accent); font-family: var(--font-serif); font-size: 2.5rem; line-height: 0.5; height: 1rem; }
.quote__by { margin-top: auto; display: flex; align-items: center; gap: 0.9rem; }
.quote__logo { width: 44px; height: 44px; object-fit: contain; }
.quote__name { font-weight: 600; margin: 0; font-size: var(--step--1); }
.quote__role { color: var(--muted); font-size: var(--step--1); margin: 0; }
.placeholder-note {
	margin-top: 2rem;
	color: var(--muted);
	font-size: var(--step--1);
	border-left: 2px solid var(--border-strong);
	padding-left: 1rem;
	max-width: 70ch;
}

/* 13. About -------------------------------------------------------------- */
.about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}
.about__title { font-size: var(--step-3); }
.about__body { color: var(--muted); font-size: var(--step-1); line-height: 1.6; }
.about__pillars { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.about__pillar {
	font-size: var(--step--1);
	color: var(--text);
	border: 1px solid var(--border);
	padding: 0.5rem 1rem;
	border-radius: 999px;
}

/* 14. Final CTA ---------------------------------------------------------- */
.cta {
	position: relative;
	overflow: hidden;
	background: var(--bg-2);
	text-align: center;
	border: 1px solid var(--border);
	border-radius: var(--radius-panel);
	margin-inline: clamp(0.5rem, 1.6vw, 1.75rem);
}
.cta::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto -10%;
	height: 120%;
	background: radial-gradient(50% 55% at 50% 40%, rgba(255, 90, 54, 0.18), transparent 70%),
		radial-gradient(40% 45% at 80% 70%, rgba(139, 124, 255, 0.14), transparent 70%);
	pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.4rem; }
.cta__title { font-size: var(--step-4); max-width: 18ch; margin: 0; }
.cta__text { color: var(--muted); font-size: var(--step-1); max-width: 52ch; margin: 0; }

/* 15. Contact ------------------------------------------------------------ */
.contact {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.form { display: grid; gap: 1.25rem; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.field { display: grid; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); color: var(--muted); letter-spacing: 0.04em; }
.field .req { color: var(--accent); }

.field input, .field select, .field textarea {
	width: 100%;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font: inherit;
	font-size: var(--step--1);
	padding: 0.95rem 1.15rem;
	transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; background: var(--bg-2); }
.field input::placeholder, .field textarea::placeholder { color: #6b6b73; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--accent); }
.field__error { color: var(--accent); font-size: 0.8rem; min-height: 1em; }

.form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form__status {
	font-size: var(--step--1);
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	display: none;
}
.form__status.is-visible { display: block; }
.form__status.is-success { border-color: var(--success); color: var(--success); }
.form__status.is-error { border-color: var(--accent); color: var(--accent-hover); }

.form__consent { color: var(--muted); font-size: 0.8rem; }

.contact-aside { display: grid; gap: 1.5rem; align-content: start; }
.contact-aside__block { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.contact-aside__label { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; }
.contact-aside a { font-size: var(--step-1); text-decoration: none; }
.contact-aside a:hover { color: var(--accent); }

/* 16. Footer ------------------------------------------------------------- */
.site-footer { background: var(--bg); border-top: 1px solid var(--border); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 3.5rem);
	padding-bottom: 3rem;
}
.footer__brand { font-size: var(--step-2); font-weight: 700; margin: 0 0 0.6rem; }
.footer__tagline { color: var(--muted); max-width: 34ch; }
.footer__heading { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer__list a { text-decoration: none; font-size: var(--step--1); opacity: 0.85; }
.footer__list a:hover { opacity: 1; color: var(--accent); }
.footer__bottom {
	border-top: 1px solid var(--border);
	padding-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	align-items: center;
	color: var(--muted);
	font-size: var(--step--1);
}
.footer__legal { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.footer__legal a { text-decoration: none; }

.wa-float {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 90;
	width: 52px; height: 52px;
	display: grid; place-items: center;
	background: var(--card);
	border: 1px solid var(--border-strong);
	border-radius: 50%;
	color: var(--success);
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.wa-float:hover { transform: translateY(-2px); border-color: var(--success); }

/* 17. Editorial pages ---------------------------------------------------- */
.page-hero { padding-top: calc(var(--header-h) + clamp(4rem, 8vw, 8rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-hero__title { font-size: var(--step-4); max-width: 20ch; }
.page-hero__meta { color: var(--muted); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; }

.prose { max-width: 68ch; font-size: var(--step-0); }
.prose h2 { font-size: var(--step-2); margin-top: 2.5em; }
.prose h3 { font-size: var(--step-1); margin-top: 2em; }
.prose img, .prose figure { margin-block: 2rem; }
.prose blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--accent);
	font-size: var(--step-1);
}
/* Buttons carried over from the old markup are anchors too. Excluded here so
   they keep their own ink — otherwise this rule (0-2-0) outranks .btn (0-1-0)
   and paints lime text onto a lime button. */
.prose a:not([class*="btn"]) { color: var(--accent); }

.cs-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
	border-block: 1px solid var(--border);
	padding-block: 2rem;
	margin-block: 3rem;
}
.cs-fact__label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.4rem; }
.cs-fact__value { margin: 0; font-size: var(--step-1); }

.cs-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-block: 2rem; }
.cs-result__value { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.03em; margin: 0; }
.cs-result__label { color: var(--muted); font-size: var(--step--1); margin: 0; }

.post-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.post-list__item { padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--border); display: grid; gap: 0.5rem; }
.post-list__title { font-size: var(--step-2); margin: 0; }
.post-list__title a { text-decoration: none; }
.post-list__title a:hover { color: var(--accent); }
.post-list__meta { color: var(--muted); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; }

.pagination { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-top: 2.5rem; }
.pagination .page-numbers {
	padding: 0.5rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--pill);
	text-decoration: none;
	font-size: var(--step--1);
}
.pagination .current { border-color: var(--accent); color: var(--accent); }

/* 18. Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
	.about, .contact { grid-template-columns: 1fr; }
	.footer__top { grid-template-columns: 1fr 1fr; }
	.process__step { grid-template-columns: 3.5rem 1fr; }
	.process__text { grid-column: 2; }
}

@media (max-width: 860px) {
	:root { --header-h: 64px; }

	.nav__toggle { display: inline-flex; }
	.nav {
		position: fixed;
		inset: var(--header-h) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: rgba(11, 11, 15, 0.97);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-bottom: 1px solid var(--border);
		padding: 1rem var(--gutter) 2rem;
		max-height: calc(100svh - var(--header-h));
		overflow-y: auto;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
	}
	.nav.is-open { opacity: 1; transform: none; visibility: visible; }
	.nav ul { flex-direction: column; gap: 0; }
	.nav li { border-bottom: 1px solid var(--border); }
	.nav a:not(.btn) { display: block; padding: 1rem 0; font-size: var(--step-1); opacity: 1; }
	.nav a:not(.btn)::after { display: none; }
	.nav .btn { margin-top: 1.5rem; justify-content: center; }

	:root { --hero-track: 200vh; }
	.hero__panel--right { justify-items: start; text-align: left; }
	.hero__statement, .hero__final-title { max-width: 16ch; }
	.form__grid { grid-template-columns: 1fr; }
	.footer__top { grid-template-columns: 1fr; }
	.footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
	:root { --hero-track: 180vh; }
	.hero__title { font-size: clamp(2.6rem, 13vw, 3.6rem); max-width: 12ch; }
	.hero__panel { padding-bottom: 4rem; }
	.btn { width: 100%; justify-content: center; }
	.btn-row { width: 100%; }
	.process__step { grid-template-columns: 1fr; gap: 0.5rem; }
	.process__text { grid-column: 1; }
	.cs-facts { gap: 1.25rem; }
}

/* 19. Motion preferences ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.reveal { opacity: 1; transform: none; }

	/* Static hero: the messages stack as ordinary sections. */
	.hero__track { height: auto; }
	.hero__stage { position: static; height: auto; min-height: 0; display: block; }
	.hero__media { position: relative; height: 60svh; }
	.hero__media video { display: none; }
	.hero__scrim, .hero__grain, .hero__progress, .hero__scrollcue { display: none; }
	.hero__panels { display: grid; }
	.hero__panel {
		position: static;
		opacity: 1;
		transform: none;
		visibility: visible;
		pointer-events: auto;
		padding-block: clamp(3rem, 6vw, 5rem);
		border-bottom: 1px solid var(--border);
	}
	.hero__panel--right, .hero__panel--left { text-align: left; justify-items: start; }
	.hero__panel--final { text-align: left; justify-items: start; }
	.work-card__overlay, .card__more { opacity: 1; }
}

/* No-JS: never hide content behind a scroll interaction. */
.no-js .hero__track { height: auto; }
.no-js .hero__stage { position: static; height: auto; min-height: 0; display: block; }
.no-js .hero__media { position: relative; height: 60svh; }
.no-js .hero__panels { display: grid; }
.no-js .hero__panel { position: static; opacity: 1; transform: none; visibility: visible; pointer-events: auto; padding-block: 4rem; border-bottom: 1px solid var(--border); }
.no-js .hero__progress, .no-js .hero__scrollcue, .no-js .hero__scrim { display: none; }
.no-js .reveal { opacity: 1; transform: none; }
.no-js .card__more, .no-js .work-card__overlay { opacity: 1; }

/* =========================================================================
   20. Scroll-linked motion
   Three primitives driven from one rAF loop in main.js. Every one of them
   reads scroll position rather than firing once, so they play in reverse
   when the visitor scrolls back up.
   ========================================================================= */

/* Marquee band: giant type sliding horizontally as the page moves down. */
.marquee {
	overflow: hidden;
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	border-block: 1px solid var(--border);
	background: var(--bg);
	user-select: none;
}
.marquee__row {
	display: flex;
	width: max-content;
	will-change: transform;
}
.marquee__item {
	display: inline-flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
	font-size: clamp(2rem, 6vw, 5rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	line-height: 1.1;
	white-space: nowrap;
	color: var(--text);
}
.marquee__item::after {
	content: "";
	width: clamp(10px, 1.2vw, 18px);
	height: clamp(10px, 1.2vw, 18px);
	background: var(--accent);
	border-radius: 50%;
	flex: none;
}
.marquee__item--outline {
	color: transparent;
	/* These are real words, not texture: the stroke has to carry the contrast
	   the fill normally would. At 0.55 it clears AA against the page. */
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55);
}
.section--light .marquee__item--outline { -webkit-text-stroke-color: rgba(11, 11, 15, 0.55); }

/* Depth: elements drift at different rates as they cross the viewport. */
[data-parallax] { will-change: transform; }

/* Scrubbed sections expose --p (0 → 1) for CSS to map onto any property. */
[data-scrub] { --p: 0; }

/* The closing statement grows and settles as its section is traversed.
   --p defaults to 1 so the element is fully rendered when nothing is
   driving it — no JS, reduced motion, or simply outside a scrub parent. */
.scrub-grow { --p: 1; }
.scrub-grow {
	transform: scale(calc(0.94 + (var(--p) * 0.06)));
	opacity: calc(0.35 + (var(--p) * 0.65));
	transform-origin: center;
}

/* A rule that draws itself across the section. */
.scrub-rule { --p: 1; }
.scrub-rule {
	height: 1px;
	background: var(--accent);
	transform: scaleX(var(--p));
	transform-origin: left;
}

/* Accent words inside a headline, set in the serif for contrast. */
.hl-accent {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--accent);
	letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
	.marquee__row { transform: none !important; }
	.marquee { overflow-x: auto; }
	[data-parallax] { transform: none !important; }
	.scrub-grow { transform: none; opacity: 1; }
	.scrub-rule { transform: none; }
}

.no-js .scrub-grow { transform: none; opacity: 1; }
.no-js .scrub-rule { transform: none; }

/* =========================================================================
   21. Hero figures
   The side-panels used to leave half the screen empty. These fill it with
   something that means what the copy says, scrubbed by the panel's own
   progress (--panel-p, 0 → 1) so the drawing tracks the reader rather than
   looping on a timer. Defaults to 1 so it is complete without JS.
   ========================================================================= */
.hero__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	align-items: center;
	width: 100%;
}

.hero__figure {
	--panel-p: 1;
	margin: 0;
	width: 100%;
	max-width: min(560px, 100%);
	justify-self: center;
	color: var(--accent);
}
.hero__figure svg {
	width: 100%;
	height: auto;
	/* Without this the SVG has no intrinsic ratio to resolve height:auto
	   against and the whole figure collapses -- it was rendering 48x34px
	   inside a 460px box. */
	aspect-ratio: 420 / 300;
	overflow: visible;
	filter: drop-shadow(0 0 18px rgba(210, 255, 0, 0.28));
}

/* Impression volume filling up. */
.fig-bars rect {
	fill: currentColor;
	opacity: 0.58;
	transform-box: fill-box;
	transform-origin: bottom;
	/* Each bar starts a little after the one before it. */
	transform: scaleY(clamp(0.06, calc((var(--panel-p) * 9) - var(--i, 0)), 1));
}
.fig-bars rect:nth-child(1) { --i: 0; }
.fig-bars rect:nth-child(2) { --i: 0.5; }
.fig-bars rect:nth-child(3) { --i: 1; }
.fig-bars rect:nth-child(4) { --i: 1.5; }
.fig-bars rect:nth-child(5) { --i: 2; }
.fig-bars rect:nth-child(6) { --i: 2.5; }
.fig-bars rect:nth-child(7) { --i: 3; }
.fig-bars rect:nth-child(8) { --i: 3.5; opacity: 0.85; }

/* The line resolving out of the noise. pathLength="100" keeps the maths simple. */
.fig-line, .fig-draw {
	stroke-dasharray: 100;
	stroke-dashoffset: calc(100 - (var(--panel-p) * 100));
}
.fig-dot {
	fill: currentColor;
	opacity: clamp(0, calc((var(--panel-p) - 0.82) * 6), 1);
}

.fig-track { stroke: currentColor; opacity: 0.34; stroke-width: 2.5; stroke-dasharray: none; stroke-dashoffset: 0; }
.fig-nodes rect {
	fill: var(--bg);
	stroke: currentColor;
	stroke-width: 3;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(clamp(0, calc((var(--panel-p) * 4.4) - var(--n, 0)), 1));
}
.fig-nodes rect:nth-child(1) { --n: 0; }
.fig-nodes rect:nth-child(2) { --n: 1; }
.fig-nodes rect:nth-child(3) { --n: 2; }
.fig-nodes rect:nth-child(4) { --n: 3; }

@media (max-width: 900px) {
	.hero__split { grid-template-columns: 1fr; gap: 1.5rem; }
	.hero__figure { max-width: 300px; justify-self: start; order: 2; }
	.hero__panel--right .hero__split { justify-items: start; }
}
@media (max-width: 560px) {
	.hero__figure { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fig-bars rect, .fig-nodes rect { transform: none; }
	.fig-line, .fig-draw { stroke-dashoffset: 0; }
	.fig-dot { opacity: 1; }
}

/* =========================================================================
   22. Pointer
   A trailing ring, not a replacement cursor: the real pointer stays visible,
   so hit targets and accessibility settings are untouched. Fine pointers
   only, and never under reduced motion.
   ========================================================================= */
.cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1px solid var(--accent);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transform: translate3d(-100px, -100px, 0);
	transition: opacity 0.3s var(--ease), width 0.25s var(--ease), height 0.25s var(--ease),
		margin 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease);
	will-change: transform;
}
.cursor.is-active { opacity: 1; }
.cursor.is-hovering {
	width: 66px;
	height: 66px;
	margin: -33px 0 0 -33px;
	background: rgba(210, 255, 0, 0.14);
	border-color: var(--accent);
}
.cursor.is-pressed { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
	.cursor { display: none; }
}

/* =========================================================================
   23. Material
   Glass and depth for the boxes and controls.

   Deliberately built from layered gradients, an inset top highlight and a
   soft drop shadow rather than `backdrop-filter`. Over a near-flat page
   there is almost nothing behind a card to blur, so a real backdrop filter
   would cost a compositing layer per card — dozens of them — for an effect
   the eye cannot distinguish. Blur is kept for the few surfaces that do sit
   over moving content: the header, the mobile menu and the floating action.
   ========================================================================= */
:root {
	--glass-bg: linear-gradient(158deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 42%, rgba(0, 0, 0, 0.14));
	--glass-border: rgba(255, 255, 255, 0.13);
	--glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.15);
	--glass-lo: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
	--glass-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.95), 0 3px 10px -4px rgba(0, 0, 0, 0.6);
	--glass-shadow-lift: 0 30px 60px -28px rgba(0, 0, 0, 1), 0 6px 16px -6px rgba(0, 0, 0, 0.7);
}

.section--light {
	--glass-bg: linear-gradient(158deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6) 55%, rgba(11, 11, 15, 0.03));
	--glass-border: rgba(11, 11, 15, 0.14);
	--glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.95);
	--glass-lo: inset 0 -1px 0 rgba(11, 11, 15, 0.06);
	--glass-shadow: 0 18px 38px -26px rgba(11, 11, 15, 0.45), 0 2px 6px -3px rgba(11, 11, 15, 0.18);
	--glass-shadow-lift: 0 28px 54px -28px rgba(11, 11, 15, 0.55), 0 6px 14px -6px rgba(11, 11, 15, 0.22);
}

.card,
.quote,
.why,
.industry,
.work-card__media,
.form__status,
.contact-aside__block {
	background-color: var(--card);
	background-image: var(--glass-bg);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-hi), var(--glass-lo), var(--glass-shadow);
}

.contact-aside__block {
	border-radius: var(--radius);
	padding: 1.25rem;
}

.card, .quote, .why, .work-card__media {
	transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
		border-color 0.45s var(--ease), background-color 0.45s var(--ease);
}

.card:hover,
.quote:hover,
.why:hover,
.work-card:hover .work-card__media {
	transform: translateY(-4px);
	border-color: var(--border-strong);
	box-shadow: var(--glass-hi), var(--glass-lo), var(--glass-shadow-lift);
}

.industry {
	background-color: transparent;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
		color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.industry:hover { transform: translateY(-2px); box-shadow: var(--glass-hi), var(--glass-shadow-lift); }

/* Controls: buttons catch light from above, fields are recessed. */
.btn {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 58%);
	box-shadow: var(--glass-hi), 0 10px 22px -12px rgba(0, 0, 0, 0.85), 0 2px 5px -2px rgba(0, 0, 0, 0.5);
}
.btn:hover {
	box-shadow: var(--glass-hi), 0 16px 30px -14px rgba(0, 0, 0, 0.95), 0 3px 8px -3px rgba(0, 0, 0, 0.6);
}
.btn:active { transform: translateY(1px); box-shadow: var(--glass-lo), 0 4px 10px -6px rgba(0, 0, 0, 0.8); }

.btn--ghost {
	background-image: var(--glass-bg);
	border-color: var(--glass-border);
}

.field input, .field select, .field textarea {
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.02));
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.field input:focus, .field select:focus, .field textarea:focus {
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(210, 255, 0, 0.16);
}

/* These few genuinely sit over moving content, so they get real blur. */
.wa-float {
	background-image: var(--glass-bg);
	box-shadow: var(--glass-hi), var(--glass-shadow);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {
	.card:hover, .quote:hover, .why:hover, .industry:hover,
	.work-card:hover .work-card__media, .btn:active { transform: none; }
}

/* =========================================================================
   24. Clients and project filtering
   ========================================================================= */
.clients {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.client__link {
	display: grid;
	gap: 0.85rem;
	padding: clamp(1.1rem, 2vw, 1.5rem);
	min-height: 150px;
	align-content: space-between;
	text-decoration: none;
	border-radius: var(--radius);
	border: 1px solid var(--glass-border);
	background-color: var(--card);
	background-image: var(--glass-bg);
	box-shadow: var(--glass-hi), var(--glass-lo), var(--glass-shadow);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.client__link:hover {
	transform: translateY(-4px);
	border-color: var(--border-strong);
	box-shadow: var(--glass-hi), var(--glass-lo), var(--glass-shadow-lift);
}

.client__mark { display: flex; align-items: center; min-height: 52px; }
.client__logo {
	max-height: 46px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	/* Logos arrive in every colour; neutralising them keeps the strip calm,
	   and restoring colour on hover rewards the pointer. */
	filter: grayscale(1) contrast(0.9);
	opacity: 0.75;
	transition: filter 0.4s var(--ease), opacity 0.4s var(--ease);
}
.client__link:hover .client__logo, .client-card:hover .client__logo { filter: none; opacity: 1; }

.client__wordmark {
	font-size: var(--step-1);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--text);
}

.client__meta { display: grid; gap: 0.2rem; }
.client__name { font-size: var(--step--1); font-weight: 600; color: var(--text); }
.client__industry {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.client-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}
.client-card {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	text-decoration: none;
	border-radius: var(--radius);
	border: 1px solid var(--glass-border);
	background-color: var(--card);
	background-image: var(--glass-bg);
	box-shadow: var(--glass-hi), var(--glass-lo), var(--glass-shadow);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.client-card:hover { transform: translateY(-4px); box-shadow: var(--glass-hi), var(--glass-lo), var(--glass-shadow-lift); }
.client-card__mark { display: flex; align-items: center; min-height: 56px; }
.client-card__title { font-size: var(--step-1); margin: 0; }
.client-card__meta { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
.client-card__text { color: var(--muted); font-size: var(--step--1); margin: 0; }

.client-hero { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.client-hero__mark { display: flex; align-items: center; }
.client-hero .client__logo { max-height: 64px; filter: none; opacity: 1; }
.client-hero .page-hero__title { margin: 0; }

/* Service filter */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.filter {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.1rem;
	font: inherit;
	font-size: var(--step--1);
	font-weight: 500;
	color: var(--muted);
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--pill);
	cursor: pointer;
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
		background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.filter:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-2px); }
.filter.is-selected {
	color: var(--btn-ink, #0B0B0F);
	background: var(--accent);
	border-color: var(--accent);
}
.section--light .filter.is-selected { color: #F4F4F0; }
.filter__count {
	font-variant-numeric: tabular-nums;
	font-size: 0.72rem;
	opacity: 0.7;
}

.work-card.is-hidden { display: none; }
.work-card__client {
	color: var(--muted);
	font-size: var(--step--1);
	margin: 0.35rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.client__link:hover, .client-card:hover, .filter:hover { transform: none; }
}

/* =========================================================================
   25. WooCommerce
   The store is revenue-bearing, so it inherits the design tokens rather than
   being left to the plugin's own stylesheet.
   ========================================================================= */
.woo { --wc-gap: clamp(1rem, 2vw, 1.75rem); }

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wc-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	padding: 1.25rem;
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	background-color: var(--card);
	background-image: var(--glass-bg);
	box-shadow: var(--glass-hi), var(--glass-lo), var(--glass-shadow);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--glass-hi), var(--glass-lo), var(--glass-shadow-lift);
}
.woocommerce ul.products li.product a img { border-radius: var(--radius-sm); margin-bottom: 1rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--step-0) !important;
	font-weight: 600;
	padding: 0 !important;
	color: var(--text);
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--text); font-weight: 600; }
.woocommerce ul.products li.product .price del, .woocommerce div.product p.price del { color: var(--muted); }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--accent);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 58%);
	color: var(--btn-ink, #0B0B0F);
	border-radius: var(--pill);
	padding: 0.85rem 1.6rem;
	font-weight: 600;
	font-size: var(--step--1);
	box-shadow: var(--glass-hi), 0 10px 22px -12px rgba(0, 0, 0, 0.85);
	transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background-color: var(--accent-hover);
	color: var(--btn-ink, #0B0B0F);
	transform: translateY(-1px);
}

.woocommerce div.product .product_title { font-size: var(--step-3); }
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--border); padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--text); }

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-cart table.cart td.actions {
	border-color: var(--border);
	color: var(--text);
}
.woocommerce table.shop_table {
	border-radius: var(--radius);
	background-color: var(--card);
	background-image: var(--glass-bg);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	padding: 0.85rem 1rem;
	min-height: 46px;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
}
.woocommerce form .form-row label, .woocommerce-billing-fields label { color: var(--muted); font-size: var(--step--1); }

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	background: var(--card);
	border-top-color: var(--accent);
	color: var(--text);
	border-radius: var(--radius-sm);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--accent); }
.woocommerce .woocommerce-error { border-top-color: #FF5A36; }

.woocommerce-store-notice, p.demo_store { background: var(--accent); color: #0B0B0F; }
.woocommerce span.onsale {
	background: var(--accent);
	color: #0B0B0F;
	border-radius: var(--pill);
	font-weight: 700;
}
.woocommerce .woocommerce-breadcrumb { color: var(--muted); font-size: var(--step--1); }
.woocommerce .woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce nav.woocommerce-pagination ul { border-color: var(--border); }
.woocommerce nav.woocommerce-pagination ul li { border-color: var(--border); }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { color: var(--text); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--accent); color: #0B0B0F; }

/* Footer: brand column, three link columns, direct contact. */
.footer__brand-col { max-width: 34ch; }
.footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}
.footer__social a {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.9rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: var(--pill);
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.footer__social a:hover { color: var(--text); border-color: var(--border-strong); background: var(--card); }

.footer__contact a { text-decoration: none; }
.footer__address, .footer__hours {
	color: var(--muted);
	font-size: var(--step--1);
	line-height: 1.6;
	max-width: 30ch;
}
.footer__address { margin-top: 0.35rem; }
.footer__credit { color: var(--muted); }

@media (max-width: 1024px) {
	.footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.footer__top { grid-template-columns: 1fr; }
}

/* =========================================================================
   26. Light surfaces in block content
   Sections that paint their own light background need dark type, or they
   inherit the theme's near-white body colour and disappear. The class is
   added server-side by inc/block-compat.php.
   ========================================================================= */
.adtrendo-light-surface {
	color: #0B0B0F;
}
.adtrendo-light-surface :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th, figcaption, blockquote, strong, em, span) {
	color: inherit;
}
/* A dark panel nested inside a light one has to take its ink back, or it
   inherits the light section's near-black text. Tagged at runtime by
   markLightSurfaces() in main.js. */
.adtrendo-dark-surface,
.adtrendo-light-surface .adtrendo-dark-surface {
	color: #F5F5F2;
}
.adtrendo-light-surface .adtrendo-dark-surface :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th, figcaption, blockquote, strong, em, span) {
	color: inherit;
}
.adtrendo-light-surface .adtrendo-dark-surface :where(a):not(.btn):not(.wp-block-button__link) {
	color: var(--accent);
}

/* Rating stars and required-field markers carried over from the plugins sit
   just under the contrast floor on their respective surfaces. */
.adtrendo-light-surface .uag-star { color: #B26A00; }
.site-main .wpforms-required-label { color: #FF7A7B; }

.adtrendo-light-surface :where(a):not(.btn):not(.wp-block-button__link) {
	color: var(--accent-ink);
	text-decoration-color: currentColor;
}
.adtrendo-light-surface :where(.wp-block-button__link) {
	color: #F4F4F0;
}

/* =========================================================================
   27. Block layout inside page content
   A 68ch measure is right for an article and wrong for a designed page. The
   old approach clamped `.prose` and then tried to break blocks back out with
   `calc(50% - 50vw)` — which only works when the container is centred in the
   viewport. `.prose` is a narrow column inside a wider centred `.wrap`, so
   the breakout landed 239px off.

   Instead the container runs full width and the *text* keeps the measure.
   Layout blocks then size themselves, and `alignfull` breaks out from a
   genuinely centred parent.
   ========================================================================= */
.prose { max-width: none; }

/* Readable line length for running text, not for layout containers. */
.prose > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre, table) {
	max-width: 68ch;
	margin-inline: auto;
}

.prose > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.prose > .alignwide {
	width: min(var(--maxw), 100vw - (var(--gutter) * 2));
	max-width: 100vw;
	margin-inline: calc(50% - min(var(--maxw) / 2, 50vw - var(--gutter)));
}

/* Cover blocks carry their own padding. */
.prose > .wp-block-cover { max-width: none; }

/* Full-bleed sections still hold their inner content to the grid. */
.prose > .alignfull > :where(.wp-block-cover__inner-container, .wp-block-group__inner-container) {
	max-width: var(--maxw);
	margin-inline: auto;
}

/* =========================================================================
   28. Buttons inside page content
   Content buttons arrived with the old palette — an off-brand blue, and
   white on a light green at 2.03:1. Normalised to the theme's button
   language: first button primary, the rest outline.
   ========================================================================= */
.site-main .wp-block-buttons .wp-block-button__link,
.site-main .wp-block-button .wp-block-button__link {
	background-color: var(--accent) !important;
	color: #0B0B0F !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 58%);
	border: 1px solid transparent;
	border-radius: var(--pill) !important;
	padding: 0.95rem 1.9rem;
	font-weight: 600;
	font-size: var(--step--1);
	letter-spacing: 0.02em;
	box-shadow: var(--glass-hi), 0 10px 22px -12px rgba(0, 0, 0, 0.85);
	transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.site-main .wp-block-buttons .wp-block-button__link:hover,
.site-main .wp-block-button .wp-block-button__link:hover {
	background-color: var(--accent-hover) !important;
	transform: translateY(-1px);
}

/* Anything after the first reads as the secondary action. */
.site-main .wp-block-buttons .wp-block-button:not(:first-child) .wp-block-button__link,
.site-main .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	background-image: none;
	color: var(--text) !important;
	border-color: var(--border-strong);
	box-shadow: none;
}
.site-main .wp-block-buttons .wp-block-button:not(:first-child) .wp-block-button__link:hover,
.site-main .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.06) !important;
	border-color: var(--text);
}

/* On the bone panels the same buttons need the inverse ink. */
.section--light .wp-block-buttons .wp-block-button:not(:first-child) .wp-block-button__link,
.adtrendo-light-surface .wp-block-buttons .wp-block-button:not(:first-child) .wp-block-button__link {
	color: #0B0B0F !important;
	border-color: rgba(11, 11, 15, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.site-main .wp-block-button__link:hover { transform: none; }
}

/* =========================================================================
   29. Pages that bring their own light background
   Migrated pages can carry the previous theme's CSS inline and paint the page
   light. That content is designed for a light page and reads correctly; it is
   the theme's chrome that fails, near-white on white. Swapping the tokens
   re-skins header and footer instead of overriding the page's own design.
   ========================================================================= */
body.adtrendo-light-page {
	--bg: #FFFFFF;
	--bg-2: #F4F4F0;
	--card: #F4F4F0;
	--text: #0B0B0F;
	--muted: rgba(11, 11, 15, 0.62);
	--border: rgba(11, 11, 15, 0.12);
	--border-strong: rgba(11, 11, 15, 0.3);
	--accent: var(--accent-ink);
	--glass-bg: linear-gradient(158deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
	--glass-border: rgba(11, 11, 15, 0.14);
	--glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9);
	--glass-lo: inset 0 -1px 0 rgba(11, 11, 15, 0.06);
	--glass-shadow: 0 18px 38px -26px rgba(11, 11, 15, 0.45);
}

body.adtrendo-light-page .site-header.is-solid {
	background: rgba(255, 255, 255, 0.88);
	border-bottom-color: rgba(11, 11, 15, 0.12);
}
body.adtrendo-light-page .site-footer {
	background: #0B0B0F;
	--text: #F5F5F2;
	--muted: #A7A7AD;
	--border: rgba(255, 255, 255, 0.1);
	--border-strong: rgba(255, 255, 255, 0.28);
	--accent: #D2FF00;
	color: var(--text);
}
body.adtrendo-light-page .btn--primary,
body.adtrendo-light-page .nav .btn { --btn-ink: #F4F4F0; }

/* =========================================================================
   30. Small-screen containment
   Page titles set in large display type, and wide media inside migrated
   content, are the two things that push a phone viewport sideways.
   ========================================================================= */
/* Migrated copy contains run-on tokens with no break opportunity (a bare URL,
   or "Adtrendo.comPowered By:" where two sentences were joined). Left alone
   these widen the document, which in turn re-sizes every fixed element to the
   overflowing width. Break them only when they genuinely cannot fit. */
.site-main :where(p, li, dd, dt, td, th, figcaption, blockquote, a) {
	overflow-wrap: break-word;
}

@media (max-width: 860px) {
	.page-hero__title,
	.hero__title,
	.section__title,
	.cta__title,
	.work-card__title,
	.client-card__title {
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	.site-main :where(table, pre, iframe, embed, object) {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	.site-main :where(img, video, canvas, svg) { max-width: 100%; height: auto; }
}

/* =========================================================================
   31. Replacement styling for migrated sections
   The pages above shipped their own CSS for custom section markup. With that
   removed, these classes would render as bare stacked divs — so they inherit
   the theme's card, chip and heading language instead.
   ========================================================================= */
.site-main :where(.adp-card, .adp-svc, .cs-card, .cta-card, .testi, .ebook,
	.guide, .countdown-box, .adp-rv, .pricing-card, .plan) {
	background-color: var(--card);
	background-image: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	box-shadow: var(--glass-hi), var(--glass-lo), var(--glass-shadow);
	padding: clamp(1.4rem, 2.4vw, 2rem);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-main :where(.adp-card, .adp-svc, .cs-card, .cta-card, .testi):hover {
	transform: translateY(-3px);
	box-shadow: var(--glass-hi), var(--glass-lo), var(--glass-shadow-lift);
}

.site-main :where(.section-head, .cs-section > h2, .cs-section > h3) {
	max-width: 62ch;
	margin-inline: auto;
	text-align: center;
}

.site-main :where(.adt-chip, .chip, .badge, .tag) {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--border);
	border-radius: var(--pill);
	font-size: var(--step--1);
	color: var(--muted);
}

.site-main :where(.adt-btn-primary, .btn-primary) {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--accent);
	color: #0B0B0F;
	border: 1px solid transparent;
	border-radius: var(--pill);
	padding: 0.9rem 1.7rem;
	font-weight: 600;
	text-decoration: none;
}
.site-main :where(.adt-btn-primary, .btn-primary):hover { background: var(--accent-hover); }

/* Migrated copy whose inline colour failed on the dark canvas; see
   adtrendo_retone_dim_text(). Surface-aware so it also works on bone panels. */
.site-main .adtrendo-dim { color: var(--muted); }
.site-main :where(.section--light, .adtrendo-light-surface) .adtrendo-dim { color: rgba(11, 11, 15, 0.68); }

/* Legacy single-dash modifiers (btn-ghost, btn-outline) meant an outline
   button; without a rule they inherit .btn's solid lime fill. */
.site-main :where(.btn-ghost, .btn-outline) {
	--btn-bg: transparent;
	--btn-ink: var(--accent);
	background: transparent;
	background-image: none;
	color: var(--accent);
	border: 1px solid var(--border-strong);
	box-shadow: none;
}
.site-main :where(.btn-ghost, .btn-outline):hover {
	background: rgba(210, 255, 0, 0.08);
	border-color: var(--accent);
}
.site-main :where(.btn-sm) { padding: 0.6rem 1.1rem; font-size: var(--step--1); }

.site-main :where(.btn-dark, .adt-btn-secondary) {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: var(--pill);
	padding: 0.9rem 1.7rem;
	font-weight: 600;
	text-decoration: none;
}

.site-main :where(.compare-cols, .adp-grid, .cs-grid, .adt-grid) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}

.site-main :where(.adt-progress-step) {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--muted);
	font-size: var(--step--1);
}
.site-main :where(.adt-progress-step.active) { color: var(--text); }

/* Decorative leftovers that only made sense with the old stylesheet. */
.site-main :where(.tl-line, .adt-dotgrid, .pin) { display: none; }

/* The pricing page paints a decorative background into #adp-canvas and its
   script sizes that canvas to the document. The old stylesheet took it out of
   flow; with that gone the canvas occupies real height, which grows the
   document, which the script answers by growing the canvas again. It settled
   at 1,421,026px tall and a drawing buffer no browser should be asked for.
   The theme paints its own background, so the leftover is simply retired. */
.site-main :where(#adp-canvas, #adp-wrap > canvas) { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.site-main :where(.adp-card, .adp-svc, .cs-card, .cta-card, .testi):hover { transform: none; }
}

/* =========================================================================
   32. Layout for migrated pages whose stylesheet was stripped
   Five case-study pages and the GMB page shipped their own design system,
   removed in adtrendo_strip_legacy_styles(). Their markup survives, so the
   grids and cards are rebuilt here in this theme's language rather than
   left as flat stacks of text.
   ========================================================================= */

/* --- Class names the old pages share with this theme ------------------- */
/* .nav, .hero and .wrap inside content are the migrated page's own, not the
   site chrome. Left alone, content .nav goes position:fixed and invisible on
   mobile because it inherits the site header's drawer rules. */
.site-main .nav {
	position: static;
	inset: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	max-height: none;
	padding: 0;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 0;
	transform: none;
	opacity: 1;
	visibility: visible;
	overflow: visible;
}
.site-main .nav ul { flex-direction: row; flex-wrap: wrap; gap: 1.25rem; }
.site-main .nav li { border: 0; }
.site-main .nav a:not(.btn) { display: inline; padding: 0; }
.site-main .hero { min-height: 0; height: auto; position: static; }

/* --- Shared card + grid primitives ------------------------------------- */
.site-main :where(.adcs-card, .adcs-kpi, .adcs-step, .adcs-insight, .adcs-meta-item,
	.sol-card, .who-card, .benefit-card, .faq-item, .cta-card) {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	border-radius: var(--radius, 18px);
	padding: 1.6rem 1.5rem;
	box-shadow: var(--glass-lo);
}
.site-main :where(.adcs-grid, .adcs-kpi-grid, .adcs-steps, .adcs-locs, .adcs-meta,
	.solution-grid, .who-grid, .benefits-grid, .cta-cards, .faq-list, .hero-grid) {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	margin-block: 1.75rem;
	padding: 0;
	list-style: none;
}
.site-main :where(.faq-list, .adcs-steps) { grid-template-columns: 1fr; }
.site-main :where(.hero-grid) { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: center; }

/* Card interiors: the whole card is often wrapped in a link, so the lime
   underline from .prose a has to be undone on everything but the CTA. */
.site-main .prose a:where(.adcs-card, .sol-card, .who-card, .benefit-card, .cta-card),
.site-main :where(.adcs-card, .sol-card, .who-card, .benefit-card) a {
	color: inherit;
	text-decoration: none;
	display: block;
}
.site-main :where(.adcs-card, .sol-card, .who-card, .benefit-card) :where(h2, h3, h4) { color: var(--text); }
.site-main :where(.adcs-card-desc, .adcs-kpi-lbl, .adcs-card-kpi-lbl, .adcs-stat-label,
	.adcs-meta-lbl, .adcs-section-label, .adcs-insight-label, .tl-body) { color: var(--muted); }
.site-main :where(.adcs-card-cat, .adcs-tag, .adcs-hero-badge, .adcs-pill, .adcs-section-label,
	.benefit-num, .tl-num, .sol-ic) { color: var(--accent); }
.site-main :where(.adcs-stat-num, .adcs-kpi-val, .adcs-card-kpi-val, .adcs-grad) {
	color: var(--accent);
	font-size: var(--step-2);
	font-weight: 700;
	line-height: 1.1;
}
.site-main .adcs-orange { color: var(--accent-2, var(--accent)); }
.site-main :where(.adcs-card-cta, .adcs-cta-btn) { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }

/* KPI clusters sit inside a card, so they stay horizontal. */
.site-main :where(.adcs-card-kpis, .adcs-strip-inner, .adcs-pills, .hero-trust, .adcs-cta-btns) {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	align-items: center;
	margin-block: 1rem;
	padding: 0;
	list-style: none;
}
.site-main :where(.adcs-pill) {
	display: inline-flex;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--pill);
	font-size: var(--step--1);
}

/* Section rhythm the old stylesheet supplied. */
.site-main :where(.adcs-section, .adcs-hero, .adcs-cta, .benefits, .adcs-strip) {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.site-main :where(.adcs-section-hdr) { margin-bottom: 1.5rem; }
.site-main .adcs-disclaimer { color: var(--muted); font-size: var(--step--1); }
.site-main :where(.faq-q) { font-weight: 600; color: var(--text); }
.site-main :where(.faq-a) { color: var(--muted); margin-top: 0.5rem; }
.site-main .tl-item { display: flex; gap: 1rem; align-items: flex-start; margin-block: 1rem; }

/* The old CSS broke these out of the container with 100vw + negative margins;
   the theme's own .alignfull handling covers that now. */
.site-main :where(.adcs, .adcs-c) { width: auto; left: auto; right: auto; margin-inline: 0; }

@media (prefers-reduced-motion: reduce) {
	.site-main :where(.adcs-card, .sol-card, .who-card, .benefit-card):hover { transform: none; }
}

/* FAQ accordions are <button>s. With the old stylesheet gone they fall back to
   the UA's buttonface grey, which put near-white text on #EFEFEF. */
.site-main :where(.faq-q) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.1rem 0;
	background: none;
	border: 0;
	color: var(--text);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}
.site-main :where(.faq-q .plus) { color: var(--accent); font-size: var(--step-1); line-height: 1; flex: none; }
.site-main :where(.faq-item) { padding: 0 1.25rem; }

/* The old CTA buttons carried their own fill; without it they read as links. */
.site-main :where(.adcs-cta-btn) {
	padding: 0.9rem 1.7rem;
	border-radius: var(--pill);
	border: 1px solid var(--border-strong);
	text-decoration: none;
}
.site-main :where(.adcs-cta-btn--primary) {
	background: var(--accent);
	color: #0B0B0F;
	border-color: transparent;
}
.site-main :where(.adcs-cta-btn--primary):hover { background: var(--accent-hover); }
.site-main :where(.adcs-cta-btn--ghost) { color: var(--text); }
.site-main :where(.adcs-cta-btn--ghost):hover { background: rgba(255, 255, 255, 0.06); border-color: var(--text); }

/* =========================================================================
   33. Mobile containment for migrated block content
   Two measured causes, both specific:

   1. Spectra gives some blocks an entrance animation whose initial state is
      scale(1.2) + opacity:0. Below the fold it never triggers, so the block
      sits 1.2x its own width -- 410px inside a 390px viewport. Clipping the
      main column contains it without touching the animation, which still
      plays normally once scrolled into view. `clip` rather than `hidden` so
      no scroll container is created and sticky positioning still works.

   2. .services-grid hard-codes three 90px columns; its cards need 155px, so
      the third column lands at 435px. Re-flowed to fit the space available.
   ========================================================================= */
@media (max-width: 860px) {
	.site-main { overflow-x: clip; }

	.site-main .services-grid {
		/* 240px minimum so a phone gets one readable column rather than two
		   140px ones that wrap the copy to a word per line. */
		grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
		gap: 1.25rem;
	}
}

/* =========================================================================
   34. Contrast fixes for migrated block content
   Three measured failures, each with a different owner. Spectra's generated
   stylesheet is printed after this file, so ties go to it -- hence the
   !important on the two rules that have to beat it.
   ========================================================================= */

/* The secondary button in the CTA card was taking the light-surface ink
   (#0B0B0F) while sitting on that card's navy panel: 1.07:1. The nested dark
   panel has to win over its light parent. */
.site-main .adtrendo-dark-surface .wp-block-buttons .wp-block-button:not(:first-child) .wp-block-button__link,
.site-main .adtrendo-dark-surface .wp-block-button.is-style-outline .wp-block-button__link {
	color: #F5F5F2 !important;
	border-color: rgba(255, 255, 255, 0.42);
}

/* Rating stars: Spectra's amber reads 1.86:1 on its own near-white panel. */
.site-main .adtrendo-light-surface .uag-star { color: #9A5B00 !important; }

/* WooCommerce and WPForms mark required fields in a red that sits at 2.53:1
   on the dark canvas. */
/* WooCommerce scopes its own rule as `.woocommerce form .form-row .required`,
   which outranks anything reasonable here. Narrowed to the marker element:
   Spectra puts `.required` on the whole <label>, so the unrestricted version
   turned every field label salmon. */
.site-main :where(abbr.required, span.required, .wpforms-required-label) { color: #FF7A7B !important; }

/* Case studies with no imagery lead with their headline figure instead of an
   empty media well. See template-parts/home/work.php. */
.work-card__stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 0.35rem;
	width: 100%;
	height: 100%;
	padding: 2rem;
	background: var(--glass-bg, linear-gradient(158deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)));
	border-bottom: 1px solid var(--border);
}
.work-card__stat-value {
	font-size: clamp(2.6rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1;
	color: var(--accent);
	letter-spacing: -0.02em;
}
.work-card__stat-label {
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

/* =========================================================================
   35. Design layer for migrated pages
   The pages keep their own content and remain editable in WordPress; this
   gives that content the theme's visual language instead of the previous
   theme's. Written as a layer over the block markup so nothing in the
   database has to change.
   ========================================================================= */

/* --- Page heroes ------------------------------------------------------- */
/* Cover blocks arrived with pale or absent overlays, so headings sat
   directly on busy stock photography -- unreadable, and nothing like the
   rest of the site. A consistent scrim gives every page the same opening. */
.site-main .wp-block-cover {
	position: relative;
	min-height: clamp(340px, 46vw, 560px);
	padding-block: clamp(3rem, 7vw, 6rem);
	border-radius: 0;
	isolation: isolate;
}
.site-main .wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(11, 11, 15, 0.55) 0%, rgba(11, 11, 15, 0.78) 62%, var(--bg) 100%),
		radial-gradient(120% 90% at 15% 40%, rgba(11, 11, 15, 0.5), transparent 70%);
	pointer-events: none;
}
.site-main .wp-block-cover > :where(.wp-block-cover__inner-container, .wp-block-cover__image-background, video) {
	position: relative;
	z-index: 2;
}
.site-main .wp-block-cover__image-background { z-index: 0; }

/* Hero copy takes the theme's display voice. */
.site-main .wp-block-cover :where(h1, h2) {
	font-family: var(--font-display, inherit);
	letter-spacing: -0.02em;
	line-height: 1.04;
	text-wrap: balance;
}
.site-main .wp-block-cover :where(p) { text-wrap: pretty; }

/* --- Media ------------------------------------------------------------- */
/* Stock imagery arrived as raw rectangles; framing it stops the page
   reading as a slide deck pasted into a website. */
.site-main :where(.wp-block-image, .wp-block-uagb-image) img {
	border-radius: var(--radius, 18px);
	display: block;
	height: auto;
}
.site-main .wp-block-cover img { border-radius: 0; }

/* An image floated beside nothing leaves a dead column; centre it instead. */
.site-main :where(.wp-block-image.alignleft, .wp-block-image.alignright) {
	float: none;
	margin-inline: auto;
}

/* --- Rhythm ------------------------------------------------------------ */
/* Migrated sections butt against each other with no breathing room. */
.site-main .prose > :where(.wp-block-group, .wp-block-uagb-container, .wp-block-cover, .wp-block-columns) {
	margin-block: clamp(2rem, 5vw, 4rem);
}

/* --- Lists ------------------------------------------------------------- */
.site-main .prose ul:not([class]) { list-style: none; padding-left: 0; }
.site-main .prose ul:not([class]) > li {
	position: relative;
	padding-left: 1.6rem;
	margin-block: 0.5rem;
}
.site-main .prose ul:not([class]) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}

/* --- Tables ------------------------------------------------------------ */
.site-main .prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step--1);
}
.site-main .prose :where(th, td) {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--border);
	text-align: left;
}
.site-main .prose th { color: var(--text); font-weight: 600; letter-spacing: 0.04em; }

/* --- Icons ------------------------------------------------------------- */
/* Spectra sizes its inline icons from generated CSS. Where that sizing is
   missing the SVG has no intrinsic dimensions at all and expands to fill the
   column -- one tick on the Google Ads page rendered 1440x1646px. These
   wrappers only ever hold icons, so a type-relative size is safe. */
.site-main :where(.uagb-icon-list__source-wrap, .uagb-icon-list__source-icon) svg {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}
.site-main :where(.uagb-ifb-icon, .uagb-ifb-icon-wrap, .sol-ic) svg {
	width: clamp(2rem, 3vw, 2.75rem);
	height: clamp(2rem, 3vw, 2.75rem);
	flex: none;
}
/* Backstop for unsized icons in migrated content. Scoped to .prose -- the
   editor-authored column -- because an unscoped version also caught the
   theme's own hero figures and pinned them to 48px. */
.site-main .prose :where(li, .uagb-icon-list__label-wrap, .uagb-ifb-content) > svg,
.site-main .prose svg:not([width]):not([height]):not(.adtrendo-graphic) {
	max-width: 3rem;
	max-height: 3rem;
}
.site-main .uagb-icon-list__source-wrap { display: inline-flex; align-items: center; }

/* =========================================================================
   36. Migrated blocks in the theme's language
   The pages were built as pale panels with black text and black icons. Read
   inside this theme they look like a different site pasted in. This re-skins
   those panels onto the dark canvas, turns the block plugin's boxes into the
   theme's cards, and puts the accent back into the icons.

   The .adtrendo-light-surface hook is applied at runtime by main.js to any
   panel that paints itself light; re-skinning through that hook means it
   follows the content wherever it appears rather than naming page classes.
   ========================================================================= */
.site-main .adtrendo-light-surface:not(.section--light),
.site-main :where(.wp-block-uagb-container, .wp-block-group).adtrendo-light-surface:not(.section--light) {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--text);
}

/* Ink handed back to the dark canvas. */
.site-main .adtrendo-light-surface :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th, figcaption, blockquote, strong, em, span) {
	color: inherit;
}
.site-main .adtrendo-light-surface :where(a):not(.btn):not(.wp-block-button__link) { color: var(--accent); }
.site-main .adtrendo-light-surface .adtrendo-dim { color: var(--muted); }
.site-main .adtrendo-light-surface .uag-star { color: #F0AD4E !important; }
/* Panels that used to be pale are now dark, so the light-surface button ink
   from section 28 is no longer right: it painted the outline button's label
   near-black on a dark panel (1:1). The filled button keeps dark ink because
   it still sits on lime. */
.site-main .adtrendo-light-surface .wp-block-buttons .wp-block-button:first-child .wp-block-button__link:not(.is-style-outline) {
	color: #0B0B0F;
}
.site-main .adtrendo-light-surface .wp-block-buttons .wp-block-button:not(:first-child) .wp-block-button__link,
.site-main .adtrendo-light-surface .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--text) !important;
	border-color: var(--border-strong);
}

/* --- Boxes become cards ------------------------------------------------ */
.site-main :where(.wp-block-uagb-info-box, .uagb-infobox__content-wrap) {
	background: var(--glass-bg, linear-gradient(158deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)));
	border: 1px solid var(--border);
	border-radius: var(--radius, 18px);
	padding: clamp(1.4rem, 2.4vw, 2rem);
	box-shadow: var(--glass-lo);
	height: 100%;
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-main .wp-block-uagb-info-box:hover { border-color: var(--border-strong); transform: translateY(-2px); }
/* A card inside a card reads as a seam; only the outer one carries chrome. */
.site-main .wp-block-uagb-info-box .uagb-infobox__content-wrap {
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
}

.site-main :where(.uagb-ifb-title, .uagb-ifb-title-prefix) { color: var(--text); }
.site-main .uagb-ifb-title-prefix { color: var(--accent); font-weight: 700; letter-spacing: 0.08em; }
.site-main .uagb-ifb-desc { color: var(--muted); }

/* --- Icons take the accent -------------------------------------------- */
/* Spectra writes a per-block rule for each icon colour, which outranks
   anything sane here -- the service icons came through in Google blue. The
   CTA arrow inside a button is deliberately excluded so it keeps button ink. */
.site-main :where(.uagb-ifb-icon, .uagb-ifb-icon-wrap, .uagb-icon-list__source-wrap, .sol-ic) svg,
.site-main :where(.uagb-ifb-icon, .uagb-ifb-icon-wrap, .uagb-icon-list__source-wrap, .sol-ic) svg path {
	fill: var(--accent) !important;
	color: var(--accent) !important;
}

/* Tick lists need room to breathe now the marks carry colour. */
.site-main .uagb-icon-list__wrapper .uagb-icon-list__source-wrap { margin-right: 0.55rem; }
.site-main .uagb-icon-list-repeater { margin-block: 0.4rem; }

/* =========================================================================
   37. Card grids in migrated content
   The service cards are grid items that each hold an info box plus its own
   tick list. Chrome therefore belongs on the grid item, not the info box --
   otherwise the card closes above its own list. The grids were also being
   held to the reading measure, so cards that were meant to sit three across
   were stacking full width.
   ========================================================================= */
.site-main :where(.services-grid, .wp-block-group.services-grid) {
	max-width: none;
	width: 100%;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: stretch;
}

/* The grid item carries the card. */
.site-main .services-grid > .wp-block-uagb-container,
.site-main .wp-block-uagb-container:has(> .uagb-container-inner-blocks-wrap > .wp-block-uagb-info-box),
.site-main .wp-block-uagb-container:has(> .uagb-container-inner-blocks-wrap > .uagb-infobox__content-wrap) {
	background: var(--glass-bg, linear-gradient(158deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)));
	border: 1px solid var(--border);
	border-radius: var(--radius, 18px);
	padding: clamp(1.4rem, 2.4vw, 2rem);
	box-shadow: var(--glass-lo);
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-main .services-grid > .wp-block-uagb-container:hover {
	border-color: var(--border-strong);
	transform: translateY(-2px);
}

/* ...so the box inside it stops drawing a second one. */
.site-main :where(.wp-block-uagb-info-box, .uagb-infobox__content-wrap) {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.site-main .services-grid > .wp-block-uagb-container:hover { transform: none; }
}

/* A card grid inherits the reading measure from the constrained-layout
   wrappers above it, so three-across rows were rendering ~760px wide inside a
   1440px page. Only wrappers that actually hold a grid are widened; running
   text keeps its measure. */
.site-main :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-uagb-container):has(> .services-grid),
.site-main :where(.wp-block-group, .wp-block-group__inner-container):has(> * > .services-grid) {
	max-width: none;
	width: 100%;
}

/* Ink flipped by fixInk() in main.js, where a colour the old theme chose for a
   pale panel no longer reads on the surface it now sits on. */
.adtrendo-ink-light { color: var(--text) !important; }
.adtrendo-ink-dark { color: #0B0B0F !important; }
:where(.adtrendo-ink-light, .adtrendo-ink-dark).adtrendo-dim { color: var(--muted) !important; }

/* =========================================================================
   38. Components for redesigned pages
   The migrated pages are rebuilt from their own text into the theme's
   sections (see tools/compose.py). These are the few pieces the homepage
   never needed: feature ticks inside a card, a pull quote, and the small
   notes that sit under a heading or a call to action.
   ========================================================================= */
.card__list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.45rem;
}
.card__list li {
	position: relative;
	padding-left: 1.5rem;
	font-size: var(--step--1);
	color: var(--muted);
}
.card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.7rem;
	height: 0.38rem;
	border-left: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(-45deg);
}

.pullquote {
	margin: 2rem auto 0;
	max-width: 62ch;
	padding: clamp(1.5rem, 3vw, 2.4rem);
	background: var(--glass-bg, linear-gradient(158deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)));
	border: 1px solid var(--border);
	border-radius: var(--radius, 18px);
	box-shadow: var(--glass-lo);
}
.pullquote blockquote { margin: 0; }
.pullquote blockquote p {
	margin: 0;
	font-size: var(--step-1);
	line-height: 1.5;
	text-wrap: pretty;
}
.pullquote blockquote p::before { content: "\201C"; color: var(--accent); margin-right: 0.1em; }
.pullquote blockquote p::after { content: "\201D"; color: var(--accent); }
.pullquote figcaption {
	margin-top: 1rem;
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.cta__note,
.prose-note {
	margin-top: 1.1rem;
	font-size: var(--step--1);
	color: var(--muted);
}
.cta__note { text-align: center; }

.stat {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.stat__value {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--accent);
	letter-spacing: -0.02em;
}
.stat__label {
	margin: 0;
	font-size: var(--step--1);
	color: var(--muted);
	text-wrap: pretty;
}

/* Page hero for rebuilt pages: the opening statement, not a banner. */
.page-hero__inner { display: grid; gap: 1.25rem; justify-items: start; }
.page-hero__lede {
	max-width: 58ch;
	font-size: var(--step-1);
	color: var(--muted);
	text-wrap: pretty;
	margin: 0;
}
.page-sections .page-hero__title { margin: 0; text-wrap: balance; }
.page-sections .section:first-of-type { padding-top: 0; }

/* Feature checklists lifted out of the old bullet lists. */
.checklist {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.checklist li {
	position: relative;
	padding: 0.85rem 1rem 0.85rem 2.4rem;
	background: var(--glass-bg, linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)));
	border: 1px solid var(--border);
	border-radius: 12px;
	font-size: var(--step--1);
	color: var(--text);
}
.checklist li::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1.28em;
	width: 0.7rem;
	height: 0.38rem;
	border-left: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(-45deg);
}

/* Hero for rebuilt pages: copy on the left, optional artwork on the right.
   With no featured image the media slot has no children and the copy simply
   takes the full width. */
.page-hero__inner {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
	grid-template-columns: 1fr;
}
.page-hero__copy { display: grid; gap: 1.25rem; justify-items: start; }
.page-hero__media:not(.has-image) { display: none; }
.page-hero__media.has-image img {
	width: 100%;
	height: auto;
	border-radius: var(--radius, 18px);
	border: 1px solid var(--border);
	box-shadow: var(--glass-shadow, 0 30px 60px -40px rgba(0, 0, 0, 0.9));
}
@media (min-width: 900px) {
	.page-hero__inner:has(.page-hero__media.has-image) {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}
}

/* With artwork beside it the copy column is roughly half as wide, so the
   display size that suits a full-width hero runs to six lines here. */
.page-hero__inner:has(.page-hero__media.has-image) .page-hero__title {
	font-size: clamp(2rem, 3.1vw, 3.15rem);
	max-width: 18ch;
}
.page-hero__inner:has(.page-hero__media.has-image) .page-hero__lede {
	font-size: var(--step-0);
	max-width: 46ch;
}

/* =========================================================================
   39. Pricing plans
   Rebuilt from the plan data on the live site: name, price, what you get.
   Hierarchy is carried by weight and glow rather than a second hue, so the
   lime stays the only accent.
   ========================================================================= */
.plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
	align-items: stretch;
	margin-top: 2.5rem;
}

.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.6rem, 2.6vw, 2.2rem);
	background: var(--glass-bg, linear-gradient(158deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)));
	border: 1px solid var(--border);
	border-radius: var(--radius, 18px);
	box-shadow: var(--glass-lo);
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.plan:hover {
	transform: translateY(-4px);
	border-color: var(--border-strong);
	box-shadow: var(--glass-lo), 0 24px 50px -34px rgba(0, 0, 0, 0.9);
}

/* The recommended plan leads without changing colour. */
.plan--featured {
	border-color: var(--accent);
	box-shadow: var(--glass-lo), 0 0 0 1px var(--accent) inset, 0 30px 60px -40px rgba(210, 255, 0, 0.5);
}
.plan--premium { border-color: rgba(210, 255, 0, 0.45); }

.plan__badge {
	position: absolute;
	top: -0.75rem;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.35rem 0.9rem;
	background: var(--accent);
	color: #0B0B0F;
	border-radius: var(--pill);
	font-size: var(--step--2, 0.72rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.plan__icon { font-size: 1.9rem; line-height: 1; }
.plan__name { margin: 0.4rem 0 0; font-size: var(--step-1); }
.plan__sub { margin: 0; color: var(--muted); font-size: var(--step--1); text-wrap: pretty; }

.plan__price {
	display: flex;
	align-items: baseline;
	gap: 0.15rem;
	margin: 1rem 0 0;
	color: var(--accent);
	line-height: 1;
}
.plan__currency { font-size: var(--step-1); font-weight: 600; }
.plan__amount { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -0.03em; }
.plan__period {
	margin: 0.35rem 0 0;
	font-size: var(--step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.plan__note { margin: 0.6rem 0 0; font-size: var(--step--1); color: var(--muted); }

.plan__features {
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 1.4rem 0 0;
	border-top: 1px solid var(--border);
	display: grid;
	gap: 0.9rem;
}
.plan__features li { position: relative; padding-left: 1.6rem; }
.plan__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.7rem;
	height: 0.38rem;
	border-left: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(-45deg);
}
.plan__feature { display: block; font-size: var(--step--1); font-weight: 600; }
.plan__detail { display: block; margin-top: 0.15rem; font-size: var(--step--2, 0.78rem); color: var(--muted); }
.plan__tag {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--pill);
	font-size: var(--step--2, 0.7rem);
	color: var(--accent);
	vertical-align: middle;
}

/* Pinned to the bottom so buttons line up across cards of different length.
   The spacing above it lives on the feature list -- a margin-top here would
   override the `auto` and leave each button floating at its own height. */
.plan__cta { margin-top: auto; justify-content: center; width: 100%; }
.plan__features { margin-bottom: 1.6rem; }

/* --- A la carte services ---------------------------------------------- */
.svc-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
	margin-top: 2.5rem;
}
.svc-group {
	padding: clamp(1.3rem, 2.2vw, 1.8rem);
	background: var(--glass-bg, linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)));
	border: 1px solid var(--border);
	border-radius: var(--radius, 18px);
}
.svc-group__title {
	margin: 0 0 1rem;
	font-size: var(--step-0);
	letter-spacing: 0.04em;
	color: var(--accent);
}
.svc-group__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.svc-group__label { display: block; font-size: var(--step--1); font-weight: 600; }
.svc-group__detail { display: block; margin-top: 0.15rem; font-size: var(--step--2, 0.78rem); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
	.plan:hover { transform: none; }
}

/* =========================================================================
   40. Forms in migrated content
   The contact form is a live Spectra form handling real enquiries, so its
   markup is left exactly as it is and only its skin is brought over: white
   boxes with black text on a near-black page were the loudest thing on the
   site.
   ========================================================================= */
.site-main :where(.uagb-forms-input, input[type="text"], input[type="email"], input[type="tel"],
	input[type="url"], input[type="number"], input[type="search"], textarea, select) {
	background: rgba(255, 255, 255, 0.04) !important;
	color: var(--text) !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: 12px !important;
	padding: 0.85rem 1rem;
	font: inherit;
	font-size: var(--step--1);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.site-main :where(.uagb-forms-input, input, textarea, select)::placeholder { color: rgba(245, 245, 242, 0.42); }

.site-main :where(.uagb-forms-input, input, textarea, select):focus,
.site-main :where(.uagb-forms-input, input, textarea, select):focus-visible {
	outline: none;
	border-color: var(--accent) !important;
	background: rgba(255, 255, 255, 0.06) !important;
	box-shadow: 0 0 0 3px rgba(210, 255, 0, 0.18);
}

/* Native dropdown lists paint with the OS palette unless told otherwise. */
.site-main select { color-scheme: dark; }
.site-main select option { background: #14141A; color: var(--text); }

.site-main :where(.uagb-forms-input-label, .uagb-forms-main-form label) {
	color: var(--text);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.01em;
}
/* The required marker was arriving in an alert red that fought the accent. */
.site-main :where(.uagb-forms-required-mark, .uagb-forms-input-label .required) { color: var(--accent) !important; }
/* Spectra marks the label itself as required; only the asterisk should carry
   the accent, not the field name. */
.site-main label.required,
.site-main .uagb-forms-input-label.required { color: var(--text) !important; }
.site-main .uagb-forms-input-label.required::after { color: var(--accent); }

.site-main .uagb-forms-main-submit-button {
	border-radius: var(--pill) !important;
	padding: 0.95rem 1.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Contact details read as an address, not a headline. */
.site-main :where(.uagb-ifb-desc, .wp-block-uagb-info-box) a[href^="tel:"],
.site-main :where(.uagb-ifb-desc, .wp-block-uagb-info-box) a[href^="mailto:"] { color: var(--accent); }

/* --- Service cards: icon, number, and a link affordance ---------------- */
.card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.1rem;
}
.card__icon {
	width: 2rem;
	height: 2rem;
	color: var(--accent);
	flex: none;
	transition: transform 0.35s var(--ease);
}
a.card:hover .card__icon { transform: translateY(-2px) scale(1.06); }
.card__num { font-size: var(--step--1); color: var(--muted); letter-spacing: 0.14em; }

/* Every card gets the column layout, linked or not, so titles line up across
   the row instead of drifting with each card's content. */
.card { display: flex; flex-direction: column; }
a.card { text-decoration: none; }
a.card .card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 1.2rem;
	color: var(--accent);
	font-size: var(--step--1);
	font-weight: 600;
	/* Visible at rest: hidden-until-hover never appears on a touch screen. */
	opacity: 0.75;
	transition: opacity 0.3s var(--ease);
}
a.card .card__more svg { width: 1rem; height: 1rem; transition: transform 0.3s var(--ease); }
a.card:hover .card__more, a.card:focus-visible .card__more { opacity: 1; }
a.card:hover .card__more svg { transform: translateX(3px); }
a.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.why:hover { transform: none; }
	a.card:hover .card__icon, a.card:hover .card__more svg { transform: none; }
}

/* =========================================================================
   41. Rhythm and navigation for rebuilt content pages
   The homepage's section spacing is generous because it has a handful of big
   moments. A rebuilt service page has eight sections, and the same padding
   put ~260px of empty canvas between each one.
   ========================================================================= */
.page-sections .section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* Two plain sections in a row do not need two full gaps between them. */
.page-sections .section:not(.section--alt):not(.section--light):not(.cta)
	+ .section:not(.section--alt):not(.section--light):not(.cta) {
	padding-top: 0;
}
.page-sections .page-hero { padding-bottom: clamp(1.5rem, 3vw, 3rem); }

/* --- Related services -------------------------------------------------- */
/* A service page used to end at its CTA with no route to the others. */
.related-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.1rem);
	margin-top: 2rem;
}
.related-service {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	background: var(--glass-bg, linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)));
	border: 1px solid var(--border);
	border-radius: 14px;
	color: var(--text);
	text-decoration: none;
	font-size: var(--step--1);
	font-weight: 600;
	transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
}
.related-service svg { width: 1rem; height: 1rem; flex: none; color: var(--accent); transition: transform 0.3s var(--ease); }
.related-service:hover, .related-service:focus-visible {
	border-color: var(--accent);
	transform: translateY(-2px);
}
.related-service:hover svg { transform: translateX(3px); }
.related-service:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.related-service:hover { transform: none; }
	.related-service:hover svg { transform: none; }
}

/* =========================================================================
   42. Contact page
   Built around the existing Spectra form rather than replacing it, so the
   live enquiry handling is untouched.
   ========================================================================= */
.contact-methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: clamp(0.85rem, 1.6vw, 1.25rem);
}
.contact-card {
	display: grid;
	gap: 0.35rem;
	padding: clamp(1.3rem, 2.2vw, 1.75rem);
	background: var(--glass-bg, linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)));
	border: 1px solid var(--border);
	border-radius: var(--radius, 18px);
	color: var(--text);
	text-decoration: none;
	transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.contact-card:hover, .contact-card:focus-visible { border-color: var(--accent); transform: translateY(-3px); }
.contact-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.contact-card__icon { width: 1.9rem; height: 1.9rem; color: var(--accent); margin-bottom: 0.5rem; }
.contact-card__label {
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.contact-card__value { font-size: var(--step-0); font-weight: 600; }
.contact-card__note { font-size: var(--step--1); color: var(--muted); text-wrap: pretty; }

.contact-layout {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: 1fr;
	margin-top: 2.5rem;
	align-items: start;
}
@media (min-width: 960px) {
	.contact-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.contact-layout__form {
	padding: clamp(1.4rem, 2.6vw, 2.2rem);
	background: var(--glass-bg, linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)));
	border: 1px solid var(--border);
	border-radius: var(--radius, 18px);
}
.contact-layout__aside { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.contact-aside__title { margin: 0 0 0.6rem; font-size: var(--step-0); }
.contact-aside__text { margin: 0 0 0.6rem; color: var(--muted); font-size: var(--step--1); line-height: 1.7; }
.contact-layout__aside .wp-block-uagb-google-map { border-radius: var(--radius, 18px); overflow: hidden; }
.contact-layout__aside iframe { display: block; width: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
	.contact-card:hover { transform: none; }
}

/* =========================================================================
   43. Location pages
   ========================================================================= */
.breadcrumbs {
	padding-top: calc(var(--header-h) + 1.5rem);
	padding-bottom: 0;
	font-size: var(--step--1);
	color: var(--muted);
}
.breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.6rem;
	align-items: baseline;
}
.breadcrumbs li { display: flex; align-items: baseline; gap: 0.6rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--line-strong, var(--muted)); opacity: 0.6; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current="page"] { color: var(--text); }

/* The hero on a location page follows breadcrumbs, so it needs less top room. */
.location .page-hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.location__presence {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0;
	font-size: var(--step--1);
	color: var(--muted);
	max-width: 52ch;
}
.location__pin {
	width: 0.55rem;
	height: 0.55rem;
	margin-top: 0.5em;
	border-radius: 50%;
	background: var(--accent);
	flex: none;
}
.location__prose { max-width: 68ch; }
.location__prose p { color: var(--muted); }

/* FAQ built on <details> so it works without JavaScript. */
.faq-list .faq-item { border-bottom: 1px solid var(--border); }
.faq-list .faq-q { cursor: pointer; list-style: none; }
.faq-list .faq-q::-webkit-details-marker { display: none; }
.faq-list details[open] .plus { transform: rotate(45deg); }
.faq-list .plus { display: inline-block; transition: transform 0.25s var(--ease); }

/* A location usually has one or two case studies. Left on the full-width grid
   a single card stretches across the page and its media well becomes a large
   empty rectangle, so the compact variant caps the column width instead. */
.work-grid--compact {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 420px));
	justify-content: start;
}
.work-grid--compact .work-card__media { aspect-ratio: 4 / 3; }

/* The areas list is a <ul>; without this the chips carry list bullets. */
.industries { list-style: none; margin: 0; padding: 0; }