/**
 * Rankiva — layout and components.
 *
 * The colours, type and identity are set in assets/css/rankiva.css, which
 * loads after this file. Token names such as --green and --mint are kept from
 * the framework; they hold the Rankiva violet and lilac values.
 *
 * 01 Tokens          06 Capability system   11 Blog
 * 02 Base            07 Orbit / ecosystem   12 Forms
 * 03 Layout          08 Editorial sections  13 Footer
 * 04 Header          09 Journey / network   14 Elementor compatibility
 * 05 Hero            10 Inner pages         15 Responsive
 */

/* == 01 Tokens ============================================================ */
:root {
	--green: #5b3df5;
	--green-deep: #4326d6;
	--green-ink: #2a1690;
	--green-glow: rgba(91, 61, 245, 0.28);

	--mint-050: #f7f5ff;
	--mint-100: #f2efff;
	--mint-200: #e9e4ff;
	--mint-300: #ddd6ff;

	--navy: #17123f;
	--navy-2: #1d1749;
	--navy-3: #241d57;
	--navy-4: #2f2770;

	/* Premium green surface system — the shared "dark surface" family that
	   replaces navy wherever navy was used as an actual background, refined
	   from the approved Guest Post selected-site card. Three roles:
	   --surface-premium (boxed panels/CTAs with their own light blooms),
	   --surface-premium-hero (full-bleed heroes/backdrops, moodier, single
	   bloom), --surface-premium-flat (small UI chrome — nav, pills, badges —
	   no blooms, since they'd be distracting at that scale or behind motion).
	   --surface-premium-linear is the shared base ramp alone, for components
	   that already draw their own separate glow overlay. --premium-glow is
	   the brightest stop; it and every listed foreground token were checked
	   against the darkest AND brightest points of every gradient here and
	   clear WCAG AA (4.5:1) for text, so contrast holds regardless of where
	   content sits on the surface. */
	--premium-glow: #3a1fc4;
	--premium-deep: #1e0f6b;
	--premium-text: #ece8ff;
	--premium-text-soft: rgba(236, 232, 255, 0.74);
	--premium-highlight: #c9bcff;

	--surface-premium-linear: linear-gradient(160deg, var(--green-ink) 0%, var(--premium-glow) 46%, var(--premium-deep) 100%);
	--surface-premium:
		radial-gradient(75% 95% at 100% 0%, rgba(201, 188, 255, 0.28) 0%, rgba(201, 188, 255, 0) 62%),
		radial-gradient(55% 70% at 0% 0%, rgba(201, 188, 255, 0.12) 0%, rgba(201, 188, 255, 0) 60%),
		radial-gradient(60% 80% at 0% 100%, rgba(23, 11, 82, 0.55) 0%, rgba(23, 11, 82, 0) 65%),
		var(--surface-premium-linear);
	--surface-premium-hero:
		radial-gradient(70% 85% at 85% 0%, rgba(201, 188, 255, 0.2) 0%, transparent 62%),
		radial-gradient(60% 80% at 0% 100%, rgba(23, 11, 82, 0.5) 0%, transparent 65%),
		linear-gradient(165deg, var(--green-ink) 0%, var(--premium-glow) 42%, #170b52 100%);
	--surface-premium-flat: linear-gradient(160deg, var(--green-ink) 0%, var(--premium-glow) 100%);

	/* Hero tier: the SAME family as --surface-premium above (built from the
	   identical --green-ink / --premium-glow hues), but tinted into white
	   instead of held dark — the light, airy member of the family rather
	   than an unrelated pale-mint recipe. */
	--hero-tint: #e8e3fd;
	--hero-floor: #c8bdf5;

	--white: #ffffff;
	--surface: #ffffff;
	--surface-2: #faf9ff;
	--surface-3: #f7f5ff;
	--ink: #17123f;
	--body: #4d4868;
	--body-dark: #b9b3d6;
	--muted: #7f7a99;
	--muted-dark: #77729a;

	--rule: #e7e3f4;
	--rule-mint: #dcd5fb;
	--rule-dark: rgba(255, 255, 255, 0.1);

	--wrap: 1280px;
	--gutter: clamp(1.25rem, 5vw, 3.5rem);
	--band: clamp(3.75rem, 7vw, 6rem);

	--r-xs: 2px;
	--r-sm: 4px;
	--r: 10px;
	--r-lg: 20px;

	--display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--shadow-sm: 0 1px 2px rgba(23, 18, 63, 0.05), 0 8px 24px -18px rgba(23, 18, 63, 0.3);
	--shadow: 0 24px 60px -34px rgba(23, 18, 63, 0.42);
	--shadow-navy: 0 40px 90px -50px rgba(23, 18, 63, 0.85);

	--admin-offset: 0px;
	--header-h: 82px;
}

/* == 02 Base ============================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
	margin: 0;
	background: var(--white);
	color: var(--body);
	font-family: var(--sans);
	/* Inter sets ~3% wider than the previous body face at the same size, so the
	   size comes down by the same 3% and every line breaks where it did before. */
	font-size: 1.03rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--display);
	color: var(--ink);
	font-weight: 700;
	line-height: 1.08;
	/* Plus Jakarta Sans is tighter by default than the previous display face, so
	   the negative tracking is eased back to keep headings from closing up. */
	letter-spacing: -0.018em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

/* Type scale — five clear steps:
   main heading → section heading → title → description → supporting text.
   The two largest steps come down ~4% because Plus Jakarta Sans has a cap
   height 6% taller than the previous face and would otherwise read larger. */
h1 { font-size: clamp(2.25rem, 4.8vw, 3.72rem); line-height: 1.06; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.68rem, 3.05vw, 2.48rem); line-height: 1.12; }
h3 { font-size: clamp(1.12rem, 1.6vw, 1.35rem); line-height: 1.28; letter-spacing: -0.014em; }
h4 { font-size: 1.05rem; line-height: 1.35; letter-spacing: -0.01em; }
h5 { font-size: 0.95rem; line-height: 1.4; letter-spacing: 0; }
h6 { font-size: 0.82rem; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--green-deep);
	text-decoration-color: color-mix(in srgb, var(--green) 45%, transparent);
	text-underline-offset: 3px;
	transition: color 0.2s var(--ease);
}

a:hover { color: var(--green-ink); }

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

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

::selection { background: var(--mint-300); color: var(--navy); }

blockquote {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	line-height: 1.4;
	letter-spacing: -0.018em;
	color: var(--ink);
}

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

.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: 1rem;
	top: -100px;
	z-index: 999;
	background: var(--green);
	color: var(--navy);
	padding: 0.7rem 1.2rem;
	border-radius: var(--r-sm);
	font-weight: 600;
	transition: top 0.2s var(--ease);
}

.skip-link:focus { top: calc(1rem + var(--admin-offset)); color: var(--navy); }

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

.wrap--narrow { max-width: 780px; }

.band { padding-block: var(--band); position: relative; }
.band--tight { padding-block: clamp(2.75rem, 4.5vw, 4rem); }

/* Surface rhythm. Navy is now reserved for two deliberate moments per page,
   not used as a default background. */
.band--soft {
	background: var(--surface-2);
	border-block: 1px solid var(--rule);
}

.band--mist {
	background: linear-gradient(180deg, var(--mint-050) 0%, var(--mint-100) 100%);
	border-block: 1px solid var(--rule-mint);
}

/* An atmospheric white section: green light, no flat fill. */
.band--atmos {
	background: var(--surface);
	overflow: hidden;
}

.band--atmos::before,
.band--atmos::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.band--atmos::before {
	width: 760px;
	height: 760px;
	right: -280px;
	top: -300px;
	background: radial-gradient(circle, rgba(91, 61, 245, 0.09) 0%, transparent 68%);
}

.band--atmos::after {
	width: 620px;
	height: 620px;
	left: -260px;
	bottom: -280px;
	background: radial-gradient(circle, rgba(91, 61, 245, 0.07) 0%, transparent 70%);
}

.band--atmos > * { position: relative; z-index: 1; }

.band--navy {
	/* Generic fallback for anything carrying this class directly (the
	   Rankiva Social-icons widget's "Navy" surface option); .stats below
	   overrides this with the flat token for the stats/counter band
	   specifically. */
	background: var(--surface-premium);
	color: var(--premium-text-soft);
	overflow: hidden;
}

.band--navy h1,
.band--navy h2,
.band--navy h3,
.band--navy h4 { color: var(--white); }

.band--navy a { color: var(--green); }
.band--navy a:hover { color: var(--mint-200); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mb-0 { margin-bottom: 0; }

/* Hairline lattice used as a texture on dark surfaces. */
.lattice {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 76px 76px;
	-webkit-mask-image: radial-gradient(120% 90% at 72% 12%, #000 0%, transparent 72%);
	mask-image: radial-gradient(120% 90% at 72% 12%, #000 0%, transparent 72%);
}

.lattice--ink {
	background-image:
		linear-gradient(rgba(23, 18, 63, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(23, 18, 63, 0.045) 1px, transparent 1px);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--green-deep);
	margin: 0 0 1.1rem;
}

.eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--green);
	flex: none;
}

.band--navy .eyebrow { color: var(--green); }

.section-head { max-width: 760px; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section-head p { color: var(--body); font-size: 1.06rem; line-height: 1.65; }
.band--navy .section-head p { color: var(--body-dark); }

.section-head--split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: end;
	max-width: none;
}

.section-head--split > div { max-width: 620px; }

/* Buttons — squared, custom, with a fill that wipes in from the left. */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 48px;
	padding: 0.9rem 1.55rem;
	border: 1px solid transparent;
	border-radius: var(--r);
	font-family: var(--sans);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.005em;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.28s var(--ease), border-color 0.28s var(--ease), transform 0.28s var(--ease), box-shadow 0.28s var(--ease), background-color 0.28s var(--ease);
}

.btn > * { position: relative; z-index: 2; }
.btn svg { flex: none; transition: transform 0.3s var(--ease); }

/* Hover fill that sweeps in from the left. Every variant defines its own colour. */
.btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--ease);
}

.btn:hover::after { transform: scaleX(1); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.1s; }

.btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--white), 0 0 0 6px rgba(91, 61, 245, 0.55);
}

/* Primary: a top-lit emerald gradient with an inner highlight, a tinted ring
   and a controlled shadow, navy type for contrast. On hover the surface
   brightens, lifts, and a single shine sweeps across. */
.btn--primary {
	background: linear-gradient(180deg, #7f66ff 0%, var(--green) 52%, #5235e8 100%);
	color: var(--navy);
	border-color: rgba(67, 38, 214, 0.55);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.38),
		inset 0 -1px 0 rgba(23, 18, 63, 0.08),
		0 1px 2px rgba(23, 18, 63, 0.08),
		0 12px 26px -12px rgba(67, 38, 214, 0.7);
}

.btn--primary::after { background: linear-gradient(180deg, #8a74ff 0%, #6a4ef7 55%, #5b3df5 100%); }

.btn--primary:hover {
	color: var(--navy);
	border-color: rgba(67, 38, 214, 0.7);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 -1px 0 rgba(23, 18, 63, 0.08),
		0 2px 4px rgba(23, 18, 63, 0.08),
		0 20px 36px -14px rgba(67, 38, 214, 0.8);
}

/* The shine. One pass, no loop — restraint is the point. */
.btn--primary::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	z-index: 1;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: skewX(-18deg);
	transition: left 0.7s var(--ease);
	pointer-events: none;
}

.btn--primary:hover::before { left: 120%; }
.btn--primary:hover svg { transform: translateX(3px); }

/* Secondary (quiet): a soft white surface with an inner highlight; fills mint on hover. */
.btn--quiet {
	background: linear-gradient(180deg, var(--white) 0%, var(--surface-2) 100%);
	color: var(--ink);
	border-color: var(--rule);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(23, 18, 63, 0.05), 0 8px 20px -14px rgba(23, 18, 63, 0.3);
}

.btn--quiet::after { background: linear-gradient(180deg, var(--mint-050) 0%, var(--mint-100) 100%); }
.btn--quiet:hover { color: var(--green-ink); border-color: var(--mint-300); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(23, 18, 63, 0.05), 0 14px 28px -14px rgba(67, 38, 214, 0.35); }
.btn--quiet:hover svg { transform: translateX(3px); }

/* Ghost: outline on light surfaces, frosted glass on navy surfaces. */
.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--rule);
}

.btn--ghost::after { background: var(--mint-100); }
.btn--ghost:hover { color: var(--green-ink); border-color: var(--mint-300); box-shadow: 0 10px 24px -16px rgba(67, 38, 214, 0.4); }

.band--navy .btn--ghost,
.network-panel .btn--ghost,
.network-cta .btn--ghost,
.offer-card .btn--ghost,
.cta-band .btn--ghost {
	color: var(--white);
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(6px);
}

.band--navy .btn--ghost::after,
.network-panel .btn--ghost::after,
.network-cta .btn--ghost::after,
.offer-card .btn--ghost::after,
.cta-band .btn--ghost::after { background: rgba(255, 255, 255, 0.12); }

.band--navy .btn--ghost:hover,
.network-panel .btn--ghost:hover,
.network-cta .btn--ghost:hover,
.offer-card .btn--ghost:hover,
.cta-band .btn--ghost:hover { color: var(--white); border-color: rgba(91, 61, 245, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 28px -14px rgba(91, 61, 245, 0.5); }

.band--navy .btn:focus-visible,
.network-panel .btn:focus-visible,
.network-cta .btn:focus-visible,
.offer-card .btn:focus-visible,
.cta-band .btn:focus-visible { box-shadow: 0 0 0 3px var(--green-ink), 0 0 0 6px rgba(91, 61, 245, 0.7); }

/* Sizes. */
.btn--lg { min-height: 54px; padding: 1.05rem 1.85rem; font-size: 1rem; border-radius: 12px; }
.btn--sm { min-height: 40px; padding: 0.6rem 1.1rem; font-size: 0.875rem; border-radius: 8px; }

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

/* Text link with a rule that grows under it. */
.textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--green-deep);
	text-decoration: none;
	padding-bottom: 3px;
	background-image: linear-gradient(var(--green), var(--green));
	background-size: 0 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.35s var(--ease), color 0.2s var(--ease);
}

.textlink:hover { background-size: 100% 1.5px; }
.textlink svg { transition: transform 0.3s var(--ease); }
.textlink:hover svg { transform: translateX(3px); }

.demo-flag {
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.5rem;
	padding: 0.16rem 0.45rem;
	border: 1px solid var(--rule-mint);
	background: var(--mint-100);
	border-radius: var(--r-xs);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--green-ink);
}

.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-in,
.reveal.is-visible { opacity: 1; transform: none; }

/* == 04 Header ============================================================ */
/* One header treatment everywhere: white, in normal document flow, with a
   single primary CTA. No overlay variant, so no light-on-light failure and no
   duplicate button. */
.site-header {
	position: sticky;
	top: var(--admin-offset);
	z-index: 100;
	/* A genuinely visible sage-green sweep as the PRIMARY background, not a
	   texture layered under white — the eye should register "this bar is
	   tinted" immediately, not on close inspection. Paired with a solid
	   (not fading) green edge and a real elevation shadow, so the header
	   reads as a distinct, floating premium surface at rest, not a
	   slightly-different white. */
	background: linear-gradient(120deg, #ffffff 0%, #c4dfd4 55%, #b1a5e3 100%);
	backdrop-filter: saturate(220%) blur(20px);
	-webkit-backdrop-filter: saturate(220%) blur(20px);
	border-bottom: 1px solid rgba(42, 22, 144, 0.18);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 18px 40px -18px rgba(42, 22, 144, 0.4);
	transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.35s var(--ease);
}

.site-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--green-ink) 0%, var(--green) 30%, #8a74ff 50%, var(--green) 70%, var(--green-ink) 100%);
	box-shadow: 0 1px 14px rgba(91, 61, 245, 0.55);
	pointer-events: none;
}

/* A soft glow behind the logo, so the lockup reads as a considered,
   featured element rather than a bare image sitting on the bar. */
.site-brand { position: relative; }
.site-brand::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 120px;
	height: 120px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(58, 31, 196, 0.16) 0%, transparent 70%);
	pointer-events: none;
}

.site-header.is-scrolled {
	background: linear-gradient(120deg, #ffffff 0%, #bbd9cd 55%, #a99ce0 100%);
	border-bottom-color: rgba(42, 22, 144, 0.32);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 26px 56px -18px rgba(42, 22, 144, 0.48);
}

/* Brand left, navigation centred in the remaining space, one CTA right.
   The height is fixed by --header-h, so sticky offsets across the site are
   unaffected by the logo size. */
.header-inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2rem);
	min-height: var(--header-h);
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	flex: none;
	min-width: 0;
	border-radius: var(--r-sm);
}

/* Logo sizing: the width comes from Settings → Brand (one value per
   viewport, set on :root by inc/enqueue.php); height is automatic, so the
   image keeps its proportions. Safeguards: a logo too tall for the header
   at the chosen width is narrowed (using its own ratio, printed by
   rankiva_brand()) until it fits, it can never be wider than its container,
   and the height cap with object-fit is the last resort for an image
   whose ratio is unknown — so it is never stretched or cropped. */
.site-brand__logo,
.site-brand img {
	--logo-h-max: calc(var(--header-h) - 1.5rem);
	display: block;
	width: min(var(--logo-w, 200px), calc(var(--logo-h-max) * var(--logo-ratio, 999)));
	max-width: 100%;
	height: auto;
	max-height: var(--logo-h-max);
	object-fit: contain;
	object-position: left center;
}

.site-brand__name {
	font-family: var(--display);
	font-size: 1.28rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--ink);
}

.site-brand__name em { font-style: normal; color: var(--green); }

.nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.nav ul { list-style: none; margin: 0; padding: 0; }

.nav > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 0.2rem;
}

.nav a {
	position: relative;
	display: block;
	padding: 0.55rem 0.85rem;
	border-radius: 999px;
	/* Held 3% below the previous size so the menu occupies the same width as
	   before and does not wrap at laptop widths. */
	font-size: 0.91rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.nav a:hover { color: var(--green-ink); background: var(--mint-100); box-shadow: inset 0 0 0 1px rgba(91, 61, 245, 0.14); }

/* The active item carries a soft permanent fill plus a glowing underline,
   so it reads clearly as "you are here" rather than needing a hover to
   notice — matching the accent already used under footer column headings. */
/* The active item: a clearly-visible white-based pill (so it reads against
   the header's own green wash, not just against plain white) with a
   defined green ring, plus a glowing underline beneath it — "this is the
   page you're on," unmistakable at a glance. */
.nav .current-menu-item > a,
.nav .current-menu-parent > a,
.nav .current_page_item > a { color: var(--green-ink); font-weight: 600; background: rgba(255, 255, 255, 0.94); box-shadow: inset 0 0 0 2px var(--green), 0 6px 16px -6px rgba(42, 22, 144, 0.45); }
.nav .current-menu-item > a::after,
.nav .current-menu-parent > a::after,
.nav .current_page_item > a::after {
	content: "";
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0.2rem;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--green), rgba(91, 61, 245, 0.4));
	box-shadow: 0 0 8px rgba(91, 61, 245, 0.5);
}

/* Parent items show a small caret. */
.nav > ul > .menu-item-has-children > a { padding-right: 1.65rem; }
.nav > ul > .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 0.8rem;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.6;
}

.nav a:focus-visible,
.site-brand:focus-visible,
.header-cta:focus-visible,
.nav__toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.nav li { position: relative; }

.nav .sub-menu {
	position: absolute;
	top: calc(100% + 0.4rem);
	left: 0;
	min-width: 264px;
	padding: 0.5rem;
	background: var(--white);
	border: 1px solid var(--rule);
	border-top: 3px solid var(--green);
	border-radius: var(--r);
	box-shadow: 0 2px 4px rgba(23, 18, 63, 0.05), 0 34px 64px -26px rgba(42, 22, 144, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}

.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nav .sub-menu a {
	color: var(--ink);
	padding: 0.6rem 0.75rem;
	font-size: 0.92rem;
	border-radius: var(--r-sm);
}

.nav .sub-menu a:hover { background: var(--mint-100); color: var(--green-ink); }

.sub-menu-toggle {
	position: absolute;
	inset: 0;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* The single primary CTA is never duplicated and never hidden — on small
   screens it only tightens. */
.header-cta { flex: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(23, 18, 63, 0.06), 0 10px 22px -14px rgba(67, 38, 214, 0.55), 0 0 0 4px rgba(91, 61, 245, 0.14); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.header-cta:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(23, 18, 63, 0.08), 0 16px 30px -14px rgba(67, 38, 214, 0.65), 0 0 0 5px rgba(91, 61, 245, 0.2); }

.nav__toggle {
	display: none;
	flex: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 11px;
	background: none;
	border: 1px solid var(--rule);
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav__toggle:hover { background: var(--mint-100); border-color: var(--rule-mint); }

.nav__toggle-bar {
	display: block;
	height: 2px;
	border-radius: 1px;
	background: var(--ink);
	transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



/* == 05 Hero ============================================================== */
.hero {
	position: relative;
	/* Layered light: a base wash, a warm-white spotlight over the copy, a diagonal
	   light beam, an emerald light source top-right and faint navy depth at the
	   base. Static, so the headline stays effortless to read. */
	background:
		radial-gradient(46% 60% at 18% 32%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 62%),
		radial-gradient(54% 70% at 92% 8%, rgba(91, 61, 245, 0.24) 0%, rgba(91, 61, 245, 0) 66%),
		radial-gradient(40% 48% at 66% 98%, rgba(67, 38, 214, 0.1) 0%, rgba(67, 38, 214, 0) 64%),
		radial-gradient(60% 50% at 84% 110%, rgba(23, 18, 63, 0.08) 0%, rgba(23, 18, 63, 0) 60%),
		linear-gradient(178deg, var(--surface) 0%, var(--surface-3) 58%, var(--hero-floor) 100%);
	color: var(--body);
	padding-top: clamp(3rem, 6vw, 5.5rem);
	padding-bottom: clamp(3.25rem, 6vw, 5rem);
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--rule-mint);
}

/* Two soft emerald orbs add depth behind the grid; blurred so they never compete with type. */
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
	filter: blur(40px);
}

.hero::before {
	width: 500px;
	height: 500px;
	right: -100px;
	top: -180px;
	background: radial-gradient(circle, rgba(91, 61, 245, 0.5) 0%, rgba(124, 99, 255, 0.22) 42%, rgba(91, 61, 245, 0.08) 58%, transparent 70%);
	animation: hero-orb-a 34s ease-in-out infinite;
	/* Pointer offset composes with the drift animation above rather than
	   fighting it: "translate" is a separate CSS property from "transform",
	   so the keyframe (which only ever touches transform) and this JS-driven
	   custom property apply together without conflict. */
	translate: var(--hero-mx, 0px) var(--hero-my, 0px);
	transition: translate 0.4s var(--ease);
}

.hero::after {
	width: 420px;
	height: 420px;
	left: -80px;
	top: -200px;
	background: radial-gradient(circle, rgba(91, 61, 245, 0.32) 0%, rgba(67, 38, 214, 0.13) 44%, transparent 68%);
	animation: hero-orb-b 42s ease-in-out infinite;
	translate: var(--hero-mx2, 0px) var(--hero-my2, 0px);
	transition: translate 0.4s var(--ease);
}

/* Slow, small drifts. Both keyframes start and end at rest, so the hero is
   identical when motion is reduced or the animation is stopped. */
@keyframes hero-orb-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
	50% { transform: translate3d(-26px, 20px, 0) scale(1.05); opacity: 0.86; }
}

@keyframes hero-orb-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
	50% { transform: translate3d(24px, -18px, 0) scale(1.06); opacity: 0.84; }
}

/* A single soft emerald aurora drifting behind the artwork side. It inherits
   the lattice mask, so it stays in the upper right and never reaches the copy. */
.hero .lattice::before {
	content: "";
	position: absolute;
	top: -16%;
	right: -8%;
	width: 60%;
	height: 86%;
	border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
	background: linear-gradient(142deg, rgba(124, 99, 255, 0.16) 0%, rgba(91, 61, 245, 0.07) 40%, rgba(91, 61, 245, 0) 74%);
	filter: blur(56px);
	pointer-events: none;
	animation: hero-aurora 38s ease-in-out infinite;
}

@keyframes hero-aurora {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.95; }
	50% { transform: translate3d(-3%, 4%, 0) scale(1.08); opacity: 0.7; }
}

/* Hairline horizon accent at the base of the hero, with a light that drifts
   slowly along it. */
.hero .lattice::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(91, 61, 245, 0.4) 24%, rgba(124, 99, 255, 0.7) 50%, rgba(91, 61, 245, 0.4) 76%, transparent 100%);
	background-size: 210% 100%;
	background-position: 100% 0;
	animation: hero-horizon 32s ease-in-out infinite;
}

@keyframes hero-horizon {
	0%, 100% { background-position: 100% 0; }
	50% { background-position: 0 0; }
}

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.4rem 0.95rem 0.4rem 0.4rem;
	border: 1px solid var(--rule-mint);
	border-radius: 100px;
	background: var(--white);
	box-shadow: var(--shadow-sm);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--body);
	margin-bottom: 1.75rem;
}

.hero__kicker b {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	border-radius: 100px;
	background: var(--green);
	color: var(--navy);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hero__title {
	color: var(--ink);
	margin-bottom: 1.4rem;
	letter-spacing: -0.026em;
}

/* The single accent moment in the headline: a hand-drawn-feeling underline. */
.hero__title em {
	position: relative;
	font-style: normal;
	color: var(--green);
	white-space: nowrap;
}

.hero__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.04em;
	height: 0.1em;
	background: linear-gradient(90deg, var(--green), rgba(91, 61, 245, 0.35));
	opacity: 0.3;
	border-radius: 999px;
}

.hero__lead {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	color: var(--body);
	max-width: 54ch;
	margin-bottom: 2.25rem;
}

.hero__actions { margin-bottom: 2.25rem; }

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--rule-mint);
	list-style: none;
	margin: 0;
}

.hero__meta li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	color: var(--body);
}

.hero__meta li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
	flex: none;
	box-shadow: 0 0 0 4px rgba(91, 61, 245, 0.14), 0 0 12px rgba(91, 61, 245, 0.35);
}

/* Optional owner-supplied background. The scrim is a gradient rather than a
   flat tint so the left-hand copy stays readable while the right-hand side of
   the image still shows through. */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 38%, rgba(242, 252, 248, 0.66) 66%, rgba(242, 239, 255, 0.42) 100%);
}

.hero--image .lattice { opacity: 0.5; }

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--green-deep);
	margin: 0 0 1.35rem;
}

.hero__eyebrow::before {
	content: "";
	width: 30px;
	height: 2px;
	background: linear-gradient(90deg, var(--green), transparent);
	flex: none;
}

.hero__visual { position: relative; }

.hero__visual svg {
	width: 100%;
	height: auto;
	overflow: visible;
	/* One shadow, warmed towards the brand green so the artwork reads as lit by
	   the hero rather than pasted onto it. */
	filter: drop-shadow(0 30px 44px rgba(42, 22, 144, 0.13));
	animation: hero-float 9s ease-in-out infinite;
}

@keyframes hero-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* A soft mint halo behind the artwork so it sits in the space, not on it. */
.hero__visual::before {
	content: "";
	position: absolute;
	inset: 8% 4%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(91, 61, 245, 0.17) 0%, rgba(91, 61, 245, 0.06) 45%, transparent 70%);
	filter: blur(24px);
	pointer-events: none;
	animation: hero-halo 16s ease-in-out infinite;
}

@keyframes hero-halo {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.06); opacity: 0.78; }
}

/* A single high light source from the upper right, matching the direction the
   artwork's own shadows already fall. */
.hero__visual::after {
	content: "";
	position: absolute;
	top: -6%;
	right: -4%;
	width: 46%;
	height: 46%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(242, 239, 255, 0.35) 42%, transparent 70%);
	filter: blur(30px);
	pointer-events: none;
}

/* Premium treatment for the artwork itself — see template-parts/graphic-hero.php.
   A slow glass sheen crosses the dashboard card, then rests for most of the cycle. */
.hero-art__sheen {
	animation: hero-sheen 19s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes hero-sheen {
	0% { transform: translateX(0); opacity: 0; }
	6% { opacity: 0.85; }
	26% { opacity: 0.85; }
	32% { transform: translateX(860px); opacity: 0; }
	100% { transform: translateX(860px); opacity: 0; }
}

/* The artwork shows one of several valid states per load (assets/js/main.js).
   Only the parts that change settle in, once, with a single quiet fade — the
   card, its lighting and the sheen above are untouched. Reduced motion never
   gets the class. */
.hero-art.is-restated .hero-art__var {
	animation: hero-state-in 620ms var(--ease) both;
}

@keyframes hero-state-in {
	from { opacity: 0.2; }
	to { opacity: 1; }
}

/* On phones the large blurs are the expensive part, so the hero keeps its
   gradients and loses the extra moving layers. */
@media (max-width: 780px) {
	.hero .lattice::before { display: none; }
	.hero-art__sheen { display: none; }
	.hero::before,
	.hero::after,
	.hero .lattice::after,
	.hero__visual::before { animation: none; }
}

/* == 06 Capability system ================================================= */
.caps {
	position: relative;
	background: var(--surface-2);
	border-block: 1px solid var(--rule);
	padding-block: var(--band);
}

.caps__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.caps__editorial {
	position: sticky;
	top: calc(var(--header-h) + var(--admin-offset) + 2rem);
}

.caps__editorial h2 { margin-bottom: 1.1rem; }
.caps__editorial > p { color: var(--body); max-width: 42ch; margin-bottom: 0; }

.caps__count {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
	font-family: var(--display);
}

.caps__count strong {
	font-size: 2.8rem;
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--ink);
}

.caps__count span {
	font-family: var(--sans);
	font-size: 0.85rem;
	color: var(--muted);
	max-width: 16ch;
	line-height: 1.4;
}

.caps__list {
	border-top: 1px solid var(--rule);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: cap;
}

/* Each capability is a disclosure row, not a card. */
.cap {
	position: relative;
	border-bottom: 1px solid var(--rule);
	transition: background 0.4s var(--ease);
}

.cap::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 0;
	height: 2px;
	background: var(--green);
	transition: width 0.5s var(--ease);
}

.cap.is-open { background: linear-gradient(180deg, var(--white), transparent 78%); }
.cap.is-open::before { width: 100%; }

.cap__head {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) 2.25rem;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1.6rem 0;
	background: none;
	border: 0;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	color: inherit;
}

.cap__num {
	font-family: var(--display);
	font-size: 1.65rem;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--rule);
	transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}

.cap.is-open .cap__num { color: var(--green); }

.cap__title {
	font-family: var(--display);
	font-size: clamp(1.22rem, 2vw, 1.6rem);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.028em;
	color: var(--ink);
	margin: 0;
	transition: color 0.3s var(--ease);
}

.cap__head:hover .cap__title { color: var(--green-ink); }
.cap__head:hover .cap__num { color: var(--mint-300); }
.cap__head:hover .cap__sign { border-color: var(--green); background: var(--mint-050); }

.cap__sign {
	position: relative;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--rule);
	border-radius: 50%;
	justify-self: end;
	transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.4s var(--ease);
}

.cap__sign::before,
.cap__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.5px;
	background: var(--ink);
	transform: translate(-50%, -50%);
	transition: transform 0.4s var(--ease), background 0.3s var(--ease);
}

.cap__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.cap.is-open .cap__sign { background: var(--green); border-color: var(--green); transform: rotate(180deg); }
.cap.is-open .cap__sign::before,
.cap.is-open .cap__sign::after { background: var(--navy); }
.cap.is-open .cap__sign::after { transform: translate(-50%, -50%) rotate(0deg); }

/* display:grid would otherwise defeat the hidden attribute. */
.cap__panel[hidden] { display: none; }

.cap__panel {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 1rem;
	padding: 0 0 2rem;
}

.cap__body { grid-column: 2; }

.cap__desc {
	font-size: 1.02rem;
	color: var(--body);
	max-width: 56ch;
	margin-bottom: 1.35rem;
}

/* Sub-services read as a typographic list with hairline separators, not chips. */
.cap__subs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.75rem;
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 0;
}

.cap__subs li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.5rem 0;
	border-top: 1px solid var(--rule-mint);
	font-size: 0.92rem;
	color: var(--body);
}

.cap__subs li::before {
	content: "";
	width: 5px;
	height: 5px;
	margin-top: 0.55rem;
	background: var(--green);
	flex: none;
	transform: rotate(45deg);
}

.cap__motif {
	grid-column: 2;
	position: relative;
	margin-bottom: 1.5rem;
	border: 1px solid var(--rule-mint);
	border-radius: var(--r);
	background:
		radial-gradient(120% 140% at 88% 8%, var(--mint-100) 0%, transparent 60%),
		var(--mint-050);
	padding: 1.25rem;
	max-width: 420px;
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 14px 32px -24px rgba(67, 38, 214, 0.35);
}

.cap__motif svg { width: 100%; height: auto; }

/* == 07 Orbit / ecosystem ================================================= */
.orbit-band {
	position: relative;
	background: var(--surface);
	color: var(--body);
	padding-block: var(--band);
	overflow: hidden;
}

.orbit-band::before {
	content: "";
	position: absolute;
	width: 980px;
	height: 980px;
	left: 62%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(91, 61, 245, 0.1) 0%, transparent 62%);
	pointer-events: none;
}

.orbit-band__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.orbit { position: relative; }
.orbit svg { width: 100%; height: auto; overflow: visible; }

/* The orbit: five labels on one circle, drifting around a shared core.
   One turn per minute, linear, so every label is readable as it moves.
   Labels are counter-rotated at the same rate so they always sit upright. */
.orbit-stage {
	--orbit-duration: 60s;
	--orbit-pill-w: 178px;
	--orbit-pill-h: 46px;
	position: relative;
	width: min(100%, 560px);
	aspect-ratio: 1;
	margin-inline: auto;
}

.orbit-bg,
.orbit-spokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.orbit-ring {
	position: absolute;
	inset: 0;
	animation: orbit-spin var(--orbit-duration) linear infinite;
	will-change: transform;
}

.orbit-node {
	position: absolute;
	width: var(--orbit-pill-w);
	height: var(--orbit-pill-h);
	margin: calc(var(--orbit-pill-h) / -2) 0 0 calc(var(--orbit-pill-w) / -2);
}

.orbit-node__pill {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	height: 100%;
	padding: 0 0.85rem 0 0.8rem;
	background: var(--white);
	border: 1px solid rgba(91, 61, 245, 0.55);
	border-radius: 100px;
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.04), 0 12px 28px -18px rgba(23, 18, 63, 0.35);
	animation: orbit-counter var(--orbit-duration) linear infinite;
	will-change: transform;
}

.orbit-node__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(91, 61, 245, 0.18); }
.orbit-node__pill strong { flex: 1; min-width: 0; font-family: var(--display); font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orbit-node__num { flex: none; font-family: var(--display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--green-deep); }

.orbit-core {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	text-align: center;
	pointer-events: none;
}

.orbit-core strong { font-family: var(--display); font-size: clamp(1rem, 2.4vw, 1.2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.orbit-core span { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.orbit-stage:hover .orbit-ring,
.orbit-stage:hover .orbit-node__pill { animation-play-state: paused; }

@keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-counter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

@media (max-width: 720px) {
	.orbit-stage { --orbit-pill-w: 152px; --orbit-pill-h: 40px; }
	.orbit-node__pill { gap: 0.45rem; padding: 0 0.7rem 0 0.65rem; }
	.orbit-node__pill strong { font-size: 0.8rem; }
	.orbit-node__num { font-size: 0.62rem; }
	.orbit-core span { font-size: 0.56rem; }
}

@media (max-width: 430px) {
	.orbit-stage { --orbit-pill-w: 128px; --orbit-pill-h: 34px; }
	.orbit-node__pill { gap: 0.4rem; padding: 0 0.6rem 0 0.55rem; }
	.orbit-node__pill strong { font-size: 0.7rem; }
	.orbit-node__dot { width: 7px; height: 7px; }
}

@media (prefers-reduced-motion: reduce) {
	.orbit-ring,
	.orbit-node__pill { animation: none; }
}

.stage-list { list-style: none; margin: 2rem 0 0; padding: 0; }

.stage-list li {
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
	border-top: 1px solid var(--rule);
	font-size: 0.96rem;
	color: var(--body);
}

.stage-list li:last-child { border-bottom: 1px solid var(--rule); }
.stage-list strong { display: block; color: var(--ink); font-family: var(--display); letter-spacing: -0.015em; margin-bottom: 0.15rem; }
.band--navy .stage-list li { border-color: var(--rule-dark); color: var(--body-dark); }
.band--navy .stage-list strong { color: var(--white); }

.stage-list .dot {
	width: 9px;
	height: 9px;
	margin-top: 0.5rem;
	flex: none;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 5px rgba(91, 61, 245, 0.13);
}

/* == 08 Editorial sections ================================================ */
/* Proof strip — a single rule of statements, no cards. */
.proof {
	border-bottom: 1px solid var(--rule);
	background: var(--white);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.proof__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.proof__item {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	font-size: 0.94rem;
	color: var(--body);
}

.proof__item strong {
	font-family: var(--display);
	font-size: 1.06rem;
	color: var(--ink);
	letter-spacing: -0.02em;
}

.proof__item + .proof__item { padding-left: clamp(1.5rem, 4vw, 3.5rem); border-left: 1px solid var(--rule); }

/* Principles — asymmetric editorial numbering. */
.principles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--rule);
}

.principle {
	position: relative;
	padding: 2.25rem 1.75rem 2rem 0;
	border-bottom: 1px solid var(--rule);
}

.principle:not(:nth-child(3n + 1)) { padding-left: 1.75rem; border-left: 1px solid var(--rule); }

.principle h3 { font-size: 1.12rem; margin-bottom: 0.55rem; }
.principle p { font-size: 0.96rem; margin: 0; }

.principle::before {
	content: counter(principle, decimal-leading-zero);
	counter-increment: principle;
	display: block;
	font-family: var(--display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--green);
	margin-bottom: 1.25rem;
}

.principles { counter-reset: principle; }

/* Quotes — one lead quote at editorial scale, supporting ones beneath. */
/* Lead testimonial: a spotlight card with a soft mint gradient, a large
   quotation glyph and a green accent edge. Supporting quotes sit in cards below. */
.quote-lead {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: end;
	margin-bottom: clamp(1.25rem, 2vw, 1.5rem);
	padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem);
	background:
		radial-gradient(60% 90% at 100% 0%, rgba(91, 61, 245, 0.12) 0%, transparent 60%),
		linear-gradient(180deg, var(--white) 0%, var(--mint-050) 100%);
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 28px 60px -34px rgba(23, 18, 63, 0.32);
	overflow: hidden;
}

.quote-lead::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--green), rgba(91, 61, 245, 0.2));
}

.quote__mark {
	position: absolute;
	top: 0.5rem;
	right: 1.75rem;
	font-family: var(--display);
	font-size: clamp(6rem, 12vw, 9rem);
	line-height: 1;
	color: var(--mint-200);
	opacity: 0.85;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.band--navy .quote__mark { color: rgba(91, 61, 245, 0.16); }

.quote-lead .quote__text {
	position: relative;
	max-width: 30ch;
	font-family: var(--display);
	font-size: clamp(1.3rem, 2.6vw, 1.95rem);
	line-height: 1.3;
	letter-spacing: -0.026em;
	color: var(--ink);
	margin-bottom: 0;
}

.quote-lead .quote__by {
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding-left: clamp(1.25rem, 2.5vw, 2rem);
	border-left: 1px solid var(--rule-mint);
}

.quote-lead .quote__name { font-family: var(--display); font-size: 1.05rem; }

.quote-lead .quote__text::before { content: "\201C"; margin-left: -0.45em; color: var(--green); }
.quote-lead .quote__text::after { content: "\201D"; color: var(--green); }
.band--navy .quote-lead .quote__text { color: var(--white); }

.quote__by { position: relative; display: flex; align-items: center; gap: 0.85rem; font-size: 0.92rem; }
.quote__who { display: flex; flex-direction: column; min-width: 0; }

/* Client avatar: the testimonial's featured image, or initials until one is set. */
.quote__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--mint-100), var(--mint-300));
	border: 1px solid var(--rule-mint);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	font-family: var(--display);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--green-ink);
}

.quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-lead .quote__avatar { width: 54px; height: 54px; font-size: 1rem; }
.quote__name { display: block; font-weight: 600; color: var(--ink); }
.band--navy .quote__name { color: var(--white); }
.quote__role { color: var(--muted); }

.quote-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.quote {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.35rem, 2.5vw, 1.9rem);
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 14px 36px -28px rgba(23, 18, 63, 0.3);
	overflow: hidden;
	transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.quote:hover { border-color: var(--mint-300); transform: translateY(-3px); box-shadow: 0 2px 4px rgba(23, 18, 63, 0.04), 0 24px 48px -28px rgba(23, 18, 63, 0.35); }

/* The green edge the featured quote used to carry, now on every card so the
   four read as one set. */
.quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--green), rgba(91, 61, 245, 0.2));
}

.quote .quote__mark {
	top: 0.35rem;
	right: 1.1rem;
	font-size: 4.5rem;
	opacity: 0.9;
}

.quote .quote__text {
	position: relative;
	flex: 1;
	font-family: var(--display);
	font-size: 1.08rem;
	line-height: 1.5;
	letter-spacing: -0.012em;
	color: var(--ink);
	margin-bottom: 1.5rem;
	padding-right: 2rem;
}

.quote .quote__by { padding-top: 1.1rem; border-top: 1px solid var(--rule-mint); }
.band--navy .quote { background: var(--navy-2); border-color: var(--rule-dark); }
.band--navy .quote .quote__text { color: var(--white); }

/* Magazine layout for insights. */
.magazine {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.magazine__lead { display: block; text-decoration: none; color: inherit; }

.magazine__lead .post-card__thumb {
	aspect-ratio: 16 / 10;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--mint-100);
	border: 1px solid var(--rule);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 14px 36px -28px rgba(23, 18, 63, 0.3);
	margin-bottom: 1.5rem;
	transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

.magazine__lead:hover .post-card__thumb { border-color: var(--mint-300); box-shadow: var(--shadow); }

.magazine__lead img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.magazine__lead:hover img { transform: scale(1.03); }

.magazine__lead h3 {
	font-size: clamp(1.3rem, 2.1vw, 1.65rem);
	margin-bottom: 0.6rem;
	transition: color 0.25s var(--ease);
}

.magazine__lead:hover h3 { color: var(--green-ink); }

.magazine__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.magazine__list li { border-bottom: 1px solid var(--rule); }

.magazine__list a {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: 1rem;
	padding: 1.35rem 0;
	text-decoration: none;
	color: inherit;
}

.magazine__list .idx {
	font-family: var(--display);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--green);
	padding-top: 0.2rem;
}

.magazine__list h3 { font-size: 1.05rem; margin-bottom: 0.3rem; transition: color 0.25s var(--ease); }
.magazine__list a:hover h3 { color: var(--green-ink); }
.magazine__list p { font-size: 0.88rem; color: var(--muted); margin: 0; }

/* == 09 Journey / network ================================================= */
.journey {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	counter-reset: journey;
}

.journey__step {
	position: relative;
	padding: 2.5rem 1.75rem 2.5rem 0;
	border-top: 1px solid var(--rule);
}

.journey__step:not(:nth-child(3n + 1)) { padding-left: 1.75rem; border-left: 1px solid var(--rule); }
.journey__step h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.journey__step p { font-size: 0.94rem; margin: 0; color: var(--body); }
.band--navy .journey__step { border-color: var(--rule-dark); }
.band--navy .journey__step p { color: var(--body-dark); }

.journey__num {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--display);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--green);
	margin-bottom: 1.5rem;
}

.journey__num::after {
	content: "";
	width: 34px;
	height: 1px;
	background: linear-gradient(90deg, var(--green), transparent);
}

/* Progress marker sitting on the top rule of each step. */
.journey__step::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 7px;
	height: 7px;
	background: var(--green);
	transform: rotate(45deg);
}

.journey__step:not(:nth-child(3n + 1))::before { left: 1.75rem; }

/* Process — retained for service and network pages. */
.process {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	counter-reset: step;
}

.process__step {
	padding: 2.25rem 1.5rem 2rem 0;
	border-top: 1px solid var(--rule);
}

.process__step:not(:nth-child(3n + 1)) { padding-left: 1.5rem; border-left: 1px solid var(--rule); }

.band--navy .process__step { border-color: var(--rule-dark); }

.process__num {
	display: block;
	font-family: var(--display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--green);
	margin-bottom: 1.2rem;
}

.process__step h3 { font-size: 1.12rem; margin-bottom: 0.45rem; }
.process__step p { font-size: 0.93rem; margin: 0; }

/* Reasons grid — hairline, not cards. */
.reasons {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--rule);
}

.reason {
	padding: 2rem 1.5rem 1.75rem 0;
	border-bottom: 1px solid var(--rule);
}

.reason:not(:nth-child(3n + 1)) { padding-left: 1.5rem; border-left: 1px solid var(--rule); }

.reason h3 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.08rem;
	margin-bottom: 0.5rem;
}

.reason h3 svg { color: var(--green); flex: none; }
.reason p { font-size: 0.94rem; margin: 0; }

/* Network panel — authority-network styling. */
.network-panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
	padding: clamp(2rem, 4vw, 3.5rem);
	background: var(--surface-premium);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--r-lg);
	overflow: hidden;
	color: var(--premium-text);
	box-shadow: 0 40px 90px -50px rgba(42, 22, 144, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.network-panel h2 { color: var(--white); }
.network-panel .eyebrow { color: var(--premium-highlight); }
.network-panel > * { position: relative; }
/* The texture is decorative: keep it out of the grid and behind the content. */
.network-panel > .lattice { position: absolute; }

.network-checks { list-style: none; margin: 0; padding: 0; }

.network-checks li {
	display: flex;
	gap: 0.75rem;
	padding: 0.85rem 0;
	border-top: 1px solid var(--rule-dark);
	font-size: 0.93rem;
}

.network-checks li:last-child { border-bottom: 1px solid var(--rule-dark); }
.network-checks svg { color: var(--green); flex: none; margin-top: 2px; }

/* Closing CTA — high-impact conversion environment. */
.cta-band {
	position: relative;
	/* Flat base: the big soft ellipse in ::before below is this band's own
	   light source, so the surface itself skips the token's built-in blooms
	   to avoid stacking two glows. */
	background: var(--surface-premium-linear);
	color: var(--premium-text);
	overflow: hidden;
	padding-block: clamp(3.75rem, 7vw, 6rem);
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cta-band::before {
	content: "";
	position: absolute;
	width: 1100px;
	height: 620px;
	left: 50%;
	bottom: -420px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(91, 61, 245, 0.32) 0%, transparent 64%);
	pointer-events: none;
}

.cta-band__inner { position: relative; max-width: 780px; margin-inline: auto; }
.cta-band h2 { color: var(--white); font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1.1rem; }
.cta-band p { font-size: 1.05rem; margin-bottom: 2.25rem; }
.cta-band .btn-row { justify-content: center; }

/* == 10 Inner pages ======================================================= */
.page-hero {
	position: relative;
	background: linear-gradient(178deg, var(--surface) 0%, var(--surface-3) 100%);
	color: var(--body);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
	overflow: hidden;
	border-bottom: 1px solid var(--rule-mint);
}

.page-hero::before {
	content: "";
	position: absolute;
	width: 700px;
	height: 700px;
	right: -160px;
	top: -340px;
	background: radial-gradient(circle, rgba(91, 61, 245, 0.12) 0%, transparent 66%);
	pointer-events: none;
}

.page-hero__inner { position: relative; max-width: 860px; }
.page-hero__title { color: var(--ink); margin-bottom: 1rem; }
/* A small classifier under archive titles, so Work and Insights are never
   confused for one another. */
.page-hero__kicker {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--green-deep);
	margin: -0.4rem 0 1rem;
}

.page-hero__lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--body); max-width: 62ch; margin: 0; }

/* Service, About, Guest Post Order, Contact and the Services directory
   heroes: the light, airy member of the SAME green family used on the
   deep/dark premium surfaces (--surface-premium) — built from the same
   --green-ink / --premium-glow hues, tinted toward white rather than held
   dark, so the two are obviously related but never confused for each
   other, AND clearly distinguishable from plain white content sections.
   A 3px top stripe marks the section immediately on load; the ambient
   glow (::after, below) is the part that responds to the pointer. None of
   this touches .page-hero itself, so Blog/Legal/Sitemap/search/404 are
   unaffected. */
.page-hero--service,
.page-hero--about,
.page-hero--order,
.page-hero--contact,
.page-hero--services,
.page-hero--network,
.page-hero--legal,
.page-hero--sitemap {
	position: relative;
	background:
		radial-gradient(60% 78% at 90% 0%, rgba(58, 31, 196, 0.32) 0%, rgba(58, 31, 196, 0) 64%),
		radial-gradient(55% 70% at 8% 100%, rgba(42, 22, 144, 0.24) 0%, rgba(42, 22, 144, 0) 62%),
		radial-gradient(55% 55% at 20% 15%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 65%),
		linear-gradient(178deg, #ffffff 0%, var(--hero-tint) 28%, var(--hero-floor) 100%);
}

.page-hero--service::before,
.page-hero--about::before,
.page-hero--order::before,
.page-hero--contact::before,
.page-hero--services::before,
.page-hero--network::before,
.page-hero--legal::before,
.page-hero--sitemap::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, rgba(91, 61, 245, 0.15) 0%, var(--green) 24%, #8a74ff 50%, var(--green) 76%, rgba(91, 61, 245, 0.15) 100%);
	box-shadow: 0 1px 12px rgba(91, 61, 245, 0.45);
	pointer-events: none;
}

/* The ambient glow: a soft blurred bloom, drawn from the same premium-glow
   hue as the deep surfaces. At rest it sits in its usual top-right corner;
   on a mouse/trackpad it drifts a short, elegant distance toward the
   cursor (assets/js/main.js sets --hero-mx/--hero-my, rAF-throttled, and
   the CSS transition below supplies the easing — so the motion is always
   smooth even though JS only ever sets a target, never animates a frame
   itself). On touch devices a slow CSS-only drift takes over instead (see
   the prefers-reduced-motion-guarded keyframe below); with reduced motion
   requested, neither applies and the glow simply stays at rest. */
/* Right glow (approved) — a premium lower-right ambient light, and the
   original member of this system: unchanged in every respect except its
   rest position, nudged down slightly per request. */
.page-hero--service::after,
.page-hero--about::after,
.page-hero--order::after,
.page-hero--contact::after,
.page-hero--services::after,
.page-hero--network::after,
.page-hero--legal::after,
.page-hero--sitemap::after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	right: -40px;
	top: -10px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(58, 31, 196, 0.6) 0%, rgba(124, 99, 255, 0.3) 45%, transparent 70%);
	filter: blur(24px);
	pointer-events: none;
	z-index: 0;
	translate: var(--hero-mx, 0px) var(--hero-my, 0px);
	transition: translate 0.4s var(--ease);
	will-change: translate;
}

/* Left glow — the same ambient light, mirrored in family only (identical
   size, softness, blur and colour stops), sitting slightly higher on the
   opposite side, and answering to its own pair of pointer variables so its
   motion is coordinated with the right glow without being a mechanical
   mirror of it. A real (but decorative, accessibility-hidden) element:
   .lattice's own mask is anchored to the upper-right and fades out well
   before it reaches the left side, so a pseudo-element hung off .lattice
   would have been dimmed out exactly where this needs to be visible. */
.hero-glow--left {
	position: absolute;
	width: 420px;
	height: 420px;
	left: -40px;
	top: -140px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(58, 31, 196, 0.6) 0%, rgba(124, 99, 255, 0.3) 45%, transparent 70%);
	filter: blur(24px);
	pointer-events: none;
	z-index: 0;
	translate: var(--hero-mx2, 0px) var(--hero-my2, 0px);
	transition: translate 0.4s var(--ease);
	will-change: translate;
}

@media (hover: none), (pointer: coarse) {
	@media (prefers-reduced-motion: no-preference) {
		.page-hero--service::after,
		.page-hero--about::after,
		.page-hero--order::after,
		.page-hero--contact::after,
		.page-hero--services::after,
		.page-hero--network::after,
		.page-hero--legal::after,
		.page-hero--sitemap::after {
			animation: hero-glow-drift 14s ease-in-out infinite;
		}
		.hero-glow--left { animation: hero-glow-drift-left 17s ease-in-out infinite; }
	}
}

@keyframes hero-glow-drift {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(-34px, 26px, 0); }
}

/* A different duration and travel pattern from the right glow's drift, so
   the two never move in lockstep. */
@keyframes hero-glow-drift-left {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(22px, -18px, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-glow--left { translate: none; }
}

.page-hero--service .wrap,
.page-hero--about .wrap,
.page-hero--order .wrap,
.page-hero--contact .wrap,
.page-hero--services .wrap,
.page-hero--legal .wrap,
.page-hero--sitemap .wrap { position: relative; z-index: 1; }

.page-hero--service .service-index {
	display: inline-block;
	font-family: var(--display);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--green);
	margin-bottom: 0.9rem;
}

.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.82rem;
	color: var(--muted);
	margin-bottom: 1.5rem;
}

.crumbs a { color: var(--body); text-decoration: none; }
.crumbs a:hover { color: var(--green-deep); }
.crumbs__sep { opacity: 0.45; }

.check-list { list-style: none; margin: 0; padding: 0; }

.check-list li {
	display: flex;
	gap: 0.75rem;
	padding: 0.8rem 0;
	border-top: 1px solid var(--rule);
	font-size: 0.98rem;
}

.check-list li:last-child { border-bottom: 1px solid var(--rule); }
.check-list svg { color: var(--green); flex: none; margin-top: 3px; }
.band--navy .check-list li { border-color: var(--rule-dark); }
.check-list strong { color: var(--ink); }
.band--navy .check-list strong { color: var(--white); }

.subservices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid var(--rule-mint);
}

.subservice {
	display: flex;
	gap: 0.7rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--rule-mint);
	font-size: 0.95rem;
}

.subservice svg { color: var(--green); flex: none; margin-top: 3px; }
.subservice strong { color: var(--ink); font-weight: 600; }

.related-services {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.related-card {
	display: block;
	padding: 1.6rem 1.5rem;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.related-card:hover {
	border-color: var(--mint-300);
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.related-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.related-card p { font-size: 0.9rem; margin: 0; color: var(--muted); }

/* Work cards — one lead story, then supporting. */
.work-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.work-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 12px 32px -26px rgba(23, 18, 63, 0.3);
	transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.work-card:hover { border-color: var(--mint-300); transform: translateY(-4px); box-shadow: var(--shadow); }
.work-card--feature { grid-column: 1 / -1; }

.work-card__frame { position: relative; background: var(--navy); overflow: hidden; }
.work-card__chrome { display: flex; gap: 6px; padding: 12px 14px; background: rgba(255, 255, 255, 0.05); }
.work-card__chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.work-card__chrome i:first-child { background: rgba(91, 61, 245, 0.6); }
.work-card__shot { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.7s var(--ease); }
.work-card:hover .work-card__shot { transform: scale(1.025); }
.work-card--feature .work-card__shot { aspect-ratio: 21 / 9; }

.work-card__body { padding: 1.6rem 1.6rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.work-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.85rem; }
.work-card__title { font-size: clamp(1.12rem, 1.6vw, 1.3rem); margin-bottom: 0.55rem; transition: color 0.25s var(--ease); }
.work-card:hover .work-card__title { color: var(--green-ink); }
.work-card__excerpt { font-size: 0.95rem; color: var(--body); margin-bottom: 1.25rem; }
.work-card__cta { margin-top: auto; font-weight: 600; font-size: 0.9rem; color: var(--green-deep); display: inline-flex; align-items: center; gap: 0.45rem; }

.case-hero__shot { margin-top: 2.5rem; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule-dark); background: var(--navy-2); }

.case-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.case-fact { padding: 1.4rem 1.25rem 1.4rem 0; }
.case-fact:not(:first-child) { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.case-fact dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.case-fact dd { margin: 0; font-weight: 600; color: var(--ink); font-size: 0.96rem; }

.case-block {
	display: grid;
	grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 3rem);
	padding: 2.25rem 0;
	border-bottom: 1px solid var(--rule);
}

.case-block h2 { font-size: 1.35rem; margin: 0; }

.sitemap-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.sitemap-cols h2 { font-size: 1.15rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); }
.sitemap-cols ul { list-style: none; margin: 0; padding: 0; }
.sitemap-cols li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); font-size: 0.94rem; }
.sitemap-cols a { text-decoration: none; color: var(--ink); }
.sitemap-cols a:hover { color: var(--green-deep); }

.error-404 { text-align: center; max-width: 620px; margin-inline: auto; }
.error-404 .code { font-family: var(--display); font-size: clamp(5rem, 16vw, 10rem); font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--mint-200); margin: 0 0 1rem; }

/* FAQ — minimal premium disclosure. */
/* FAQ — card accordion. The homepage passes an intro, which switches on the
   split layout (sticky intro + "still have a question" aside beside the list). */
.faq { max-width: 900px; display: grid; gap: 0.75rem; }

.faq__item {
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 10px 30px -26px rgba(23, 18, 63, 0.25);
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.faq__item:hover { border-color: var(--mint-300); }
.faq__item.is-open { border-color: var(--mint-300); box-shadow: 0 2px 4px rgba(23, 18, 63, 0.04), 0 18px 40px -26px rgba(67, 38, 214, 0.35); }
.band--navy .faq__item { background: var(--navy-2); border-color: var(--rule-dark); }
.faq h3 { margin: 0; }

.faq__q {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	width: 100%;
	padding: 1.2rem 1.35rem;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--display);
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	font-weight: 600;
	letter-spacing: -0.016em;
	line-height: 1.35;
	color: var(--ink);
	transition: color 0.25s var(--ease);
}

.faq__label { flex: 1; min-width: 0; padding-top: 0.2rem; text-wrap: pretty; }
.band--navy .faq__q { color: var(--white); }
.faq__q:hover { color: var(--green-ink); }
.band--navy .faq__q:hover { color: var(--green); }

.faq__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: var(--r-sm);
	background: var(--mint-100);
	border: 1px solid var(--rule-mint);
	color: var(--green-ink);
	transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.faq__item.is-open .faq__mark { background: var(--green); border-color: var(--green); color: var(--navy); }

.faq__icon {
	position: relative;
	width: 26px;
	height: 26px;
	flex: none;
	margin-top: 4px;
	border: 1px solid var(--rule);
	border-radius: 50%;
	transition: transform 0.4s var(--ease), border-color 0.3s var(--ease);
}

.faq__q:hover .faq__icon { border-color: var(--green); }

.faq__icon::before,
.faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.5px;
	background: var(--green);
	transform: translate(-50%, -50%);
	transition: transform 0.4s var(--ease);
}

.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__a {
	display: block;
	padding: 0 1.35rem 1.35rem calc(1.35rem + 34px + 1rem);
	max-width: 72ch;
	font-size: 0.98rem;
	color: var(--body);
}

.faq__a p:last-child { margin-bottom: 0; }

/* Answers collapse only once JS takes over, so they stay readable and
   crawlable if scripts fail. */
.faq.is-enhanced .faq__a { display: none; }
.faq.is-enhanced .faq__item.is-open .faq__a { display: block; }

.faq-section__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.faq-section__head {
	position: sticky;
	top: calc(var(--header-h) + var(--admin-offset) + 2rem);
	margin-bottom: 0;
}

.faq-section__head > p { max-width: 40ch; }

.faq-section__aside {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.75rem;
	padding: 1.1rem 1.25rem;
	background: var(--white);
	border: 1px solid var(--rule-mint);
	border-radius: var(--r);
	box-shadow: var(--shadow-sm);
}

.faq-section__aside strong { display: block; font-family: var(--display); font-size: 0.98rem; color: var(--ink); margin-bottom: 0.2rem; }
.faq-section__aside .textlink { font-size: 0.9rem; }

.faq-section__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--mint-100), var(--mint-300));
	color: var(--green-ink);
}

.faq-section--split .faq { max-width: none; }

/* Contact page: WhatsApp QR panel. */
.qr-panel {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding: clamp(2rem, 4vw, 3.5rem);
	background: var(--white);
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow);
}

.qr-panel__copy h2 { margin-bottom: 0.9rem; }
.qr-panel__copy > p { max-width: 52ch; }

.qr-steps { margin: 1.5rem 0 1.75rem; padding: 0; list-style: none; counter-reset: qr; display: grid; gap: 0.6rem; }
.qr-steps li { display: flex; align-items: center; gap: 0.8rem; font-size: 0.95rem; color: var(--body); }

.qr-steps li::before {
	content: counter(qr, decimal-leading-zero);
	counter-increment: qr;
	flex: none;
	width: 30px;
	height: 30px;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	background: var(--mint-100);
	border: 1px solid var(--rule-mint);
	font-family: var(--display);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--green-ink);
}

.qr-panel__code { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.qr-frame {
	position: relative;
	padding: 1.1rem;
	background: var(--white);
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.04), 0 22px 44px -26px rgba(23, 18, 63, 0.35), 0 0 0 8px var(--mint-050);
}

.qr-frame::before,
.qr-frame::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--green); pointer-events: none; }
.qr-frame::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.qr-frame::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.qr-frame img { width: clamp(180px, 22vw, 240px); height: auto; aspect-ratio: 1; object-fit: contain; border-radius: var(--r-sm); display: block; }

.qr-caption { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.86rem; font-weight: 500; color: var(--muted); }
.qr-caption svg { color: var(--green); }

/* Guest post page: split hero with an offer card, proof chips, and the closing sheet CTA. */
/* Background, top stripe and the tracked ambient glow are all supplied by
   the shared rule above (grouped with Service/About/Order/Contact/
   Services); only the padding this hero always had is kept here. */
.page-hero--network { padding-bottom: clamp(2.75rem, 5vw, 4.5rem); }

.page-hero--network .page-hero__lead { max-width: 56ch; }

.network-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.network-hero .page-hero__inner { max-width: none; }

.hero-points { display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }

.hero-points li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem 0.5rem 0.7rem;
	border: 1px solid var(--rule-mint);
	border-radius: 100px;
	background: var(--white);
	box-shadow: var(--shadow-sm);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--ink);
}

.hero-points svg { color: var(--green); flex: none; }

/* Offer card: what a placement includes, on a navy glass surface. */
.offer-card {
	position: relative;
	padding: clamp(1.6rem, 3vw, 2.25rem);
	background: var(--surface-premium);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--r-lg);
	box-shadow: 0 40px 90px -50px rgba(42, 22, 144, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: var(--premium-text);
}

.offer-card__title {
	font-family: var(--sans);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--premium-highlight);
	margin: 0 0 1.25rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.offer-card__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.offer-card__list li { display: flex; gap: 0.9rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; }
.offer-card__list strong { display: block; font-family: var(--display); font-size: 0.98rem; color: var(--white); margin-bottom: 0.15rem; letter-spacing: -0.012em; }

.offer-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: var(--r-sm);
	background: rgba(91, 61, 245, 0.14);
	border: 1px solid rgba(91, 61, 245, 0.3);
	color: var(--green);
}

.offer-card__cta { width: 100%; justify-content: center; }

.steps.steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps--four .steps__item:not(:nth-child(3n))::after { display: none; }
.steps--four .steps__item:not(:nth-child(4n))::after { display: block; }
.steps--four .steps__item:last-child::after { display: none; }

.feature-cards--standards .feature-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.35rem 1.4rem; }
.feature-cards--standards .feature-card__icon { margin-bottom: 0; }
.feature-cards--standards .feature-card p { font-size: 0.96rem; color: var(--ink); font-weight: 500; line-height: 1.5; }

.network-cta {
	background: var(--surface-premium);
	color: var(--premium-text);
	text-align: center;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.network-cta__inner { position: relative; max-width: 720px; margin-inline: auto; }
.network-cta .eyebrow { color: var(--premium-highlight); justify-content: center; }
.network-cta h2 { color: var(--white); margin-bottom: 1rem; }
.network-cta p { font-size: 1.05rem; margin-bottom: 2rem; }
.network-cta .btn-row { justify-content: center; }
.network-cta__note { margin-top: 1.25rem; color: var(--premium-text); font-size: 0.86rem; }

/* == 11 Blog ============================================================== */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem); }

.post-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.post-card__thumb { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--mint-100); margin-bottom: 1.1rem; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__cat { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 0.5rem; }
.post-card__title { font-size: 1.12rem; margin-bottom: 0.45rem; transition: color 0.25s var(--ease); }
.post-card:hover .post-card__title { color: var(--green-ink); }
.post-card__excerpt { font-size: 0.93rem; color: var(--body); margin-bottom: 0.85rem; }
.post-card__meta { margin-top: auto; font-size: 0.82rem; color: var(--muted); }

.featured-post { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-bottom: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--rule); }
.featured-post__thumb { border-radius: var(--r-lg); overflow: hidden; background: var(--mint-100); aspect-ratio: 16 / 10; }
.featured-post__thumb img { width: 100%; height: 100%; object-fit: cover; }

.taxonomy-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.taxonomy-filter a { padding: 0.5rem 1rem; border: 1px solid var(--rule); border-radius: 100px; font-size: 0.88rem; text-decoration: none; color: var(--body); transition: all 0.25s var(--ease); }
.taxonomy-filter a:hover, .taxonomy-filter a.is-active { background: var(--mint-100); border-color: var(--mint-300); color: var(--green-ink); }

.entry { max-width: 760px; margin-inline: auto; }
.entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; font-size: 0.86rem; color: var(--muted); padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.entry__author { display: flex; align-items: center; gap: 0.6rem; }
.entry__avatar { border-radius: 50%; }
.entry__thumb { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 2.25rem; }

.entry__content { font-size: 1.075rem; line-height: 1.75; }
.entry__content h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin-top: 2.5rem; }
.entry__content h3 { margin-top: 2rem; }
.entry__content ul, .entry__content ol { padding-left: 1.25rem; }
.entry__content li { margin-bottom: 0.5rem; }
.entry__content img { border-radius: var(--r); }
.entry__content blockquote { padding-left: 1.5rem; border-left: 2px solid var(--green); margin: 2rem 0; }
.entry__content a { font-weight: 500; }

.toc { padding: 1.5rem 1.75rem; background: var(--mint-050); border: 1px solid var(--rule-mint); border-radius: var(--r); margin-bottom: 2.25rem; }
.toc h2 { font-size: 0.8rem !important; letter-spacing: 0.09em; text-transform: uppercase; color: var(--green-deep); margin: 0 0 0.85rem !important; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { padding: 0.32rem 0; font-size: 0.94rem; }
.toc a { text-decoration: none; color: var(--ink); }
.toc a:hover { color: var(--green-deep); }

.share { display: flex; align-items: center; gap: 0.85rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 2.5rem 0; }
.share span { font-size: 0.86rem; color: var(--muted); margin-right: auto; }
.share a { display: inline-flex; padding: 0.55rem; border: 1px solid var(--rule); border-radius: var(--r-sm); color: var(--body); transition: all 0.25s var(--ease); }
.share a:hover { background: var(--mint-100); border-color: var(--mint-300); color: var(--green-ink); }

.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.post-nav a { padding: 1.35rem 1.5rem; border: 1px solid var(--rule); border-radius: var(--r); text-decoration: none; color: inherit; transition: all 0.25s var(--ease); }
.post-nav a:hover { border-color: var(--mint-300); background: var(--mint-050); }
.post-nav span { display: block; font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.post-nav strong { font-family: var(--display); font-size: 1rem; color: var(--ink); }
.post-nav .is-next { text-align: right; }

.pagination { margin-top: clamp(2.5rem, 5vw, 4rem); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 0.75rem; border: 1px solid var(--rule); border-radius: var(--r-sm); text-decoration: none; color: var(--body); font-size: 0.92rem; transition: all 0.25s var(--ease); }
.pagination .page-numbers:hover { border-color: var(--mint-300); background: var(--mint-050); }
.pagination .page-numbers.current { background: var(--surface-premium-flat); border-color: var(--green-ink); color: var(--white); }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.widget-title { font-size: 1rem; }

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

.contact-panel { padding: clamp(1.75rem, 3vw, 2.25rem); background: var(--mint-050); border: 1px solid var(--rule-mint); border-radius: var(--r-lg); position: sticky; top: calc(var(--header-h) + var(--admin-offset) + 2rem); }
.contact-panel h3 { font-size: 1rem; margin-bottom: 1rem; }
.contact-panel h3 + * { margin-bottom: 2rem; }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0; border-top: 1px solid var(--rule-mint); font-size: 0.94rem; }
.contact-list li:first-child { border-top: 0; }
.contact-list svg { color: var(--green); flex: none; margin-top: 3px; }
.contact-list a { color: var(--ink); text-decoration: none; }
.contact-list a:hover { color: var(--green-deep); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--green-deep); }
.field__hint { font-size: 0.8rem; color: var(--muted); }
.field__error { font-size: 0.82rem; color: #b42318; }

.field input,
.field select,
.field textarea,
.search-form input {
	width: 100%;
	padding: 0.85rem 1rem;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
	font-family: var(--sans);
	font-size: 0.98rem;
	color: var(--ink);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field textarea { min-height: 150px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-form input:focus {
	outline: none;
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(91, 61, 245, 0.16);
}

.field [aria-invalid="true"] { border-color: #d92d20; }

.form-note { font-size: 0.85rem; color: var(--muted); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-alert { padding: 1rem 1.25rem; border-radius: var(--r-sm); margin-bottom: 1.75rem; font-size: 0.95rem; }
.form-alert--ok { background: var(--mint-100); border: 1px solid var(--rule-mint); color: var(--green-ink); }
.form-alert--error { background: #fef3f2; border: 1px solid #fecdca; color: #b42318; }

.search-form { display: flex; gap: 0.5rem; }

/* == 12b Guest post system ================================================= */
/* Scoped to .gp-* classes only. List: category tabs, advanced filter bar,
   table (desktop) / stacked cards (mobile). */
.gp-band { background: linear-gradient(180deg, var(--white) 0%, var(--mint-050) 100%); }
.gp { position: relative; }
.gp.is-loading [data-gp-rows] { opacity: 0.45; transition: opacity 0.2s var(--ease); }

/* Category tabs — a segmented strip rather than loose pills. */
.gp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0.35rem;
	margin-bottom: 1.1rem;
	background: var(--white);
	border: 1px solid var(--rule-mint);
	border-radius: 14px;
	box-shadow: var(--shadow-sm);
}

.gp-tab {
	flex: 1 1 auto;
	min-height: 42px;
	padding: 0.55rem 1rem;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	font-family: var(--sans);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--body);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.gp-tab:hover { background: var(--mint-050); color: var(--green-ink); }
.gp-tab.is-active { background: var(--surface-premium-flat); color: var(--white); box-shadow: 0 8px 18px -10px rgba(23, 18, 63, 0.5); }
.gp-tab.is-active:hover { color: var(--green); }
.gp-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(91, 61, 245, 0.4); }

/* Advanced filter bar */
.gp-filters {
	margin-bottom: 1.25rem;
	padding: clamp(1rem, 2vw, 1.4rem);
	background: linear-gradient(180deg, var(--white) 0%, rgba(255, 255, 255, 0.85) 100%);
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 18px 40px -30px rgba(23, 18, 63, 0.3);
}

.gp-filters__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.gp-filters__row--top { align-items: stretch; margin-bottom: 0.75rem; }
.gp-filters__row--controls { align-items: flex-end; }

.gp-search {
	flex: 1 1 320px;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0 1rem;
	min-height: 50px;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	color: var(--muted);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.gp-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px rgba(91, 61, 245, 0.14); }
.gp-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 0.95rem; color: var(--ink); outline: none; }
.gp-search input::placeholder { color: var(--muted); }

.gp-field { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 140px; min-width: 0; max-width: 260px; }
.gp-field--compact { flex: 1 1 110px; }
.gp-field--sort { flex: 0 1 240px; }
.gp-field__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.gp-field select {
	width: 100%;
	min-height: 50px;
	padding: 0 2.3rem 0 0.9rem;
	border: 1px solid var(--rule);
	border-radius: var(--r);
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%236b7a8c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.8rem center / 15px;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}

.gp-field select:hover { border-color: var(--mint-300); }
.gp-field select:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(91, 61, 245, 0.14); }
.gp-field.is-set select { border-color: var(--green); background-color: var(--mint-050); color: var(--green-ink); font-weight: 600; }

.gp-reset {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 50px;
	padding: 0 1rem;
	border: 1px solid var(--rule-mint);
	border-radius: var(--r);
	background: var(--mint-050);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--green-ink);
	cursor: pointer;
	transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.gp-reset svg { transform: rotate(180deg); }
.gp-reset:hover { background: var(--mint-100); border-color: var(--green); }
.gp-reset:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(91, 61, 245, 0.4); }

.gp-filters__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--rule-mint); }
.gp-count { margin: 0; font-family: var(--display); font-size: 0.95rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.gp-active { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.gp-active:empty { display: none; }

.gp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.5rem 0.3rem 0.7rem;
	border: 1px solid rgba(91, 61, 245, 0.35);
	border-radius: 100px;
	background: rgba(91, 61, 245, 0.1);
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--green-ink);
	cursor: pointer;
}

.gp-chip i { font-style: normal; font-size: 0.95rem; line-height: 1; opacity: 0.7; }
.gp-chip:hover { background: rgba(91, 61, 245, 0.18); }
.gp-chip:hover i { opacity: 1; }

/* Table */
.gp-scroll-hint { display: none; }

.gp-table-wrap {
	background: var(--white);
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 24px 56px -34px rgba(23, 18, 63, 0.3);
	position: relative;
	overflow-x: auto; /* never clip a column: scroll sideways on narrow laptops instead */
	-webkit-overflow-scrolling: touch;
}

.gp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
/* Column plan so the table always fits its card on desktop.
   The No. column is sized from the digit count of the highest row number
   (--gp-num-digits, set on the table by the template): cell padding + checkbox
   + gap + one slot per digit + the clear gap before the divider. Columns 3–10
   keep their original percentages; the Website column is the flexible one and
   absorbs whatever the No. column does not need, so the plan always fits. */
.gp-table {
	--gp-num-digits: 3;
	--gp-num-col: calc(1.25rem + 18px + 0.5rem + (var(--gp-num-digits) * 0.6rem) + 1rem);
}
@media (min-width: 1024px) {
	.gp-table { table-layout: fixed; }
	.gp-table th:nth-child(1) { width: var(--gp-num-col); } /* No. + select */
	.gp-table th:nth-child(2) { width: auto; }   /* Website — flexible */
	.gp-table th:nth-child(3) { width: 14%; }    /* Niche */
	.gp-table th:nth-child(4), .gp-table th:nth-child(5) { width: 5.5%; } /* DA, DR */
	.gp-table th:nth-child(6) { width: 8%; }     /* Traffic */
	.gp-table th:nth-child(7) { width: 9%; }     /* Location */
	.gp-table th:nth-child(8) { width: 10.5%; }  /* Link Type */
	.gp-table th:nth-child(9) { width: 7%; }     /* TAT */
	.gp-table th:nth-child(10) { width: 11.5%; } /* Action */
	.gp-table thead th { white-space: nowrap; }
}
.gp-site__name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; letter-spacing: -0.005em; }
.gp-site:hover .gp-site__name { text-decoration: underline; text-decoration-color: rgba(67, 38, 214, 0.45); text-underline-offset: 3px; }
.gp-table thead th { padding: 0.95rem 0.6rem; text-align: left; font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: linear-gradient(180deg, var(--mint-050), var(--white)); border-bottom: 1px solid var(--rule-mint); white-space: nowrap; line-height: 1.2; vertical-align: middle; }
.gp-table thead th:first-child { padding-left: 1.25rem; }
.gp-cell { padding: 1rem 0.75rem; border-bottom: 1px solid rgba(23, 18, 63, 0.06); vertical-align: middle; color: var(--body); font-size: 0.9rem; }
.gp-row:last-child .gp-cell { border-bottom: 0; }
/* Vertical 1px column separators. Scoped above the stacked-card breakpoint so
   the mobile card layout below keeps its own borders. */
@media (min-width: 901px) {
	.gp-table thead th, .gp-table tbody .gp-cell { border-right: 1px solid var(--rule-mint); }
	.gp-table thead th:last-child, .gp-table tbody .gp-cell:last-child { border-right: 0; }
	.gp-table tbody td[colspan] { border-right: 0; }
}
.gp-row { transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.gp-row:hover { background: var(--mint-050); box-shadow: inset 3px 0 0 var(--green); }
.gp-cell--num { padding-left: 1.25rem; padding-right: 1rem; font-family: var(--display); font-weight: 700; font-size: 0.78rem; color: var(--muted); }
.gp-cell--num .gp-num { white-space: nowrap; }
.gp-cell--metric { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 0.98rem; }
.gp-cell--tat { white-space: nowrap; }
.gp-tat { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink); font-weight: 500; }
.gp-tat svg { color: var(--green); }
.gp-cell--action { text-align: right; padding-left: 0.4rem; padding-right: 0.8rem; white-space: nowrap; }
.gp-cell--metric { white-space: nowrap; }
.gp-cell--action .btn { min-height: 38px; padding-inline: 0.7rem; }

.gp-site { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--ink); text-decoration: none; font-weight: 600; min-width: 0; }
.gp-site > svg { color: var(--muted); opacity: 0.6; flex: none; transition: color 0.2s var(--ease), transform 0.2s var(--ease); }
.gp-site:hover .gp-site__name { color: var(--green-ink); }
.gp-site:hover > svg { color: var(--green); opacity: 1; transform: translate(1px, -1px); }
.gp-site__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gp-site__name { font-size: 0.95rem; }
.gp-site__sub { font-size: 0.76rem; font-weight: 500; color: var(--muted); }

/* Logo tile: the initial is painted underneath, the real logo covers it; a failed image is removed by JS. */
.gp-site__logo {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--mint-100), var(--mint-300));
	border: 1px solid var(--rule-mint);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	font-family: var(--display);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--green-ink);
}

.gp-site__logo::before { content: attr(data-initial); }
.gp-site__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5px; background: var(--white); }

.gp-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.7rem; border-radius: 100px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; }
.gp-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.gp-pill--admin { background: rgba(91, 61, 245, 0.12); border-color: rgba(91, 61, 245, 0.35); color: var(--green-ink); }
.gp-pill--author { background: var(--surface-2); border-color: var(--rule); color: var(--body); }
.gp-pill--dofollow { background: rgba(91, 61, 245, 0.1); border-color: rgba(91, 61, 245, 0.35); color: #331bb0; }
.gp-pill--nofollow { background: rgba(23, 18, 63, 0.04); border-color: rgba(23, 18, 63, 0.12); color: #4b5a6b; }
.gp-pill--dofollow::before, .gp-pill--nofollow::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.4rem; border-radius: 50%; vertical-align: 1px; }
.gp-pill--dofollow::before { background: #5b3df5; box-shadow: 0 0 0 2px rgba(91, 61, 245, 0.2); }
.gp-pill--nofollow::before { background: #94a3b8; }

/* Row selection (multi-website order). */
.gp-numwrap { display: inline-flex; align-items: center; gap: 0.5rem; }
.gp-selectbar[hidden] { display: none; }
.gp-check { position: relative; display: inline-flex; width: 18px; height: 18px; flex: none; cursor: pointer; }
.gp-check__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.gp-check__box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--mint-300); background: var(--white); transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.gp-check:hover .gp-check__box { border-color: var(--green); }
.gp-check__input:focus-visible + .gp-check__box { box-shadow: 0 0 0 3px rgba(91, 61, 245, 0.25); }
.gp-check__input:checked + .gp-check__box { background: var(--green); border-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7' fill='none' stroke='%2307111f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; }
.gp-row.is-selected { background: rgba(91, 61, 245, 0.07); box-shadow: inset 3px 0 0 var(--green); }
.gp-num { font-family: var(--display); font-weight: 700; font-size: 0.78rem; color: var(--muted); }

.gp-selectbar { position: sticky; bottom: 1rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin: 0 0 1rem; padding: 0.85rem 1.1rem; background: var(--surface-premium-flat); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r); box-shadow: var(--shadow-navy); color: var(--premium-text); }
.gp-selectbar__count { margin: 0; font-size: 0.95rem; }
.gp-selectbar__count strong { font-family: var(--display); font-size: 1.15rem; color: var(--premium-highlight); margin-right: 0.15rem; }
.gp-selectbar__actions { display: flex; align-items: center; gap: 0.75rem; }
.gp-selectbar__clear { background: none; border: 0; padding: 0.5rem 0.25rem; font: inherit; font-size: 0.86rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); cursor: pointer; }
.gp-selectbar__clear:hover { color: var(--white); text-decoration: underline; }


.gp-empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 3rem 1rem; color: var(--muted); text-align: center; }
.gp-empty svg { color: var(--green); }
.gp-empty p { margin: 0; }

.gp-pagination-row td { padding: 0; border-top: 1px solid var(--rule-mint); }
.gp-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; background: var(--mint-050); }
.gp-page { min-height: 40px; padding: 0.5rem 1rem; border: 1px solid var(--rule-mint); border-radius: var(--r-sm); background: var(--white); font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.gp-page:hover:not(:disabled) { border-color: var(--green); color: var(--green-ink); }
.gp-page:disabled { opacity: 0.45; cursor: default; }
.gp-pagination__info { font-size: 0.86rem; color: var(--muted); }

/* Order page — selected websites list */
.gp-selected__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.gp-selected__item .gp-selected__site { margin: 0; padding: 0.7rem 0.85rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-sm); }
.gp-selected__meta { min-width: 0; flex: 1; }
.gp-selected__meta strong { font-size: 1rem; margin-bottom: 0.1rem; }
.gp-selected__facts-inline { display: block; font-size: 0.78rem; color: var(--premium-text); line-height: 1.4; }
.gp-selected__remove { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: var(--white); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.gp-selected__remove:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--green); }
.gp-selected__site .gp-site__logo { width: 34px; height: 34px; }

/* Order page */
.page-hero--order { padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem); }
.gp-order { background: linear-gradient(180deg, var(--mint-050) 0%, var(--white) 30%); }
.gp-order__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.8fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
.gp-order__aside { position: sticky; top: calc(var(--header-h) + var(--admin-offset) + 1.5rem); display: grid; gap: 1.25rem; }

.gp-selected {
	position: relative;
	padding: clamp(1.4rem, 2.5vw, 1.9rem);
	margin-bottom: 1.25rem;
	/* Premium green: the shared site-wide surface token (see :root) — now
	   lit from two directions (top-right and top-left) over a dark pool at
	   the base, for more depth than a single flat diagonal. */
	background: var(--surface-premium);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--r-lg);
	box-shadow: 0 40px 90px -50px rgba(42, 22, 144, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: var(--premium-text);
}

.gp-selected .eyebrow { color: var(--premium-highlight); margin-bottom: 0.75rem; }
.gp-selected__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.gp-selected__head .textlink { color: var(--white); font-size: 0.85rem; }
.gp-selected__site { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.25rem; }
.gp-selected__site .gp-site__favicon { width: 44px; height: 44px; font-size: 1rem; }
.gp-selected__site strong { display: block; font-family: var(--display); font-size: 1.25rem; color: var(--white); letter-spacing: -0.02em; }
.gp-selected__site a { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--premium-text); text-decoration: none; }
.gp-selected__site a:hover { color: var(--premium-highlight); }
.gp-selected__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.gp-selected__facts dt { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--premium-text-soft); }
.gp-selected__facts dd { margin: 0.15rem 0 0; font-family: var(--display); font-weight: 700; color: var(--white); }
.gp-selected--none { background: linear-gradient(180deg, var(--white), var(--mint-050)); border-color: var(--rule-mint); color: var(--body); box-shadow: var(--shadow-sm); }
.gp-selected--none .eyebrow { color: var(--green-ink); }
.gp-selected--none p { margin-bottom: 1rem; }

.gp-form { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--white); border: 1px solid var(--rule-mint); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 24px 56px -34px rgba(23, 18, 63, 0.3); }
.gp-form h2 { margin-bottom: 0.5rem; }
.gp-form__intro { color: var(--body); margin-bottom: 1.5rem; }
.gp-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.gp-form .field--full { grid-column: 1 / -1; }
.gp-form .is-invalid { border-color: #d64545 !important; }
.gp-form__error { margin: 1rem 0 0; color: #b32d2e; font-size: 0.9rem; }
.gp-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.gp-form__actions .form-note { margin: 0; }

.gp-send { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--rule-mint); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.5rem; }
.gp-send__preview pre { margin: 0.5rem 0 0.75rem; padding: 1rem 1.1rem; max-height: 320px; overflow: auto; white-space: pre-wrap; background: var(--mint-050); border: 1px solid var(--rule-mint); border-radius: var(--r); font-family: var(--sans); font-size: 0.86rem; line-height: 1.55; color: var(--ink); }
.gp-send__preview .textlink { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.88rem; font-weight: 600; }
.gp-send__channels { display: grid; gap: 0.75rem; align-content: start; }

.gp-channel,
.gp-contact-card {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.9rem 1rem;
	background: var(--white);
	border: 1px solid var(--rule-mint);
	border-radius: var(--r);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	color: var(--ink);
	transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.gp-channel:hover,
.gp-contact-card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(67, 38, 214, 0.45); }
.gp-channel strong,
.gp-contact-card strong { display: block; font-family: var(--display); font-size: 0.98rem; letter-spacing: -0.012em; }
.gp-channel small,
.gp-contact-card small { display: block; font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.gp-channel__icon { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--mint-100); border: 1px solid var(--rule-mint); color: var(--green-ink); }
/* The icon glyph is centred in its tile and sized from the tile, so the mark
   never touches the tile's edge. */
.gp-channel__icon svg { display: block; width: 22px; height: 22px; }
/* Brand colours, so each channel is recognisable at a glance. */
.gp-channel--whatsapp .gp-channel__icon,
.gp-contact-card--whatsapp .gp-channel__icon { background: rgba(37, 211, 102, 0.14); border-color: rgba(37, 211, 102, 0.35); color: #25d366; }
.gp-channel--telegram .gp-channel__icon,
.gp-contact-card--telegram .gp-channel__icon { background: rgba(36, 161, 222, 0.12); border-color: rgba(36, 161, 222, 0.35); color: #24a1de; }
.gp-channel--email .gp-channel__icon,
.gp-contact-card--email .gp-channel__icon { background: rgba(212, 70, 56, 0.1); border-color: rgba(212, 70, 56, 0.3); color: #d44638; }
.gp-contact-card .gp-channel__icon svg { width: 20px; height: 20px; }

.gp-qr { padding: clamp(1.4rem, 2.5vw, 1.8rem); background: linear-gradient(180deg, var(--white), var(--mint-050)); border: 1px solid var(--rule-mint); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); text-align: center; }
.gp-qr .eyebrow { justify-content: center; }
.gp-qr h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.gp-qr .qr-frame { display: inline-block; margin-bottom: 1rem; }
.gp-qr .qr-frame img { width: 180px; }
.gp-qr p { font-size: 0.9rem; margin-bottom: 1rem; }
.gp-contact-cards { display: grid; gap: 0.6rem; }

@media (max-width: 1180px) {
	/* Laptops 1024–1180: same 10-column plan, slightly more compact type and spacing. */
	.gp-table { font-size: 0.84rem; }
	.gp-cell { padding: 0.85rem 0.5rem; }
	.gp-cell--num { padding-left: 1.25rem; padding-right: 1rem; } /* keep the checkbox under the NO. heading */
	.gp-table thead th { padding: 0.8rem 0.5rem; font-size: 0.62rem; letter-spacing: 0.06em; }
	.gp-site__logo { width: 32px; height: 32px; }
	.gp-site__name { font-size: 0.86rem; }
	.gp-cell--metric .gp-metric { min-width: 2rem; padding: 0.15rem 0.35rem; font-size: 0.8rem; }
	.gp-pill { font-size: 0.66rem; padding: 0.2rem 0.4rem; }
	.gp-pill--dofollow::before, .gp-pill--nofollow::before { margin-right: 0.3rem; }
	.gp-cell--action { padding-left: 0.3rem; padding-right: 0.5rem; }
	.gp-cell--action .btn { padding-inline: 0.65rem; font-size: 0.8rem; min-height: 36px; }
}

@media (max-width: 1023px) {
	/* Narrow laptops / large tablets: full-size table in a sideways-scrolling card. */
	.gp-table { table-layout: auto; min-width: 940px; }
	.gp-table th:nth-child(n) { width: auto; }
	.gp-cell--site { min-width: 260px; width: 300px; }
	.gp-table thead th { white-space: nowrap; }
	.gp-scroll-hint { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--muted); }
}

@media (max-width: 1100px) {
	.gp-selected__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gp-order__grid { grid-template-columns: minmax(0, 1fr); }
	.gp-order__aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.gp-send { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.gp-tabs { border-radius: 12px; }
	.gp-tab { flex: 1 1 calc(50% - 0.35rem); }
	.gp-field--sort { flex: 1 1 100%; }
	.gp-field, .gp-field--compact { flex: 1 1 calc(50% - 0.75rem); }
	.gp-reset { width: 100%; justify-content: center; }
	/* Table becomes stacked cards: header hidden, each row a card, cells labelled. */
	.gp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.gp-table, .gp-table tbody, .gp-row { display: block; table-layout: auto; }
	.gp-table { min-width: 0; }
	.gp-scroll-hint { display: none; }
	.gp-table-wrap { background: transparent; border: 0; box-shadow: none; overflow: visible; }
	.gp-table thead { left: 0; }
	.gp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1rem; padding: 1.1rem 1.1rem 1.2rem; margin-bottom: 0.85rem; background: var(--white); border: 1px solid var(--rule-mint); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 14px 32px -26px rgba(23, 18, 63, 0.3); }
	.gp-cell { display: block; padding: 0; border: 0; }
	.gp-cell::before { content: attr(data-label); display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.15rem; }
	.gp-cell--num { display: block; grid-column: 1 / -1; order: -1; }
	.gp-numwrap { display: flex; align-items: center; gap: 0.5rem; }
	.gp-cell--num::before { display: none; }
	.gp-num { display: none; }
	.gp-numwrap::after { content: attr(data-select-label); font-size: 0.8rem; color: var(--muted); }
	.gp-selectbar { bottom: 0.5rem; }
	.gp-selectbar__actions { width: 100%; }
	.gp-selectbar__actions .btn { flex: 1; justify-content: center; }
	.gp-cell--site { grid-column: 1 / -1; min-width: 0; width: auto; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule-mint); }
	.gp-site__name { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
	.gp-row:hover { box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 14px 32px -26px rgba(23, 18, 63, 0.3); }
	.gp-cell--site::before { display: none; }
	.gp-cell--action { grid-column: 1 / -1; width: auto; overflow: visible; text-align: left; padding-top: 0.5rem; }
	.gp-cell--action .btn { width: 100%; justify-content: center; }
	.gp-pagination-row { display: block; }
	.gp-pagination-row td { display: block; border: 0; }
	.gp-pagination { border-radius: var(--r); }
	.gp-order__aside { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
	.gp-form__grid { grid-template-columns: minmax(0, 1fr); }
	.gp-selected__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gp-count { margin-left: 0; }
}

/* == 13 Footer ============================================================ */
/* Light, editorial and calm: the closing CTA above it is the page's last navy
   moment, so the footer steps back onto a layered mint-white surface with a
   green horizon line at the top and a contact panel anchoring the right. */
.site-footer {
	position: relative;
	/* Layered light, deepened toward the base: an emerald corner glow, a
	   bloom under the top hairline, a warm-white spotlight where the
	   columns sit, then a genuinely richer green floor low in the section
	   — the closing/foundation layer of the page, meant to read as more
	   substantial than the header without crossing into the site's dark
	   surfaces. Concentrated toward the bottom so the column text above
	   stays on the lighter part of the gradient. */
	background:
		radial-gradient(52% 62% at 100% 0%, rgba(91, 61, 245, 0.18) 0%, transparent 66%),
		radial-gradient(58% 34% at 50% 0%, rgba(91, 61, 245, 0.12) 0%, rgba(91, 61, 245, 0) 70%),
		radial-gradient(60% 50% at 42% 34%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 68%),
		radial-gradient(46% 56% at 0% 100%, rgba(58, 31, 196, 0.16) 0%, transparent 64%),
		linear-gradient(180deg, var(--white) 0%, var(--mint-050) 45%, #bdb3e6 78%, #a99ce0 100%);
	color: var(--body);
	padding-top: clamp(3.25rem, 6vw, 4.75rem);
	overflow: hidden;
}

.site-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(91, 61, 245, 0.32) 16%, rgba(124, 99, 255, 0.8) 50%, rgba(91, 61, 245, 0.32) 84%, transparent 100%);
}

.site-footer .lattice { opacity: 0.55; }

.footer-grid {
	position: relative;
	display: grid;
	/* Four columns: brand, Services, Company, Contact. */
	grid-template-columns: minmax(0, 1.15fr) minmax(max-content, 0.85fr) minmax(max-content, 0.85fr) minmax(0, 1.75fr);
	gap: clamp(2rem, 3.5vw, 3.25rem);
	padding-bottom: clamp(2.75rem, 5vw, 4rem);
}

.footer-brand {
	position: relative;
}

/* A quiet glow behind the brand lockup, matching the header's new top
   accent line so the two bookends of the page read as the same system.
   Self-contained (sized to its own box, not the grid), so it holds up
   through every column-collapse breakpoint below. */
.footer-brand::before {
	content: "";
	position: absolute;
	left: -1.5rem;
	top: -1.5rem;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, rgba(91, 61, 245, 0.1) 0%, transparent 68%);
	pointer-events: none;
	z-index: 0;
}

.footer-brand > * { position: relative; z-index: 1; }

.footer-brand p {
	font-size: 0.95rem;
	line-height: 1.65;
	margin: 1.25rem 0 1.6rem;
	max-width: 32ch;
	color: var(--body);
}

.footer-brand .site-brand__name { color: var(--ink); }
.footer-brand img { max-height: 44px; width: auto; }

/* Brand lockup: the uploaded logo sits above the wordmark. With no logo
   uploaded the wordmark simply stands on its own, as before. */
.footer-brand__lockup {
	display: inline-flex;
	/* Logo and wordmark side by side, wrapping to two lines only if the logo is
	   too wide for the column. */
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	max-width: 100%;
}

.footer-brand__logo { display: block; max-width: 100%; max-height: 44px; width: auto; height: auto; }

@media (max-width: 600px) {
	.footer-brand__logo { max-height: 38px; }
}

.footer-col h3 {
	position: relative;
	font-family: var(--sans);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 1.35rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--rule-mint);
}

.footer-col h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 28px;
	height: 2px;
	background: linear-gradient(90deg, var(--green), rgba(91, 61, 245, 0.25));
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(91, 61, 245, 0.45);
}

.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.7rem; }

.footer-col a {
	position: relative;
	display: inline-block;
	font-size: 0.93rem;
	color: var(--body);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s var(--ease), transform 0.25s var(--ease);
}

.footer-col:not(.footer-col--contact) a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, var(--green), rgba(91, 61, 245, 0.25));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s var(--ease);
}

.footer-col a:hover { color: var(--green-ink); }
.footer-col:not(.footer-col--contact) a:hover { transform: translateX(3px); }
.footer-col:not(.footer-col--contact) a:hover::after { transform: scaleX(1); }

.footer-social,
.social-links { display: flex; gap: 0.5rem; }

.footer-social a,
.social-links a {
	display: inline-flex;
	padding: 0.55rem;
	border: 1px solid var(--rule-mint);
	border-radius: 10px;
	background: linear-gradient(180deg, var(--white), var(--mint-050));
	color: var(--body);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.04), 0 10px 22px -18px rgba(23, 18, 63, 0.4);
	transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.footer-social a:hover,
.social-links a:hover {
	border-color: var(--green);
	color: var(--navy);
	background: linear-gradient(180deg, #7c63ff, var(--green));
	transform: translateY(-3px);
	box-shadow: 0 10px 22px -8px rgba(91, 61, 245, 0.55), 0 0 0 4px rgba(91, 61, 245, 0.1);
}

/* Dark and green surfaces: same shape, inverted so contrast holds. */
.band--navy .social-links a,
.band--navy .footer-social a {
	border-color: var(--rule-dark);
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
	box-shadow: none;
}

.band--navy .social-links a:hover,
.band--navy .footer-social a:hover {
	border-color: var(--green);
	background: var(--green);
	color: var(--navy);
}

.social-section__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.social-section__inner--center { justify-content: center; }
.social-section__title { margin: 0; font-size: 1.05rem; }

/* Contact column: a soft panel with a short invitation, then each channel as an icon row. */
.footer-col--contact {
	position: relative;
	padding: clamp(1.4rem, 2.5vw, 1.9rem);
	background:
		radial-gradient(90% 70% at 100% 0%, rgba(91, 61, 245, 0.08) 0%, transparent 62%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.74));
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
	/* Top highlight, a faint green rim and a green-warmed drop shadow. Layered
	   inset shadows rather than a masked pseudo-element, so there is nothing to
	   fall back from on older browsers. */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px rgba(124, 99, 255, 0.13),
		0 1px 2px rgba(23, 18, 63, 0.03),
		0 26px 54px -34px rgba(42, 22, 144, 0.45);
	backdrop-filter: blur(6px);
}

.footer-col--contact h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.85rem; }
.footer-col--contact h3::after { display: none; }

.footer-contact__intro {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--body);
	margin: 0 0 1.35rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--rule-mint);
}

.footer-contact { list-style: none; margin: 0; padding: 0; }

.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin: 0 0 1rem;
}

.footer-contact li:last-child { margin-bottom: 0; }

.footer-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: linear-gradient(180deg, var(--mint-100), var(--mint-050));
	border: 1px solid var(--rule-mint);
	color: var(--green-ink);
	transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.footer-contact li:hover .footer-contact__icon {
	background: linear-gradient(180deg, #7c63ff, var(--green));
	border-color: var(--green);
	color: var(--navy);
	transform: translateY(-2px);
	box-shadow: 0 8px 16px -6px rgba(91, 61, 245, 0.55);
}

.footer-contact__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding-top: 0.1rem; }

.footer-contact__label {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.footer-contact a,
.footer-contact__value {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.5;
	white-space: normal;
	overflow-wrap: anywhere;
}

.footer-contact a:hover { color: var(--green-ink); }
.footer-contact__empty a { color: var(--muted); font-style: italic; font-weight: 400; }

/* Contact channels: the six ways to reach us, as icon tiles and nothing else.
   No number, email address or profile URL is printed as text anywhere in the
   card — the tile itself carries the destination. Separated from the copy above
   by the card's own hairline, and sized so the row reads as one quiet panel
   rather than six loose buttons. */
/* Two classes deep so the spacing below wins over ".footer-col ul", which
   resets margin and padding on every list in the footer. */
.footer-col .contact-channels {
	display: grid;
	/* All six on one row, in order: WhatsApp, Email, Facebook, LinkedIn,
	   Instagram, Telegram. Capped rather than stretched, and allowed to shrink
	   below the cap on narrow phones so the row never overflows the card. */
	grid-template-columns: repeat(6, minmax(0, 44px));
	gap: 0.55rem;
	list-style: none;
	/* No rule above the row — the card's own divider under the description is
	   the only line here. Nothing is left behind: the border and the padding
	   that used to sit under it are both gone, so the icons simply breathe
	   under the copy. */
	margin: 1.6rem 0 0;
	padding: 0;
	border-top: 0;
}

/* Two classes deep so this beats ".footer-col li", which would otherwise add
   its own bottom margin and make the gap between the two rows larger than the
   gap between the columns. */
.footer-col .contact-channels__item { margin: 0; min-width: 0; }

/* Scoped with two classes so the tile wins over the plain .footer-col a rules
   without needing !important. */
.contact-channels .contact-channels__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	min-height: 0;
	max-width: 44px;
	padding: 0;
	border: 1px solid var(--rule-mint);
	border-radius: 14px;
	background: linear-gradient(180deg, var(--white), var(--mint-050));
	color: var(--green-ink);
	text-decoration: none;
	overflow: hidden;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 1px 2px rgba(23, 18, 63, 0.035),
		0 14px 26px -22px rgba(42, 22, 144, 0.5);
	transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* A hairline of brand green that draws itself across the top edge on hover —
   the one piece of movement, kept to two pixels. */
.contact-channels .contact-channels__link::before {
	content: "";
	position: absolute;
	left: 20%;
	right: 20%;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--green), transparent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.45s var(--ease);
}

.contact-channels .contact-channels__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* All six glyphs render at one size regardless of the width/height the icon
   helper writes onto the SVG, so the row stays visually consistent. */
.contact-channels .contact-channels__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* Authentic platform colours. Each glyph inherits the tile's colour, so one
   declaration per platform is enough; Instagram carries its own gradient and
   needs none. These are the only colours introduced — the tile surface, border
   and shadow are unchanged. */
.contact-channels .contact-channels__link--whatsapp { color: #25d366; }
.contact-channels .contact-channels__link--facebook { color: #1877f2; }
.contact-channels .contact-channels__link--linkedin { color: #0a66c2; }
.contact-channels .contact-channels__link--telegram { color: #229ed9; }
.contact-channels .contact-channels__link--mail     { color: #453f63; }

.contact-channels a.contact-channels__link:hover {
	border-color: rgba(91, 61, 245, 0.55);
	background: linear-gradient(180deg, var(--mint-100), var(--mint-200));
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 14px 26px -14px rgba(42, 22, 144, 0.4);
}

.contact-channels a.contact-channels__link:hover::before { transform: scaleX(1); }

.contact-channels a.contact-channels__link:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
	border-color: var(--green);
}

.contact-channels a.contact-channels__link:active { transform: translateY(0); }

/* A channel whose destination has not been saved yet keeps the exact tile
   treatment, so the row can be judged as a design. For a visitor it is inert;
   for a logged-in administrator it is a link through to Settings. */
.contact-channels span.contact-channels__link { cursor: default; }

.footer-bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem;
	font-size: 0.86rem;
	/* The deepened floor sits right here, so the muted grey tuned for a
	   white background is swapped for a dark, tone-on-tone green from the
	   same family — still reads as "secondary" in weight, not colour. */
	color: var(--premium-deep);
}

/* The finishing wash bleeds edge-to-edge rather than staying confined to
   the .wrap it sits inside — otherwise it reads as a boxed rectangle with
   its own visible left/right edges instead of blending into the Footer.
   The classic full-bleed technique (100vw + negative margins), kept
   behind the row's own content via z-index. .site-footer's existing
   overflow:hidden safely absorbs the sub-pixel scrollbar-width overshoot
   this technique can introduce, so it can never cause horizontal scroll. */
.footer-bottom::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	z-index: -1;
	background: linear-gradient(180deg, rgba(30, 15, 107, 0.05) 0%, rgba(30, 15, 107, 0.09) 100%);
	pointer-events: none;
}

.footer-bottom::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 16%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.7) 84%, transparent 100%);
}

.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer-bottom a { color: var(--premium-deep); text-decoration: none; transition: color 0.2s var(--ease); }
.footer-bottom a:hover { color: var(--ink); }

/* == 13b Standard modules, directory and service art ======================= */
/* The Rankiva standard — four numbered modules. Cards, but built from hairlines
   and a green index rather than shadow and radius. */
/* Four modules on a shared hairline. The first is raised and tinted so the
   row reads as a composition rather than four identical boxes. */
.standard {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: start;
}

.standard__item:nth-child(odd) { margin-top: 0; }
.standard__item:nth-child(even) { margin-top: clamp(0px, 2.5vw, 32px); }

.standard__item:first-child {
	background: linear-gradient(170deg, var(--mint-050), var(--white) 70%);
	border-color: var(--rule-mint);
}

.standard__item {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.5rem 1.6rem;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 10px 30px -24px rgba(23, 18, 63, 0.25);
	transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.standard__item::after {
	content: "";
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	top: 0;
	height: 2px;
	background: var(--green);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--ease);
}

.standard__item:hover {
	border-color: var(--mint-300);
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(23, 18, 63, 0.04), 0 22px 44px -26px rgba(23, 18, 63, 0.35);
}

.standard__item:hover::after { transform: scaleX(1); }

.standard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.1rem;
}

.standard__num {
	font-family: var(--display);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--green);
}

.standard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--r-sm);
	background: var(--mint-100);
	box-shadow: inset 0 0 0 1px var(--rule-mint);
	color: var(--green-ink);
	transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.standard__item:hover .standard__icon {
	background: var(--green);
	color: var(--navy);
	box-shadow: inset 0 0 0 1px var(--green), 0 6px 14px -6px rgba(91, 61, 245, 0.6);
}

.standard__item h3 { font-size: 1.05rem; margin-bottom: 0.45rem; }
.standard__item p { font-size: 0.92rem; margin: 0; }

/* About page hero: copy beside an owner-supplied image (Settings → Brand). */
.about-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.about-hero__media {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--rule-mint);
	background: linear-gradient(160deg, var(--white) 0%, var(--mint-050) 100%);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.04), 0 34px 64px -30px rgba(42, 22, 144, 0.32);
}

.about-hero__media::after {
	content: "";
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--green), transparent);
	border-radius: 3px 3px 0 0;
}

.about-hero__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* About hero: room between the lead paragraph and the buttons, matching the
   other page heroes, and a touch more air between the two buttons. */
.page-hero--about .btn-row { margin-top: 2rem; gap: 1rem; }

/* About story ("Why we work as one team"): the page's own copy, framed as one
   editorial panel with numbered headings, so it sits with the sections around it. */
.about-story .wrap--narrow { max-width: 880px; }

.about-story__panel {
	position: relative;
	max-width: none;
	padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 4.5vw, 3.75rem);
	background: linear-gradient(180deg, var(--mint-050) 0%, var(--white) 34%);
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	counter-reset: story;
	overflow: hidden;
}

.about-story__panel::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--green), var(--mint-300));
}

.about-story__panel h2 {
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
	margin: clamp(2.25rem, 4vw, 3rem) 0 1rem;
	padding-top: clamp(2rem, 3.5vw, 2.5rem);
	border-top: 1px solid var(--rule-mint);
}

.about-story__panel h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.about-story__panel h2::before {
	content: counter(story, decimal-leading-zero);
	counter-increment: story;
	display: block;
	font-family: var(--display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--green);
	margin-bottom: 0.7rem;
}

.about-story__panel h2 + p { font-size: 1.15rem; line-height: 1.7; color: var(--ink); }
.about-story__panel p { color: var(--body); }
.about-story__panel > :last-child { margin-bottom: 0; }

/* Legal pages (Privacy Policy): a quiet hero with the policy's last-updated
   date, a sticky "On this page" index and a framed reading panel with
   numbered sections. All scoped; the standard page layout is untouched. */
.page-hero--legal .eyebrow { margin-bottom: 0.9rem; }
.page-hero--legal .page-hero__lead { max-width: 60ch; }

.legal-hero__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--rule-mint);
	border-radius: 100px;
	background: var(--white);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--body);
}

.legal-hero__meta svg { color: var(--green); flex: none; }
.legal-hero__meta time { color: var(--ink); font-weight: 600; }

.legal__layout {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.legal__layout--single { grid-template-columns: minmax(0, 1fr); }
.legal__layout--single .legal__body { max-width: 880px; margin-inline: auto; }

.legal__aside { position: sticky; top: calc(var(--header-h) + var(--admin-offset) + 1.5rem); }

.legal-index {
	padding: 1.4rem 1.5rem;
	background: var(--white);
	border: 1px solid var(--rule-mint);
	border-radius: var(--r);
	box-shadow: var(--shadow-sm);
}

.legal-index__title {
	margin: 0 0 0.85rem;
	font-family: var(--sans);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--green-deep);
}

.legal-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: legal-index;
}

.legal-index__list li {
	counter-increment: legal-index;
	border-top: 1px solid var(--rule-mint);
}

.legal-index__list li:first-child { border-top: 0; }

.legal-index__list a {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	padding: 0.6rem 0;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink);
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

.legal-index__list a::before {
	content: counter(legal-index, decimal-leading-zero);
	flex: none;
	font-family: var(--display);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--green);
}

.legal-index__list a:hover { color: var(--green-deep); }

.legal__body {
	position: relative;
	max-width: none;
	padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.35rem, 4vw, 3.5rem);
	background: var(--white);
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	counter-reset: legal-section;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.legal__body::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--green), var(--mint-300));
}

.legal__body h2 {
	font-size: clamp(1.32rem, 2.1vw, 1.65rem);
	margin: clamp(2rem, 3.5vw, 2.75rem) 0 0.9rem;
	padding-top: clamp(1.75rem, 3vw, 2.25rem);
	border-top: 1px solid var(--rule-mint);
	scroll-margin-top: calc(var(--header-h) + var(--admin-offset) + 1.5rem);
}

.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal__body h2::before {
	content: counter(legal-section, decimal-leading-zero);
	counter-increment: legal-section;
	display: block;
	font-family: var(--display);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--green);
	margin-bottom: 0.55rem;
}

.legal__body h3 { font-size: 1.08rem; margin: 1.75rem 0 0.6rem; }
.legal__body p { font-size: 1.02rem; line-height: 1.75; color: var(--body); }
.legal__body h2 + p { color: var(--ink); }
.legal__body > p:first-child { font-size: 1.12rem; line-height: 1.7; color: var(--ink); }
.legal__body strong { color: var(--ink); }

.legal__body ul,
.legal__body ol { margin: 0 0 1.25rem; padding-left: 0; }

.legal__body ul { list-style: none; }

.legal__body ul li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.55rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--body);
}

.legal__body ul li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
}

.legal__body ol { padding-left: 1.4rem; }
.legal__body ol li { margin-bottom: 0.55rem; font-size: 1rem; line-height: 1.65; color: var(--body); }
.legal__body ol li::marker { color: var(--green-deep); font-weight: 600; }

.legal__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.95rem; }
.legal__body th,
.legal__body td { padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid var(--rule-mint); vertical-align: top; }
.legal__body th { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-deep); background: var(--mint-050); }

.legal__body > :last-child { margin-bottom: 0; }

@media (max-width: 980px) {
	.legal__layout { grid-template-columns: minmax(0, 1fr); }
	.legal__aside { position: static; }
	.legal-index__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
	.legal-index__list li:nth-child(2) { border-top: 0; }
}

@media (max-width: 600px) {
	.legal-index__list { grid-template-columns: minmax(0, 1fr); }
	.legal-index__list li:nth-child(2) { border-top: 1px solid var(--rule-mint); }
	.legal-hero__meta { font-size: 0.82rem; }
}

/* Document-style variant of the legal layout, used by Terms & Conditions and
   the Cookie Policy — scoped to .legal--terms / .legal--cookies so the other
   legal pages are untouched. */
.page-hero--legal.legal--terms,
.page-hero--legal.legal--cookies { padding-bottom: clamp(3rem, 5.5vw, 5rem); }

/* The pointer-reactive glow now shared with every other premium hero
   (added above, via .page-hero--legal::after) supersedes the flat static
   glow this rule used to draw specifically for Terms/Cookies — removed so
   the higher-specificity compound selector here can't silently override
   the new shared, mouse-reactive one for just these two variants. */

.legal--terms .page-hero__inner,
.legal--cookies .page-hero__inner { position: relative; z-index: 1; }

.legal--terms .eyebrow,
.legal--cookies .eyebrow {
	gap: 0.55rem;
	padding: 0.36rem 0.85rem 0.36rem 0.7rem;
	border-radius: 100px;
	background: var(--white);
	border: 1px solid var(--rule-mint);
	box-shadow: var(--shadow-sm);
	margin-bottom: 1.1rem;
}

.legal--terms .eyebrow::before,
.legal--cookies .eyebrow::before { width: 8px; height: 8px; border-radius: 50%; }

.legal--terms .page-hero__title,
.legal--cookies .page-hero__title { max-width: 24ch; }
.legal--terms .page-hero__lead,
.legal--cookies .page-hero__lead { max-width: 64ch; font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.65; }
.legal--terms .legal-hero__meta,
.legal--cookies .legal-hero__meta { margin-top: 1.75rem; }

.legal--terms .legal-index,
.legal--cookies .legal-index { border-top: 3px solid var(--green); border-top-left-radius: var(--r); border-top-right-radius: var(--r); }

.legal--terms .legal__body,
.legal--cookies .legal__body { padding-top: clamp(2rem, 4.5vw, 3.5rem); }
.legal--terms .legal__body::before,
.legal--cookies .legal__body::before { background: linear-gradient(180deg, var(--green) 0%, var(--green-deep) 45%, var(--mint-300) 100%); }

/* Section headings read like a numbered document: a mint chip carrying the
   number sits beside the heading text. */
.legal--terms .legal__body h2,
.legal--cookies .legal__body h2 {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: clamp(2.25rem, 4vw, 3rem) 0 1rem;
	padding-top: clamp(2rem, 3.5vw, 2.5rem);
}

.legal--terms .legal__body h2:first-child,
.legal--cookies .legal__body h2:first-child { margin-top: 0; padding-top: 0; }

.legal--terms .legal__body h2::before,
.legal--cookies .legal__body h2::before {
	display: inline-grid;
	place-items: center;
	flex: none;
	min-width: 2.35rem;
	height: 2.35rem;
	padding: 0 0.5rem;
	margin: 0;
	border-radius: var(--r-sm);
	background: var(--mint-100);
	box-shadow: inset 0 0 0 1px var(--rule-mint);
	color: var(--green-ink);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
}

.legal--terms .legal__body h2 + p,
.legal--cookies .legal__body h2 + p { font-size: 1.06rem; }
.legal--terms .legal__body p,
.legal--cookies .legal__body p { margin-bottom: 1.25rem; }
.legal--terms .legal__body p:last-child,
.legal--cookies .legal__body p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
	.legal--terms .legal__body h2,
	.legal--cookies .legal__body h2 { align-items: flex-start; gap: 0.7rem; }
	.legal--terms .legal__body h2::before,
	.legal--cookies .legal__body h2::before { min-width: 2.1rem; height: 2.1rem; font-size: 0.76rem; margin-top: 0.1rem; }
	.legal--terms .page-hero__title,
	.legal--cookies .page-hero__title { max-width: none; }
}

/* Sitemap page: grouped link cards. Scoped to .page-hero--sitemap / .sitemap
   so the generic page hero and lists are untouched. */
.page-hero--sitemap .eyebrow { margin-bottom: 0.9rem; }
.page-hero--sitemap .page-hero__lead { max-width: 62ch; }

.sitemap-hero__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--rule-mint);
	border-radius: 100px;
	background: var(--white);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--ink);
}

.sitemap-hero__meta svg { color: var(--green); flex: none; }

.sitemap-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: start;
}

.sitemap-card {
	position: relative;
	padding: 1.5rem 1.5rem 1.35rem;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 10px 30px -24px rgba(23, 18, 63, 0.25);
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.sitemap-card:hover { border-color: var(--mint-300); box-shadow: 0 2px 4px rgba(23, 18, 63, 0.04), 0 22px 44px -26px rgba(23, 18, 63, 0.3); }

.sitemap-card__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding-bottom: 1rem;
	margin-bottom: 0.35rem;
	border-bottom: 1px solid var(--rule-mint);
}

.sitemap-card__head h2 { font-size: 1.12rem; margin: 0; }

.sitemap-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--r-sm);
	background: var(--mint-100);
	box-shadow: inset 0 0 0 1px var(--rule-mint);
	color: var(--green-ink);
	transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.sitemap-card:hover .sitemap-card__icon { background: var(--green); color: var(--navy); box-shadow: inset 0 0 0 1px var(--green), 0 6px 14px -6px rgba(91, 61, 245, 0.6); }

.sitemap-card__count {
	margin-left: auto;
	min-width: 1.75rem;
	padding: 0.2rem 0.55rem;
	border-radius: 100px;
	background: var(--mint-050);
	box-shadow: inset 0 0 0 1px var(--rule-mint);
	font-family: var(--display);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--green-deep);
}

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

.sitemap-list > li { border-bottom: 1px solid var(--rule); }
.sitemap-list > li:last-child { border-bottom: 0; }

.sitemap-list a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.62rem 0 0.62rem 1rem;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink);
	text-decoration: none;
	transition: color 0.2s var(--ease), padding-left 0.25s var(--ease);
}

.sitemap-list a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--rule-mint);
	transform: translateY(-50%);
	transition: background 0.2s var(--ease), transform 0.25s var(--ease);
}

.sitemap-list a:hover { color: var(--green-deep); padding-left: 1.25rem; }
.sitemap-list a:hover::before { background: var(--green); transform: translateY(-50%) scale(1.4); }

/* Child pages from wp_list_pages() sit one level in. */
.sitemap-list ul { margin-left: 1rem; border-top: 1px solid var(--rule); }
.sitemap-list ul li { border-bottom: 1px solid var(--rule); }
.sitemap-list ul li:last-child { border-bottom: 0; }
.sitemap-list ul a { font-size: 0.9rem; font-weight: 400; color: var(--body); }
.sitemap-list .current_page_item > a { color: var(--green-deep); }
.sitemap-list__overview a { font-weight: 600; }
.sitemap-list__overview a::before { background: var(--green); }

.sitemap-card--legal .sitemap-card__icon { background: var(--surface-premium-flat); color: var(--green); box-shadow: none; }
.sitemap-card--legal:hover .sitemap-card__icon { background: var(--surface-premium-flat); color: var(--green); box-shadow: 0 6px 14px -6px rgba(23, 18, 63, 0.5); }

@media (max-width: 1100px) {
	.sitemap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.sitemap-grid { grid-template-columns: minmax(0, 1fr); }
	.sitemap-card { padding: 1.25rem 1.2rem 1.1rem; }
}

/* My Team — founder card (50/50 image/content), two spotlight cards, then a
   horizontal carousel of three that steps every 2 s: a new card enters from
   the left, the row shifts right, the right-most card leaves. */
.team-section { position: relative; }
.team-section .section-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

/* Optional background image: a full-viewport (100vh) layer that stays fixed in
   view while the section's content scrolls over it, and releases once the
   section ends. Done with a sticky layer, so it also works on iOS where
   background-attachment: fixed is ignored. Green overlay on top of the image. */
.team-section--image { min-height: 100vh; }
.team-section__bgwrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* spans the whole section; the sticky layer lives inside it */
.team-section__bg {
	position: sticky;
	top: 0;
	height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.team-section__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(23, 18, 63, 0.56) 0%, rgba(67, 38, 214, 0.6) 55%, rgba(23, 18, 63, 0.6) 100%);
}
.team-section--image > .wrap { position: relative; z-index: 1; }
.team-section--image .section-head h2 { color: var(--white); }
.team-section--image .section-head p { color: rgba(255, 255, 255, 0.82); }
.team-section--image .section-head .eyebrow { color: var(--green); }
.team-section--image .section-head .eyebrow::before { background: var(--green); }

.team-initials {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, var(--mint-050) 0%, var(--mint-100) 100%);
	font-family: var(--display);
	font-weight: 700;
	color: var(--green-deep);
}

/* Featured member: image 50% / content 50% of the card width, moderate height */
.team-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
	padding: clamp(1rem, 2vw, 1.25rem);
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	background: var(--white);
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 24px 56px -34px rgba(23, 18, 63, 0.35);
}

.team-lead__media {
	position: relative;
	aspect-ratio: 5 / 4;
	max-height: 420px;
	width: 100%;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--mint-050);
	box-shadow: inset 0 0 0 1px var(--rule-mint);
}

.team-lead__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--green), var(--mint-300)); }
.team-lead__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.team-lead__media .team-initials { font-size: clamp(3.5rem, 7vw, 5.5rem); }

.team-lead__body { display: flex; flex-direction: column; gap: 0.65rem; padding: 0.25rem clamp(0.25rem, 2vw, 1.5rem) 0.25rem 0; }
.team-lead__body .eyebrow { margin-bottom: 0.25rem; }
.team-lead__name { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0; letter-spacing: -0.02em; }
.team-lead__bio { font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.7; color: var(--body); margin: 0; }
.team-lead__meta { margin: 0.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule-mint); font-size: 0.86rem; font-weight: 500; color: var(--muted); }

/* Spotlight cards: two rectangular cards side by side */
.team-spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-bottom: clamp(1rem, 2vw, 1.5rem); }

.team-spot {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: center;
	padding: 1.1rem;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 18px 40px -30px rgba(23, 18, 63, 0.3);
	transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.team-spot:hover { border-color: var(--mint-300); transform: translateY(-3px); box-shadow: 0 2px 4px rgba(23, 18, 63, 0.04), 0 26px 50px -30px rgba(23, 18, 63, 0.38); }
.team-spot__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-sm); overflow: hidden; background: var(--mint-050); box-shadow: inset 0 0 0 1px var(--rule-mint); }
.team-spot__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--green), var(--mint-300)); }
.team-spot__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.team-spot__media .team-initials { font-size: clamp(2rem, 4vw, 3rem); }
.team-spot__body { display: flex; flex-direction: column; gap: 0.35rem; padding-right: 0.5rem; }
.team-spot__role { margin: 0; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); }
.team-spot__name { margin: 0; font-size: 1.25rem; letter-spacing: -0.01em; }
.team-spot__bio { margin: 0.35rem 0 0; font-size: 0.93rem; line-height: 1.62; color: var(--body); }

/* Horizontal carousel: one row of cards; a new card enters from the left, the
   row shifts right, the right-most card leaves. Slots are x-only. */
.team-carousel { --team-visible: 3; --team-gap: clamp(1rem, 2vw, 1.5rem); --team-step-y: 0px; --team-step-z: 0px; }
.team-carousel__viewport { position: relative; overflow: hidden; padding: 0.75rem 0 3.5rem; margin-bottom: -3rem; }
.team-carousel__track { position: relative; min-height: 320px; }

.team-card {
	position: absolute;
	top: 0;
	left: 0;
	width: calc((100% - var(--team-gap) * (var(--team-visible) - 1)) / var(--team-visible));
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.75rem 1.4rem 1.6rem;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.04), 0 14px 28px -16px rgba(23, 18, 63, 0.28), 0 34px 70px -30px rgba(23, 18, 63, 0.45);
	transform-origin: 50% 0;
	transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px));
	opacity: var(--o, 1);
	transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.6s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease);
	will-change: transform, opacity;
}

.team-card:hover { border-color: var(--mint-300); }
.team-card.no-anim { transition: none; }
/* Soft ground shadow under each card: the "floating just above the surface" cue. */
.team-card::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -14px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(23, 18, 63, 0.28) 0%, rgba(23, 18, 63, 0) 70%);
	z-index: -1;
	pointer-events: none;
}

/* Slots along the descending diagonal. x steps by one card width plus the gap. */
.team-card[data-slot="-1"] { --x: calc(-100% - var(--team-gap)); --y: calc(var(--team-step-y) * -1); --z: 0px; --o: 0; pointer-events: none; }
.team-card[data-slot="0"]  { --x: 0px; --y: -6px; --z: 0px; --o: 1; z-index: 3; }
.team-card[data-slot="1"]  { --x: calc(100% + var(--team-gap)); --y: -6px; --z: 0px; --o: 1; z-index: 2; }
.team-card[data-slot="2"]  { --x: calc(200% + var(--team-gap) * 2); --y: -6px; --z: 0px; --o: 1; z-index: 1; }
.team-card[data-slot="3"]  { --x: calc(300% + var(--team-gap) * 3); --y: calc(var(--team-step-y) * 3); --z: calc(var(--team-step-z) * -3); --o: 0; pointer-events: none; }
.team-card[data-slot="off"] { --x: calc(300% + var(--team-gap) * 3); --y: calc(var(--team-step-y) * 3); --z: 0px; --o: 0; visibility: hidden; pointer-events: none; transition: none; }

.team-card__avatar { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; margin-bottom: 1.1rem; box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--mint-300); }
.team-card__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.team-card__avatar .team-initials { font-size: 1.6rem; }
.team-card__name { font-size: 1.1rem; margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.team-card__role { margin: 0 0 0.75rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); }
.team-card__bio { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--body); }

@media (max-width: 900px) {
	.team-carousel { --team-visible: 2; }
	.team-card[data-slot="2"] { --o: 0; pointer-events: none; }
	.team-lead { grid-template-columns: minmax(0, 1fr); }
	.team-lead__media { max-width: 420px; margin-inline: auto; width: 100%; aspect-ratio: 4 / 3; }
	.team-lead__body { text-align: center; align-items: center; padding-right: 0; }
	.team-spots { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.team-carousel { --team-visible: 1; }
	.team-card[data-slot="1"] { --o: 0; pointer-events: none; }
	.team-card__avatar { width: 92px; height: 92px; }
	.team-spot { grid-template-columns: minmax(0, 1fr); text-align: center; }
	.team-spot__media { max-width: 260px; margin-inline: auto; width: 100%; }
	.team-spot__body { align-items: center; padding-right: 0; }
}

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

/* Testimonial card slider — one premium card at a time. */
.tcards { position: relative; max-width: 880px; margin-inline: auto; }
.tcards__track { display: grid; grid-template-columns: minmax(0, 1fr); } /* all cards share one cell: stable height, no layout shift */
.tcards__track > .tcard { grid-area: 1 / 1; min-width: 0; }
.tcards { overflow: clip; }                        /* clips the small slide without creating a scroll container */

.tcard {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(0.85rem, 1.6vw, 1.15rem);
	background: var(--white);
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 24px 56px -34px rgba(23, 18, 63, 0.35);
	transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), opacity 0.6s var(--ease), transform 0.6s var(--ease);
	--tcard-line: rgba(91, 61, 245, 0.26);
	--tcard-gap: 3px; /* space between the two hairlines */
}

/* Inner editorial frame: a hairline border with a second hairline just
   outside it (offset outline), so top, bottom, left and right are all double. */
.tcard__frame {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--tcard-line);
	outline: 1px solid var(--tcard-line);
	outline-offset: var(--tcard-gap);
	border-radius: 4px;
	margin: calc(var(--tcard-gap) + 1px);
	background: var(--white);
	overflow: hidden;
}

.tcard:hover { border-color: var(--mint-300); box-shadow: 0 2px 4px rgba(23, 18, 63, 0.04), 0 30px 64px -34px rgba(23, 18, 63, 0.4); }
/* Slide/crossfade: the current card eases out to the left while the next eases in from the right. */
.tcard { transition-property: border-color, box-shadow, opacity, transform, visibility; transition-duration: 0.35s, 0.35s, 0.7s, 0.7s, 0s; transition-timing-function: var(--ease), var(--ease), cubic-bezier(0.22, 0.61, 0.36, 1), cubic-bezier(0.22, 0.61, 0.36, 1), linear; transition-delay: 0s, 0s, 0s, 0s, 0.7s; }
.tcards__track > .tcard { opacity: 0; transform: translateX(40px); visibility: hidden; pointer-events: none; }
.tcards__track > .tcard.is-active { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.tcards__track > .tcard.is-leaving { opacity: 0; transform: translateX(-40px); visibility: visible; }

.tcard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem clamp(1.15rem, 2.6vw, 2rem);
	border-bottom: 1px solid var(--tcard-line);
	position: relative;
}

/* Second hairline of the double divider, just below the first. */
.tcard__head::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(-1px - var(--tcard-gap));
	height: 1px;
	background: var(--tcard-line);
}

.tcard__brand { display: flex; align-items: center; min-width: 0; }
.tcard__brand { gap: 0.7rem; }
.tcard__logo { display: block; height: 30px; width: auto; max-width: 160px; }
.tcard__brand-name { font-family: var(--display); font-size: 0.92rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; padding-left: 0.7rem; border-left: 1px solid var(--rule-mint); line-height: 1.2; }
.tcard__brand .site-brand__name { font-family: var(--display); font-size: 1rem; font-weight: 800; letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; }
.tcard__brand .site-brand__name span { color: var(--green-deep); }

.tcard__social { display: flex; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }

.tcard__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--rule);
	background: var(--white);
	transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.tcard__social-link svg { width: 17px; height: 17px; color: var(--brand, var(--ink)); }
.tcard__social-link { color: var(--brand, var(--ink)); transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease); }
.tcard__social-link:hover,
.tcard__social-link:focus-visible {
	color: var(--brand, var(--ink));
	border-color: var(--brand, var(--ink));
	transform: translateY(-2px);
	box-shadow: 0 8px 16px -10px rgba(23, 18, 63, 0.35); /* fallback for browsers without color-mix */
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, var(--ink)) 16%, transparent), 0 8px 16px -10px rgba(23, 18, 63, 0.35);
}
.tcard__social-link--facebook { --brand: #1877f2; }
.tcard__social-link--linkedin { --brand: #0a66c2; }
.tcard__social-link--instagram { --brand: #e1306c; }
.tcard__social-link--telegram { --brand: #229ed9; }
.tcard__social-link--whatsapp { --brand: #25d366; }
.tcard__foot .tcard__social-link { background: var(--white); width: 42px; height: 42px; }

.tcard__body { display: flex; flex-direction: column; gap: 1.35rem; padding: clamp(1.5rem, 3.2vw, 2.4rem) clamp(1.15rem, 2.6vw, 2rem); }

.tcard__client { display: flex; align-items: center; gap: 1rem; }

.tcard__avatar {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: var(--mint-100);
	box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--mint-300);
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--green-deep);
}

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

.tcard__who { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.tcard__name { margin: 0; font-family: var(--display); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.tcard__role { margin: 0; font-size: 0.86rem; color: var(--muted); }
.tcard__stars { display: flex; gap: 2px; margin: 0.2rem 0 0; color: var(--rule); }
.tcard__stars svg.is-on { color: #f2b01e; }

.tcard__quote {
	margin: 0;
	padding: 0 0 0 1.35rem;
	border-left: 3px solid var(--green);
	font-size: clamp(1.05rem, 1.5vw, 1.22rem);
	line-height: 1.7;
	color: var(--ink);
	font-style: normal;
}

.tcard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.95rem clamp(1.15rem, 2.6vw, 2rem);
	border-top: 1px solid var(--tcard-line);
	background: var(--mint-050);
	position: relative;
}

.tcard__foot::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--tcard-gap);
	height: 1px;
	background: var(--tcard-line);
}

.tcard__action {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	padding: 0.45rem 0.85rem 0.45rem 0.5rem;
	border-radius: 100px;
	border: 1px solid var(--rule-mint);
	background: var(--white);
	color: var(--ink);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.tcard__action { transition: border-color 0.28s var(--ease), transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.28s var(--ease); }
.tcard__action:hover,
.tcard__action:focus-visible { border-color: var(--green-deep); transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(67, 38, 214, 0.14), 0 8px 16px -10px rgba(23, 18, 63, 0.35); }
.tcard__action-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard__action-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; }
.tcard__action-icon--mail { background: var(--mint-100); color: var(--green-deep); }

.tcards__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }

.tcards__dot:focus-visible,
.tcard__action:focus-visible,
.tcard__social-link:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--white), 0 0 0 6px rgba(91, 61, 245, 0.45); }

.tcards__dots { display: flex; gap: 0.5rem; }
.tcards__dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: var(--mint-300); cursor: pointer; transition: width 0.3s var(--ease), background 0.3s var(--ease); }
.tcards__dot.is-active { width: 26px; border-radius: 100px; background: var(--green); }

@media (max-width: 600px) {
	.tcard__head { flex-wrap: wrap; justify-content: center; gap: 0.75rem; text-align: center; }
	.tcard__brand { justify-content: center; width: 100%; flex-wrap: wrap; row-gap: 0.35rem; }
	.tcard { padding: 0.7rem; }
	.tcard__client { flex-direction: column; text-align: center; }
	.tcard__who { align-items: center; }
	.tcard__stars { justify-content: center; }
	.tcard__quote { padding-left: 1rem; }
	.tcard__foot > span:empty { display: none; }
	.tcard__action { justify-content: center; width: 100%; }
	.tcard__foot { flex-direction: row; align-items: center; }
	.tcard__foot .tcard__action { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tcards__track > .tcard { transition: none; transform: none; }
}



/* Service statistics — animated counters on the brand gradient (navy → deep
   green → green). Grid adapts to the number of counters per service. */
.stats {
	position: relative;
	/* Flat base: .stats::before right below supplies this band's own glow. */
	background: var(--surface-premium-linear);
	color: var(--white);
	overflow: hidden;
}

.stats::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 80% at 85% 20%, rgba(91, 61, 245, 0.28) 0%, rgba(91, 61, 245, 0) 70%);
	pointer-events: none;
}

.stats > .wrap { position: relative; z-index: 1; }

.stats__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--stats-cols, 4), minmax(0, 1fr));
	gap: 0;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(6px);
	box-shadow: 0 24px 60px -36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.stats__grid--3 { --stats-cols: 3; }
.stats__grid--4 { --stats-cols: 4; }
.stats__grid--5 { --stats-cols: 5; }
.stats__grid--2 { --stats-cols: 2; }
.stats__grid--1 { --stats-cols: 1; }

.stat {
	position: relative;
	padding: clamp(1.5rem, 2.8vw, 2.25rem) clamp(1.25rem, 2.4vw, 2rem);
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.stat:first-child { border-left: 0; }

.stat::after {
	content: "";
	position: absolute;
	left: clamp(1.25rem, 2.4vw, 2rem);
	top: clamp(1.5rem, 2.8vw, 2.25rem);
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--green);
}

.stat__value {
	display: flex;
	align-items: baseline;
	gap: 0.15rem;
	margin: 1.4rem 0 0.55rem;
	font-family: var(--display);
	font-size: clamp(2.1rem, 3.6vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--white);
	font-variant-numeric: tabular-nums;
}

.stat__affix { font-size: 0.55em; font-weight: 700; color: var(--green); letter-spacing: 0; }
.stat__label { margin: 0; font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--white); }
.stat__desc { margin: 0.45rem 0 0; font-size: 0.86rem; line-height: 1.55; color: rgba(255, 255, 255, 0.68); }

@media (max-width: 1024px) {
	.stats__grid--5,
	.stats__grid--4 { --stats-cols: 2; }
	.stats__grid--3 { --stats-cols: 3; }
	.stats__grid--4 .stat:nth-child(3),
	.stats__grid--5 .stat:nth-child(3),
	.stats__grid--5 .stat:nth-child(5) { border-left: 0; }
	.stats__grid--4 .stat:nth-child(n + 3),
	.stats__grid--5 .stat:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.12); }
}

@media (max-width: 720px) {
	.stats__grid--3 { --stats-cols: 1; }
	.stats__grid--3 .stat { border-left: 0; }
	.stats__grid--3 .stat + .stat { border-top: 1px solid rgba(255, 255, 255, 0.12); }
}

@media (max-width: 480px) {
	.stats__grid--5,
	.stats__grid--4,
	.stats__grid--2 { --stats-cols: 1; }
	.stats__grid .stat { border-left: 0; }
	.stats__grid .stat + .stat { border-top: 1px solid rgba(255, 255, 255, 0.12); }
	.stat { padding: 1.35rem 1.25rem; }
	.stat::after { top: 1.35rem; left: 1.25rem; }
}

/* Visuals — animated inline SVG scenes (inc/visuals.php). One motion
   vocabulary; each scene composes it differently. Static under reduced motion. */
.mv { display: block; width: 100%; height: auto; }
.mv * { transform-box: fill-box; }
.service-hero__art .mv { border-radius: var(--r); }
.mv-link { cursor: pointer; }
.mv-link:hover rect:first-child { stroke-opacity: 1; }
.mv-link:focus-visible { outline: 0; }
.mv-link:focus-visible rect:first-child { stroke: var(--green); stroke-width: 2; }
.mv-link--stamp .mv-stamp { transition: transform 0.25s var(--ease); transform-box: fill-box; transform-origin: center; }
.mv-link--stamp:hover .mv-stamp, .mv-link--stamp:focus-visible .mv-stamp { transform: translateY(-2px) scale(1.03); }
.mv-link--stamp:hover rect, .mv-link--stamp:focus-visible rect { fill: var(--green-deep); }
.about-hero__media .mv { width: 100%; height: auto; }
.cap__motif--visual { padding: 0; overflow: hidden; background: var(--white); }
.cap__motif .mv { display: block; width: 100%; height: auto; }

.mv-float { transform-origin: center; animation: mv-float var(--dur, 6s) ease-in-out var(--d, 0s) infinite; }
.mv-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mv-draw var(--dur, 1.2s) cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s) forwards; }
.mv-flow { animation: mv-flow 2.4s linear var(--d, 0s) infinite; }
.mv-pop { transform-origin: center; animation: mv-pop 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) var(--d, 0s) both; }
.mv-rise { animation: mv-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s) both; }
.mv-slide-up { animation: mv-slide-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s) both; }
.mv-type { transform-origin: left center; animation: mv-grow-x 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s) both; }
.mv-grow-x { transform-origin: left center; animation: mv-grow-x 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s) both; }
.mv-grow-y { transform-origin: center bottom; animation: mv-grow-y 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s) both; }
.mv-check { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mv-check 0.5s ease-out var(--d, 0s) forwards; }
.mv-check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mv-draw 0.5s ease-out var(--d, 0s) forwards; }
.mv-blink { animation: mv-blink 1s steps(2, start) infinite; }
.mv-cursor { animation: mv-blink 1s steps(2, start) infinite, mv-cursor-move 3.2s steps(8) 0.4s forwards; }
.mv-pulse-ring { transform-origin: center; animation: mv-pulse 3s ease-out infinite; }
.mv-climb { animation: mv-climb 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.4s both; }
.mv-sweep { transform-origin: 190px 250px; transform-box: view-box; animation: mv-sweep 2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both; }
.mv-scroll { animation: mv-scroll 2.4s linear infinite; }
.mv-assemble { transform-origin: center; animation: mv-assemble 0.6s cubic-bezier(0.34, 1.3, 0.64, 1) var(--d, 0s) both; }

@keyframes mv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mv-draw { to { stroke-dashoffset: 0; } }
@keyframes mv-flow { to { stroke-dashoffset: -20; } }
@keyframes mv-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes mv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mv-slide-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mv-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mv-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mv-check { to { stroke-dashoffset: 0; } }
@keyframes mv-blink { 50% { opacity: 0; } }
@keyframes mv-cursor-move { from { transform: translateX(0); } to { transform: translateX(150px); } }
@keyframes mv-pulse { 0% { transform: scale(0.86); opacity: 0.9; } 100% { transform: scale(1.22); opacity: 0; } }
@keyframes mv-climb { from { transform: translateY(186px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }
@keyframes mv-sweep { from { transform: rotate(-90deg); } to { transform: rotate(84deg); } }
@keyframes mv-scroll { from { transform: translateX(0); } to { transform: translateX(-68px); } }
@keyframes mv-assemble { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.mv [class*="mv-"], .mv-draw, .mv-check path { animation: none !important; stroke-dashoffset: 0 !important; transform: none !important; opacity: 1 !important; }
	.mv animateMotion { display: none; }
}

/* "Meet the founder" — one compact panel, portrait left, short introduction
   right. Kept narrower than a full band so it reads as a moment inside the
   agency story rather than a personal page. */
.founder__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
	gap: clamp(1.5rem, 3.5vw, 3rem);
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background:
		radial-gradient(70% 80% at 100% 0%, rgba(91, 61, 245, 0.07) 0%, transparent 62%),
		linear-gradient(180deg, var(--white), var(--mint-050));
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 1px 2px rgba(23, 18, 63, 0.03),
		0 30px 60px -42px rgba(42, 22, 144, 0.4);
}

.founder__media {
	position: relative;
	margin: 0;
	border-radius: var(--r);
	overflow: hidden;
	border: 1px solid var(--rule-mint);
	background: var(--mint-100);
	box-shadow: 0 18px 38px -26px rgba(42, 22, 144, 0.5);
}

.founder__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* A quiet green base line, echoing the About image treatment above. */
.founder__media::after {
	content: "";
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--green), transparent);
	border-radius: 3px 3px 0 0;
}

.founder__title {
	font-size: clamp(1.32rem, 2.1vw, 1.72rem);
	line-height: 1.2;
	margin-bottom: 0.85rem;
}

.founder__text {
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--body);
	max-width: 56ch;
	margin-bottom: 1.35rem;
}

.founder__by {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.7rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rule-mint);
}

.founder__name {
	font-family: var(--display);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -0.014em;
	color: var(--ink);
}

.founder__role {
	font-size: 0.84rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--green-ink);
}

@media (max-width: 720px) {
	.founder__inner { grid-template-columns: minmax(0, 1fr); }
	.founder__media { max-width: 240px; }
}

/* Service page hero visual, so the six pages are not identical but for text. */
.service-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.service-hero__art {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 30px 60px -34px rgba(42, 22, 144, 0.35);
	backdrop-filter: blur(6px);
}

.service-hero__art svg { width: 100%; height: auto; }

/* Feature cards used on service and about pages. */
.feature-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.feature-card {
	position: relative;
	padding: 1.6rem 1.5rem 1.5rem;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 10px 30px -24px rgba(23, 18, 63, 0.25);
	transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.feature-card::after {
	content: "";
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	top: 0;
	height: 2px;
	background: var(--green);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--ease);
}

.feature-card:hover { border-color: var(--mint-300); transform: translateY(-3px); box-shadow: 0 2px 4px rgba(23, 18, 63, 0.04), 0 22px 44px -26px rgba(23, 18, 63, 0.35); }
.feature-card:hover::after { transform: scaleX(1); }

.feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 1.1rem;
	border-radius: var(--r-sm);
	background: var(--mint-100);
	box-shadow: inset 0 0 0 1px var(--rule-mint);
	color: var(--green-ink);
	transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.feature-card:hover .feature-card__icon { background: var(--green); color: var(--navy); box-shadow: inset 0 0 0 1px var(--green), 0 6px 14px -6px rgba(91, 61, 245, 0.6); }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 0.45rem; }
.feature-card p { font-size: 0.93rem; margin: 0; }

/* Service page: problems panel, numbered steps, benefit cards, CTA strip. */
.problem-panel {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: linear-gradient(180deg, var(--mint-050), var(--mint-100));
	border: 1px solid var(--rule-mint);
	border-radius: var(--r-lg);
}

.problem-panel .check-list li { border-color: var(--rule-mint); font-size: 0.96rem; }
.problem-panel .check-list li:first-child { border-top: 0; padding-top: 0; }
.problem-panel .check-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	counter-reset: steps;
}

.steps__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem 1.4rem 1.5rem;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 10px 30px -24px rgba(23, 18, 63, 0.25);
}

/* Connector between consecutive steps, hidden at row ends and on small screens. */
.steps__item:not(:nth-child(3n))::after {
	content: "";
	position: absolute;
	top: 2.55rem;
	right: calc(-1 * clamp(1rem, 2vw, 1.5rem));
	width: clamp(1rem, 2vw, 1.5rem);
	height: 1px;
	background: linear-gradient(90deg, var(--green), var(--rule-mint));
}

.steps__item:last-child::after { display: none; }

.steps__num {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--surface-premium-flat);
	color: var(--white);
	font-family: var(--display);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	box-shadow: 0 0 0 5px var(--mint-100);
}

.steps__body h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.steps__body p { font-size: 0.93rem; margin: 0; }

.cta-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.4rem, 2.5vw, 1.9rem) clamp(1.4rem, 3vw, 2.25rem);
	background: var(--white);
	border: 1px solid var(--rule-mint);
	border-left: 3px solid var(--green);
	border-radius: var(--r);
	box-shadow: var(--shadow-sm);
}

.cta-strip strong { display: block; font-family: var(--display); font-size: 1.12rem; color: var(--ink); margin-bottom: 0.2rem; letter-spacing: -0.016em; }
.cta-strip span { font-size: 0.95rem; color: var(--body); }
.cta-strip .btn { flex: none; }

.value-layout { gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.value-layout__intro { position: sticky; top: calc(var(--header-h) + var(--admin-offset) + 2rem); }
.value-layout__intro p:last-child { max-width: 42ch; }

.benefit-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.85rem, 1.5vw, 1.1rem); }

.benefit-card {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	padding: 1.2rem 1.25rem;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 10px 30px -24px rgba(23, 18, 63, 0.25);
	transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.benefit-card:hover { border-color: var(--mint-300); transform: translateY(-2px); }
.benefit-card p { font-size: 0.96rem; color: var(--ink); font-weight: 500; margin: 0; line-height: 1.5; }

.benefit-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--green);
	color: var(--navy);
	margin-top: 0.05rem;
}

/* Service page refinement — a few scoped touches so the six pages read with a
   clearer hierarchy. Nothing here changes tokens, sections or layout. */
.single-rankiva_service .page-hero__lead { font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height: 1.62; }
.single-rankiva_service .entry__content > p:first-child { font-size: 1.08rem; line-height: 1.7; color: var(--ink); }
.single-rankiva_service .entry__content p { line-height: 1.72; }
.feature-cards--service .feature-card { display: flex; flex-direction: column; }
.feature-cards--service .feature-card p { line-height: 1.58; }
.single-rankiva_service .steps__body p { line-height: 1.58; }
.single-rankiva_service .related-card { padding: 1.7rem 1.6rem; }
.single-rankiva_service .related-card h3 { transition: color 0.25s var(--ease); }
.single-rankiva_service .related-card:hover h3 { color: var(--green-deep); }

/* Service packages — three comparable cards, one optionally highlighted by a
   badge. Cards are equal height; the button always sits on the same baseline. */
.pkg-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: stretch;
}

.pkg-grid--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.pkg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }

.pkg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: clamp(1.6rem, 2.6vw, 2.1rem) clamp(1.4rem, 2.4vw, 1.85rem);
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	box-shadow: 0 1px 2px rgba(23, 18, 63, 0.03), 0 10px 30px -24px rgba(23, 18, 63, 0.25);
	transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pkg-card:hover { border-color: var(--mint-300); transform: translateY(-3px); box-shadow: 0 2px 4px rgba(23, 18, 63, 0.04), 0 22px 44px -26px rgba(23, 18, 63, 0.35); }

.pkg-card--featured {
	border-color: var(--green);
	box-shadow: 0 0 0 1px var(--green), 0 2px 4px rgba(23, 18, 63, 0.04), 0 24px 48px -26px rgba(67, 38, 214, 0.45);
}

.pkg-card--featured:hover { border-color: var(--green); }

.pkg-card__badge {
	position: absolute;
	top: 0;
	left: clamp(1.4rem, 2.4vw, 1.85rem);
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	padding: 0.32rem 0.8rem;
	border-radius: 100px;
	background: var(--surface-premium-flat);
	color: var(--white);
	font-family: var(--display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	box-shadow: 0 0 0 4px var(--white);
}

.pkg-card__head { display: flex; flex-direction: column; gap: 0.5rem; }
.pkg-card__name { font-size: clamp(1.18rem, 1.7vw, 1.4rem); margin: 0; }
.pkg-card__desc { font-size: 0.95rem; color: var(--body); line-height: 1.6; margin: 0; }

.pkg-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem;
	padding: 1rem 0;
	border-top: 1px solid var(--rule-mint);
	border-bottom: 1px solid var(--rule-mint);
}

.pkg-card__amount {
	font-family: var(--display);
	font-size: clamp(1.75rem, 2.6vw, 2.2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.pkg-card__term { font-size: 0.88rem; font-weight: 500; color: var(--muted); }

.pkg-card__highlights {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.pkg-card__highlights li {
	padding: 0.32rem 0.7rem;
	border-radius: 100px;
	background: var(--mint-100);
	box-shadow: inset 0 0 0 1px var(--rule-mint);
	color: var(--green-ink);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
}

.pkg-card__group { display: flex; flex-direction: column; gap: 0.6rem; }

.pkg-card__label {
	font-family: var(--sans);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--green-deep);
}

.pkg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pkg-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.93rem; line-height: 1.5; color: var(--body); }
.pkg-list svg { flex: none; margin-top: 3px; color: var(--green); }
.pkg-list li.is-excluded { color: var(--muted); }
.pkg-list li.is-excluded svg { color: var(--mint-300); }
.pkg-list--plain li { color: var(--ink); font-weight: 500; }
.pkg-list--plain li::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0.55rem 0.35rem 0 0.25rem; border-radius: 50%; background: var(--green); }

.pkg-card__fit { font-size: 0.9rem; line-height: 1.55; color: var(--body); margin: 0; }
.pkg-card__fit strong { color: var(--ink); font-weight: 600; }

.pkg-card__cta { margin-top: auto; width: 100%; justify-content: center; }
.pkg-card__cta:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--white), 0 0 0 6px rgba(91, 61, 245, 0.45); }
.pkg-card--featured .pkg-card__amount { color: var(--green-deep); }
.pkg-card--featured .pkg-card__price { border-color: rgba(91, 61, 245, 0.35); }

@media (max-width: 1100px) {
	.pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pkg-grid--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
}

@media (max-width: 720px) {
	.pkg-grid,
	.pkg-grid--1,
	.pkg-grid--2 { grid-template-columns: minmax(0, 1fr); max-width: none; }
	.pkg-card { gap: 1.1rem; }
}

/* == 14 Elementor compatibility ==========================================
   The theme must never fight the builder. No !important overrides on
   Elementor output, and container widths handed to Elementor's own system. */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner { max-width: var(--wrap); }

/* Elementor page templates supply their own wrappers, so drop ours. */
.elementor-page .site-main > .band:first-child,
.elementor-template-full-width .site-main { padding: 0; }

.elementor-page .entry,
.elementor-page .entry__content { max-width: none; margin-inline: 0; }

/* Let widget markup keep its own list and heading styling. */
.elementor-widget-container ul,
.elementor-widget-container ol { list-style: revert; padding-left: revert; }
.elementor-widget-container li { margin-bottom: revert; }

.elementor-button { font-family: var(--sans); }

/* == 15 Responsive ======================================================== */
@media (max-width: 1100px) {
	.caps__inner,
	.orbit-band__inner,
	.magazine,
	.network-panel,
	.contact-layout,
	.featured-post { grid-template-columns: minmax(0, 1fr); }

	.caps__editorial { position: static; }
	.faq-section__inner { grid-template-columns: minmax(0, 1fr); }
	.faq-section__head { position: static; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
	.contact-panel { position: static; }
	.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.standard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.footer-brand { grid-column: 1 / -1; }
	.footer-brand p { max-width: 44ch; }
	.footer-col--contact { grid-column: 1 / -1; }
	.feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.service-hero { grid-template-columns: minmax(0, 1fr); }
	.about-hero { grid-template-columns: minmax(0, 1fr); }
	.qr-panel { grid-template-columns: minmax(0, 1fr); }
	.qr-panel__code { order: -1; }
	.about-hero__media { max-width: 640px; }
	.case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.case-fact:nth-child(3) { border-left: 0; padding-left: 0; }
	.case-fact:nth-child(n + 3) { border-top: 1px solid var(--rule); }
	.subservices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.steps, .steps.steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.steps__item::after, .steps--four .steps__item::after { display: none !important; }
	.network-hero { grid-template-columns: minmax(0, 1fr); }
	.offer-card { max-width: 560px; }
	.value-layout__intro { position: static; }
}

@media (max-width: 980px) {
	.hero__inner { grid-template-columns: minmax(0, 1fr); }
	.hero__visual { order: -1; max-width: 440px; margin-bottom: 0.5rem; }
	.section-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.principles,
	.journey,
	.process,
	.reasons,
	.related-services,
	.sitemap-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.principle:not(:nth-child(3n + 1)),
	.journey__step:not(:nth-child(3n + 1)),
	.process__step:not(:nth-child(3n + 1)),
	.reason:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }

	.principle:nth-child(even),
	.journey__step:nth-child(even),
	.process__step:nth-child(even),
	.reason:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--rule); }

	.journey__step:nth-child(even) { border-left-color: var(--rule-dark); }
	.journey__step:not(:nth-child(3n + 1))::before { left: 0; }
	.journey__step:nth-child(even)::before { left: 1.5rem; }
	.work-grid { grid-template-columns: minmax(0, 1fr); }
	.case-block { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
}

@media (max-width: 1024px) {
	.site-brand__logo,
	.site-brand img { width: min(var(--logo-w-tablet, 170px), calc(var(--logo-h-max) * var(--logo-ratio, 999))); }
}

@media (max-width: 900px) {
	/* Brand left, toggle and CTA right; the nav becomes the panel below. */
	.site-brand { margin-right: auto; }
	.header-cta { order: 3; }
	.nav__toggle { order: 4; }

	/* While the menu is open, the header itself deepens toward the panel's
	   own colour instead of staying flat white/light above a dark panel —
	   the two read as one connected surface rather than an abrupt jump.
	   Scoped to this breakpoint only, so the approved desktop header is
	   completely unaffected regardless of .is-open's state. */
	.site-header:has(.nav.is-open) {
		background: linear-gradient(180deg, #ffffff 0%, #bdb3e6 45%, #7d6dc7 100%);
		border-bottom-color: var(--green-ink);
	}

	.nav {
		position: fixed;
		display: block;
		inset: calc(var(--header-h) + var(--admin-offset)) 0 auto;
		/* dvh accounts for a mobile browser's address bar the way vh cannot;
		   the vh line above it is the fallback for browsers without dvh
		   support and is simply overridden where dvh is available. */
		max-height: calc(100vh - var(--header-h) - var(--admin-offset));
		max-height: calc(100dvh - var(--header-h) - var(--admin-offset));
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		/* The lighter of the two stops sits at the top, right where the
		   deepened header above hands off to it, so the whole opened
		   header+panel reads as one continuous surface rather than two
		   unrelated blocks. */
		background: linear-gradient(180deg, var(--premium-glow) 0%, var(--green-ink) 100%);
		border-bottom: 1px solid var(--rule-dark);
		padding: 0.5rem var(--gutter) 1.5rem;
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
	}

	.nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.nav > ul { flex-direction: column; align-items: stretch; gap: 0; }

	/* Tighter rows: comfortable to tap, but far more of the menu is visible
	   at once than before. */
	.nav a { color: var(--white); padding: 0.68rem 0.15rem; border-bottom: 1px solid var(--rule-dark); border-radius: 0; font-size: 0.98rem; white-space: normal; line-height: 1.3; }
	.nav a:hover { background: transparent; color: var(--premium-text); }

	/* Active item: a compact translucent surface with a left accent bar,
	   not the desktop pill's opaque white fill and ring (which, on a
	   full-width mobile row, rendered as an oversized white block). */
	.nav .current-menu-item > a,
	.nav .current-menu-parent > a,
	.nav .current_page_item > a {
		color: var(--premium-text);
		background: rgba(255, 255, 255, 0.1);
		box-shadow: none;
		border-radius: 8px;
		padding-left: 0.75rem;
		border-left: 3px solid var(--premium-highlight);
	}
	.nav .current-menu-item > a::after,
	.nav .current-menu-parent > a::after,
	.nav .current_page_item > a::after { display: none; }

	.nav > ul > .menu-item-has-children > a { padding-right: 0; }
	.nav > ul > .menu-item-has-children > a::before { display: none; }
	.nav a:focus-visible { outline-color: var(--premium-highlight); outline-offset: -2px; }

	.nav .sub-menu {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: transparent;
		border: 0;
		padding: 0 0 0 1rem;
		min-width: 0;
	}

	.nav li.is-open > .sub-menu { display: block; }
	.nav .sub-menu a { color: var(--premium-text); font-size: 0.92rem; padding-block: 0.55rem; border-left: 1px solid rgba(255, 255, 255, 0.16); padding-left: 0.85rem; }
	.sub-menu-toggle { inset: 0 0 auto; height: 2.9rem; }
	.nav__toggle { display: flex; }
	.header-cta { padding: 0.55rem 0.85rem; font-size: 0.84rem; }

	.cap__head { grid-template-columns: 3rem minmax(0, 1fr) 2rem; gap: 0.75rem; }
	.cap__panel { grid-template-columns: minmax(0, 1fr); }
	.cap__body, .cap__motif { grid-column: 1; }
}

@media (max-width: 720px) {
	:root { --header-h: 72px; }
	/* Mobile logo width, capped so the toggle and button always keep their
	   room; the header height itself is fixed above. */
	.site-brand__logo,
	.site-brand img { width: min(var(--logo-w-mobile, 140px), calc(var(--logo-h-max) * var(--logo-ratio, 999))); max-width: min(100%, calc(100vw - var(--gutter) * 2 - 44px - 9.5rem)); } /* room for toggle + CTA */
	.header-inner { gap: 0.75rem; }
	body { font-size: 1rem; }
	h1 { letter-spacing: -0.025em; }
	.hero__lead, .page-hero__lead { font-size: 1.02rem; }
	.grid--2,
	.principles,
	.journey,
	.process,
	.reasons,
	.related-services,
	.sitemap-cols,
	.post-grid,
	.quote-grid,
	.subservices,
	.form-grid,
	.post-nav,
	.standard,
	.feature-cards,
	.steps,
	.steps.steps--four,
	.benefit-cards,
	.case-facts { grid-template-columns: minmax(0, 1fr); }

	.principle,
	.journey__step,
	.process__step,
	.reason,
	.case-fact { padding-left: 0 !important; border-left: 0 !important; }

	.journey__step::before { left: 0 !important; }
	.case-fact { border-top: 1px solid var(--rule); }
	.case-fact:first-child { border-top: 0; }
	.proof__item + .proof__item { padding-left: 0; border-left: 0; }
	.post-nav .is-next { text-align: left; }
	.cap__subs { grid-template-columns: minmax(0, 1fr); }
	.faq__q { padding: 1rem 1.1rem; gap: 0.75rem; }
	.faq__a { padding-left: 1.1rem; }
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.quote-grid { grid-template-columns: minmax(0, 1fr); }
	.quote-lead { grid-template-columns: minmax(0, 1fr); }
	.quote-lead .quote__by { flex-direction: row; align-items: center; padding-left: 0; border-left: 0; padding-top: 1.25rem; border-top: 1px solid var(--rule-mint); }
	.footer-brand { grid-column: 1 / -1; }
	.footer-col--contact { grid-column: 1 / -1; }
	.share { flex-wrap: wrap; }
}

@media (max-width: 430px) {
	.footer-grid { grid-template-columns: minmax(0, 1fr); }
	.footer-col a { white-space: normal; }
	.btn { width: 100%; justify-content: center; white-space: normal; text-align: center; height: auto; line-height: 1.3; } /* long labels wrap instead of clipping on phones */
	.btn-row { flex-direction: column; }
	.hero__meta { gap: 0.75rem; flex-direction: column; }
	.header-cta { display: none; } /* Below 430px the toggle and brand need the room. */
	.site-brand__logo,
	.site-brand img { max-width: min(100%, calc(100vw - var(--gutter) * 2 - 44px - 0.75rem)); }
	.cap__head { grid-template-columns: 2.5rem minmax(0, 1fr) 1.75rem; }
	.cap__num { font-size: 1.3rem; }
}

/* Small-screen polish for the newer components. */
@media (max-width: 720px) {
	.standard__item:nth-child(even) { margin-top: 0; }
	.hero__actions .btn { width: 100%; justify-content: center; }
	.btn { min-height: 46px; }
	.btn-row .btn { flex: 1 1 auto; }
	.hero__title em { white-space: normal; }
	.hero__title em::after { display: none; }
}

@media (max-width: 430px) {
	/* Keep the directory scannable: name, logo, metrics and CTA all stay
	   visible rather than collapsing to a cramped two-column card. */
	.hero__eyebrow { font-size: 0.72rem; letter-spacing: 0.09em; }
}

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

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

	.reveal { opacity: 1; transform: none; }
	.hero__visual svg { animation: none; }
	.eco-pulse, .orbit-pulse, .hero-pulse { display: none; }
	.btn--primary::before { display: none; }

	/* The hero's ambient layers keep their lighting but stop moving. */
	.hero::before,
	.hero::after,
	.hero .lattice::before,
	.hero .lattice::after,
	.hero__visual::before {
		animation: none !important;
		transform: none;
		translate: none;
		opacity: 1;
	}

	.hero .lattice::after { background-position: 50% 0; }
	.hero-art__sheen { display: none; }
}

@media print {
	.site-header, .site-footer, .cta-band, .nav, .share, .btn { display: none !important; }
	body { color: #000; background: #fff; }
	.band, .hero, .page-hero { padding-block: 1rem; background: #fff !important; color: #000 !important; }
	.hero__title, .page-hero__title { color: #000 !important; }
}