/*
Theme Name: Peptide Web Agency
Theme URI: https://peptidewebagency.com
Author: Peptide Web Agency
Description: Marketing site for Peptide Web Agency. The front page is a self-contained custom design; service pages, Clients, About, FAQ and Blog render through matching templates tuned for SEO and lead capture.
Version: 10.0
Text Domain: peptide-web-agency
*/

/* ===========================================================================
   Fonts — self-hosted variable Space Grotesk (300–700), latin + latin-ext.
   Replaces the Google Fonts request, which asked for 800/900 weights the
   family doesn't have and so only ever delivered the 400 weight.
=========================================================================== */
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-display: swap;
	font-weight: 300 700;
	src: url("assets/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2-variations"),
	     url("assets/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-display: swap;
	font-weight: 300 700;
	src: url("assets/fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"),
	     url("assets/fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================================
   Tokens
=========================================================================== */
:root {
	--bg:          #141e30;
	--bg-2:        #182741;
	--surface:     #22314a;
	--surface-2:   #2b3d5c;
	--text:        #f3f7fc;
	--muted:       #b7c3da;
	--muted-2:     #93a3c2;
	--muted-3:     #6d7fa3;
	--accent:      #315efb;
	--accent-ink:  #f3f7fc;
	--pop:         #d1f56a;
	--pop-ink:     #10182b;
	--link:        #7c9bff;
	--link-hover:  #a9beff;
	--border:      rgba(243, 247, 252, 0.14);
	--border-2:    rgba(243, 247, 252, 0.28);
	--grad:        linear-gradient(105deg, #315efb 0%, #7c9bff 45%, #d1f56a 100%);
	--font:        "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-alt:    "Space Grotesk", var(--font);
	--container:   1240px;
	--pad:         clamp(20px, 5vw, 72px);
	--radius:      16px;
	--ease-out:    cubic-bezier(.2, .8, .2, 1);
	--section-y:   clamp(72px, 10vw, 128px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 110px; scrollbar-color: var(--surface-2) var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.7;
	overflow-x: clip;
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font); letter-spacing: -0.025em; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
::selection { background: var(--accent); color: var(--accent-ink); }

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

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
	position: fixed; top: 12px; left: 12px; z-index: 200;
	background: var(--surface); color: var(--text); padding: 10px 16px;
	border: 1px solid var(--border-2); border-radius: 8px; text-decoration: none;
}

.eyebrow {
	display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--pop);
	margin-bottom: 20px;
}
/* Solid lime accent text sitewide — matches the homepage brand look
   (no gradient-clip text outside this one spot, keeps every page consistent). */
.grad-text { background: none; -webkit-background-clip: unset; background-clip: unset; color: var(--pop); }

/* ===========================================================================
   Buttons
=========================================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--accent); color: #fff;
	font-family: var(--font); font-weight: 700; font-size: 15px;
	padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer;
	text-decoration: none; white-space: nowrap;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover {
	background: color-mix(in srgb, var(--accent) 85%, #fff); color: #fff;
	transform: translateY(-1px); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn--lg { padding: 15px 26px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--ghost {
	background: transparent; color: var(--text);
	border: 1px solid var(--border-2);
}
.btn--ghost:hover { background: rgba(234,242,245,.06); color: var(--text); box-shadow: none; }

/* ===========================================================================
   Topbar — contact info + social icons, above the sticky nav
=========================================================================== */
.topbar { background: var(--bg-2); border-bottom: 1px solid var(--border); }
.topbar__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-height: 38px; font-size: 13px;
}
.topbar__link {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--muted-2); text-decoration: none; white-space: nowrap;
}
.topbar__link:hover { color: var(--text); }
.topbar__left { display: flex; align-items: center; gap: 20px; }
.topbar__social { display: flex; align-items: center; gap: 8px; }
.topbar__social-link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	transition: transform .16s ease, background .16s ease;
}
.topbar__social-link svg { width: 18px; height: 18px; }
.topbar__social-link:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); }
.topbar__social-link--instagram { color: #E1306C; }
.topbar__social-link--facebook  { color: #1877F2; }
.topbar__social-link--x         { color: #ffffff; }
.topbar__social-link--linkedin  { color: #0A66C2; }
@media (max-width: 640px) {
	.topbar__inner { justify-content: center; }
	.topbar__link:first-child { display: none; }
}

/* ===========================================================================
   Header / nav
=========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 40;
	background: color-mix(in srgb, var(--bg) 78%, transparent);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
	transition: border-color .2s ease, background .3s ease, box-shadow .3s ease, transform .5s var(--ease-out);
}
.site-header.is-stuck { background: color-mix(in srgb, var(--bg) 92%, transparent); box-shadow: 0 12px 40px -24px rgba(0,0,0,.9); }
.site-header.is-tucked { transform: translateY(-100%); }
/* The header's own wrap runs edge-to-edge instead of capping at the usual
   1240px content width — otherwise, on wide screens, the big empty side
   margins make the logo read as roughly centred instead of sitting at the
   left edge the way headers conventionally do. */
.site-header > .wrap { max-width: none; padding-inline: clamp(16px, 3vw, 40px); }
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	min-height: 84px;
}
/* Centre the nav links on the whole header (not just the space between the
   logo and the CTA button, which skews off-centre since those two aren't
   the same width) — absolutely positioned over the header, desktop only;
   the mobile dropdown panel keeps its own normal stacked layout. */
@media (min-width: 900px) {
	.site-header__inner { position: relative; }
	.site-nav__list { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
.site-logo {
	display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0;
}
.site-logo img { height: 60px; width: auto; }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.site-nav__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: clamp(10px, 2vw, 26px);
}
.site-nav__list > li > a {
	color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500;
	display: inline-flex; align-items: center; gap: 4px; padding: 8px 0;
}
.site-nav__list > li > a:hover,
.site-nav__list > li.has-sub:hover > a { color: var(--text); }
.caret { font-size: 10px; }

.has-sub { position: relative; }
.has-sub .sub {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
	min-width: 300px; background: var(--surface); border: 1px solid var(--border-2);
	border-radius: var(--radius); padding: 10px; display: grid; gap: 2px;
	opacity: 0; visibility: hidden; pointer-events: none;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-sub:hover .sub, .has-sub:focus-within .sub {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(6px);
}
.sub__label {
	font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--accent); padding: 10px 12px 6px;
}
.sub__item {
	display: block; padding: 10px 12px; border-radius: 9px; text-decoration: none;
}
.sub__item:hover { background: var(--surface-2); }
.sub__item strong { display: block; color: var(--text); font-size: 15px; font-weight: 700; }
.sub__item span { display: block; color: var(--muted-3); font-size: 13px; }

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

.nav-toggle {
	display: none; width: 42px; height: 42px; border: 1px solid var(--border-2);
	border-radius: 10px; background: transparent; cursor: pointer;
	flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); }

@media (max-width: 899px) {
	.nav-toggle { display: flex; }
	.site-nav {
		position: fixed; inset: 90px 0 auto 0;
		background: var(--bg); border-bottom: 1px solid var(--border-2);
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 12px var(--pad) 24px;
		transform: translateY(-140%); transition: transform .22s ease;
		max-height: calc(100dvh - 90px); overflow-y: auto;
	}
	body.nav-open .site-nav { transform: translateY(0); }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__list > li > a { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 17px; }
	.has-sub .sub {
		position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
		min-width: 0; box-shadow: none; border: 0; padding: 0 0 8px 12px;
		display: none; background: transparent;
	}
	.has-sub.sub-open .sub { display: grid; }
	.nav-cta { margin-top: 16px; width: 100%; }
}

/* ===========================================================================
   Layout primitives
=========================================================================== */
.site-main { min-height: 60vh; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 6vw, 64px); }
.section--surface { background: var(--bg-2); border-block: 1px solid var(--border); }
.section__title { font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; max-width: 22ch; line-height: 1.08; letter-spacing: -0.03em; }
.section__lead { color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); margin-top: 20px; max-width: 60ch; line-height: 1.75; }

.crumbs { padding-top: 26px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--muted-3); }
.crumbs a { color: var(--muted-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); }

/* ===========================================================================
   Hero (service / interior pages)
=========================================================================== */
.hero {
	position: relative; overflow: hidden;
	padding-block: clamp(64px, 9vw, 120px) clamp(64px, 9vw, 120px);
	border-bottom: 1px solid var(--border);
	background:
		radial-gradient(1100px 460px at 12% -10%, rgba(139,124,255,.18), transparent 60%),
		radial-gradient(900px 420px at 90% 0%, rgba(47,216,184,.14), transparent 55%),
		var(--bg);
}
.hero__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	color: var(--pop); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; line-height: 1.4;
	padding: 7px 14px 7px 12px; border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--pop) 28%, transparent);
	background: color-mix(in srgb, var(--pop) 7%, transparent);
}
.hero__eyebrow::before {
	content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pop);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--pop) 60%, transparent);
	animation: eyebrow-pulse 2.4s ease-out infinite;
}
@keyframes eyebrow-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pop) 55%, transparent); }
	70%, 100% { box-shadow: 0 0 0 9px transparent; }
}
.hero h1 {
	font-size: clamp(36px, 4.6vw, 60px); font-weight: 700; margin-top: 24px;
	max-width: 17ch; line-height: 1.05; letter-spacing: -0.035em;
}
.hero__sub { color: var(--muted); font-size: clamp(17px, 1.7vw, 20px); margin-top: 26px; max-width: 56ch; line-height: 1.7; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; align-items: center; }
.hero__note { color: var(--muted-3); font-size: 14px; margin-top: 18px; }
.hero > .wrap { position: relative; z-index: 1; }

/* Hero photo background — website-design page only. Image sits behind the
   copy with a dark scrim over it for contrast, and drifts slowly (CSS, so
   it keeps working even if GSAP fails to load); GSAP adds a light scroll
   parallax on top via service-anim.js. */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img {
	width: 100%; height: 100%; object-fit: cover; opacity: .32;
	animation: hero-bg-pan 26s ease-in-out infinite;
}
.hero-bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(115deg, color-mix(in srgb, var(--bg) 94%, transparent) 15%, color-mix(in srgb, var(--bg) 80%, transparent) 55%, color-mix(in srgb, var(--bg) 62%, transparent) 100%);
}
@keyframes hero-bg-pan {
	0%, 100% { transform: scale(1.08) translate(0, 0); }
	50% { transform: scale(1.18) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-bg img { animation: none; }
}

/* Ecommerce page — optional hero background video, reusing the same
   .hero-bg wrapper/scrim as the website-design page's photo. Starts at
   opacity 0 and is only faded in by theme.js once the browser confirms it
   can actually play the file; if the video was never uploaded, fails, or
   the visitor is on a narrow screen / prefers reduced motion, the hero
   just keeps its plain gradient background — nothing ever looks broken or
   half-loaded waiting on a missing asset. */
.hero-bg__video {
	width: 100%; height: 100%; object-fit: cover; opacity: 0;
	transition: opacity 1.2s ease;
}
.hero-bg.is-playing .hero-bg__video { opacity: .32; }
@media (max-width: 780px) { .hero-bg__video { display: none; } }

/* Split hero + hub diagram. Rather than guessing a font-size/column-width
   combination that fits an exact span split (fragile across viewports,
   and got this to three lines last time), the spans stay inline and
   text-wrap: balance lets the browser itself pick the break point that
   distributes the whole heading across the fewest, most even lines —
   reliably two here, at any width, without hand-tuned pixel math. */
body.pg-ecommerce .hero h1 { line-height: 1.1; max-width: 19ch; text-wrap: balance; }
body.pg-ecommerce .hero h1 span { display: inline; }
body.pg-ecommerce .hero__grid { grid-template-columns: 1.2fr 1fr; }
/* This was missing before, which is exactly why the heading wrapped to
   three lines instead of two: without it, the copy column was still
   constrained by the sitewide 1240px .wrap + up-to-72px side padding,
   leaving far less room than the font-size assumed. Same tighter padding
   already used on the SEO/email pages. */
body.pg-ecommerce .hero > .wrap { padding-inline: clamp(16px, 3vw, 40px); max-width: 1320px; }
@media (max-width: 900px) { body.pg-ecommerce .hero > .wrap { padding-inline: var(--pad); } }
/* Reuses the SEO page's float keyframe — a plain translateY bob, already
   generic — so the hub diagram gently floats even before/without GSAP. */
body.pg-ecommerce .hero__visual { animation: seo-hub-float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body.pg-ecommerce .hero__visual { animation: none; } }

/* ===========================================================================
   "Growth engine" hub — a central ring wired to six cards, each on its own
   colour, matching a multi-colour wire-diagram reference. The connecting
   lines are drawn by theme.js from real DOM positions (getBoundingClientRect
   on the hub + each card, same technique as the homepage's services orbit)
   so they always touch exactly regardless of width, font-load or content
   length — nothing here is percentage-guessed. Fully visible with zero
   motion and zero lines if JS never runs: the cards are plain, readable
   content in a two-column grid either way.
=========================================================================== */
.eng-orbit { position: relative; padding-block: 10px; }
.eng-orbit__glow {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 240px; height: 240px; border-radius: 50%; z-index: 0; pointer-events: none;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
	filter: blur(34px);
}
.eng-orbit__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.eng-orbit__line { fill: none; stroke-width: 1.5; opacity: .4; }
.eng-orbit__flow {
	fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 18; opacity: .9;
	filter: drop-shadow(0 0 4px currentColor);
	animation: eng-orbit-flow 2.6s linear infinite;
}
@keyframes eng-orbit-flow { to { stroke-dashoffset: -96; } }
@media (prefers-reduced-motion: reduce) { .eng-orbit__flow { animation: none; opacity: .5; } }
.eng-orbit__hub {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
	width: 132px; height: 132px; border-radius: 50%;
	border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border-2));
	background: color-mix(in srgb, var(--bg) 85%, transparent);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px;
	box-shadow: 0 0 40px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.eng-orbit__hub-icon { color: var(--pop); }
.eng-orbit__hub-label { font-family: var(--font-alt); font-size: 11px; font-weight: 800; line-height: 1.4; color: var(--text); }
.eng-orbit__hub-label em {
	display: block; font-style: normal; font-weight: 600; font-size: 9px;
	letter-spacing: .12em; text-transform: uppercase; color: var(--muted-3); margin-top: 2px;
}
.eng-orbit__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1fr; gap: 20px clamp(152px, 20vw, 220px);
	align-items: center;
}
.eng-orbit__card {
	position: relative; z-index: 1; display: flex; align-items: center; gap: 12px;
	background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px;
	padding: 16px 18px; box-shadow: 0 14px 30px -18px rgba(0,0,0,.6);
}
.eng-orbit__icon {
	flex: none; width: 34px; height: 34px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--c, var(--accent)) 20%, transparent); color: var(--c, var(--accent));
}
.eng-orbit__card h3 { font-size: 14px; font-weight: 800; }
/* Matches .hero__grid's own breakpoint: below 900px the hero stacks to a
   single column and .hero__visual is capped at max-width: 420px, which is
   nowhere near enough room for a two-column card grid with a hub sitting
   in the gap between them — so this switches to a single readable column
   at the same width the hub would otherwise start getting cramped. */
@media (max-width: 900px) {
	.eng-orbit__hub, .eng-orbit__lines, .eng-orbit__glow { display: none; }
	.eng-orbit__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Section headings on this page: cap the width so a long heading settles
   into two balanced lines, but keep the cap wide enough that a short
   heading still fits on one line — same behaviour as the FAQ heading,
   just responsive instead of a hardcoded line break. */
body.pg-website-design .section__title { max-width: 40ch; text-wrap: balance; }
body.pg-website-design .hero__copy h1 {
	max-width: none; text-align: left;
}
/* Two-line heading: each span is its own line instead of wrapping wherever
   the text happens to break. */
body.pg-website-design .hero__copy h1 span { display: block; }
body.pg-website-design .hero h1, body.pg-seo .hero h1, body.pg-email .hero h1, body.pg-ecommerce .hero h1 { font-size: clamp(32px, 3.1vw, 46px); }
body.pg-website-design #faq { background: var(--surface); border-block: 1px solid var(--border-2); }

/* Split hero — copy left, floating laptop + phone mockup pair right. Each
   device floats on its own independent, offset animation (different
   duration/delay/rotation) so the pair reads as natural, not synced. */
.hero__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
/* This hero runs edge-to-edge (no side gutters) so the mockup pair has
   room to be large; every other .wrap on the page keeps the normal padding. */
body.pg-website-design .hero > .wrap { padding-inline: 0; max-width: 1360px; }
.hero__visual-glow {
	position: absolute; inset: 8%; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%);
	filter: blur(50px); z-index: 0;
}
.hero__mockup-float--laptop {
	position: relative; z-index: 1; width: 100%; max-width: 640px;
	animation: hero-mockup-float-laptop 7s ease-in-out infinite;
}
.hero__mockup-float--phone {
	position: absolute; z-index: 2; width: 100%; max-width: 196px;
	right: 2%; bottom: -6%;
	animation: hero-mockup-float-phone 5.5s ease-in-out infinite;
	animation-delay: .8s;
}
.hero__mockup {
	width: 100%; height: auto;
	filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
}
.hero__mockup--phone { filter: drop-shadow(0 16px 28px rgba(0,0,0,.55)); }
@keyframes hero-mockup-float-laptop {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50% { transform: translateY(-16px) rotate(1deg); }
}
@keyframes hero-mockup-float-phone {
	0%, 100% { transform: translateY(0) rotate(3deg); }
	50% { transform: translateY(-11px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
	.hero__mockup-float--laptop, .hero__mockup-float--phone { animation: none; }
}
@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__visual { order: -1; max-width: 420px; margin: 0 auto; min-height: 300px; }
	.hero__mockup-float--phone { max-width: 140px; right: 0; bottom: -2%; }
	body.pg-website-design .hero > .wrap { padding-inline: var(--pad); }
}

/* ===========================================================================
   Stat row
=========================================================================== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--bg); padding: 26px 24px; }
.stat__num { font-family: var(--font-alt); font-size: clamp(30px, 4vw, 44px); font-weight: 700; }
.stat__label { color: var(--muted-2); font-size: 14px; margin-top: 8px; max-width: 24ch; }

/* ===========================================================================
   Feature / value cards
=========================================================================== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.card {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	padding: clamp(26px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 14px;
	transition: border-color .3s ease, transform .4s var(--ease-out), box-shadow .4s ease;
}
.card:hover { border-color: var(--border-2); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--accent) 60%, transparent); }
.card--link { text-decoration: none; color: inherit; transition: border-color .16s ease, transform .16s ease; }
.card--link:hover { border-color: color-mix(in srgb, var(--pop) 35%, var(--border-2)); transform: translateY(-6px); }
.card__num { font-family: var(--font-alt); font-size: 13px; font-weight: 700; color: var(--pop); letter-spacing: .1em; }
.card h3 { font-size: 21px; font-weight: 700; }
.card p { color: var(--muted); font-size: 15px; }
.card__more { color: var(--link); font-size: 14px; font-weight: 600; margin-top: auto; padding-top: 6px; display: inline-flex; gap: 6px; transition: color .2s ease, gap .3s var(--ease-out); }
.card--link:hover .card__more { color: var(--pop); gap: 12px; }

/* Checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checklist li { position: relative; padding-left: 30px; color: var(--muted); }
.checklist li::before {
	content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px;
	border-radius: 5px; background: var(--grad);
}
.checklist strong { color: var(--text); font-weight: 600; }

/* Proof-point list — all four visible by default (box + tick + label).
   One at a time, an item's tick + label briefly disappear then come back,
   while the other three stay visible throughout; then the next takes its turn. */
.why-list { max-width: 420px; }
.why-list__rule { display: block; height: 1px; background: var(--border-2); }
.why-item { display: flex; align-items: center; gap: 16px; padding-block: 22px; }
.why-item__icon {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 40px; height: 40px; border-radius: 10px;
	border: 1px solid var(--border-2); color: var(--pop);
}
.why-item__icon svg, .why-item__label {
	opacity: 1; animation: why-item-dip 3.6s ease-in-out infinite;
}
.why-item__label { font-family: var(--font-alt); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.why-item--0 .why-item__icon svg, .why-item--0 .why-item__label { animation-delay: 0s; }
.why-item--1 .why-item__icon svg, .why-item--1 .why-item__label { animation-delay: .9s; }
.why-item--2 .why-item__icon svg, .why-item--2 .why-item__label { animation-delay: 1.8s; }
.why-item--3 .why-item__icon svg, .why-item--3 .why-item__label { animation-delay: 2.7s; }
@keyframes why-item-dip {
	0%   { opacity: 1; }
	4%   { opacity: 1; }
	10%  { opacity: 0; }
	19%  { opacity: 0; }
	25%  { opacity: 1; }
	100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.why-item__icon svg, .why-item__label { opacity: 1; animation: none; }
}

/* Centred section intro (eyebrow + heading + optional lead paragraph) —
   same treatment as the services/timeline headers, reused wherever a
   homepage section needs its heading centred instead of left-aligned. */
.section-head { text-align: center; max-width: 640px; margin: 0 auto; }
.section-head .section__title { max-width: none; margin-inline: auto; }

/* Two-column split */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 820px) { .split, .split--reverse > :first-child { grid-template-columns: 1fr; order: 0; } }

/* ===========================================================================
   Process steps
=========================================================================== */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; counter-reset: step; }
.step { border-top: 2px solid var(--pop); background: var(--surface); padding: 24px; border-radius: 0 0 var(--radius) var(--radius); }
.step__k { font-family: var(--font-alt); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--muted-3); }
.step h3 { font-size: 18px; font-weight: 700; margin-top: 10px; }
.step p { color: var(--muted); font-size: 15px; margin-top: 10px; }

/* Timeline — bordered rows, homepage "how it works" */
.tl-header { text-align: center; max-width: 640px; margin: 0 auto; }
.tl-header .section__title { max-width: none; }
.tl-em { font-style: italic; color: var(--pop); }
.tl-header__sub { color: var(--muted-3); font-size: 14px; margin-top: 10px; }
.timeline { margin-top: 40px; border: 1px solid var(--border-2); border-radius: var(--radius); overflow: hidden; }
.timeline__row {
	display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 56px);
	padding: 28px clamp(20px, 4vw, 32px); border-top: 1px solid var(--border);
}
.timeline__row:first-child { border-top: 0; }
.timeline__k { font-family: var(--font-alt); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--muted-3); margin-bottom: 6px; }
.timeline__label h3 { font-size: 19px; font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.timeline__cta { padding: 5px 14px; font-size: 12px; }
.timeline__body p { color: var(--muted); font-size: 15px; }
.timeline__get { margin-top: 10px; }
.timeline__get strong { color: var(--pop); }
@media (max-width: 700px) {
	.timeline__row { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Case studies / quotes
=========================================================================== */
.case { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; }
.case__num { font-family: var(--font-alt); font-size: clamp(26px, 3vw, 36px); font-weight: 700; }
.case__meta { color: var(--muted-3); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin-top: 6px; }
.case h3 { font-size: 19px; font-weight: 700; margin-top: 16px; }
.case p { color: var(--muted); font-size: 15px; margin-top: 12px; }
.case__tag { display: inline-block; margin-top: 16px; font-size: 12px; color: var(--accent); border: 1px solid var(--border-2); border-radius: 999px; padding: 4px 12px; }

.quote { border-left: 3px solid var(--accent); padding-left: 22px; }
.quote p { font-size: clamp(18px, 2.2vw, 24px); font-weight: 500; }
.quote cite { display: block; margin-top: 14px; color: var(--muted-3); font-style: normal; font-size: 14px; }

/* Pills */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { border: 1px solid var(--border-2); border-radius: 999px; padding: 8px 16px; font-size: 14px; color: var(--muted); }

/* ===========================================================================
   FAQ
=========================================================================== */
.faq__list { display: grid; gap: 12px; margin-top: 28px; max-width: 820px; }
.faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px 22px; }
.faq__item summary {
	cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 17px;
	display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item { transition: border-color .3s ease, background-color .3s ease; }
.faq__item summary::after {
	content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-2);
	color: var(--pop); font-size: 20px; font-weight: 400; line-height: 1;
	transition: transform .4s var(--ease-out), background .3s ease, color .3s ease;
}
.faq__item[open] summary::after { transform: rotate(135deg); background: var(--pop); color: var(--pop-ink); border-color: var(--pop); }
.faq__item[open] { border-color: color-mix(in srgb, var(--pop) 30%, var(--border-2)); }
.faq__item summary:hover { color: var(--pop); }
.faq__answer { padding-bottom: 20px; color: var(--muted); }
.faq__answer p { margin-bottom: 12px; }

/* ===========================================================================
   Booking form
=========================================================================== */
.book__inner { display: flex; flex-wrap: wrap; gap: 42px clamp(24px, 5vw, 90px); }
.book__copy { flex: 1 1 320px; }
.book__copy p { color: var(--muted); margin-top: 24px; max-width: 44ch; }
.book__mail { font-size: 14px; color: var(--muted-3); }
.book__form {
	flex: 1 1 360px; background: var(--surface); padding: 32px; border-top: 2px solid var(--accent);
	border-radius: 16px; display: grid; gap: 20px; align-content: start;
}
.book__form label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.book__form label span { color: var(--muted-3); font-weight: 400; }
.book__form input, .book__form select, .book__form textarea {
	font: inherit; font-size: 15px; color: var(--text);
	background: var(--bg); border: 1px solid var(--border-2); border-radius: 10px; padding: 12px 14px;
}
.book__form input:focus, .book__form select:focus, .book__form textarea:focus {
	outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.book__fine, .book__form--done p { color: var(--muted-3); font-size: 13px; }
.book__form--done { align-content: center; }
.book__form--done h3 { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.book__err { color: #ff9784; font-size: 14px; }
.book__hp { position: absolute; left: -9999px; }

/* ===========================================================================
   Prose (Privacy Policy, About body, Blog posts, search, 404)
=========================================================================== */
.prose-page { max-width: 820px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) var(--pad) clamp(64px, 9vw, 112px); }

/* Blog archive (/blog/) — category filter pills */
.blog-cats__label { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 14px; }
.blog-cats { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-cats__pill {
	border: 1px solid var(--border-2); border-radius: 999px; padding: 8px 16px; font-size: 14px;
	color: var(--muted); text-decoration: none; transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.blog-cats__pill:hover { color: var(--text); border-color: var(--muted-3); }
.blog-cats__pill.is-active { background: var(--pop); border-color: var(--pop); color: var(--pop-ink); font-weight: 700; }

/* Blog archive — card grid */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.blog-card {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
	transition: border-color .2s ease, transform .3s ease, box-shadow .3s ease;
}
.blog-card:hover { border-color: var(--border-2); transform: translateY(-4px); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--accent) 55%, transparent); }
.blog-card__link { display: block; color: inherit; text-decoration: none; }
.blog-card__img { aspect-ratio: 16/10; background: var(--bg-2); overflow: hidden; }
.blog-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.blog-card__body { padding: 22px; }
.blog-card__cat {
	display: inline-block; color: var(--pop); font-family: var(--font-alt); font-size: 12px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
}
.blog-card h2 { font-size: 19px; font-weight: 800; line-height: 1.3; margin-bottom: 10px; }
.blog-card__excerpt { color: var(--muted); font-size: 14.5px; }
.blog-card__meta { color: var(--muted-3); font-size: 13px; margin-top: 14px; }
.prose-page__header { margin-bottom: 40px; display: flex; flex-direction: column; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
/* Featured-image frame — a padded background card around the image so
   logos/text placed close to the source file's own edges get breathing
   room instead of sitting flush against the page. Never crops (no
   object-fit/aspect-ratio) — the image still shows at its full, natural
   proportions inside the padding. */
.post-thumb {
	margin: 0 0 1.25em; padding: 16px; border-radius: var(--radius);
	background: var(--bg-2); border: 1px solid var(--border);
}
.post-thumb img { border-radius: calc(var(--radius) - 6px); margin: 0 auto; }
.prose-page__title { font-weight: 700; font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.035em; line-height: 1.06; }
.prose-page__title span { color: var(--accent); }
.prose-page__meta { margin-top: 12px; color: var(--muted-3); font-size: 14px; }
.prose-page__body > * { margin-bottom: 1.25em; }
.prose-page__body h2 { font-size: 1.5em; font-weight: 700; margin: 1.9em 0 .6em; }
.prose-page__body h3 { font-size: 1.2em; font-weight: 700; margin: 1.6em 0 .5em; }
.prose-page__body ul, .prose-page__body ol { padding-left: 1.4em; }
.prose-page__body li { margin: .4em 0; }
.prose-page__body blockquote { border-left: 3px solid var(--accent); padding-left: 1.1em; color: var(--muted); }
.prose-page__body code { background: var(--surface); padding: .15em .4em; border-radius: 5px; font-size: .9em; }
.prose-page__body hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }
.prose-page__body table { width: 100%; border-collapse: collapse; }
.prose-page__body th, .prose-page__body td { text-align: left; padding: 10px 12px; border: 1px solid var(--border); }
.entry-summary { padding-bottom: 1.6em; margin-bottom: 1.6em; border-bottom: 1px solid var(--border); }
.entry-summary h2 { font-size: 1.4em; }
.entry-summary h2 a { text-decoration: none; color: var(--text); }
.entry-summary h2 a:hover { color: var(--link); }

/* ===========================================================================
   Footer
=========================================================================== */
.site-footer { position: relative; overflow: hidden; border-top: 1px solid var(--border); background: var(--bg-2); }
.site-footer__grid {
	display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 42px 28px;
	padding-block: 60px 40px;
}
.site-footer__brand { display: inline-flex; }
.site-footer__brand img { height: 90px; width: auto; }
.site-footer__tag { color: var(--muted-2); font-size: 14px; margin-top: 16px; max-width: 34ch; }
.site-footer__label { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer ul a { color: var(--muted); text-decoration: none; font-size: 14px; }
.site-footer ul a:hover { color: var(--text); }
.site-footer__legal { position: relative; border-top: 1px solid var(--border); padding-block: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer__legal p { color: var(--muted-3); font-size: 13px; }
@media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ===========================================================================
   Founder block (About)
=========================================================================== */
.founder { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.founder__photo { margin: 0; }
.founder__photo img {
	width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
	border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
}
.founder__body .section__lead { max-width: 62ch; }
.founder__body .section__lead + .section__lead { margin-top: 14px; }
.founder__links { margin-top: 24px; font-size: 14px; color: var(--muted-3); }
@media (max-width: 760px) {
	.founder { grid-template-columns: 1fr; }
	.founder__photo { max-width: 240px; }
}

/* ===========================================================================
   Home (front-page.php) — server-rendered homepage
=========================================================================== */
.hero--home { padding-block: clamp(60px, 10vw, 116px) clamp(48px, 8vw, 84px); }
.hero--home h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 700; max-width: none; line-height: 1.02; }
.hero--home h1 span { display: block; white-space: nowrap; }
.hero--home__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
@media (max-width: 700px) { .hero--home h1 span { white-space: normal; } }

/* Centre-aligned hero copy */
.hero--home__copy { text-align: center; margin-inline: auto; max-width: 720px; }
.hero--home__copy .hero__lead { margin-inline: auto; }
.hero--home__copy .hero__actions { justify-content: center; }
.hero--home__copy .hero__note { margin-inline: auto; }
.hero--home__copy .hero__actions .btn { padding: 11px 20px; font-size: 14px; }
/* Alternate section backgrounds down the page so neighbouring sections
   never share the same tone — homepage only, the FAQ block's own default
   (plain background) is used unmodified on every other page. */
body.pg-home #faq { background: var(--bg-2); border-block: 1px solid var(--border); }
.hero__more {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px;
}
.hero__more span { font-size: 13px; }
.hero__more:hover { color: var(--pop); }
@media (max-width: 920px) {
	.hero--home__grid { grid-template-columns: 1fr; }
}

/* Flat brand background, no sweep — homepage matches the rest of the site */
body.pg-home { background: var(--bg); }
body.pg-home .hero--home {
	background: radial-gradient(1200px 520px at 92% 6%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 62%), var(--bg);
}
/* Floating dots — independent elements, each on its own random path, no connecting lines or shape */
.hero-motes { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mote {
	position: absolute; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff, var(--link) 42%, transparent 75%);
	box-shadow: 0 0 12px 2px color-mix(in srgb, var(--link) 55%, transparent);
	animation: home-float 10s ease-in-out infinite;
}
.mote--pop {
	background: radial-gradient(circle at 35% 30%, #fff, var(--pop) 42%, transparent 75%);
	box-shadow: 0 0 12px 2px color-mix(in srgb, var(--pop) 55%, transparent);
}
@keyframes home-float {
	0%, 100% { transform: translate(0, 0); opacity: .3; }
	50% { transform: translate(7px, -16px); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
	.mote { animation: none; opacity: .4; }
}
body.pg-home .hero--home__grid { position: relative; z-index: 1; }

.hero__lead { color: var(--muted); font-size: clamp(18px, 1.9vw, 21px); margin-top: 30px; max-width: 52ch; }

/* Ambient background blobs — drifted slowly by GSAP in home-anim.js.
   Purely decorative; content inside .amb-host is lifted above them. */
.amb-host { position: relative; overflow: hidden; }
.amb-host > .wrap { position: relative; z-index: 1; }
.amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.amb__blob {
	position: absolute; width: clamp(240px, 30vw, 420px); aspect-ratio: 1; border-radius: 50%;
	filter: blur(70px); opacity: .28; will-change: transform;
}
.amb__blob--a { top: -10%; left: -6%; background: radial-gradient(circle, var(--accent), transparent 70%); }
.amb__blob--b { bottom: -14%; right: -8%; background: radial-gradient(circle, var(--pop), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .amb { display: none; } }

/* WhatsApp floating button — homepage only */
.whatsapp-float {
	position: fixed; right: 22px; bottom: 22px; z-index: 60;
	width: 58px; height: 58px; border-radius: 50%;
	background: #25D366; color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 30px -8px rgba(0,0,0,.5);
	transition: transform .18s ease, box-shadow .18s ease;
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 34px -8px rgba(0,0,0,.6); }
@media (max-width: 560px) {
	.whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
	.whatsapp-float svg { width: 26px; height: 26px; }
}

/* Logo marquee — under the hero */
.logo-strip { overflow: hidden; padding-block: 30px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.logo-strip__label {
	text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
	color: var(--muted-3); margin: 0 0 22px;
}
.logo-strip__track-wrap {
	width: 100%; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-strip__track {
	display: flex; align-items: center; gap: clamp(36px, 6vw, 64px);
	width: max-content; animation: logo-scroll 32s linear infinite;
}
.logo-strip__card {
	display: flex; align-items: center; justify-content: center;
	background: #fff; border-radius: 10px; padding: 8px 16px; flex-shrink: 0;
}
.logo-strip__card img { height: 43px; width: auto; max-width: 125px; object-fit: contain; display: block; }
@keyframes logo-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.logo-strip:hover .logo-strip__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.logo-strip__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
	.logo-strip__track-wrap { mask-image: none; -webkit-mask-image: none; }
}

/* numbered service rows */
.svc-list { border-top: 2px solid var(--border-2); }
.svc-row {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.3fr) auto;
	gap: 16px clamp(20px, 4vw, 64px);
	align-items: baseline;
	padding: 36px 0;
	border-bottom: 2px solid var(--border-2);
	text-decoration: none;
	color: inherit;
	transition: background .16s ease;
}
.svc-row:hover { background: rgba(234, 242, 245, .03); }
.svc-row__n { font-family: var(--font-alt); font-weight: 700; font-size: 15px; color: var(--muted-3); font-variant-numeric: tabular-nums; }
.svc-row__t { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; }
.svc-row:hover .svc-row__t { color: var(--link); }
.svc-row__d { color: var(--muted); font-size: 16px; }
.svc-row .btn--ghost { align-self: center; pointer-events: none; }
@media (max-width: 880px) {
	.svc-row { grid-template-columns: 1fr; gap: 8px; }
	.svc-row .btn--ghost { justify-self: start; margin-top: 8px; }
}

/* Services — hub-and-orbit layout */
.svc-orbit__header { text-align: center; max-width: 640px; margin-inline: auto; }
.svc-orbit__header .section__title { max-width: none; }
.svc-orbit__stage { position: relative; margin-top: 44px; }
.svc-orbit__lines { display: none; }
.svc-orbit__hub-ring { display: none; }
.svc-orbit__card {
	position: static; display: block; text-decoration: none; color: inherit;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	padding: 24px; margin-bottom: 18px;
	transition: border-color .2s ease, transform .3s ease, box-shadow .3s ease;
}
.svc-orbit__card:last-child { margin-bottom: 0; }
.svc-orbit__card:hover {
	border-color: color-mix(in srgb, var(--pop) 45%, var(--border-2));
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--accent) 55%, transparent);
}
.svc-orbit__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--border-2); color: var(--accent); margin-bottom: 14px;
	transition: border-color .2s ease, color .2s ease, transform .3s ease;
}
.svc-orbit__card:hover .svc-orbit__icon { border-color: var(--pop); color: var(--pop); transform: scale(1.08); }
.svc-orbit__n { display: block; font-family: var(--font-alt); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--pop); margin-bottom: 6px; }
.svc-orbit__card h3 { font-size: 19px; font-weight: 800; margin-bottom: 10px; transition: color .2s ease; }
.svc-orbit__card p {
	color: var(--muted); font-size: 15px;
	display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.svc-orbit__card:hover h3 { color: var(--link); }

/* Entrance animation — JS adds --pending, then flips to --visible on scroll into view.
   No-JS / reduced-motion visitors never get --pending, so content is visible by default. */
.svc-orbit__card--pending {
	opacity: 0; transform: translateY(22px);
	transition: opacity .55s ease, transform .55s ease, border-color .2s ease, box-shadow .3s ease;
}
.svc-orbit__card--pending.is-visible { opacity: 1; transform: translateY(0); }
.svc-orbit__card--0.svc-orbit__card--pending { transition-delay: .05s; }
.svc-orbit__card--1.svc-orbit__card--pending { transition-delay: .16s; }
.svc-orbit__card--2.svc-orbit__card--pending { transition-delay: .27s; }
.svc-orbit__card--3.svc-orbit__card--pending { transition-delay: .38s; }

@media (min-width: 980px) {
	.svc-orbit__stage {
		aspect-ratio: 16 / 9; max-width: 1080px; margin-inline: auto;
	}
	.svc-orbit__lines {
		display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
	}
	.svc-orbit__lines path { fill: none; stroke: url(#svcOrbitLine); stroke-width: 2; opacity: .4; }
	.svc-orbit__dot { fill: var(--pop); }
	.svc-orbit__flow { fill: var(--pop); filter: drop-shadow(0 0 3px var(--pop)); }
	.svc-orbit__hub-ring {
		display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
		width: 168px; height: 168px; border-radius: 50%; padding: 3px; z-index: 2;
		background: conic-gradient(from 0deg, var(--accent) 0deg, var(--pop) 90deg, var(--accent) 180deg, var(--pop) 270deg, var(--accent) 360deg);
		box-shadow: 0 0 60px -10px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 30px -6px color-mix(in srgb, var(--pop) 55%, transparent);
	}
	.svc-orbit__hub {
		width: 100%; height: 100%; border-radius: 50%; background: var(--bg);
		display: flex; align-items: center; justify-content: center; text-align: center;
	}
	.svc-orbit__hub span { font-family: var(--font-alt); font-weight: 800; font-size: 16px; color: var(--text); line-height: 1.3; }
	.svc-orbit__card {
		position: absolute; width: 40%; max-width: 300px; margin-bottom: 0; z-index: 1;
	}
	.svc-orbit__card--0 { top: 0; left: 0; }
	.svc-orbit__card--1 { top: 0; right: 0; }
	.svc-orbit__card--2 { bottom: 0; left: 0; }
	.svc-orbit__card--3 { bottom: 0; right: 0; }
}
@media (min-width: 980px) and (prefers-reduced-motion: reduce) {
	.svc-orbit__flow { display: none; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 980px) {
	.svc-orbit__hub-ring { animation: svc-orbit-spin 10s linear infinite, svc-orbit-glow 3.2s ease-in-out infinite; }
	.svc-orbit__hub { animation: svc-orbit-spin-reverse 10s linear infinite; }
}
@keyframes svc-orbit-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes svc-orbit-spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes svc-orbit-glow {
	0%, 100% { box-shadow: 0 0 60px -10px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 30px -6px color-mix(in srgb, var(--pop) 55%, transparent); }
	50% { box-shadow: 0 0 80px -6px color-mix(in srgb, var(--accent) 85%, transparent), 0 0 44px -4px color-mix(in srgb, var(--pop) 75%, transparent); }
}

/* client case cards — framed like a browser window, one card per result */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.case-frame {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	overflow: hidden; transition: border-color .2s ease, transform .3s ease, box-shadow .3s ease;
}
.case-frame:hover {
	border-color: var(--border-2); transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--accent) 55%, transparent);
}
.case-frame__bar {
	display: flex; align-items: center; gap: 6px;
	padding: 12px 16px; background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.case-frame__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); display: block; }
.case-frame__bar em {
	margin-left: auto; font-style: normal; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
	color: var(--muted-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.case-frame__body { padding: 26px; }
.case-frame__stat { font-family: var(--font-alt); font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.case-frame__cap { color: var(--muted-3); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; margin-bottom: 18px; }
.case-frame__body h3 { font-size: 19px; font-weight: 800; }
.case-frame__body p { color: var(--muted); font-size: 15px; margin-top: 12px; }
.case-frame__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.case-frame__tags span { font-size: 12px; color: var(--muted); border: 1px solid var(--border-2); border-radius: 999px; padding: 4px 12px; }

/* Portfolio grid — real client sites with a screenshot and a live link */
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.work-card {
	background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
	transition: border-color .2s ease, transform .3s ease, box-shadow .3s ease;
}
.work-card:hover {
	border-color: var(--border-2); transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--accent) 55%, transparent);
}
.work-card__img {
	border-radius: 10px; overflow: hidden; margin-bottom: 16px; aspect-ratio: 16/10; background: var(--bg-2);
}
.work-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.work-card__stat {
	color: var(--pop); font-family: var(--font-alt); font-size: 12px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px;
}
.work-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.work-card__desc { color: var(--muted); font-size: 14.5px; }
.work-card__link {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
	color: var(--link); font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.work-card__link:hover { color: var(--pop); }

/* two-up testimonial grid */
.two-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
@media (max-width: 720px) { .two-quotes { grid-template-columns: 1fr; } }

/* ===========================================================================
   Book-a-call section (homepage) — copy + pills on the left, a glass
   "schedule now" card on the right, decorative floating dots behind both.
=========================================================================== */
.book-cta {
	position: relative; overflow: hidden;
	background: radial-gradient(1000px 460px at 15% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--bg-2);
	border-block: 1px solid var(--border);
}
.book-cta__dots { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.book-cta__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center;
}
.book-cta__copy { text-align: center; }
.book-cta__eyebrow-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.book-cta__rule { flex: 0 1 64px; height: 1px; background: var(--border-2); }
.book-cta__copy .section__title { max-width: none; margin-inline: auto; }
.book-cta__copy .section__lead { margin-inline: auto; }
.book-cta__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.book-cta__pill {
	display: inline-flex; align-items: center; gap: 10px;
	border: 1px solid var(--border-2); border-radius: 999px; padding: 8px 18px 8px 8px;
	font-size: 14px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.book-cta__pill-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	border: 1px solid var(--border-2); color: var(--pop);
}
.book-cta__pill-icon--accent { color: var(--accent); }
.book-cta__card {
	position: relative; z-index: 1;
	background: color-mix(in srgb, var(--surface) 70%, transparent);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border-2); border-radius: 22px; padding: clamp(26px, 3vw, 34px);
	box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--accent) 45%, transparent);
}
.book-cta__card-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
	background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent);
}
.book-cta__card h3 { font-size: 21px; font-weight: 800; line-height: 1.3; }
.book-cta__card p { color: var(--muted); font-size: 15px; margin-top: 10px; }
.book-cta__card .btn { margin-top: 22px; }
.book-cta__divider {
	display: flex; align-items: center; gap: 12px; margin: 22px 0;
	color: var(--muted-3); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.book-cta__divider::before, .book-cta__divider::after { content: ""; flex: 1; height: 1px; background: var(--border-2); }
.book-cta__alt { text-align: center; color: var(--muted-3); font-size: 14px; }
@media (max-width: 860px) {
	.book-cta__grid { grid-template-columns: 1fr; }
	.book-cta__card { max-width: 440px; margin-inline: auto; }
}

/* ===========================================================================
   SEO report gallery — click-to-zoom lightbox. The card grid is plain
   markup (real <button> elements, visible with or without JS); the
   lightbox open/close logic lives in theme.js as core functionality, with
   seo-anim.js only layering a nicer scale-in on top via a MutationObserver
   on the same .is-open class theme.js toggles.
=========================================================================== */
.seo-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; }
.seo-report-card {
	all: unset; cursor: zoom-in; display: block;
	background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
	overflow: hidden; transition: border-color .2s ease, transform .3s ease, box-shadow .3s ease;
}
.seo-report-card:hover, .seo-report-card:focus-visible {
	border-color: var(--border-2); transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--accent) 55%, transparent);
}
.seo-report-card__frame { display: block; position: relative; aspect-ratio: 16/10; background: var(--bg-2); overflow: hidden; }
.seo-report-card__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s ease; }
.seo-report-card:hover .seo-report-card__frame img, .seo-report-card:focus-visible .seo-report-card__frame img { transform: scale(1.05); }
.seo-report-card__zoom {
	position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%;
	background: rgba(20,30,48,.82); backdrop-filter: blur(4px); color: #fff;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transform: scale(.7); transition: opacity .2s ease, transform .2s ease;
}
.seo-report-card:hover .seo-report-card__zoom, .seo-report-card:focus-visible .seo-report-card__zoom { opacity: 1; transform: scale(1); }
.seo-report-card__body { display: block; padding: 18px 20px; text-align: left; }
.seo-report-card__cat {
	display: block; color: var(--pop); font-family: var(--font-alt); font-size: 12px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px;
}
.seo-report-card h3 { font-size: 17px; font-weight: 800; }
.seo-report-card p { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* Lightbox overlay — CSS-only open/close transition (opacity + scale),
   driven purely by the .is-open class so it works with zero JS animation
   library involved; GSAP only adds a snappier pop on top in seo-anim.js. */
.seo-lightbox {
	position: fixed; inset: 0; z-index: 100;
	display: flex; align-items: center; justify-content: center; padding: 24px;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .25s ease, visibility .25s;
}
.seo-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.seo-lightbox__backdrop { position: absolute; inset: 0; background: rgba(10,14,22,.86); backdrop-filter: blur(3px); }
.seo-lightbox__inner {
	position: relative; z-index: 1; max-width: min(1100px, 100%); max-height: 90vh;
	display: flex; flex-direction: column; gap: 14px; align-items: center;
	transform: scale(.94); transition: transform .25s ease;
}
.seo-lightbox.is-open .seo-lightbox__inner { transform: scale(1); }
.seo-lightbox__img { max-width: 100%; max-height: 78vh; border-radius: 12px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
.seo-lightbox__cap { color: var(--muted); font-size: 14px; text-align: center; max-width: 60ch; }
.seo-lightbox__close {
	position: absolute; top: -18px; right: -18px; width: 40px; height: 40px; border-radius: 50%;
	background: var(--surface); border: 1px solid var(--border-2); color: var(--text);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.seo-lightbox__close:hover { background: var(--surface-2); }
@media (max-width: 560px) {
	.seo-lightbox__close { top: 6px; right: 6px; }
}
body.lightbox-open { overflow: hidden; }

/* ===========================================================================
   SEO page hero hub diagram — central node + 5 orbiting service nodes,
   connecting lines. Positions are plain percentages (no JS measurement
   needed, unlike the homepage's hub-and-orbit), animation is a handful of
   lightweight GSAP tweens in seo-anim.js; everything is visible via CSS
   alone with zero motion if that script never runs.
=========================================================================== */
.seo-hub { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1; margin-inline: auto; }
/* Soft ambient glow behind the whole diagram — one blurred radial gradient,
   no extra DOM, cheap on paint since it never moves. */
.seo-hub::before {
	content: ''; position: absolute; inset: -12%; z-index: -1; pointer-events: none;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%);
	filter: blur(36px);
}
/* Slow decorative ring, spinning continuously behind everything — cheap
   (one element, one CSS animation, no JS). */
.seo-hub__ring {
	position: absolute; inset: 6%; border-radius: 50%; z-index: 0;
	border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border-2));
	animation: seo-hub-ring-spin 26s linear infinite;
}
@keyframes seo-hub-ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seo-hub__ring { animation: none; } }
.seo-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.seo-hub__lines path {
	fill: none; stroke: url(#seoHubLine); stroke-width: 1.5; opacity: .55;
}
/* Electric-current effect: a second path traced directly on top of each
   line, drawn as short bright dashes with a big gap, endlessly cycling its
   dash offset so the dashes race along the wire — reads as current/energy
   flowing through a conduit rather than a single dot drifting along it.
   Pure CSS + SMIL path data (already in the markup), no JS required. */
.seo-hub__current {
	fill: none; stroke: var(--pop); stroke-width: 1.8; stroke-linecap: round;
	stroke-dasharray: 5 15; opacity: .95;
	filter: drop-shadow(0 0 3px var(--pop)) drop-shadow(0 0 7px var(--pop));
	animation: seo-hub-current-flow 2.2s linear infinite;
}
@keyframes seo-hub-current-flow { to { stroke-dashoffset: -80; } }
@media (prefers-reduced-motion: reduce) {
	.seo-hub__current { animation: none; opacity: .5; }
}
.seo-hub__center {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 110px; height: 110px; border-radius: 50%; z-index: 2;
	display: flex; align-items: center; justify-content: center; text-align: center;
	background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 60%);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 40px -6px color-mix(in srgb, var(--accent) 70%, transparent);
	color: #fff; font-family: var(--font-alt); font-weight: 800; font-size: 15px; line-height: 1.25;
	animation: seo-hub-center-glow 2.4s ease-in-out infinite;
}
@keyframes seo-hub-center-glow {
	0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 40px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
	50% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--accent) 24%, transparent), 0 0 62px -4px color-mix(in srgb, var(--accent) 90%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .seo-hub__center { animation: none; } }
/* The orbit wrapper carries the slow rotation; .seo-hub__center sits
   outside it (a sibling) so the hub itself stays put while the ring, the
   connecting lines and the five node cards all swing around it together
   as one rigid group — the lines never detach from their cards because
   they rotate as a unit, not independently. */
.seo-hub__orbit {
	position: absolute; inset: 0; animation: seo-hub-orbit-spin 80s linear infinite;
}
@keyframes seo-hub-orbit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seo-hub__orbit { animation: none; } }
.seo-hub__node {
	position: absolute; z-index: 1; width: 140px; transform: translate(-50%, -50%);
	background: none; border: 0; border-radius: 12px;
	padding: 0; text-align: left;
	box-shadow: none;
}
/* Counter-rotates at the same speed as .seo-hub__orbit (opposite direction)
   so the icon + label always stay upright and horizontal while the card
   itself travels around the ring. Kept on this inner element rather than
   .seo-hub__node, since seo-anim.js already animates that node's own
   transform (the floating bob) via GSAP — stacking a second, independent
   CSS transform animation on the same property/element would fight it. */
.seo-hub__node-face {
	display: flex; align-items: center; gap: 9px;
	animation: seo-hub-orbit-counter 80s linear infinite;
}
@keyframes seo-hub-orbit-counter { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .seo-hub__node-face { animation: none; } }
.seo-hub__icon {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: color-mix(in srgb, var(--pop) 18%, transparent); color: var(--pop);
}
.seo-hub__label { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.3; }
@media (max-width: 560px) {
	.seo-hub { max-width: 320px; }
	.seo-hub__node { width: 122px; padding: 7px 9px; }
	.seo-hub__node-face { gap: 7px; }
	.seo-hub__center { width: 90px; height: 90px; font-size: 13px; }
	.seo-hub__icon { width: 24px; height: 24px; }
	.seo-hub__label { font-size: 9.5px; }
}
/* Slow overall float for the whole diagram — applied to the wrapper, not
   .seo-hub itself, since seo-anim.js already puts a GSAP mouse-tilt
   (rotationX/rotationY) on .seo-hub and the two would fight over the same
   "transform" property. This is pure CSS on a different element, so it
   keeps running even if GSAP never loads. */
body.pg-seo .hero__visual { animation: seo-hub-float 6s ease-in-out infinite; }
@keyframes seo-hub-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { body.pg-seo .hero__visual { animation: none; } }

/* ===========================================================================
   SEO page — two-line hero heading, tighter side padding on the scroll
   section (matching the header's edge-closer gutters), and the scroll-
   synced "what's included" component.
=========================================================================== */
body.pg-seo .hero h1 { max-width: none; line-height: 1.1; }
body.pg-seo .hero h1 span { display: block; }
/* Edge-to-edge hero, same treatment as the website-design page's split
   hero — no side gutters, so the hub diagram has room to be large. */
body.pg-seo .hero > .wrap { padding-inline: 0; max-width: 1360px; }
@media (max-width: 900px) {
	body.pg-seo .hero > .wrap { padding-inline: var(--pad); }
}

.seo-scroll__wrap { padding-inline: clamp(16px, 3vw, 40px); }
.seo-scroll__grid {
	display: grid; grid-template-columns: 380px 1fr; gap: clamp(28px, 4vw, 56px);
	margin-top: 44px;
}
/* .seo-scroll__visual is left at the grid's default align-items: stretch,
   so its box spans the FULL height of the (taller) list column — that's
   what gives position: sticky, on the inner wrapper below, room to travel
   for the whole scroll instead of running out after ~420px and un-sticking
   partway down the list. */
.seo-scroll__visual-inner { position: sticky; top: 110px; height: 480px; }
.seo-scroll__panel {
	position: absolute; inset: 0; opacity: 0; visibility: hidden;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
	text-align: center; transition: opacity .3s ease, visibility .3s;
}
.seo-scroll__panel.is-active { opacity: 1; visibility: visible; }
.seo-scroll__gauge { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.seo-scroll__checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.seo-scroll__checklist li {
	font-size: 14px; color: var(--muted); padding-left: 22px; position: relative;
}
.seo-scroll__checklist li::before {
	content: "\2713"; position: absolute; left: 0; color: var(--pop); font-weight: 700;
}
.seo-scroll__bars { width: 100%; display: grid; gap: 10px; text-align: left; }
.seo-scroll__bar-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.seo-scroll__bar-track { height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.seo-scroll__bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--pop)); }
.seo-scroll__diagram, .seo-scroll__chart { max-width: 100%; height: auto; }
.seo-scroll__stats { display: flex; gap: 10px; width: 100%; }
.seo-scroll__stat {
	flex: 1; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
	padding: 12px; display: flex; flex-direction: column; gap: 2px;
}
.seo-scroll__stat-num { font-family: var(--font-alt); font-weight: 800; font-size: 20px; }
.seo-scroll__stat-label { font-size: 11px; color: var(--muted-3); text-transform: uppercase; letter-spacing: .04em; }
.seo-scroll__panel-title { font-weight: 700; font-size: 15px; margin: 0; }
.seo-scroll__list { display: flex; flex-direction: column; }
.seo-scroll__item {
	display: flex; gap: 20px; padding-block: 24px; border-top: 1px solid var(--border);
	opacity: .55; transition: opacity .25s ease;
}
.seo-scroll__item:first-child { border-top: 0; }
.seo-scroll__item.is-active { opacity: 1; }
.seo-scroll__n { font-family: var(--font-alt); font-weight: 700; font-size: 14px; color: var(--muted-3); flex-shrink: 0; width: 28px; }
.seo-scroll__item.is-active .seo-scroll__n { color: var(--accent); }
.seo-scroll__item h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.seo-scroll__item p { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
	.seo-scroll__grid { grid-template-columns: 1fr; }
	.seo-scroll__visual-inner { position: static; height: auto; margin-bottom: 8px; }
	.seo-scroll__panel { position: relative; inset: auto; opacity: 1; visibility: visible; display: none; }
	.seo-scroll__panel:first-child { display: flex; }
	.seo-scroll__item { opacity: 1; }
}

/* ===========================================================================
   Email marketing page — inbox mockup hero, fails/gets comparison lists,
   and centred section headings sitewide on this page (including FAQ, whose
   markup comes from the shared pwa_faq_block() helper — scoped here rather
   than changed globally so every other page keeps its own alignment).
=========================================================================== */
/* Same sitewide 44px as the other service-page heroes. This heading is
   longer than the others though, so it uses the same text-wrap: balance
   technique as the ecommerce page instead of forcing a fixed two-span
   break — the browser picks the most even line split for whatever width
   is actually available, rather than a split hand-tuned to one width. */
body.pg-email .hero h1 { line-height: 1.1; max-width: 19ch; text-wrap: balance; }
body.pg-email .hero h1 span { display: inline; }
body.pg-email .hero__grid { grid-template-columns: 1.2fr 1fr; }
body.pg-email .hero > .wrap { padding-inline: clamp(16px, 3vw, 40px); max-width: 1320px; }
@media (max-width: 900px) { body.pg-email .hero > .wrap { padding-inline: var(--pad); } }
/* Reuses the SEO page's float keyframe (a plain translateY bob) rather than
   defining a near-identical one — it's already generic. */
body.pg-email .hero__visual { animation: seo-hub-float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body.pg-email .hero__visual { animation: none; } }

.inbox-mock {
	width: 100%; max-width: 440px; margin-inline: auto;
	background: color-mix(in srgb, var(--surface) 82%, transparent);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border-2); border-radius: 20px;
	padding: 22px 22px 24px;
	box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--accent) 45%, transparent);
}
.inbox-mock__top {
	display: flex; align-items: center; gap: 8px;
	font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-3);
	padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.inbox-mock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pop); box-shadow: 0 0 8px var(--pop); }
.inbox-mock__list { display: grid; gap: 16px; }
.inbox-mock__row { display: flex; gap: 12px; align-items: flex-start; }
.inbox-mock__avatar {
	flex: none; width: 38px; height: 38px; border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--pop)); color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px;
}
.inbox-mock__msg { flex: 1; min-width: 0; }
.inbox-mock__row-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.inbox-mock__row-top strong { font-weight: 700; }
.inbox-mock__time { color: var(--muted-3); font-size: 11.5px; flex-shrink: 0; }
.inbox-mock__msg p { color: var(--muted); font-size: 13px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-mock__stats { display: flex; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.inbox-mock__stat { flex: 1; text-align: center; }
.inbox-mock__stat-num { display: block; font-family: var(--font-alt); font-weight: 800; font-size: 22px; color: var(--pop); }
.inbox-mock__stat-label { display: block; font-size: 11px; color: var(--muted-3); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

/* Fails-vs-gets comparison — two EQUAL-width columns (overrides .split's
   default 1.05fr/1fr) so neither side reads as more important than the
   other. The .checklist bullets use a single solid lime instead of the
   sitewide blue-to-lime gradient dot — two colours in one small bullet
   read as a mistake at this size, and this page's own accent is lime
   throughout (the "What you get" title, the stat numbers). */
.compare-grid { grid-template-columns: 1fr 1fr; }
.compare-col__title { font-size: 18px; font-weight: 800; margin-bottom: 18px; }
.compare-col__title--x { color: var(--muted-2); }
.compare-col__title--check { color: var(--pop); }
body.pg-email .checklist li::before { background: var(--pop); }
.x-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.x-list li { position: relative; padding-left: 30px; color: var(--muted-2); }
.x-list li::before {
	content: "\2715"; position: absolute; left: 0; top: 1px; width: 16px; height: 16px;
	border-radius: 5px; background: rgba(255,255,255,.07); color: var(--muted-3);
	font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
@media (max-width: 820px) { .compare-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Stacked scroll cards ("the order it happens in") — pure CSS position:
   sticky, no JS required: each card sticks at a slightly lower offset than
   the one before it, so as the page scrolls the next card's rounded top
   edge rises up and covers the previous one, leaving a thin sliver of it
   peeking out above — a fully working, zero-JS version of the pinned-card
   scroll effect. GSAP (email-anim.js) only adds a subtle shrink/fade to
   each card as the next one arrives on top of it. */
/* No .amb-host here deliberately — that component's overflow: hidden would
   silently break position: sticky on every .stack-card inside it (an
   ancestor with hidden/auto/scroll overflow removes a sticky descendant's
   scroll containment). The ambient glow below is a plain background
   gradient on .stack-cards itself instead, which doesn't affect overflow. */
.stack-cards {
	position: relative;
	background: radial-gradient(900px 420px at 15% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
		radial-gradient(700px 380px at 100% 100%, color-mix(in srgb, var(--pop) 10%, transparent), transparent 60%);
	border-radius: 28px;
}
.stack-card {
	position: sticky; background: linear-gradient(165deg, var(--surface), var(--bg-2));
	border: 1px solid var(--border-2); border-radius: 24px; overflow: hidden;
	padding: clamp(26px, 4vw, 40px); margin-bottom: 28px;
	min-height: clamp(240px, 34vw, 340px);
	display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: center;
	box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
}
.stack-card:nth-child(1) { top: 100px; z-index: 1; }
.stack-card:nth-child(2) { top: 124px; z-index: 2; }
.stack-card:nth-child(3) { top: 148px; z-index: 3; }
.stack-card:nth-child(4) { top: 172px; z-index: 4; }
.stack-card:nth-child(5) { top: 196px; z-index: 5; }
.stack-card:nth-child(6) { top: 220px; z-index: 6; }
/* Large faint watermark number in the corner — decorative only. A plain
   z-index: -1 here would paint it behind the card's own background instead
   of behind just the text (negative z-index escapes the whole stacking
   context), so instead __main/__list are explicitly lifted to z-index: 1
   and this stays at the default 0 — both compared within the same
   .stack-card stacking context, so the ordering is unambiguous. */
.stack-card__num {
	position: absolute; top: 6px; left: 20px; z-index: 0;
	font-family: var(--font-alt); font-weight: 800; font-size: 96px; line-height: 1;
	color: color-mix(in srgb, var(--text) 5%, transparent); pointer-events: none;
}
.stack-card__main { position: relative; z-index: 1; min-width: 0; }
.stack-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.stack-card__icon {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 14px;
	background: color-mix(in srgb, var(--pop) 16%, transparent); color: var(--pop);
}
.stack-card__tag {
	display: inline-flex; padding: 6px 14px; border-radius: 999px;
	background: var(--bg-2); border: 1px solid var(--border-2);
	font-family: var(--font-alt); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--muted-3);
}
.stack-card h3 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 800; margin-bottom: 10px; }
.stack-card p { color: var(--muted); font-size: 15px; max-width: 54ch; }
.stack-card__list {
	position: relative; z-index: 1;
	list-style: none; margin: 0; padding: 20px 0 20px 28px; display: grid; gap: 12px;
	min-width: 210px; border-left: 1px solid var(--border);
}
.stack-card__list li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--muted-2); }
.stack-card__list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--pop); font-weight: 700; }
@media (max-width: 760px) {
	.stack-card { grid-template-columns: 1fr; min-height: 0; padding: 24px; }
	.stack-card__list { border-left: 0; border-top: 1px solid var(--border); padding: 16px 0 0; margin-top: 4px; }
	.stack-card:nth-child(1) { top: 90px; }
	.stack-card:nth-child(2) { top: 106px; }
	.stack-card:nth-child(3) { top: 122px; }
	.stack-card:nth-child(4) { top: 138px; }
	.stack-card:nth-child(5) { top: 154px; }
	.stack-card:nth-child(6) { top: 170px; }
}

/* Centred section headings sitewide on this page. */
body.pg-email #faq > .wrap { text-align: center; }
body.pg-email #faq .section__title { margin-inline: auto; }
body.pg-email #faq .faq__list { margin-inline: auto; text-align: left; }
/* Animated accordion — the .faq__answer height is driven by GSAP in
   email-anim.js (which intercepts the summary click); overflow: hidden
   here is what makes that height animation read as a clean slide rather
   than content spilling out mid-transition. Native <details>/<summary>
   still works perfectly with no animation if GSAP never loads. */
body.pg-email .faq__answer { overflow: hidden; }

/* Same centred + animated-accordion treatment on the ecommerce page. */
body.pg-ecommerce #faq > .wrap { text-align: center; }
body.pg-ecommerce #faq .section__title { margin-inline: auto; }
body.pg-ecommerce #faq .faq__list { margin-inline: auto; text-align: left; }
body.pg-ecommerce .faq__answer { overflow: hidden; }

/* ===========================================================================
   WP core alignment classes
=========================================================================== */
.alignleft { float: left; margin: .4em 1.5em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }
.wp-caption-text { color: var(--muted-3); font-size: 13px; }

/* ===========================================================================
   v10 — MOTION + POLISH LAYER
   Everything below supports assets/site-anim.js (GSAP + Lenis) and the
   sitewide UI refresh. Content is always visible without JS: the only
   pre-hidden state is behind html.pwa-anim, which an inline <head> script
   adds and which removes itself after 3s even if no script ever runs.
=========================================================================== */

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
html.has-lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Pre-hide the hero copy for the split-second before its entrance plays */
.pwa-anim .crumbs,
.pwa-anim .hero__eyebrow,
.pwa-anim .hero h1,
.pwa-anim .hero__sub,
.pwa-anim .hero__lead,
.pwa-anim .hero__actions,
.pwa-anim .hero__note,
.pwa-anim .hero__visual { opacity: 0; }

/* SplitText masks — a little vertical room so descenders aren't clipped */
.sw-mask { padding-block: 0.06em 0.14em; margin-block: -0.06em -0.14em; }
.sc-mask { padding-block: 0.04em 0.1em; margin-block: -0.04em -0.1em; }
.hero h1 .grad-text { transition: text-shadow 1.4s ease; }
.hero h1 .grad-text.is-lit { text-shadow: 0 0 36px color-mix(in srgb, var(--pop) 38%, transparent); }

/* Keyboard focus — visible everywhere */
:focus-visible { outline: 2px solid var(--pop); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }

/* Spacing utilities (replace the old inline margin styles) */
.mt-xs { margin-top: 14px; }
.mt-s  { margin-top: 24px; }
.mt-m  { margin-top: 32px; }
.mt-l  { margin-top: clamp(36px, 4vw, 48px); }
.eyebrow--flush { margin-bottom: 0; }
.eyebrow:not(.eyebrow--flush)::before {
	content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7;
}
.section-head .eyebrow::before, .tl-header .eyebrow::before, .svc-orbit__header .eyebrow::before { display: none; }

/* Scroll progress */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 90; pointer-events: none; }
.scroll-progress span {
	display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
	background: linear-gradient(90deg, var(--accent), var(--link), var(--pop));
	box-shadow: 0 0 12px color-mix(in srgb, var(--pop) 60%, transparent);
}

/* Nav — animated underline + active page */
.site-nav__list > li > a { position: relative; transition: color .2s ease; }
@media (min-width: 900px) {
	.site-nav__list > li > a::after {
		content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
		background: var(--pop); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out);
	}
	.site-nav__list > li > a:hover::after,
	.site-nav__list > li > a.is-active::after { transform: scaleX(1); transform-origin: left; }
}
.site-nav__list > li > a.is-active { color: var(--text); }
.has-sub .sub { border-radius: 18px; padding: 12px; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.sub__item { transition: background .2s ease, transform .3s var(--ease-out); }
.sub__item:hover { transform: translateX(4px); }

/* Buttons — light sweep on hover, magnetic-friendly transitions */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
	transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn.is-magnetic { transition: box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn--ghost { backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--muted-3); }

/* Hero backdrop — grid, orbs, peptide chain */
.hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-deco__grid {
	position: absolute; inset: -1px;
	background-image:
		linear-gradient(to right, rgba(243,247,252,.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(243,247,252,.06) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(560px circle at calc(var(--mx, 72) * 1%) calc(var(--my, 35) * 1%), #000 0%, transparent 70%);
	        mask-image: radial-gradient(560px circle at calc(var(--mx, 72) * 1%) calc(var(--my, 35) * 1%), #000 0%, transparent 70%);
}
.hero-deco__orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; will-change: transform; }
.hero-deco__orb--a { width: clamp(280px, 34vw, 520px); aspect-ratio: 1; top: -18%; left: -8%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, transparent), transparent 70%); }
.hero-deco__orb--b { width: clamp(220px, 26vw, 400px); aspect-ratio: 1; bottom: -26%; right: 4%; background: radial-gradient(circle, color-mix(in srgb, var(--pop) 34%, transparent), transparent 70%); opacity: .35; }
.hero-deco__chain {
	position: absolute; width: clamp(280px, 32vw, 460px); height: auto; aspect-ratio: 1;
	top: 50%; right: clamp(-60px, 2vw, 60px); margin-top: calc(clamp(280px, 32vw, 460px) / -2);
	color: var(--link); opacity: .42; overflow: visible;
}
.hero-deco__chain .hero-deco__atoms circle { fill: var(--bg); stroke: var(--link); stroke-width: 1.4; }
.hero-deco__chain .hero-deco__atoms circle.is-pop { fill: var(--pop); stroke: var(--pop); }
.hero-deco__chain--left { right: auto; left: clamp(-140px, -4vw, -40px); width: clamp(220px, 22vw, 340px); margin-top: calc(clamp(220px, 22vw, 340px) / -2); opacity: .22; }
.hero--home .hero-deco__chain--right { right: clamp(-140px, -4vw, -40px); width: clamp(220px, 22vw, 340px); margin-top: calc(clamp(220px, 22vw, 340px) / -2); opacity: .22; }
@media (max-width: 900px) {
	.hero-deco__chain { opacity: .14; right: -30%; }
	.hero-deco__chain--left { display: none; }
}
.hero--interior { min-height: clamp(420px, 52vh, 560px); display: flex; align-items: center; }
.hero--interior > .wrap { width: 100%; }
.hero--interior h1 { max-width: 15ch; }
.hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; z-index: 1;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pop) 45%, transparent), transparent);
}
.crumbs { position: relative; z-index: 2; padding-top: 22px; }

/* Pointer-following card spotlight (desktop) */
.has-spotlight:hover {
	background-image: radial-gradient(380px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--link) 12%, transparent), transparent 60%);
}

/* Steps — the lime top rule draws across as they enter */
.step { position: relative; border-top: 0; border-radius: var(--radius); padding: 28px 26px; overflow: hidden; border: 1px solid var(--border); }
.step::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--pop), var(--link)); transform-origin: 0 50%;
	transition: transform 1.1s var(--ease-out);
}
.step:nth-child(2)::before { transition-delay: .12s; }
.step:nth-child(3)::before { transition-delay: .24s; }
.step:nth-child(4)::before { transition-delay: .36s; }
.pwa-motion .steps:not(.is-drawn) .step::before { transform: scaleX(0); }
.step__k { color: var(--pop); }

/* Timeline — progress rail + current row */
.timeline { position: relative; }
.timeline__rail {
	position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 1;
	background: linear-gradient(var(--pop), var(--accent)); transform-origin: 50% 0;
}
.timeline__row { transition: background-color .5s ease; }
.timeline__row.is-current { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.timeline__row.is-current .timeline__k { color: var(--pop); }

/* Stats */
.stat { transition: background-color .3s ease; }
.stat__num { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

/* Logo strip */
.logo-strip { padding-block: 34px; }
.logo-strip__track.is-gsap { animation: none; }
.logo-strip__card { transition: transform .4s var(--ease-out), box-shadow .4s ease; }
.logo-strip__card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }

/* Work / case cards */
.work-card { border-radius: 20px; }
.work-card__img { position: relative; }
.work-card__img img { transition: transform .9s var(--ease-out); }
.work-card:hover .work-card__img img { transform: scale(1.05); }
.work-card__link { transition: color .2s ease, gap .3s var(--ease-out); }
.work-card__link:hover { gap: 10px; }
.case { position: relative; overflow: hidden; transition: border-color .3s ease, transform .4s var(--ease-out); }
.case:hover { border-color: var(--border-2); transform: translateY(-4px); }
.case::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: .8; }

/* Quotes */
.quote { position: relative; padding: 8px 0 8px 28px; border-left: 0; }
.quote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: linear-gradient(var(--accent), var(--pop)); }
.quote p { line-height: 1.45; letter-spacing: -0.01em; }

/* Pills */
.pill { transition: border-color .25s ease, color .25s ease, background .25s ease, transform .3s var(--ease-out); }
.pill:hover { border-color: var(--pop); color: var(--text); background: color-mix(in srgb, var(--pop) 8%, transparent); transform: translateY(-2px); }

/* Checklist ticks instead of gradient squares */
.checklist li::before {
	content: "\2713"; top: 3px; width: 20px; height: 20px; border-radius: 6px;
	background: color-mix(in srgb, var(--pop) 16%, transparent); color: var(--pop);
	font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}

/* Founder photo */
.founder__photo { overflow: hidden; border-radius: var(--radius); }
.founder__photo img { border: 0; }

/* Forms */
.book__form { border-top: 0; border: 1px solid var(--border-2); position: relative; overflow: hidden; }
.book__form::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.book__form input, .book__form select, .book__form textarea { transition: border-color .2s ease, box-shadow .2s ease; }
.book__form input:hover, .book__form select:hover, .book__form textarea:hover { border-color: var(--muted-3); }
.book__form input:focus, .book__form select:focus, .book__form textarea:focus {
	outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Blog / prose */
.blog-card { border-radius: 20px; }
.blog-card h2 { transition: color .2s ease; }
.blog-card:hover h2 { color: var(--pop); }
.prose-page__cat {
	order: -1; align-self: flex-start; margin-bottom: 18px;
	color: var(--pop); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pop) 30%, transparent);
}
.prose-page__meta { margin-top: 16px; }
.prose-page__body { font-size: 18px; line-height: 1.8; }
.prose-page__body h2 { letter-spacing: -0.025em; }
.prose-page__body a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Footer */
.site-footer__glow {
	position: absolute; top: -220px; left: 10%; width: 60%; height: 380px; pointer-events: none;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
	filter: blur(30px);
}
.site-footer__grid { position: relative; padding-block: clamp(64px, 8vw, 96px) 40px; }
.site-footer ul a { position: relative; transition: color .2s ease, padding-left .3s var(--ease-out); }
.site-footer ul a:hover { padding-left: 6px; color: var(--pop); }
.site-footer__mark { position: relative; overflow: hidden; padding-block: 8px 18px; max-width: none; }
.site-footer__mark span {
	display: block; white-space: nowrap; text-align: center;
	font-size: clamp(38px, 9.2vw, 150px); font-weight: 700; letter-spacing: -0.055em; line-height: .95;
	color: color-mix(in srgb, var(--text) 4%, transparent);
	-webkit-text-stroke: 1px color-mix(in srgb, var(--text) 16%, transparent);
	user-select: none;
}
.to-top {
	display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
	color: var(--muted-2); font-size: 13px; font-weight: 600;
	padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-2);
	transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.to-top:hover { color: var(--pop-ink); background: var(--pop); border-color: var(--pop); }

/* Book-a-call band */
.book-cta__card { transition: border-color .3s ease, box-shadow .4s ease; }
.book-cta__card:hover { border-color: color-mix(in srgb, var(--pop) 35%, var(--border-2)); box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--accent) 60%, transparent); }
.book-cta__pill { transition: border-color .25s ease, transform .3s var(--ease-out); }
.book-cta__pill:hover { border-color: var(--pop); transform: translateY(-2px); }

/* Homepage: services orbit cards breathe a little more */
.svc-orbit__card { border-radius: 20px; }

/* WhatsApp float: soft ping so it reads as live */
.whatsapp-float::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; z-index: -1;
	animation: wa-ping 2.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes wa-ping { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(1.7); opacity: 0; } }

/* Small screens */
@media (max-width: 560px) {
	.hero__actions .btn { flex: 1 1 auto; }
	.hero h1 { font-size: clamp(32px, 9vw, 40px); }
	.hero--home h1 { font-size: clamp(36px, 10.5vw, 46px); }
	.site-logo img { height: 50px; }
	.site-header__inner { min-height: 72px; }
	.site-footer__legal { justify-content: center; text-align: center; }
	.card, .case, .work-card, .book__form { padding: 22px; }
}
@media (max-width: 899px) {
	.site-nav { inset: 84px 0 auto 0; max-height: calc(100dvh - 84px); }
}
@media (max-width: 560px) {
	.site-nav { inset: 72px 0 auto 0; max-height: calc(100dvh - 72px); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__eyebrow::before, .whatsapp-float::before { animation: none; }
	.btn::after { display: none; }
	.site-header.is-tucked { transform: none; }
}

/* Contact page: separate the FAQ from the form section visually */
body.pg-contact #faq { background: var(--bg-2); border-top: 1px solid var(--border); }
.book__form label span { font-size: 13px; }
@media (max-width: 560px) {
	.hero--home .hero__actions { flex-direction: column; gap: 18px; }
	.hero--home .hero__actions .btn { flex: none; min-width: 220px; }
}

/* Mobile nav panel — full-width rows, static submenu (the desktop hover
   transform no longer leaks in via :focus-within), slide-down entrance. */
@media (max-width: 899px) {
	.site-nav { padding-top: 8px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
	.site-nav__list > li > a { display: flex; width: 100%; justify-content: space-between; }
	.site-nav__list > li > a.is-active { color: var(--pop); }
	.has-sub .sub,
	.has-sub:hover .sub,
	.has-sub:focus-within .sub {
		transform: none; left: auto; background: transparent; backdrop-filter: none;
		border-radius: 0; padding: 4px 0 10px 14px; border-left: 1px solid var(--border-2); margin: 6px 0 8px;
	}
	.has-sub .sub__label { display: none; }
	.sub__item { padding: 10px 12px; }
	.sub__item:hover { transform: none; }
	.has-sub .caret { transition: transform .3s var(--ease-out); }
	.has-sub.sub-open .caret { transform: rotate(180deg); }
	.site-nav__list > li { opacity: 1; }
	body.nav-open .site-nav__list > li { animation: nav-item-in .5s var(--ease-out) both; }
	body.nav-open .site-nav__list > li:nth-child(2) { animation-delay: .04s; }
	body.nav-open .site-nav__list > li:nth-child(3) { animation-delay: .08s; }
	body.nav-open .site-nav__list > li:nth-child(4) { animation-delay: .12s; }
	body.nav-open .site-nav__list > li:nth-child(5) { animation-delay: .16s; }
	body.nav-open .site-nav__list > li:nth-child(6) { animation-delay: .2s; }
	.nav-toggle span { transition: transform .3s var(--ease-out), opacity .2s ease; }
	body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
	body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@keyframes nav-item-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.nav-open .site-nav__list > li { animation: none; } }

/* Four-card grids (Services hub, FAQ "go deeper") sit 2×2 instead of 3+1 */
@media (min-width: 760px) {
	.cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.case__num { line-height: 1.15; letter-spacing: -0.03em; }
.case h3 { line-height: 1.25; }

/* Homepage hero: room for the big nowrap headline so it stays centred */
.hero--home__copy { max-width: 1040px; }
.hero--home h1 { font-size: clamp(40px, 5.6vw, 76px); }
.hero--home .hero__lead { max-width: 52ch; }
.hero--home .hero__note { max-width: 64ch; }