/* ==========================================================================
   Arlieo — main.css
   Design-token-driven, controlled editorial system.
   Author: Adrian Street
   Version: 1.3.19
   ========================================================================== */

/* ----- Self-hosted fonts ---------------------------------------------------
   Drop font files into /assets/fonts/<family>/ then these @font-face rules
   resolve. If files are absent the system fallbacks below keep the site usable.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/bebas-neue/bebas-neue-400.woff2") format("woff2");
}

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

@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-mono/dm-mono-400.woff2") format("woff2");
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/dm-mono/dm-mono-500.woff2") format("woff2");
}

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

:root {
	/* Brand surfaces */
	--ink: #111110;
	--charcoal: #1E1D1A;
	--deep-forest: #004D22;
	--forest-green: #006B30;   /* accent on LIGHT only */
	--vivid-green: #00E676;    /* accent on DARK only */
	--cream: #F7F5F0;
	--stone: #EDEAE3;
	--border: #C0BDB6;

	/* Context-resolved accents (overridden per surface) */
	--accent-light: #006B30;
	--accent-dark: #00E676;

	/* Active text + accent for the current surface */
	--fg: #111110;
	--fg-muted: #4a4842;
	--bg: var(--cream);
	--accent: var(--accent-light);
	--rule: var(--border);

	/* Type families */
	--font-display: "Bebas Neue", "Arial Narrow", "Helvetica Neue", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

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

	/* Structure */
	--wrap: 1200px;
	--wrap-wide: 1400px;
	--prose: 64ch;
	--radius: 4px;
	--radius-sm: 6px;
	--radius-lg: 8px;

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 0.5s;
	--dur-fast: 0.2s;

	/* Type sizes (fluid) */
	--fs-eyebrow: 0.78rem;
	--fs-body: 1.0625rem;
	--fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
	--fs-h3: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	--fs-h2: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
	--fs-h1: clamp(2.8rem, 1.6rem + 5vw, 6rem);
}

/* ----- Reset & base ------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

/* Smooth scrolling is opt-in: only for users who have not requested reduced
   motion. This avoids forcing animated scroll on people who set reduced motion
   for vestibular or migraine reasons. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--fg);
	background: var(--cream);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 var(--space-sm);
}

h1, .heading--xl { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--space-sm); }

strong { font-weight: 700; }

/* ----- Accessibility ------------------------------------------------------ */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--ink);
	color: #fff;
	padding: var(--space-xs) var(--space-md);
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

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

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

/* ----- Layout helpers ----------------------------------------------------- */

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2.5rem, var(--wrap-wide)); margin-inline: auto; }
.prose { max-width: var(--prose); }

.section { padding-block: clamp(3rem, 6vw, var(--space-3xl)); }
.section--tight { padding-block: clamp(2rem, 4vw, var(--space-2xl)); }

/* ----- Surfaces ----------------------------------------------------------- */

.surface--cream { --bg: var(--cream); --fg: var(--ink); --fg-muted: #4a4842; --accent: var(--forest-green); --rule: var(--border); background: var(--cream); color: var(--ink); }
.surface--stone { --bg: var(--stone); --fg: var(--ink); --fg-muted: #4a4842; --accent: var(--forest-green); --rule: var(--border); background: var(--stone); color: var(--ink); }
.surface--ink { --bg: var(--ink); --fg: #F4F2EC; --fg-muted: #b8b5ac; --accent: var(--vivid-green); --rule: rgba(255,255,255,0.14); background: var(--ink); color: #F4F2EC; }
.surface--charcoal { --bg: var(--charcoal); --fg: #F4F2EC; --fg-muted: #b8b5ac; --accent: var(--vivid-green); --rule: rgba(255,255,255,0.14); background: var(--charcoal); color: #F4F2EC; }
.surface--deep-forest { --bg: var(--deep-forest); --fg: #F4F2EC; --fg-muted: #cfe6d6; --accent: var(--vivid-green); --rule: rgba(255,255,255,0.18); background: var(--deep-forest); color: #F4F2EC; }

.fg-muted { color: var(--fg-muted); }

/* ----- Eyebrows / labels / mono -------------------------------------------- */

.label,
.eyebrow {
	font-family: var(--font-mono);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: var(--fs-eyebrow);
	color: var(--accent);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	margin-bottom: var(--space-md);
}
.eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: var(--accent);
}

/* ----- Buttons ------------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	padding: 0.95rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease),
				color var(--dur-fast) var(--ease),
				border-color var(--dur-fast) var(--ease),
				transform var(--dur-fast) var(--ease);
}
.btn__arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Light surfaces */
.btn--on-light.btn--primary { background: var(--forest-green); color: var(--cream); }
.btn--on-light.btn--primary:hover { background: #00582a; transform: translateY(-2px); }
.btn--on-light.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--on-light.btn--secondary:hover { background: var(--ink); color: var(--cream); }
.btn--on-light.btn--ghost { padding-inline: 0; color: var(--forest-green); }
.btn--on-light.btn--ghost:hover { color: #00582a; }

/* Dark surfaces */
.btn--on-dark.btn--primary { background: var(--vivid-green); color: var(--ink); }
.btn--on-dark.btn--primary:hover { background: #2bf08c; transform: translateY(-2px); }
.btn--on-dark.btn--secondary { background: transparent; color: #F4F2EC; border-color: var(--vivid-green); }
.btn--on-dark.btn--secondary:hover { background: var(--vivid-green); color: var(--ink); }
.btn--on-dark.btn--ghost { padding-inline: 0; color: var(--vivid-green); }
.btn--on-dark.btn--ghost:hover { color: #2bf08c; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* ----- Header ------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ink);
	color: #F4F2EC;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: 72px;
}
.site-brand { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: inherit; }
.site-brand__text { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: 0.04em; line-height: 1; }
.site-brand img { max-height: 40px; width: auto; }
.footer-brand img { max-height: 60px; width: auto; display: block; }
.primary-nav { display: none; }
.primary-nav ul { list-style: none; display: flex; gap: var(--space-md); margin: 0; padding: 0; }
.primary-nav a {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.78rem;
	text-decoration: none;
	color: #F4F2EC;
	padding-block: 0.4rem;
	border-bottom: 1px solid transparent;
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a { color: var(--vivid-green); border-color: var(--vivid-green); }

.header-actions { display: flex; align-items: center; gap: var(--space-sm); }

.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.6rem;
}
.nav-toggle span { width: 26px; height: 2px; background: #F4F2EC; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1000px) {
	.primary-nav { display: block; }
	.nav-toggle { display: none; }
}

/* ----- Mobile nav --------------------------------------------------------- */

.mobile-nav {
	position: fixed;
	inset: 0;
	background: var(--ink);
	color: #F4F2EC;
	z-index: 200;
	transform: translateY(-100%);
	transition: transform var(--dur) var(--ease);
	display: flex;
	flex-direction: column;
	padding: var(--space-lg) var(--space-md);
	overflow-y: auto;
}
.mobile-nav[data-open="true"] { transform: translateY(0); }
.mobile-nav__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xl); }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > nav > ul > li > a {
	font-family: var(--font-display);
	font-size: clamp(2rem, 8vw, 3.2rem);
	text-transform: uppercase;
	text-decoration: none;
	color: #F4F2EC;
	display: block;
	padding-block: 0.4rem;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-nav > nav > ul > li > a:hover { color: var(--vivid-green); }
.mobile-nav__cta { margin-top: var(--space-lg); }
.mobile-nav__cta .btn { padding-block: 0.7rem; }
.nav-close { background: none; border: 0; color: #F4F2EC; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; font-size: 1.4rem; }

/* ----- Hero --------------------------------------------------------------- */

.hero { position: relative; overflow: clip; }
.hero__inner { display: grid; gap: var(--space-xl); align-items: center; }
.hero__heading { font-size: var(--fs-h1); margin-bottom: var(--space-md); }
.hero__subheading { font-size: var(--fs-lead); font-weight: 500; margin-bottom: var(--space-md); color: var(--accent); }
.hero__body { font-size: var(--fs-lead); max-width: 52ch; color: var(--fg-muted); }
.hero__visual img { border: 1px solid var(--rule); border-radius: var(--radius-lg); width: 100%; object-fit: cover; }

/* Image mode (mobile/base): image sits below content as a normal block. */
.hero__media { position: relative; width: 100%; min-height: 240px; margin-top: var(--space-lg); overflow: hidden; border-radius: var(--radius); }
.hero__media img, .hero__media-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Form mode panel: a light card so the form stays legible on any surface. */
.hero__form { /* The form provides its own surface card (see .arlieo-form). */ }
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--rule); }
.hero__proof li { list-style: none; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); }
.hero__proof li::before { content: "▸ "; color: var(--accent); }

@media (min-width: 900px) {
	.hero__inner { grid-template-columns: 1.1fr 0.9fr; }

	/* Blank: single column, content stays LEFT aligned (not centred), readable
	   measure. The right side is simply the surface colour. */
	.hero--no-visual .hero__inner { grid-template-columns: 1fr; }
	.hero--no-visual .hero__content { max-width: 60ch; }
	.hero--no-visual .hero__body { max-width: 60ch; }

	/* Image fill: content occupies the left; the image bleeds to the right edge
	   of the section and fades from the surface colour into the image. */
	.hero--has-image .hero__inner { grid-template-columns: 1fr; }
	.hero--has-image .hero__content { max-width: 46%; }
	.hero--has-image .hero__media {
		position: absolute; inset: 0 0 0 auto; width: 52%;
		min-height: 0; margin-top: 0; border-radius: 0;
	}
	.hero--has-image .hero__media::after {
		content: ""; position: absolute; inset: 0; pointer-events: none;
		background: linear-gradient(to right, var(--bg) 0%, transparent 72%);
	}

	/* Form mode: content left, form panel right, aligned to the top. */
	.hero--has-form .hero__inner { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
}

/* ----- Generic section header --------------------------------------------- */

.section-head { max-width: 56ch; margin-bottom: var(--space-xl); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--fg-muted); font-size: var(--fs-lead); }

/* Split header: heading on the left, description on the right, so the copy
   spans the full width rather than sitting in a narrow left block. */
.section-head--split { max-width: none; display: grid; gap: var(--space-md); }
.section-head--split .section-head__body { color: var(--fg-muted); font-size: var(--fs-lead); }
.section-head--split .section-head__body p { margin: 0; }
@media (min-width: 900px) {
	.section-head--split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: end; }
}

/* ----- Cards / grids ------------------------------------------------------ */

.card-grid { display: grid; gap: var(--space-md); }
@media (min-width: 640px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) {
	.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: var(--space-lg);
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.surface--cream .card, .surface--stone .card { background: rgba(255,255,255,0.5); }
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card__tag { align-self: flex-start; }
.card__heading { font-size: var(--fs-h3); margin: 0; }
.card__text { color: var(--fg-muted); margin: 0; }
.card__link { margin-top: auto; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--accent); text-decoration: none; }
.card__link::after { content: " →"; transition: all var(--dur-fast) var(--ease); }

/* Diagnostic / audit card numbering */
.card--diagnostic { counter-increment: diag; position: relative; }
.card--diagnostic .card__index { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.12em; }

/* ----- Audit offer panel -------------------------------------------------- */

.audit-panel {
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 4vw, var(--space-xl));
	display: grid;
	gap: var(--space-lg);
	background: rgba(255,255,255,0.4);
}
.surface--ink .audit-panel, .surface--charcoal .audit-panel, .surface--deep-forest .audit-panel { background: rgba(255,255,255,0.04); }
.audit-panel__price { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 5.5rem); line-height: 0.9; color: var(--accent); }
.audit-panel__price small { display: block; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--fg-muted); text-transform: uppercase; margin-top: var(--space-xs); }
.audit-panel__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.audit-panel__benefits li { padding-left: 1.6rem; position: relative; }
.audit-panel__benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.audit-panel__micro { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--fg-muted); }

/* Audit pitch: intro text on the left, offer card on the right, so the section
   uses the horizontal space and stays compact instead of running tall. The
   card itself stacks vertically (price above the benefits and CTA). */
.audit-pitch__inner { display: grid; gap: var(--space-xl); }
.audit-pitch__intro { align-self: center; }
@media (min-width: 920px) {
	.audit-pitch__inner { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
}

/* ----- Text + image split ------------------------------------------------- */

.text-image { display: grid; gap: var(--space-xl); align-items: center; }
.text-image__media img { width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); object-fit: cover; }

@media (min-width: 900px) {
	.text-image { grid-template-columns: 1fr 1fr; }
	.text-image--media-left .text-image__media { order: -1; }

	/* No image: copy runs full width. */
	.text-image--full {
		grid-template-columns: 1fr;
	}

	.text-image--full .text-image__content {
		width: 100%;
		max-width: none;
		grid-column: 1 / -1;
	}

	.text-image--full .prose {
		width: 100%;
		max-width: none;
	}
}

/* ----- Process ------------------------------------------------------------ */

.process__layout { display: grid; gap: var(--space-xl); }
@media (min-width: 980px) {
	.process--sticky .process__layout { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
	.process--sticky .process__intro { position: sticky; top: 120px; }
}
.process__steps { display: grid; gap: 0; counter-reset: step; }
.step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-md);
	padding-block: var(--space-lg);
	border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__num { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--accent); }
.step__heading { font-size: var(--fs-h3); margin-bottom: var(--space-2xs); }
.step__text { color: var(--fg-muted); margin: 0; }

/* ----- Founder timeline --------------------------------------------------- */

.founder { display: grid; gap: var(--space-xl); }
@media (min-width: 980px) {
	.founder { grid-template-columns: 1fr 1.1fr; align-items: start; }
	/* No portrait: content runs full width instead of leaving an empty column. */
.founder--full {
		grid-template-columns: 1fr;
	}

	.founder--full .founder__content {
		width: 100%;
		max-width: none;
		grid-column: 1 / -1;
	}

	.founder--full .prose {
		width: 100%;
		max-width: none;
	}
}
.founder__media img { width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); }
.timeline { list-style: none; margin: var(--space-lg) 0 0; padding: 0; position: relative; }
.timeline__item { position: relative; padding: 0 0 var(--space-lg) var(--space-lg); border-left: 1px solid var(--rule); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.timeline__role { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.timeline__org { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-block: var(--space-3xs); }
.timeline__desc { color: var(--fg-muted); margin: 0; }

/* ----- Operational AI ----------------------------------------------------- */

/* Two-column header: heading left, description right, so the copy spans the
   full width rather than sitting in a narrow left block. */
.op-ai__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.op-ai__head-body { color: var(--fg-muted); font-size: var(--fs-lead); }
.op-ai__head-body p { margin: 0; }
@media (min-width: 900px) {
	.op-ai__head { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: end; }
}

.op-ai__note {
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-mono);
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	color: var(--fg-muted);
	margin-top: var(--space-lg);
}

/* ----- Logo strip --------------------------------------------------------- */

.logo-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); align-items: center; }
@media (min-width: 700px) { .logo-strip { grid-template-columns: repeat(4, 1fr); } }
.logo-strip img { margin-inline: auto; max-height: 56px; width: auto; filter: grayscale(1); opacity: 0.7; transition: opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); }
.logo-strip a:hover img, .logo-strip img:hover { opacity: 1; filter: grayscale(0); }

/* ----- Testimonials ------------------------------------------------------- */

.testimonials__grid { display: grid; gap: var(--space-md); }
@media (min-width: 820px) { .testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
.testimonial { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-lg); }
.testimonial__quote { font-size: var(--fs-lead); margin-bottom: var(--space-md); }
.testimonial__quote::before { content: "“"; color: var(--accent); }
.testimonial__cite { display: flex; align-items: center; gap: var(--space-sm); }
.testimonial__cite img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial__name { font-weight: 600; }
.testimonial__role { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }

/* ----- Stats -------------------------------------------------------------- */

.stats__grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat__number { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 0.9; color: var(--accent); }
.stat__label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin-top: var(--space-2xs); }
.stat__support { color: var(--fg-muted); font-size: 0.92rem; margin-top: var(--space-3xs); }

/* ----- FAQ accordion ------------------------------------------------------ */

.faq__list { border-top: 1px solid var(--rule); max-width: 820px; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__trigger {
	width: 100%;
	background: none;
	border: 0;
	text-align: left;
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
	align-items: center;
	padding: var(--space-md) 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--fg);
}
.faq__icon { flex: none; width: 1.2rem; height: 1.2rem; position: relative; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--accent); inset: 0; margin: auto; }
.faq__icon::before { width: 100%; height: 2px; }
.faq__icon::after { width: 2px; height: 100%; transition: transform var(--dur-fast) var(--ease); }
.faq__trigger[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); }
.faq__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.faq__panel-inner { padding-bottom: var(--space-md); color: var(--fg-muted); }

/* ----- CTA band ----------------------------------------------------------- */

.cta-band { text-align: left; }
.cta-band__inner { max-width: 900px; }
.cta-band__heading { font-size: var(--fs-h2); margin-bottom: var(--space-md); }
.cta-band__body { font-size: var(--fs-lead); color: var(--fg-muted); max-width: 60ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* ----- Contact panel ------------------------------------------------------ */

.contact-panel { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .contact-panel { grid-template-columns: 1fr 1.1fr; } }
.contact-details { display: grid; gap: var(--space-md); }
.contact-details a { color: var(--accent); text-decoration: none; }
.contact-form-wrap :where(input, textarea, select) { font-family: inherit; }

/* ----- Embed -------------------------------------------------------------- */

.embed-wrap { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-md); }

/* ----- Insights archive --------------------------------------------------- */

.archive-head { padding-block: clamp(3rem, 6vw, var(--space-2xl)); }
.featured-article {
	display: grid;
	gap: var(--space-lg);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: var(--space-xl);
}
.featured-article__media img { width: 100%; height: 100%; object-fit: cover; }
.featured-article__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
@media (min-width: 860px) { .featured-article { grid-template-columns: 1.2fr 1fr; align-items: stretch; } }

.post-card { display: flex; flex-direction: column; gap: var(--space-xs); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.post-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.post-card__title { font-size: var(--fs-h3); margin: 0; }
.post-card__title a { text-decoration: none; }
.post-card__excerpt { color: var(--fg-muted); font-size: 0.95rem; margin: 0; }
.post-card__more { margin-top: auto; }

.post-meta { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--fg-muted); margin: 0; }
.post-meta a { color: var(--accent); text-decoration: none; }

/* ----- Single article ----------------------------------------------------- */

.article-header { padding-block: clamp(2rem, 4vw, var(--space-2xl)); }
.article-header__grid { margin-top: var(--space-lg); }
.article-header__title { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.5rem); line-height: 0.98; margin: 0; }
.article-standfirst { font-size: var(--fs-lead); color: var(--fg-muted); margin: 0; }

@media (min-width: 900px) {
	/* H1 on the left, standfirst on the right, sharing the header height
	   instead of stacking. Aligned to the bottom so they read as a pair. */
	.article-header__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-2xl); align-items: end; }
	.article-header__grid--solo { grid-template-columns: 1fr; max-width: 24ch; }
	.article-standfirst { padding-bottom: 0.4rem; }
}
.article-featured { padding-block: var(--space-lg); }
.article-featured img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--rule); display: block; }

/* The article body keeps the wrap's centred 1200px container (so its left edge
   lines up with the header above), but caps the readable column at 72ch and
   left-aligns it within that container rather than centring the narrow column. */
/* The article body keeps the wrap's centred 1200px container (so its left edge
   lines up with the header above). The body's direct children (TL;DR, TOC,
   article-content, FAQ) are capped at --measure and left-align within it.
   Inside article-content, normal blocks are capped at --measure too, but blocks
   with .alignwide / .alignfull (WordPress image alignment) break out wider. */
/* Article layout: single column by default. On wide screens, becomes a grid
   with the reading column on the left and a sticky TOC sidebar on the right,
   filling the space that was previously empty. */
.article-layout { --measure: 78ch; }
.article-body { max-width: var(--measure); }
.article-body > * { max-width: var(--measure); }

@media (min-width: 1000px) {
	.article-layout--has-toc { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--space-2xl); align-items: start; }
	.article-layout--has-toc .article-body { max-width: var(--measure); min-width: 0; }
	/* The aside is the second column; it comes first in source order for a11y
	   only when needed, but here it follows the body in the DOM. Place it in the
	   right column explicitly. */
	.article-layout--has-toc .article-aside { grid-column: 2; grid-row: 1; }
	.article-layout--has-toc .article-body { grid-column: 1; grid-row: 1; }
}

/* Sticky behaviour for the TOC sidebar. Offsets below the sticky site header. */
.article-aside__sticky { position: sticky; top: var(--space-xl); }
@media (max-width: 999px) {
	/* Below the two-column breakpoint the TOC sidebar is hidden. On mobile it
	   would occupy the single reading column and push the opening copy below the
	   fold, which works against read-in-order editorial content. The in-page
	   heading anchors remain in the HTML, so SEO and AI-citation value is kept;
	   only the visual sidebar is removed where it has no room to help. */
	.article-aside { display: none; }
}

/* article-content is full wrap width; its normal children are the ones capped,
   so aligned images can exceed the text measure. The separator rule above the
   body sits at the text measure via a pseudo-element so it does not span the
   full wide container. */
.article-content { margin-top: var(--space-xl); padding-top: var(--space-lg); max-width: none; position: relative; }
.article-content::before { content: ""; position: absolute; top: 0; left: 0; width: var(--measure); max-width: 100%; border-top: 1px solid var(--rule); }
.article-content > * { max-width: var(--measure); margin-left: 0; }

/* Wide alignment: fill the full wrap container width, wider than the text. */
.article-content > .alignwide {
	max-width: var(--wrap);
	width: 100%;
}

/* Full alignment: break out to the full viewport width, edge to edge. */
.article-content > .alignfull {
	max-width: 100vw;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}
.article-content > .alignfull img { border-radius: 0; width: 100%; display: block; }
.article-content > .alignwide img { width: 100%; }
.article-content > .alignwide,
.article-content > .alignfull { margin-block: var(--space-xl); }
.article-content figure { margin: var(--space-md) 0; }
.article-content figcaption { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-muted); margin-top: var(--space-2xs); text-align: left; }
.article-content > .alignfull figcaption,
.article-content > .alignwide figcaption { max-width: var(--measure); margin-inline: auto; padding-inline: var(--space-sm); }

/* Article-scale heading sizes, smaller than display headings. */
.article-body h2, .article-content h2 { margin-top: var(--space-xl); font-size: clamp(1.3rem, 0.9rem + 1.4vw, 1.85rem); letter-spacing: 0.01em; line-height: 1.3; }
.article-body h3, .article-content h3 { margin-top: var(--space-lg); font-size: clamp(1.05rem, 0.85rem + 0.8vw, 1.35rem); letter-spacing: 0; line-height: 1.4; }
.article-body h4, .article-content h4 { margin-top: var(--space-md); font-size: 1rem; font-weight: 700; }

/* Inline formatting. */
.article-body img, .article-content img { border-radius: var(--radius); margin-block: var(--space-md); max-width: 100%; }
.article-body a, .article-content a { color: var(--forest-green); text-underline-offset: 3px; }
.article-body blockquote, .article-content blockquote { border-left: 3px solid var(--accent); margin: var(--space-lg) 0; padding-left: var(--space-md); font-size: var(--fs-lead); color: var(--fg-muted); }
.article-body ol, .article-content ol, .article-body ul, .article-content ul { padding-left: 1.5rem; margin-bottom: var(--space-sm); }
.article-body li, .article-content li { margin-bottom: 0.35rem; }

.related { display: grid; gap: var(--space-md); }
@media (min-width: 760px) { .related { grid-template-columns: repeat(3, 1fr); } }

/* ----- Breadcrumbs -------------------------------------------------------- */

.breadcrumbs { padding-block: var(--space-md); }
.breadcrumbs a { color: var(--accent); text-decoration: none; }

/* ----- Pagination --------------------------------------------------------- */

.pagination { margin-top: var(--space-xl); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.pagination .page-numbers {
	display: inline-flex; min-width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center;
	border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none;
	font-family: var(--font-mono); font-size: 0.85rem;
}
.pagination .page-numbers.current { background: var(--accent); color: var(--ink); border-color: var(--accent); }

/* ----- Case studies ------------------------------------------------------- */

.cs-metrics { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); margin-block: var(--space-xl); }
@media (min-width: 760px) { .cs-metrics { grid-template-columns: repeat(4, 1fr); } }
.cs-block { max-width: var(--prose); margin-inline: auto; margin-bottom: var(--space-xl); }
.cs-block h2 { margin-bottom: var(--space-sm); }

/* ----- 404 & search ------------------------------------------------------- */

.error-404 { min-height: 60vh; display: flex; align-items: center; }
.error-404__code { font-family: var(--font-display); font-size: clamp(6rem, 22vw, 16rem); line-height: 0.8; color: var(--accent); }
.search-form { display: flex; gap: var(--space-2xs); max-width: 520px; }
.search-form input[type="search"] { flex: 1; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: transparent; color: inherit; }

/* ----- Footer ------------------------------------------------------------- */

.site-footer { background: var(--ink); color: #F4F2EC; }
.footer-cta { border-bottom: 1px solid rgba(255,255,255,0.1); padding-block: clamp(3rem, 6vw, var(--space-2xl)); }
.footer-cta__heading { font-size: var(--fs-h2); max-width: 20ch; }
.footer-cols { display: grid; gap: var(--space-xl); padding-block: var(--space-xl); align-items: start; }
@media (min-width: 760px) { .footer-cols { grid-template-columns: 1.4fr repeat(3, 1fr); align-items: start; } }
.footer-brand__intro { color: #b8b5ac; max-width: 38ch; margin-top: var(--space-sm); }
.footer-col__title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--vivid-green); margin-bottom: var(--space-sm); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.footer-col a { color: #d8d5cd; text-decoration: none; font-size: 0.92rem; }
.footer-col a:hover { color: var(--vivid-green); }
.footer-col__body {
	color: #d8d5cd;
	font-size: 0.92rem;
	line-height: 1.6;
}

.footer-col__body p {
	margin: 0 0 var(--space-2xs);
}
.footer-social { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }
.footer-social a { color: #d8d5cd; }
.footer-social a:hover { color: var(--vivid-green); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; padding-block: var(--space-md); border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.8rem; color: #9a978f; }
.legal-nav ul { list-style: none; display: flex; gap: var(--space-md); margin: 0; padding: 0; }
.legal-nav a { color: #9a978f; text-decoration: none; font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
.legal-nav a:hover { color: var(--vivid-green); }

/* ----- Motion: reveal system ---------------------------------------------- */

/* The hidden initial state is scoped to .js (set on <html> by an inline head
   script) so that without JavaScript, or before it runs, all content is fully
   visible. This prevents above-the-fold content flashing blank on slow
   connections and keeps the LCP element painted immediately. */
.js .reveal, .js .reveal-heading { opacity: 0; transform: translateY(20px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-visible, .reveal-heading.is-visible { opacity: 1; transform: none; }

/* Staggered children */
.js [data-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[data-stagger].is-visible > * { opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.19s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.26s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.33s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.40s; }

/* Line reveal for dividers / borders */
.line-reveal { position: relative; }
.line-reveal::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--accent); transition: width var(--dur) var(--ease); }
.line-reveal.is-visible::after { width: 100%; }

/* ----- Native enquiry form (Mailchimp) ------------------------------------ */

/* The form is themed HTML. It submits to admin-ajax; the Mailchimp API call is
   server-side, so the API key is never in the page. The form carries a surface
   class (.surface--ink etc.) so its card and inner elements resolve through the
   same design tokens as the block sections, staying readable on any surface. */
.arlieo-form {
	display: grid;
	gap: var(--space-sm);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--rule);
	border-radius: var(--radius-lg);
	--input-bg: #fff;
}
.arlieo-form.surface--ink,
.arlieo-form.surface--charcoal,
.arlieo-form.surface--deep-forest { --input-bg: rgba(255, 255, 255, 0.08); }

.arlieo-form__row { display: grid; gap: var(--space-sm); }
@media (min-width: 560px) { .arlieo-form__row { grid-template-columns: 1fr 1fr; } }
.arlieo-form__hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.arlieo-form__field { display: grid; gap: 0.4rem; }
.arlieo-form__field label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); }
.arlieo-form input[type="text"],
.arlieo-form input[type="email"],
.arlieo-form input[type="tel"],
.arlieo-form textarea {
	width: 100%; font: inherit; color: var(--fg);
	background: var(--input-bg); border: 1px solid var(--rule); border-radius: var(--radius-sm, 6px);
	padding: 0.7rem 0.85rem;
}
.arlieo-form textarea { min-height: 7rem; resize: vertical; }
.arlieo-form input:focus, .arlieo-form textarea:focus, .arlieo-form select:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.arlieo-form select { width: 100%; font: inherit; color: var(--fg); background: var(--input-bg); border: 1px solid var(--rule); border-radius: var(--radius-sm, 6px); padding: 0.7rem 0.85rem; }
.arlieo-form__address { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.arlieo-form__legend { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); padding: 0; margin-bottom: 0.2rem; }
.arlieo-form ::placeholder { color: var(--fg-muted); opacity: 0.75; }

.arlieo-form__consent { display: grid; gap: 0.6rem; margin-top: var(--space-2xs); font-size: 0.86rem; color: var(--fg); }
.arlieo-form__check { display: flex; gap: 0.55rem; align-items: flex-start; cursor: pointer; }
.arlieo-form__check input { margin-top: 0.2rem; flex: 0 0 auto; }
.arlieo-form__privacy { margin: 0; font-size: 0.82rem; color: var(--fg-muted); }
.arlieo-form__privacy a, .arlieo-form__consent a { color: var(--accent); }

.arlieo-form__actions { margin-top: var(--space-2xs); }
.arlieo-form__status { margin: 0; font-size: 0.9rem; min-height: 1.2em; color: var(--fg-muted); }
.arlieo-form__status.is-error { color: #c0392b; }
.arlieo-form.surface--ink .arlieo-form__status.is-error,
.arlieo-form.surface--charcoal .arlieo-form__status.is-error,
.arlieo-form.surface--deep-forest .arlieo-form__status.is-error { color: #ff8a80; }
.arlieo-form__status.is-success { color: var(--accent); font-weight: 600; }
.arlieo-form__status.is-pending { color: var(--fg-muted); }
.arlieo-form__notice { font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg-muted); }



/* ----- Article: TL;DR summary box ----------------------------------------- */

.article-tldr { background: var(--stone); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: var(--space-md) var(--space-lg); margin-block: var(--space-xl); }
.article-tldr__label { color: var(--accent); margin-bottom: var(--space-2xs); }
.article-tldr__text { font-size: var(--fs-lead); color: var(--fg); margin: 0; max-width: var(--prose); }

/* ----- Article: table of contents ----------------------------------------- */

.article-toc { background: var(--stone); border-radius: var(--radius); padding: var(--space-md) var(--space-lg); }
.article-toc__label { color: var(--fg-muted); margin-bottom: var(--space-sm); }
.article-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; counter-reset: toc-counter; }
.article-toc__item { display: flex; align-items: baseline; gap: 0.5rem; }
.article-toc__item::before { counter-increment: toc-counter; content: counter(toc-counter) "."; font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-muted); min-width: 1.4rem; }
.article-toc__item a { text-decoration: none; color: var(--fg); font-size: 0.93rem; transition: color var(--dur-fast) var(--ease); border-left: 2px solid transparent; }
.article-toc__item a:hover { color: var(--accent); }
.article-toc__item--h3 { padding-left: 1.8rem; }
.article-toc__item--h3::before { content: ''; min-width: 0; }
.article-toc__item--h3 a { font-size: 0.87rem; color: var(--fg-muted); }
/* Active section (scroll-spy) */
.article-toc__item.is-active a { color: var(--forest-green); font-weight: 600; }

/* In the sidebar context, drop the box background for a lighter rail look. */
@media (min-width: 1000px) {
	.article-layout--has-toc .article-toc { background: transparent; padding: 0; border-left: 1px solid var(--rule); padding-left: var(--space-md); }
	.article-layout--has-toc .article-toc__list { gap: 0.6rem; }
}

/* ----- Article: post meta additions (read time, updated) ------------------- */

.post-meta__read-time { white-space: nowrap; }
.post-meta__updated { white-space: nowrap; }

/* ----- Article: FAQ block within article body ------------------------------ */

.article-faqs { margin-block: var(--space-2xl); }
.article-faqs__heading { font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); margin-bottom: var(--space-lg); }

/* ----- Article: CTA microcopy --------------------------------------------- */

.cta-band__micro { color: var(--fg-muted); font-size: 0.82rem; margin-top: var(--space-sm); margin-bottom: 0; }

/* ----- Article: author bio ------------------------------------------------- */

.author-bio { padding-block: var(--space-xl); }
.author-bio__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-md); align-items: start; max-width: 72ch; }
.author-bio__media { flex-shrink: 0; }
.author-bio__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--rule); }
.author-bio__name { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.04em; margin: 0 0 var(--space-3xs); }
.author-bio__name a { text-decoration: none; color: var(--fg); }
.author-bio__name a:hover { color: var(--accent); }
.author-bio__role { margin: 0 0 var(--space-xs); color: var(--fg-muted); }
.author-bio__text { margin: 0 0 var(--space-xs); font-size: 0.93rem; max-width: 60ch; }
.author-bio__links { margin: 0 0 var(--space-2xs); }
.author-bio__links a { color: var(--accent); text-decoration: none; }
.author-bio__links a:hover { text-decoration: underline; }
.author-bio__reviewed { margin: 0; color: var(--fg-muted); }

@media (min-width: 640px) {
	.author-bio__inner { grid-template-columns: auto 1fr; gap: var(--space-lg); }
	.author-bio__avatar { width: 80px; height: 80px; }
}

/* ----- Legal page template ------------------------------------------------ */


.legal__layout { display: grid; gap: var(--space-xl); }
.legal-toc__label { display: block; margin-bottom: var(--space-sm); color: var(--fg-muted); }
.legal-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.legal-toc__item a { text-decoration: none; color: var(--fg-muted); font-size: 0.95rem; border-left: 2px solid transparent; padding-left: 0.6rem; display: block; }
.legal-toc__item a:hover { color: var(--fg); border-left-color: var(--accent); }
.legal-toc__item--h3 a { padding-left: 1.4rem; font-size: 0.9rem; }
.legal__content { max-width: 72ch; }
.legal__content h2 { scroll-margin-top: 110px; margin-top: var(--space-xl); }
.legal__content h3 { scroll-margin-top: 110px; margin-top: var(--space-lg); }

@media (min-width: 980px) {
	.legal__layout { grid-template-columns: 260px 1fr; gap: var(--space-2xl); align-items: start; }
	.legal-toc { position: sticky; top: 110px; align-self: start; }
}

/* ----- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
	.reveal, .reveal-heading, [data-stagger] > * { opacity: 1 !important; transform: none !important; }
	.mobile-nav { transition: none; }
}

/* ----- Print -------------------------------------------------------------- */

@media print {
	/* Strip site chrome and interactive elements so printed insights, case
	   studies and legal pages come out clean and readable on white paper. */
	.site-header,
	.site-footer,
	.mobile-nav,
	.nav-toggle,
	.skip-link,
	.footer-cta,
	.cta-band,
	.btn,
	.btn-row,
	.arlieo-form,
	.faq__icon,
	.breadcrumbs { display: none !important; }

	html, body { background: #fff !important; color: #000 !important; }

	/* Flatten every surface to plain black on white for ink economy. */
	.surface--ink,
	.surface--charcoal,
	.surface--deep-forest,
	.surface--cream,
	.surface--stone {
		background: #fff !important;
		color: #000 !important;
		--fg: #000;
		--fg-muted: #333;
		--accent: #000;
		--rule: #999;
	}

	.section { padding-block: 1rem !important; }
	.wrap, .wrap--wide { width: 100% !important; max-width: none !important; }

	/* Reveal animations should never hold content hidden in print. */
	.reveal, .reveal-heading, [data-stagger] > * { opacity: 1 !important; transform: none !important; }

	/* Open all FAQ panels so answers are not lost when printing. */
	.faq__panel[hidden] { display: block !important; }

	a { color: #000 !important; text-decoration: underline; }

	/* Expose link targets after the link text so a printout is self-contained. */
	.article-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }

	h1, h2, h3 { page-break-after: avoid; }
	img { page-break-inside: avoid; max-width: 100% !important; }
}